/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * SCSS variables defining a range of font sizes.
 *
 * These are defined in `rem` so that they scale with the `font-size` of the root element (which is adjustable via the
 * "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS
 * easier.
 *
 */

/* Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree */

/* This value is overridden by external themes in `element-web`. */

/*
 * Nunito.
 * Includes extended Latin and Vietnamese character sets
 * Current URLs are taken from
 * https://github.com/alexeiva/NunitoFont/releases/tag/v3.500
 * ...in order to include cyrillic.
 *
 * Previously, they were
 * https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i&subset=latin-ext,vietnamese
 *
 * We explicitly do not include Nunito's italic variants, as they are not italic enough
 * and it's better to rely on the browser's built-in obliquing behaviour.
 */

/* Grab the other fonts from the current theme, so we can override to Inter */

/* in custom fonts if needed. */

/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
 */

/* Twemoji COLR */

@font-face {
    font-family: "Twemoji";
    font-weight: 400;
    src: url(../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.7a04ea5.woff2) format("woff2");
}

/* For at least Chrome on Windows 10, we have to explictly add extra weights for the emoji to appear in bold messages, etc. */

@font-face {
    font-family: "Twemoji";
    font-weight: 600;
    src: url(../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.7a04ea5.woff2) format("woff2");
}

@font-face {
    font-family: "Twemoji";
    font-weight: 700;
    src: url(../../fonts/Twemoji_Mozilla/TwemojiMozilla-colr.7a04ea5.woff2) format("woff2");
}

/* Nunito as the default, for old time's sake on legacy themes. */

/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
 */

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400;
    src: url(../../fonts/Nunito/Nunito-Regular.d3e2991.ttf) format("truetype");
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 600;
    src: url(../../fonts/Nunito/Nunito-SemiBold.58f5995.ttf) format("truetype");
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 700;
    src: url(../../fonts/Nunito/Nunito-Bold.b3a1698.ttf) format("truetype");
}

:root {
    /* This is set to Twemoji when the user opts into the bundled emoji font */
    --emoji-font-family: "";
}

/* Nunito lacks combining diacritics, so these will fall through
   to the next font.  Helevetica's diacritics sometimes do not combine
   nicely (on OSX, at least) and result in a huge horizontal mess.
   Arial empirically gets it right, hence prioritising Arial here. */

/* Noto Color Emoji contains digits, in fixed-width, therefore causing
   digits in flowed text to stand out.
   TODO: Consider putting all emoji fonts to the end rather than the front. */

/* unified palette */

/* try to use these colors when possible */

/* typical text (dark-on-white in light skin) */

/* Commonly used in headings and relevant alt text */

/* used for dialog box text */

/* used for focusing form controls */

/* button UI (white-on-green in light skin) */

/* informational plinth */

/* left-panel style muted accent color */

/* used by RoomDropTarget */

/* used by Autocomplete */

/* selected for hoverover & selected event tiles */

/* used for the hairline dividers in RoomView */

/* used for the border of input text fields */

/* apart from login forms, which have stronger border */

/* used for UserSettings EditableText */

/* scrollbars */

/* context menus */

/* ******************** */

/* Legacy theme backports */

/* Legacy theme backports */

/* ******************** */

/* XXX: Color from dark theme */

/* All of these are from dark theme */

/**
 * Creating a `semantic` color scale. This will not be needed with the new
 * visual language, but necessary during the transition period
 * This abstract the `green` away from where accent shades are used
 * Take: `background: rgba($accent, 0.1);`
 * would be transformed to: `background: $accent-300;`
 *
 * To use under very rare circumstances, always prefer the semantics defined
 * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
 */

/* ******************** */

/* ******************** */

/* $event-highlight-bg-color shares this value, */

/* so to not make their order dependent on who depends on who, have a shared value */

/* defined before both */

/* event timestamp */

/* e2e */

/*** ImageView ***/

/* Tabbed views */

/* Buttons */

/* TODO: Verify color */

/* Toggle switch */

/* See non-legacy _light for variable information */

/* Bubble tiles */

/* pinned events indicator */

/* Location sharing */

/* ******************** */

/* ******************** */

body {
    color-scheme: light;
}

/* diff highlight colors */

.hljs-addition {
    background: #dfd;
}

.hljs-deletion {
    background: #fdd;
}

/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */

/* unified palette */

/* try to use these colors when possible */

/* typical text (dark-on-white in light skin) */

/* used for dialog box text */

/* used for focusing form controls */

/* informational plinth */

/* used by Autocomplete */

/* selected for hoverover & selected event tiles */

/* used for the hairline dividers in RoomView */

/* used for the border of input text fields */

/* scrollbars */

/* context menus */

/* Legacy theme backports */

/**
 * Creating a `semantic` color scale. This will not be needed with the new
 * visual language, but necessary during the transition period
 * This abstract the `green` away from where accent shades are used
 * Take: `background: rgba($accent, 0.1);`
 * would be transformed to: `background: $accent-300;`
 *
 * To use under very rare circumstances, always prefer the semantics defined
 * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
 */

/* Legacy theme backports */

/* ******************** */

/* ******************** */

/* event timestamp */

/* Tabbed views */

/* Buttons */

/* TODO: Verify color */

/* Toggle switch */

/* See non-legacy dark for variable information */

/* Bubble tiles */

/* Location sharing */

/* ******************** */

/* ******************** */

body {
    color-scheme: dark;
}

/* Nasty hacks to apply a filter to arbitrary monochrome artwork to make it */

/* better match the theme.  Typically applied to dark grey 'off' buttons or */

/* light grey 'on' buttons. */

.mx_filterFlipColor {
    -webkit-filter: invert(1);
            filter: invert(1);
}

/* markdown overrides: */

.mx_EventTile_content .markdown-body table tr {
            background-color: #000000;
        }

.mx_EventTile_content .markdown-body table tr:nth-child(2n) {
            background-color: #080808;
        }

/* highlight.js overrides: */

.hljs-tag {
    color: inherit; /* Without this they'd be weirdly blue which doesn't match the theme */
}

/* autogenerated by rethemendex.sh */

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/**
 * React Transition Group animations are prefixed with 'mx_rtg--' so that we
 * know they should not be used anywhere outside of React Transition Groups.
*/

.mx_rtg--fade-enter {
    opacity: 0;
}

.mx_rtg--fade-enter-active {
    opacity: 1;
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

.mx_rtg--fade-exit {
    opacity: 1;
}

.mx_rtg--fade-exit-active {
    opacity: 0;
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

:root {
    --hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
}

@-webkit-keyframes mx--anim-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@keyframes mx--anim-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes mx_Dialog_lightbox_background_keyframes {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.85;
    }
}

@keyframes mx_Dialog_lightbox_background_keyframes {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.85;
    }
}

@-webkit-keyframes mx_ImageView_panel_keyframes {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mx_ImageView_panel_keyframes {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion) {
    @-webkit-keyframes mx--anim-pulse {
        /* Override all keyframes in reduced-motion */
    }
    @keyframes mx--anim-pulse {
        /* Override all keyframes in reduced-motion */
    }

    @-webkit-keyframes mx_Dialog_lightbox_background_keyframes {
        /* Override all keyframes in reduced-motion */
    }

    @keyframes mx_Dialog_lightbox_background_keyframes {
        /* Override all keyframes in reduced-motion */
    }

    @-webkit-keyframes mx_ImageView_panel_keyframes {
        /* Override all keyframes in reduced-motion */
    }

    @keyframes mx_ImageView_panel_keyframes {
        /* Override all keyframes in reduced-motion */
    }

    .mx_rtg--fade-enter-active {
        -webkit-transition: none;
        transition: none;
    }
    .mx_rtg--fade-exit-active {
        -webkit-transition: none;
        transition: none;
    }
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2023 The Matrix.org Foundation C.I.C
Copyright 2017-2019 New Vector Ltd
Copyright 2017 Vector Creations Ltd
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

@layer compound {
/* Establish a layer order that allows semantic tokens to be customized, but not base tokens.
 * The layers are prefixed by 'cpd-' because Tailwind will interpret '@layer base' directives.
 */
@layer cpd-semantic, custom, cpd-base;
}

@layer compound {
/* Fallback for Inter regular */
@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue'), local('HelveticaNeue');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 91.2883%;
  descent-override: 22.7301%;
  line-gap-override: 0%;
  size-adjust: 106.1198%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI'), local('SegoeUI');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 89.9412%;
  descent-override: 22.3946%;
  size-adjust: 107.7093%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Regular'), local('Roboto-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.2384%;
  descent-override: 22.4686%;
  size-adjust: 107.3546%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Regular'), local('Ubuntu-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 92.3027%;
  descent-override: 22.9826%;
  line-gap-override: 0%;
  size-adjust: 104.9536%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Regular'), local('FiraSans-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 92.9112%;
  descent-override: 23.1342%;
  size-adjust: 104.2662%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Regular'), local('NotoSans-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 96.1571%;
  descent-override: 23.9423%;
  size-adjust: 100.7466%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial'), local('ArialMT');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
  size-adjust: 107.1194%;
}

@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Italic'), local('HelveticaNeue-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.3285%;
  descent-override: 22.4911%;
  line-gap-override: 0%;
  size-adjust: 107.2475%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Italic'), local('SegoeUI-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 87.4238%;
  descent-override: 21.7678%;
  size-adjust: 110.8108%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Italic'), local('Roboto-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 87.2269%;
  descent-override: 21.7188%;
  size-adjust: 111.0609%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Italic'), local('Ubuntu-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 88.7154%;
  descent-override: 22.0894%;
  line-gap-override: 0%;
  size-adjust: 109.1974%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Italic'), local('FiraSans-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 91.3366%;
  descent-override: 22.7421%;
  size-adjust: 106.0637%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Italic'), local('NotoSans-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.1268%;
  descent-override: 22.4409%;
  size-adjust: 107.4874%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial Italic'), local('Arial-ItalicMT');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 89.885%;
  descent-override: 22.3806%;
  line-gap-override: 0%;
  size-adjust: 107.7766%;
}


/* Fallback for Inter medium */
@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 93.3765%;
  descent-override: 23.25%;
  line-gap-override: 0%;
  size-adjust: 103.7466%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 91.8744%;
  descent-override: 22.876%;
  size-adjust: 105.4429%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Medium'), local('Roboto-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.1094%;
  descent-override: 22.4365%;
  size-adjust: 107.5082%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Medium'), local('Ubuntu-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 93.5773%;
  descent-override: 23.3%;
  line-gap-override: 0%;
  size-adjust: 103.524%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Medium'), local('FiraSans-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 92.1717%;
  descent-override: 22.95%;
  size-adjust: 105.1028%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Medium'), local('NotoSans-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 96.7903%;
  descent-override: 24.1%;
  size-adjust: 100.0875%;
}

@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Medium Italic'), local('HelveticaNeue-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 92.8129%;
  descent-override: 23.1097%;
  line-gap-override: 0%;
  size-adjust: 104.3767%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Semibold Italic'), local('SegoeUI-SemiboldItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.3452%;
  descent-override: 22.4952%;
  line-gap-override: 0%;
  size-adjust: 107.2276%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 87.0316%;
  descent-override: 21.6702%;
  size-adjust: 111.3102%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.6173%;
  descent-override: 22.563%;
  line-gap-override: 0%;
  size-adjust: 106.9056%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Medium Italic'), local('FiraSans-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.2181%;
  descent-override: 22.4636%;
  size-adjust: 107.3787%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 91.0165%;
  descent-override: 22.6624%;
  size-adjust: 106.4367%;
}


/* Fallback for Inter semibold */
@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 95.4228%;
  descent-override: 23.7595%;
  line-gap-override: 0%;
  size-adjust: 101.5218%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Bold'), local('SegoeUI-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 94.4483%;
  descent-override: 23.5169%;
  size-adjust: 102.5694%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Bold'), local('Roboto-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 89.886%;
  descent-override: 22.3809%;
  size-adjust: 107.7754%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Bold'), local('Ubuntu-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 95.4228%;
  descent-override: 23.7595%;
  line-gap-override: 0%;
  size-adjust: 101.5218%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 91.2481%;
  descent-override: 22.72%;
  size-adjust: 106.1666%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 97.8084%;
  descent-override: 24.3535%;
  size-adjust: 99.0457%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 95.419%;
  descent-override: 23.7586%;
  line-gap-override: 0%;
  size-adjust: 101.5259%;
}

@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Bold Italic'), local('HelveticaNeue-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 94.9556%;
  descent-override: 23.6432%;
  line-gap-override: 0%;
  size-adjust: 102.0213%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Bold Italic'), local('SegoeUI-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 93.4049%;
  descent-override: 23.2571%;
  size-adjust: 103.7152%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 86.7537%;
  descent-override: 21.601%;
  size-adjust: 111.6667%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 92.3893%;
  descent-override: 23.0042%;
  line-gap-override: 0%;
  size-adjust: 104.8553%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans SemiBold Italic'), local('FiraSans-SemiBoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 89.2306%;
  descent-override: 22.2177%;
  size-adjust: 108.567%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 91.9944%;
  descent-override: 22.9059%;
  size-adjust: 105.3053%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial Bold Italic'), local('Arial-BoldItalicMT');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 94.7544%;
  descent-override: 23.5931%;
  line-gap-override: 0%;
  size-adjust: 102.238%;
}
}

@layer compound {

    @media screen {

        @layer cpd-base {
:root, [class*="cpd-theme-"] {
  --cpd-space-scale: 4px;
  --cpd-space-0x: 0;
  --cpd-space-6x: 24px;
  --cpd-space-10x: 40px;
  --cpd-space-11x: 44px;
  --cpd-space-12x: 48px;
  --cpd-space-16x: 64px;
  --cpd-space-36x: 144px;
  --cpd-space-56x: 224px;
  --cpd-border-width-1: 1px;
  --cpd-border-width-2: 2px;
  --cpd-border-width-4: 4px;
  --cpd-border-width-0-5: 0.5px;
  --cpd-font-family-sans: Inter, "Inter Fallback: Helvetica Neue", "Inter Fallback: Segoe UI", "Inter Fallback: Roboto", "Inter Fallback: Ubuntu", "Inter Fallback: Fira Sans", "Inter Fallback: Noto Sans", "Inter Fallback: Arial", "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, "Fira Sans", "Noto Sans", Arial, sans-serif;
  --cpd-font-family-mono: Inconsolata, ui-monospace, monospace;
  --cpd-font-weight-regular: 400;
  --cpd-font-weight-medium: 500;
  --cpd-font-weight-semibold: 600;
  --cpd-font-line-height-minimum: 1;
  --cpd-font-line-height-tight: 1.25;
  --cpd-font-line-height-regular: 1.5;
  --cpd-font-size-body-xs: 0.6875rem;
  --cpd-font-size-body-sm: 0.8125rem;
  --cpd-font-size-body-md: 0.9375rem;
  --cpd-font-size-body-lg: 1.0625rem;
  --cpd-font-size-heading-sm: 1.25rem;
  --cpd-font-size-heading-md: 1.5rem;
  --cpd-font-size-heading-lg: 1.75rem;
  --cpd-font-size-heading-xl: 2rem;
  --cpd-font-size-root: 1rem;
  --cpd-font-letter-spacing-body-xs: 0.0048em;
  --cpd-font-letter-spacing-body-sm: -0.0031em;
  --cpd-font-letter-spacing-body-md: -0.0088em;
  --cpd-font-letter-spacing-body-lg: -0.0128em;
  --cpd-font-letter-spacing-heading-sm: -0.0166em;
  --cpd-font-letter-spacing-heading-md: -0.0195em;
  --cpd-font-letter-spacing-heading-lg: -0.0209em;
  --cpd-font-letter-spacing-heading-xl: -0.0216em;
  --cpd-space-0-5x: 2px;
  --cpd-space-1x: var(--cpd-space-scale);
  --cpd-space-1-5x: 6px;
  --cpd-space-2x: 8px;
  --cpd-space-3x: 12px;
  --cpd-space-4x: 16px;
  --cpd-space-5x: 20px;
  --cpd-space-7x: 28px;
  --cpd-space-8x: 32px;
  --cpd-space-9x: 36px;
  --cpd-space-13x: 52px;
  --cpd-space-14x: 56px;
  --cpd-space-15x: 60px;
  --cpd-space-20x: 80px;
  --cpd-space-24x: 96px;
  --cpd-space-28x: 112px;
  --cpd-space-32x: 128px;
  --cpd-space-40x: 160px;
  --cpd-space-48x: 192px;
  --cpd-space-64x: 256px;
  --cpd-font-body-xs-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-xs-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-xs-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-sm-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-sm)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-sm-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-sm)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-sm-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-sm)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-md-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-md-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-md-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-lg-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-lg)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-lg-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-lg)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-lg-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-lg)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-heading-sm-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-sm)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-sm-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-heading-sm)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-sm-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-sm)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-md-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-md)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-md-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-md)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-lg-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-lg)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-lg-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-lg)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-xl-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-xl-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-semantic {
:root, [class*="cpd-theme-"] {
  --cpd-color-text-primary: var(--cpd-color-gray-1400);
  --cpd-color-text-secondary: var(--cpd-color-gray-900);
  --cpd-color-text-disabled: var(--cpd-color-gray-800);
  --cpd-color-text-action-primary: var(--cpd-color-gray-1400);
  --cpd-color-text-action-accent: var(--cpd-color-green-900);
  --cpd-color-text-link-external: var(--cpd-color-blue-900);
  --cpd-color-text-critical-primary: var(--cpd-color-red-900);
  --cpd-color-text-success-primary: var(--cpd-color-green-900);
  --cpd-color-text-info-primary: var(--cpd-color-blue-900);
  --cpd-color-text-on-solid-primary: var(--cpd-color-theme-bg);
  --cpd-color-text-decorative-1: var(--cpd-color-lime-1100);
  --cpd-color-text-decorative-2: var(--cpd-color-cyan-1100);
  --cpd-color-text-decorative-3: var(--cpd-color-fuchsia-1100);
  --cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
  --cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
  --cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
  --cpd-color-text-badge-accent: var(--cpd-color-green-1100);
  --cpd-color-text-badge-info: var(--cpd-color-blue-1100);
  --cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
  --cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
  --cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
  --cpd-color-bg-canvas-disabled: var(--cpd-color-gray-200);
  --cpd-color-bg-action-primary-rest: var(--cpd-color-gray-1400);
  --cpd-color-bg-action-primary-hovered: var(--cpd-color-gray-1200);
  --cpd-color-bg-action-primary-pressed: var(--cpd-color-gray-1100);
  --cpd-color-bg-action-primary-disabled: var(--cpd-color-gray-700);
  --cpd-color-bg-action-secondary-rest: var(--cpd-color-theme-bg);
  --cpd-color-bg-action-secondary-hovered: var(--cpd-color-alpha-gray-200);
  --cpd-color-bg-action-secondary-pressed: var(--cpd-color-alpha-gray-300);
  --cpd-color-bg-critical-primary: var(--cpd-color-red-900);
  --cpd-color-bg-critical-hovered: var(--cpd-color-red-1000);
  --cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
  --cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);
  --cpd-color-bg-success-subtle: var(--cpd-color-green-200);
  --cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
  --cpd-color-bg-decorative-1: var(--cpd-color-lime-300);
  --cpd-color-bg-decorative-2: var(--cpd-color-cyan-300);
  --cpd-color-bg-decorative-3: var(--cpd-color-fuchsia-300);
  --cpd-color-bg-decorative-4: var(--cpd-color-purple-300);
  --cpd-color-bg-decorative-5: var(--cpd-color-pink-300);
  --cpd-color-bg-decorative-6: var(--cpd-color-orange-300);
  --cpd-color-bg-accent-rest: var(--cpd-color-green-900);
  --cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
  --cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
  --cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-300);
  --cpd-color-border-disabled: var(--cpd-color-gray-500);
  --cpd-color-border-focused: var(--cpd-color-blue-900);
  --cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
  --cpd-color-border-interactive-secondary: var(--cpd-color-gray-600);
  --cpd-color-border-interactive-hovered: var(--cpd-color-gray-1100);
  --cpd-color-border-critical-primary: var(--cpd-color-red-900);
  --cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
  --cpd-color-border-critical-subtle: var(--cpd-color-red-500);
  --cpd-color-border-success-subtle: var(--cpd-color-green-500);
  --cpd-color-border-info-subtle: var(--cpd-color-blue-700);
  --cpd-color-border-accent-subtle: var(--cpd-color-green-700);
  --cpd-color-icon-primary: var(--cpd-color-gray-1400);
  --cpd-color-icon-secondary: var(--cpd-color-gray-900);
  --cpd-color-icon-tertiary: var(--cpd-color-gray-800);
  --cpd-color-icon-quaternary: var(--cpd-color-gray-700);
  --cpd-color-icon-disabled: var(--cpd-color-gray-700);
  --cpd-color-icon-primary-alpha: var(--cpd-color-alpha-gray-1400);
  --cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-900);
  --cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-800);
  --cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-700);
  --cpd-color-icon-accent-tertiary: var(--cpd-color-green-800);
  --cpd-color-icon-accent-primary: var(--cpd-color-green-900);
  --cpd-color-icon-critical-primary: var(--cpd-color-red-900);
  --cpd-color-icon-success-primary: var(--cpd-color-green-900);
  --cpd-color-icon-info-primary: var(--cpd-color-blue-900);
  --cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
  --cpd-color-gradient-subtle-stop1: var(--cpd-color-alpha-green-500);
  --cpd-color-gradient-subtle-stop2: var(--cpd-color-alpha-green-400);
  --cpd-color-gradient-subtle-stop3: var(--cpd-color-alpha-green-300);
  --cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-green-200);
  --cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-green-100);
  --cpd-color-gradient-subtle-stop6: var(--cpd-color-transparent);
  --cpd-color-gradient-info-stop1: var(--cpd-color-alpha-blue-500);
  --cpd-color-gradient-info-stop2: var(--cpd-color-alpha-blue-400);
  --cpd-color-gradient-info-stop3: var(--cpd-color-alpha-blue-300);
  --cpd-color-gradient-info-stop4: var(--cpd-color-alpha-blue-200);
  --cpd-color-gradient-info-stop5: var(--cpd-color-alpha-blue-100);
  --cpd-color-gradient-info-stop6: var(--cpd-color-transparent);
  --cpd-color-gradient-subtle-linear: linear-gradient(180deg, var(--cpd-color-gradient-subtle-stop1) 0%, var(--cpd-color-gradient-subtle-stop2) 20%, var(--cpd-color-gradient-subtle-stop3) 40%, var(--cpd-color-gradient-subtle-stop4) 60%, var(--cpd-color-gradient-subtle-stop5) 80%, var(--cpd-color-gradient-subtle-stop6) 100%);
  --cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 20%, var(--cpd-color-gradient-info-stop3) 40%, var(--cpd-color-gradient-info-stop4) 60%, var(--cpd-color-gradient-info-stop5) 80%, var(--cpd-color-gradient-info-stop6) 100%);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-base {
.cpd-theme-light.cpd-theme-light {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #fbfcfd;
  --cpd-color-gray-200: #f7f9fa;
  --cpd-color-gray-300: #f0f2f5;
  --cpd-color-gray-400: #e1e6ec;
  --cpd-color-gray-500: #cdd3da;
  --cpd-color-gray-600: #bdc4cc;
  --cpd-color-gray-700: #a6adb7;
  --cpd-color-gray-800: #818a95;
  --cpd-color-gray-900: #656d77;
  --cpd-color-gray-1000: #595e67;
  --cpd-color-gray-1100: #4c5158;
  --cpd-color-gray-1200: #3c4045;
  --cpd-color-gray-1300: #2b2d32;
  --cpd-color-gray-1400: #1b1d22;
  --cpd-color-red-100: #fffaf9;
  --cpd-color-red-200: #fff7f6;
  --cpd-color-red-300: #ffefec;
  --cpd-color-red-400: #ffdfda;
  --cpd-color-red-500: #ffc5bc;
  --cpd-color-red-600: #ffafa5;
  --cpd-color-red-700: #ff8c81;
  --cpd-color-red-800: #ff3d3d;
  --cpd-color-red-900: #d51928;
  --cpd-color-red-1000: #bc0f22;
  --cpd-color-red-1100: #a4041d;
  --cpd-color-red-1200: #850006;
  --cpd-color-red-1300: #620000;
  --cpd-color-red-1400: #450000;
  --cpd-color-orange-100: #fffaf7;
  --cpd-color-orange-200: #fff6ef;
  --cpd-color-orange-300: #ffefe4;
  --cpd-color-orange-400: #ffdfc8;
  --cpd-color-orange-500: #ffc8a1;
  --cpd-color-orange-600: #fdb37c;
  --cpd-color-orange-700: #f89440;
  --cpd-color-orange-800: #dc6700;
  --cpd-color-orange-900: #bc4500;
  --cpd-color-orange-1000: #ac3300;
  --cpd-color-orange-1100: #9b2200;
  --cpd-color-orange-1200: #850000;
  --cpd-color-orange-1300: #620000;
  --cpd-color-orange-1400: #450000;
  --cpd-color-yellow-100: #fffcf0;
  --cpd-color-yellow-200: #fff8e0;
  --cpd-color-yellow-300: #fff2c1;
  --cpd-color-yellow-400: #ffe484;
  --cpd-color-yellow-500: #fbce00;
  --cpd-color-yellow-600: #f1bd00;
  --cpd-color-yellow-700: #dea200;
  --cpd-color-yellow-800: #be7a00;
  --cpd-color-yellow-900: #9f5b00;
  --cpd-color-yellow-1000: #8f4d00;
  --cpd-color-yellow-1100: #803f00;
  --cpd-color-yellow-1200: #692e00;
  --cpd-color-yellow-1300: #541a00;
  --cpd-color-yellow-1400: #410600;
  --cpd-color-lime-100: #f8fdf6;
  --cpd-color-lime-200: #f1fcee;
  --cpd-color-lime-300: #e0f8d9;
  --cpd-color-lime-400: #c8f1ba;
  --cpd-color-lime-500: #99e57e;
  --cpd-color-lime-600: #76db4c;
  --cpd-color-lime-700: #54c424;
  --cpd-color-lime-800: #359d18;
  --cpd-color-lime-900: #197d0c;
  --cpd-color-lime-1000: #006e00;
  --cpd-color-lime-1100: #005f00;
  --cpd-color-lime-1200: #004b00;
  --cpd-color-lime-1300: #003600;
  --cpd-color-lime-1400: #002400;
  --cpd-color-green-100: #f8fdfb;
  --cpd-color-green-200: #f1fbf6;
  --cpd-color-green-300: #e3f7ed;
  --cpd-color-green-400: #c6eedb;
  --cpd-color-green-500: #98e1c1;
  --cpd-color-green-600: #71d7ae;
  --cpd-color-green-700: #0bc491;
  --cpd-color-green-800: #009b78;
  --cpd-color-green-900: #007a61;
  --cpd-color-green-1000: #006b52;
  --cpd-color-green-1100: #005c45;
  --cpd-color-green-1200: #004933;
  --cpd-color-green-1300: #003420;
  --cpd-color-green-1400: #002311;
  --cpd-color-cyan-100: #f8fdfd;
  --cpd-color-cyan-200: #f1fafb;
  --cpd-color-cyan-300: #e3f5f8;
  --cpd-color-cyan-400: #c7ecf0;
  --cpd-color-cyan-500: #9bdde5;
  --cpd-color-cyan-600: #76d1dd;
  --cpd-color-cyan-700: #15becf;
  --cpd-color-cyan-800: #0094c0;
  --cpd-color-cyan-900: #0072ac;
  --cpd-color-cyan-1000: #00629c;
  --cpd-color-cyan-1100: #00548c;
  --cpd-color-cyan-1200: #004077;
  --cpd-color-cyan-1300: #002b61;
  --cpd-color-cyan-1400: #00194f;
  --cpd-color-blue-100: #f9fcff;
  --cpd-color-blue-200: #f4f8ff;
  --cpd-color-blue-300: #e9f2ff;
  --cpd-color-blue-400: #d8e7fe;
  --cpd-color-blue-500: #bad5fc;
  --cpd-color-blue-600: #a3c6fa;
  --cpd-color-blue-700: #7eaff6;
  --cpd-color-blue-800: #4088ee;
  --cpd-color-blue-900: #0467dd;
  --cpd-color-blue-1000: #0558c7;
  --cpd-color-blue-1100: #064ab1;
  --cpd-color-blue-1200: #043894;
  --cpd-color-blue-1300: #012478;
  --cpd-color-blue-1400: #000e65;
  --cpd-color-purple-100: #fbfbff;
  --cpd-color-purple-200: #f8f7ff;
  --cpd-color-purple-300: #f1efff;
  --cpd-color-purple-400: #e6e2ff;
  --cpd-color-purple-500: #d4cdff;
  --cpd-color-purple-600: #c5bbff;
  --cpd-color-purple-700: #b1a0ff;
  --cpd-color-purple-800: #9271fd;
  --cpd-color-purple-900: #7a47f1;
  --cpd-color-purple-1000: #6b37de;
  --cpd-color-purple-1100: #5d26cd;
  --cpd-color-purple-1200: #4c05b5;
  --cpd-color-purple-1300: #33008d;
  --cpd-color-purple-1400: #200066;
  --cpd-color-fuchsia-100: #fefafe;
  --cpd-color-fuchsia-200: #fcf5fd;
  --cpd-color-fuchsia-300: #faeefb;
  --cpd-color-fuchsia-400: #f6dff7;
  --cpd-color-fuchsia-500: #edc6f0;
  --cpd-color-fuchsia-600: #e7b2ea;
  --cpd-color-fuchsia-700: #db93e1;
  --cpd-color-fuchsia-800: #c85ed1;
  --cpd-color-fuchsia-900: #ad33bd;
  --cpd-color-fuchsia-1000: #972aaa;
  --cpd-color-fuchsia-1100: #822198;
  --cpd-color-fuchsia-1200: #671481;
  --cpd-color-fuchsia-1300: #4e0068;
  --cpd-color-fuchsia-1400: #34004c;
  --cpd-color-pink-100: #fffafb;
  --cpd-color-pink-200: #fff5f7;
  --cpd-color-pink-300: #ffecf0;
  --cpd-color-pink-400: #ffdee5;
  --cpd-color-pink-500: #ffc2cf;
  --cpd-color-pink-600: #ffadc0;
  --cpd-color-pink-700: #ff88a6;
  --cpd-color-pink-800: #f7407d;
  --cpd-color-pink-900: #d20c65;
  --cpd-color-pink-1000: #b80a5b;
  --cpd-color-pink-1100: #9f0850;
  --cpd-color-pink-1200: #7e0642;
  --cpd-color-pink-1300: #5f002b;
  --cpd-color-pink-1400: #430017;
  --cpd-color-alpha-gray-100: hsla(210, 48%, 41%, 0.02);
  --cpd-color-alpha-gray-200: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-300: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-400: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
  --cpd-color-alpha-gray-600: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-700: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-800: hsla(213, 87%, 9%, 0.5);
  --cpd-color-alpha-gray-900: hsla(213, 83%, 7%, 0.61);
  --cpd-color-alpha-gray-1000: hsla(218, 79%, 6%, 0.66);
  --cpd-color-alpha-gray-1100: hsla(215, 74%, 5%, 0.71);
  --cpd-color-alpha-gray-1200: hsla(213, 73%, 3%, 0.77);
  --cpd-color-alpha-gray-1300: hsla(225, 57%, 3%, 0.84);
  --cpd-color-alpha-gray-1400: hsla(223, 64%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(10, 100%, 61%, 0.03);
  --cpd-color-alpha-red-200: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-300: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-400: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-500: hsla(8, 100%, 51%, 0.27);
  --cpd-color-alpha-red-600: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-700: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-800: hsla(0, 100%, 51%, 0.77);
  --cpd-color-alpha-red-900: hsla(355, 98%, 41%, 0.91);
  --cpd-color-alpha-red-1000: hsla(353, 98%, 37%, 0.95);
  --cpd-color-alpha-red-1100: hsla(350, 99%, 32%, 0.99);
  --cpd-color-alpha-red-1200: hsl(357, 100%, 26%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-100: hsla(22, 100%, 61%, 0.04);
  --cpd-color-alpha-orange-200: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-300: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-500: hsla(25, 100%, 50%, 0.37);
  --cpd-color-alpha-orange-600: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-700: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-800: hsl(28, 100%, 43%, 1);
  --cpd-color-alpha-orange-900: hsl(22, 100%, 37%, 1);
  --cpd-color-alpha-orange-1000: hsl(18, 100%, 34%, 1);
  --cpd-color-alpha-orange-1100: hsl(13, 100%, 30%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 26%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-yellow-100: hsla(48, 100%, 51%, 0.06);
  --cpd-color-alpha-yellow-200: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-400: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-500: hsl(49, 100%, 49%, 1);
  --cpd-color-alpha-yellow-600: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-700: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-800: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-900: hsl(34, 100%, 31%, 1);
  --cpd-color-alpha-yellow-1000: hsl(32, 100%, 28%, 1);
  --cpd-color-alpha-yellow-1100: hsl(30, 100%, 25%, 1);
  --cpd-color-alpha-yellow-1200: hsl(26, 100%, 21%, 1);
  --cpd-color-alpha-yellow-1300: hsl(19, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1400: hsl(6, 100%, 13%, 1);
  --cpd-color-alpha-lime-100: hsla(103, 75%, 46%, 0.04);
  --cpd-color-alpha-lime-200: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-300: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-400: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-500: hsla(104, 98%, 40%, 0.51);
  --cpd-color-alpha-lime-600: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-700: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-800: hsla(107, 99%, 29%, 0.91);
  --cpd-color-alpha-lime-900: hsla(113, 97%, 24%, 0.96);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 22%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 19%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(156, 79%, 41%, 0.03);
  --cpd-color-alpha-green-200: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-300: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-400: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-500: hsla(154, 96%, 37%, 0.41);
  --cpd-color-alpha-green-600: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-700: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-800: hsl(166, 100%, 30%, 1);
  --cpd-color-alpha-green-900: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-1000: hsl(166, 100%, 21%, 1);
  --cpd-color-alpha-green-1100: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-1200: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-1300: hsl(157, 100%, 10%, 1);
  --cpd-color-alpha-green-1400: hsl(149, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(180, 79%, 41%, 0.03);
  --cpd-color-alpha-cyan-200: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-300: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-400: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-500: hsla(186, 95%, 38%, 0.4);
  --cpd-color-alpha-cyan-600: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-700: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-800: hsl(194, 100%, 38%, 1);
  --cpd-color-alpha-cyan-900: hsl(200, 100%, 34%, 1);
  --cpd-color-alpha-cyan-1000: hsl(202, 100%, 31%, 1);
  --cpd-color-alpha-cyan-1100: hsl(204, 100%, 28%, 1);
  --cpd-color-alpha-cyan-1200: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-1300: hsl(213, 100%, 19%, 1);
  --cpd-color-alpha-cyan-1400: hsl(221, 100%, 16%, 1);
  --cpd-color-alpha-blue-100: hsla(210, 100%, 61%, 0.03);
  --cpd-color-alpha-blue-200: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-300: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-400: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-500: hsla(215, 93%, 50%, 0.28);
  --cpd-color-alpha-blue-600: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-800: hsla(215, 100%, 46%, 0.75);
  --cpd-color-alpha-blue-900: hsla(213, 99%, 44%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(214, 98%, 39%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(216, 99%, 35%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(218, 99%, 29%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(222, 98%, 24%, 1);
  --cpd-color-alpha-blue-1400: hsl(232, 100%, 20%, 1);
  --cpd-color-alpha-purple-100: hsla(240, 100%, 61%, 0.02);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-500: hsla(248, 100%, 51%, 0.2);
  --cpd-color-alpha-purple-600: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-700: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-800: hsla(254, 99%, 49%, 0.56);
  --cpd-color-alpha-purple-900: hsla(258, 98%, 47%, 0.73);
  --cpd-color-alpha-purple-1000: hsla(259, 98%, 42%, 0.79);
  --cpd-color-alpha-purple-1100: hsla(260, 97%, 39%, 0.86);
  --cpd-color-alpha-purple-1200: hsla(264, 98%, 36%, 0.99);
  --cpd-color-alpha-purple-1300: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(300, 95%, 41%, 0.02);
  --cpd-color-alpha-fuchsia-200: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-300: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-400: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-500: hsla(296, 93%, 39%, 0.23);
  --cpd-color-alpha-fuchsia-600: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-700: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-800: hsla(295, 97%, 37%, 0.64);
  --cpd-color-alpha-fuchsia-900: hsla(293, 100%, 34%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(291, 99%, 30%, 0.84);
  --cpd-color-alpha-fuchsia-1100: hsla(289, 96%, 28%, 0.88);
  --cpd-color-alpha-fuchsia-1200: hsla(286, 97%, 24%, 0.93);
  --cpd-color-alpha-fuchsia-1300: hsl(285, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.02);
  --cpd-color-alpha-pink-200: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-500: hsla(347, 100%, 50%, 0.24);
  --cpd-color-alpha-pink-600: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-700: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-800: hsla(340, 100%, 48%, 0.75);
  --cpd-color-alpha-pink-900: hsla(333, 98%, 41%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(332, 98%, 36%, 0.97);
  --cpd-color-alpha-pink-1100: hsla(331, 100%, 31%, 0.97);
  --cpd-color-alpha-pink-1200: hsla(330, 98%, 24%, 0.98);
  --cpd-color-alpha-pink-1300: hsl(333, 100%, 19%, 1);
  --cpd-color-alpha-pink-1400: hsl(339, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: light) {

        @layer cpd-base {
:root {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #fbfcfd;
  --cpd-color-gray-200: #f7f9fa;
  --cpd-color-gray-300: #f0f2f5;
  --cpd-color-gray-400: #e1e6ec;
  --cpd-color-gray-500: #cdd3da;
  --cpd-color-gray-600: #bdc4cc;
  --cpd-color-gray-700: #a6adb7;
  --cpd-color-gray-800: #818a95;
  --cpd-color-gray-900: #656d77;
  --cpd-color-gray-1000: #595e67;
  --cpd-color-gray-1100: #4c5158;
  --cpd-color-gray-1200: #3c4045;
  --cpd-color-gray-1300: #2b2d32;
  --cpd-color-gray-1400: #1b1d22;
  --cpd-color-red-100: #fffaf9;
  --cpd-color-red-200: #fff7f6;
  --cpd-color-red-300: #ffefec;
  --cpd-color-red-400: #ffdfda;
  --cpd-color-red-500: #ffc5bc;
  --cpd-color-red-600: #ffafa5;
  --cpd-color-red-700: #ff8c81;
  --cpd-color-red-800: #ff3d3d;
  --cpd-color-red-900: #d51928;
  --cpd-color-red-1000: #bc0f22;
  --cpd-color-red-1100: #a4041d;
  --cpd-color-red-1200: #850006;
  --cpd-color-red-1300: #620000;
  --cpd-color-red-1400: #450000;
  --cpd-color-orange-100: #fffaf7;
  --cpd-color-orange-200: #fff6ef;
  --cpd-color-orange-300: #ffefe4;
  --cpd-color-orange-400: #ffdfc8;
  --cpd-color-orange-500: #ffc8a1;
  --cpd-color-orange-600: #fdb37c;
  --cpd-color-orange-700: #f89440;
  --cpd-color-orange-800: #dc6700;
  --cpd-color-orange-900: #bc4500;
  --cpd-color-orange-1000: #ac3300;
  --cpd-color-orange-1100: #9b2200;
  --cpd-color-orange-1200: #850000;
  --cpd-color-orange-1300: #620000;
  --cpd-color-orange-1400: #450000;
  --cpd-color-yellow-100: #fffcf0;
  --cpd-color-yellow-200: #fff8e0;
  --cpd-color-yellow-300: #fff2c1;
  --cpd-color-yellow-400: #ffe484;
  --cpd-color-yellow-500: #fbce00;
  --cpd-color-yellow-600: #f1bd00;
  --cpd-color-yellow-700: #dea200;
  --cpd-color-yellow-800: #be7a00;
  --cpd-color-yellow-900: #9f5b00;
  --cpd-color-yellow-1000: #8f4d00;
  --cpd-color-yellow-1100: #803f00;
  --cpd-color-yellow-1200: #692e00;
  --cpd-color-yellow-1300: #541a00;
  --cpd-color-yellow-1400: #410600;
  --cpd-color-lime-100: #f8fdf6;
  --cpd-color-lime-200: #f1fcee;
  --cpd-color-lime-300: #e0f8d9;
  --cpd-color-lime-400: #c8f1ba;
  --cpd-color-lime-500: #99e57e;
  --cpd-color-lime-600: #76db4c;
  --cpd-color-lime-700: #54c424;
  --cpd-color-lime-800: #359d18;
  --cpd-color-lime-900: #197d0c;
  --cpd-color-lime-1000: #006e00;
  --cpd-color-lime-1100: #005f00;
  --cpd-color-lime-1200: #004b00;
  --cpd-color-lime-1300: #003600;
  --cpd-color-lime-1400: #002400;
  --cpd-color-green-100: #f8fdfb;
  --cpd-color-green-200: #f1fbf6;
  --cpd-color-green-300: #e3f7ed;
  --cpd-color-green-400: #c6eedb;
  --cpd-color-green-500: #98e1c1;
  --cpd-color-green-600: #71d7ae;
  --cpd-color-green-700: #0bc491;
  --cpd-color-green-800: #009b78;
  --cpd-color-green-900: #007a61;
  --cpd-color-green-1000: #006b52;
  --cpd-color-green-1100: #005c45;
  --cpd-color-green-1200: #004933;
  --cpd-color-green-1300: #003420;
  --cpd-color-green-1400: #002311;
  --cpd-color-cyan-100: #f8fdfd;
  --cpd-color-cyan-200: #f1fafb;
  --cpd-color-cyan-300: #e3f5f8;
  --cpd-color-cyan-400: #c7ecf0;
  --cpd-color-cyan-500: #9bdde5;
  --cpd-color-cyan-600: #76d1dd;
  --cpd-color-cyan-700: #15becf;
  --cpd-color-cyan-800: #0094c0;
  --cpd-color-cyan-900: #0072ac;
  --cpd-color-cyan-1000: #00629c;
  --cpd-color-cyan-1100: #00548c;
  --cpd-color-cyan-1200: #004077;
  --cpd-color-cyan-1300: #002b61;
  --cpd-color-cyan-1400: #00194f;
  --cpd-color-blue-100: #f9fcff;
  --cpd-color-blue-200: #f4f8ff;
  --cpd-color-blue-300: #e9f2ff;
  --cpd-color-blue-400: #d8e7fe;
  --cpd-color-blue-500: #bad5fc;
  --cpd-color-blue-600: #a3c6fa;
  --cpd-color-blue-700: #7eaff6;
  --cpd-color-blue-800: #4088ee;
  --cpd-color-blue-900: #0467dd;
  --cpd-color-blue-1000: #0558c7;
  --cpd-color-blue-1100: #064ab1;
  --cpd-color-blue-1200: #043894;
  --cpd-color-blue-1300: #012478;
  --cpd-color-blue-1400: #000e65;
  --cpd-color-purple-100: #fbfbff;
  --cpd-color-purple-200: #f8f7ff;
  --cpd-color-purple-300: #f1efff;
  --cpd-color-purple-400: #e6e2ff;
  --cpd-color-purple-500: #d4cdff;
  --cpd-color-purple-600: #c5bbff;
  --cpd-color-purple-700: #b1a0ff;
  --cpd-color-purple-800: #9271fd;
  --cpd-color-purple-900: #7a47f1;
  --cpd-color-purple-1000: #6b37de;
  --cpd-color-purple-1100: #5d26cd;
  --cpd-color-purple-1200: #4c05b5;
  --cpd-color-purple-1300: #33008d;
  --cpd-color-purple-1400: #200066;
  --cpd-color-fuchsia-100: #fefafe;
  --cpd-color-fuchsia-200: #fcf5fd;
  --cpd-color-fuchsia-300: #faeefb;
  --cpd-color-fuchsia-400: #f6dff7;
  --cpd-color-fuchsia-500: #edc6f0;
  --cpd-color-fuchsia-600: #e7b2ea;
  --cpd-color-fuchsia-700: #db93e1;
  --cpd-color-fuchsia-800: #c85ed1;
  --cpd-color-fuchsia-900: #ad33bd;
  --cpd-color-fuchsia-1000: #972aaa;
  --cpd-color-fuchsia-1100: #822198;
  --cpd-color-fuchsia-1200: #671481;
  --cpd-color-fuchsia-1300: #4e0068;
  --cpd-color-fuchsia-1400: #34004c;
  --cpd-color-pink-100: #fffafb;
  --cpd-color-pink-200: #fff5f7;
  --cpd-color-pink-300: #ffecf0;
  --cpd-color-pink-400: #ffdee5;
  --cpd-color-pink-500: #ffc2cf;
  --cpd-color-pink-600: #ffadc0;
  --cpd-color-pink-700: #ff88a6;
  --cpd-color-pink-800: #f7407d;
  --cpd-color-pink-900: #d20c65;
  --cpd-color-pink-1000: #b80a5b;
  --cpd-color-pink-1100: #9f0850;
  --cpd-color-pink-1200: #7e0642;
  --cpd-color-pink-1300: #5f002b;
  --cpd-color-pink-1400: #430017;
  --cpd-color-alpha-gray-100: hsla(210, 48%, 41%, 0.02);
  --cpd-color-alpha-gray-200: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-300: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-400: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
  --cpd-color-alpha-gray-600: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-700: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-800: hsla(213, 87%, 9%, 0.5);
  --cpd-color-alpha-gray-900: hsla(213, 83%, 7%, 0.61);
  --cpd-color-alpha-gray-1000: hsla(218, 79%, 6%, 0.66);
  --cpd-color-alpha-gray-1100: hsla(215, 74%, 5%, 0.71);
  --cpd-color-alpha-gray-1200: hsla(213, 73%, 3%, 0.77);
  --cpd-color-alpha-gray-1300: hsla(225, 57%, 3%, 0.84);
  --cpd-color-alpha-gray-1400: hsla(223, 64%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(10, 100%, 61%, 0.03);
  --cpd-color-alpha-red-200: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-300: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-400: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-500: hsla(8, 100%, 51%, 0.27);
  --cpd-color-alpha-red-600: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-700: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-800: hsla(0, 100%, 51%, 0.77);
  --cpd-color-alpha-red-900: hsla(355, 98%, 41%, 0.91);
  --cpd-color-alpha-red-1000: hsla(353, 98%, 37%, 0.95);
  --cpd-color-alpha-red-1100: hsla(350, 99%, 32%, 0.99);
  --cpd-color-alpha-red-1200: hsl(357, 100%, 26%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-100: hsla(22, 100%, 61%, 0.04);
  --cpd-color-alpha-orange-200: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-300: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-500: hsla(25, 100%, 50%, 0.37);
  --cpd-color-alpha-orange-600: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-700: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-800: hsl(28, 100%, 43%, 1);
  --cpd-color-alpha-orange-900: hsl(22, 100%, 37%, 1);
  --cpd-color-alpha-orange-1000: hsl(18, 100%, 34%, 1);
  --cpd-color-alpha-orange-1100: hsl(13, 100%, 30%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 26%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-yellow-100: hsla(48, 100%, 51%, 0.06);
  --cpd-color-alpha-yellow-200: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-400: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-500: hsl(49, 100%, 49%, 1);
  --cpd-color-alpha-yellow-600: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-700: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-800: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-900: hsl(34, 100%, 31%, 1);
  --cpd-color-alpha-yellow-1000: hsl(32, 100%, 28%, 1);
  --cpd-color-alpha-yellow-1100: hsl(30, 100%, 25%, 1);
  --cpd-color-alpha-yellow-1200: hsl(26, 100%, 21%, 1);
  --cpd-color-alpha-yellow-1300: hsl(19, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1400: hsl(6, 100%, 13%, 1);
  --cpd-color-alpha-lime-100: hsla(103, 75%, 46%, 0.04);
  --cpd-color-alpha-lime-200: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-300: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-400: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-500: hsla(104, 98%, 40%, 0.51);
  --cpd-color-alpha-lime-600: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-700: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-800: hsla(107, 99%, 29%, 0.91);
  --cpd-color-alpha-lime-900: hsla(113, 97%, 24%, 0.96);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 22%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 19%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(156, 79%, 41%, 0.03);
  --cpd-color-alpha-green-200: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-300: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-400: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-500: hsla(154, 96%, 37%, 0.41);
  --cpd-color-alpha-green-600: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-700: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-800: hsl(166, 100%, 30%, 1);
  --cpd-color-alpha-green-900: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-1000: hsl(166, 100%, 21%, 1);
  --cpd-color-alpha-green-1100: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-1200: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-1300: hsl(157, 100%, 10%, 1);
  --cpd-color-alpha-green-1400: hsl(149, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(180, 79%, 41%, 0.03);
  --cpd-color-alpha-cyan-200: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-300: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-400: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-500: hsla(186, 95%, 38%, 0.4);
  --cpd-color-alpha-cyan-600: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-700: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-800: hsl(194, 100%, 38%, 1);
  --cpd-color-alpha-cyan-900: hsl(200, 100%, 34%, 1);
  --cpd-color-alpha-cyan-1000: hsl(202, 100%, 31%, 1);
  --cpd-color-alpha-cyan-1100: hsl(204, 100%, 28%, 1);
  --cpd-color-alpha-cyan-1200: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-1300: hsl(213, 100%, 19%, 1);
  --cpd-color-alpha-cyan-1400: hsl(221, 100%, 16%, 1);
  --cpd-color-alpha-blue-100: hsla(210, 100%, 61%, 0.03);
  --cpd-color-alpha-blue-200: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-300: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-400: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-500: hsla(215, 93%, 50%, 0.28);
  --cpd-color-alpha-blue-600: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-800: hsla(215, 100%, 46%, 0.75);
  --cpd-color-alpha-blue-900: hsla(213, 99%, 44%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(214, 98%, 39%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(216, 99%, 35%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(218, 99%, 29%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(222, 98%, 24%, 1);
  --cpd-color-alpha-blue-1400: hsl(232, 100%, 20%, 1);
  --cpd-color-alpha-purple-100: hsla(240, 100%, 61%, 0.02);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-500: hsla(248, 100%, 51%, 0.2);
  --cpd-color-alpha-purple-600: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-700: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-800: hsla(254, 99%, 49%, 0.56);
  --cpd-color-alpha-purple-900: hsla(258, 98%, 47%, 0.73);
  --cpd-color-alpha-purple-1000: hsla(259, 98%, 42%, 0.79);
  --cpd-color-alpha-purple-1100: hsla(260, 97%, 39%, 0.86);
  --cpd-color-alpha-purple-1200: hsla(264, 98%, 36%, 0.99);
  --cpd-color-alpha-purple-1300: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(300, 95%, 41%, 0.02);
  --cpd-color-alpha-fuchsia-200: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-300: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-400: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-500: hsla(296, 93%, 39%, 0.23);
  --cpd-color-alpha-fuchsia-600: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-700: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-800: hsla(295, 97%, 37%, 0.64);
  --cpd-color-alpha-fuchsia-900: hsla(293, 100%, 34%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(291, 99%, 30%, 0.84);
  --cpd-color-alpha-fuchsia-1100: hsla(289, 96%, 28%, 0.88);
  --cpd-color-alpha-fuchsia-1200: hsla(286, 97%, 24%, 0.93);
  --cpd-color-alpha-fuchsia-1300: hsl(285, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.02);
  --cpd-color-alpha-pink-200: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-500: hsla(347, 100%, 50%, 0.24);
  --cpd-color-alpha-pink-600: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-700: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-800: hsla(340, 100%, 48%, 0.75);
  --cpd-color-alpha-pink-900: hsla(333, 98%, 41%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(332, 98%, 36%, 0.97);
  --cpd-color-alpha-pink-1100: hsla(331, 100%, 31%, 0.97);
  --cpd-color-alpha-pink-1200: hsla(330, 98%, 24%, 0.98);
  --cpd-color-alpha-pink-1300: hsl(333, 100%, 19%, 1);
  --cpd-color-alpha-pink-1400: hsl(339, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-semantic {
.cpd-theme-light.cpd-theme-light {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: light) {

        @layer cpd-semantic {
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-base {
.cpd-theme-light-hc.cpd-theme-light-hc {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #f7f9fa;
  --cpd-color-gray-200: #f0f2f5;
  --cpd-color-gray-300: #e1e6ec;
  --cpd-color-gray-400: #d7dce3;
  --cpd-color-gray-500: #bdc4cc;
  --cpd-color-gray-600: #a6adb7;
  --cpd-color-gray-700: #878f9b;
  --cpd-color-gray-800: #6c737e;
  --cpd-color-gray-900: #474a51;
  --cpd-color-gray-1000: #3f4248;
  --cpd-color-gray-1100: #35383d;
  --cpd-color-gray-1200: #2d3034;
  --cpd-color-gray-1300: #1f2126;
  --cpd-color-gray-1400: #1a1c21;
  --cpd-color-red-100: #fff7f6;
  --cpd-color-red-200: #ffefec;
  --cpd-color-red-300: #ffdfda;
  --cpd-color-red-400: #ffd1ca;
  --cpd-color-red-500: #ffafa5;
  --cpd-color-red-600: #ff8c81;
  --cpd-color-red-700: #ff4e49;
  --cpd-color-red-800: #e11e2a;
  --cpd-color-red-900: #99001a;
  --cpd-color-red-1000: #8b000c;
  --cpd-color-red-1100: #770000;
  --cpd-color-red-1200: #670000;
  --cpd-color-red-1300: #4c0000;
  --cpd-color-red-1400: #420000;
  --cpd-color-orange-100: #fff6ef;
  --cpd-color-orange-200: #ffefe4;
  --cpd-color-orange-300: #ffdfc8;
  --cpd-color-orange-400: #ffd4b5;
  --cpd-color-orange-500: #fdb37c;
  --cpd-color-orange-600: #f89440;
  --cpd-color-orange-700: #e26e00;
  --cpd-color-orange-800: #c44d00;
  --cpd-color-orange-900: #931700;
  --cpd-color-orange-1000: #890800;
  --cpd-color-orange-1100: #770000;
  --cpd-color-orange-1200: #670000;
  --cpd-color-orange-1300: #4c0000;
  --cpd-color-orange-1400: #420000;
  --cpd-color-yellow-100: #fff8e0;
  --cpd-color-yellow-200: #fff2c1;
  --cpd-color-yellow-300: #ffe484;
  --cpd-color-yellow-400: #ffda49;
  --cpd-color-yellow-500: #f1bd00;
  --cpd-color-yellow-600: #dea200;
  --cpd-color-yellow-700: #c38100;
  --cpd-color-yellow-800: #a76300;
  --cpd-color-yellow-900: #773800;
  --cpd-color-yellow-1000: #6e3100;
  --cpd-color-yellow-1100: #612600;
  --cpd-color-yellow-1200: #571d00;
  --cpd-color-yellow-1300: #450c00;
  --cpd-color-yellow-1400: #3f0500;
  --cpd-color-lime-100: #f1fcee;
  --cpd-color-lime-200: #e0f8d9;
  --cpd-color-lime-300: #c8f1ba;
  --cpd-color-lime-400: #afeb9b;
  --cpd-color-lime-500: #76db4c;
  --cpd-color-lime-600: #54c424;
  --cpd-color-lime-700: #3aa31a;
  --cpd-color-lime-800: #1f850f;
  --cpd-color-lime-900: #005700;
  --cpd-color-lime-1000: #004f00;
  --cpd-color-lime-1100: #004200;
  --cpd-color-lime-1200: #003900;
  --cpd-color-lime-1300: #002900;
  --cpd-color-lime-1400: #002200;
  --cpd-color-green-100: #f1fbf6;
  --cpd-color-green-200: #e3f7ed;
  --cpd-color-green-300: #c6eedb;
  --cpd-color-green-400: #afe8ce;
  --cpd-color-green-500: #71d7ae;
  --cpd-color-green-600: #0bc491;
  --cpd-color-green-700: #00a27c;
  --cpd-color-green-800: #008268;
  --cpd-color-green-900: #00553d;
  --cpd-color-green-1000: #004d36;
  --cpd-color-green-1100: #00402b;
  --cpd-color-green-1200: #003723;
  --cpd-color-green-1300: #002715;
  --cpd-color-green-1400: #00210f;
  --cpd-color-cyan-100: #f1fafb;
  --cpd-color-cyan-200: #e3f5f8;
  --cpd-color-cyan-300: #c7ecf0;
  --cpd-color-cyan-400: #b1e4eb;
  --cpd-color-cyan-500: #76d1dd;
  --cpd-color-cyan-600: #15becf;
  --cpd-color-cyan-700: #009ac3;
  --cpd-color-cyan-800: #007ab3;
  --cpd-color-cyan-900: #004c84;
  --cpd-color-cyan-1000: #00447b;
  --cpd-color-cyan-1100: #00376e;
  --cpd-color-cyan-1200: #002e64;
  --cpd-color-cyan-1300: #001e53;
  --cpd-color-cyan-1400: #00174d;
  --cpd-color-blue-100: #f4f8ff;
  --cpd-color-blue-200: #e9f2ff;
  --cpd-color-blue-300: #d8e7fe;
  --cpd-color-blue-400: #c8ddfd;
  --cpd-color-blue-500: #a3c6fa;
  --cpd-color-blue-600: #7eaff6;
  --cpd-color-blue-700: #4a8ef0;
  --cpd-color-blue-800: #046ee8;
  --cpd-color-blue-900: #0543a7;
  --cpd-color-blue-1000: #053b9a;
  --cpd-color-blue-1100: #043088;
  --cpd-color-blue-1200: #03277b;
  --cpd-color-blue-1300: #001569;
  --cpd-color-blue-1400: #000c63;
  --cpd-color-purple-100: #f8f7ff;
  --cpd-color-purple-200: #f1efff;
  --cpd-color-purple-300: #e6e2ff;
  --cpd-color-purple-400: #ddd8ff;
  --cpd-color-purple-500: #c5bbff;
  --cpd-color-purple-600: #b1a0ff;
  --cpd-color-purple-700: #9778fe;
  --cpd-color-purple-800: #824ef9;
  --cpd-color-purple-900: #571cc4;
  --cpd-color-purple-1000: #4f0dba;
  --cpd-color-purple-1100: #4200a6;
  --cpd-color-purple-1200: #360094;
  --cpd-color-purple-1300: #240070;
  --cpd-color-purple-1400: #1f0062;
  --cpd-color-fuchsia-100: #fcf5fd;
  --cpd-color-fuchsia-200: #faeefb;
  --cpd-color-fuchsia-300: #f6dff7;
  --cpd-color-fuchsia-400: #f1d2f3;
  --cpd-color-fuchsia-500: #e7b2ea;
  --cpd-color-fuchsia-600: #db93e1;
  --cpd-color-fuchsia-700: #cb68d4;
  --cpd-color-fuchsia-800: #b937c6;
  --cpd-color-fuchsia-900: #781c90;
  --cpd-color-fuchsia-1000: #6c1785;
  --cpd-color-fuchsia-1100: #5c0f76;
  --cpd-color-fuchsia-1200: #52026c;
  --cpd-color-fuchsia-1300: #3b0053;
  --cpd-color-fuchsia-1400: #32004a;
  --cpd-color-pink-100: #fff5f7;
  --cpd-color-pink-200: #ffecf0;
  --cpd-color-pink-300: #ffdee5;
  --cpd-color-pink-400: #ffd0da;
  --cpd-color-pink-500: #ffadc0;
  --cpd-color-pink-600: #ff88a6;
  --cpd-color-pink-700: #f94e84;
  --cpd-color-pink-800: #e00c6a;
  --cpd-color-pink-900: #92084b;
  --cpd-color-pink-1000: #840745;
  --cpd-color-pink-1100: #72003a;
  --cpd-color-pink-1200: #64002f;
  --cpd-color-pink-1300: #4a001c;
  --cpd-color-pink-1400: #410015;
  --cpd-color-alpha-gray-100: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-200: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-300: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-400: hsla(215, 88%, 17%, 0.16);
  --cpd-color-alpha-gray-500: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-600: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-700: hsla(216, 81%, 10%, 0.48);
  --cpd-color-alpha-gray-800: hsla(217, 89%, 7%, 0.58);
  --cpd-color-alpha-gray-900: hsla(223, 70%, 4%, 0.73);
  --cpd-color-alpha-gray-1000: hsla(220, 75%, 3%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(222, 63%, 3%, 0.8);
  --cpd-color-alpha-gray-1200: hsla(210, 67%, 2%, 0.83);
  --cpd-color-alpha-gray-1300: hsla(218, 100%, 2%, 0.88);
  --cpd-color-alpha-gray-1400: hsla(223, 78%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-200: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-300: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-400: hsla(8, 100%, 51%, 0.21);
  --cpd-color-alpha-red-500: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-600: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-700: hsla(2, 100%, 50%, 0.72);
  --cpd-color-alpha-red-800: hsla(356, 98%, 44%, 0.89);
  --cpd-color-alpha-red-900: hsl(350, 100%, 30%, 1);
  --cpd-color-alpha-red-1000: hsl(355, 100%, 27%, 1);
  --cpd-color-alpha-red-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-red-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-orange-100: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-200: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-300: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 52%, 0.3);
  --cpd-color-alpha-orange-500: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-600: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-700: hsl(29, 100%, 44%, 1);
  --cpd-color-alpha-orange-800: hsl(24, 100%, 38%, 1);
  --cpd-color-alpha-orange-900: hsl(9, 100%, 29%, 1);
  --cpd-color-alpha-orange-1000: hsl(4, 100%, 27%, 1);
  --cpd-color-alpha-orange-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-yellow-100: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-200: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-400: hsla(48, 100%, 50%, 0.72);
  --cpd-color-alpha-yellow-500: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-600: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-700: hsl(40, 100%, 38%, 1);
  --cpd-color-alpha-yellow-800: hsl(36, 100%, 33%, 1);
  --cpd-color-alpha-yellow-900: hsl(28, 100%, 23%, 1);
  --cpd-color-alpha-yellow-1000: hsl(27, 100%, 22%, 1);
  --cpd-color-alpha-yellow-1100: hsl(24, 100%, 19%, 1);
  --cpd-color-alpha-yellow-1200: hsl(20, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1300: hsl(10, 100%, 14%, 1);
  --cpd-color-alpha-yellow-1400: hsl(5, 100%, 12%, 1);
  --cpd-color-alpha-lime-100: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-200: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-300: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-400: hsla(105, 95%, 41%, 0.4);
  --cpd-color-alpha-lime-500: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-600: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-700: hsla(106, 99%, 30%, 0.9);
  --cpd-color-alpha-lime-800: hsla(112, 97%, 25%, 0.95);
  --cpd-color-alpha-lime-900: hsl(120, 100%, 17%, 1);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 16%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 13%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-200: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-300: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-400: hsla(153, 95%, 37%, 0.32);
  --cpd-color-alpha-green-500: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-600: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-700: hsl(166, 100%, 32%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 26%, 1);
  --cpd-color-alpha-green-900: hsl(163, 100%, 17%, 1);
  --cpd-color-alpha-green-1000: hsl(162, 100%, 15%, 1);
  --cpd-color-alpha-green-1100: hsl(160, 100%, 13%, 1);
  --cpd-color-alpha-green-1200: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-1300: hsl(152, 100%, 8%, 1);
  --cpd-color-alpha-green-1400: hsl(147, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-200: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-300: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-400: hsla(187, 97%, 38%, 0.31);
  --cpd-color-alpha-cyan-500: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-600: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-700: hsl(193, 100%, 38%, 1);
  --cpd-color-alpha-cyan-800: hsl(199, 100%, 35%, 1);
  --cpd-color-alpha-cyan-900: hsl(205, 100%, 26%, 1);
  --cpd-color-alpha-cyan-1000: hsl(207, 100%, 24%, 1);
  --cpd-color-alpha-cyan-1100: hsl(210, 100%, 22%, 1);
  --cpd-color-alpha-cyan-1200: hsl(212, 100%, 20%, 1);
  --cpd-color-alpha-cyan-1300: hsl(218, 100%, 16%, 1);
  --cpd-color-alpha-cyan-1400: hsl(222, 100%, 15%, 1);
  --cpd-color-alpha-blue-100: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-200: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-300: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-400: hsla(216, 96%, 49%, 0.22);
  --cpd-color-alpha-blue-500: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-600: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-700: hsla(215, 100%, 46%, 0.71);
  --cpd-color-alpha-blue-800: hsla(212, 99%, 46%, 0.99);
  --cpd-color-alpha-blue-900: hsla(217, 98%, 33%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(218, 97%, 30%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(220, 99%, 27%, 0.99);
  --cpd-color-alpha-blue-1200: hsla(222, 100%, 24%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(228, 100%, 21%, 1);
  --cpd-color-alpha-blue-1400: hsl(233, 100%, 19%, 1);
  --cpd-color-alpha-purple-100: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 52%, 0.16);
  --cpd-color-alpha-purple-500: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-600: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-700: hsla(254, 100%, 50%, 0.53);
  --cpd-color-alpha-purple-800: hsla(258, 98%, 49%, 0.7);
  --cpd-color-alpha-purple-900: hsla(261, 97%, 38%, 0.9);
  --cpd-color-alpha-purple-1000: hsla(263, 100%, 36%, 0.95);
  --cpd-color-alpha-purple-1100: hsl(264, 100%, 33%, 1);
  --cpd-color-alpha-purple-1200: hsl(262, 100%, 29%, 1);
  --cpd-color-alpha-purple-1300: hsl(259, 100%, 22%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 19%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-200: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-300: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-400: hsla(296, 95%, 38%, 0.18);
  --cpd-color-alpha-fuchsia-500: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-600: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-700: hsla(295, 97%, 37%, 0.6);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 36%, 0.79);
  --cpd-color-alpha-fuchsia-900: hsla(287, 96%, 27%, 0.9);
  --cpd-color-alpha-fuchsia-1000: hsla(286, 100%, 24%, 0.91);
  --cpd-color-alpha-fuchsia-1100: hsla(285, 97%, 22%, 0.95);
  --cpd-color-alpha-fuchsia-1200: hsl(285, 96%, 22%, 1);
  --cpd-color-alpha-fuchsia-1300: hsl(283, 100%, 16%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-200: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 52%, 0.19);
  --cpd-color-alpha-pink-500: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-600: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-700: hsla(341, 98%, 49%, 0.7);
  --cpd-color-alpha-pink-800: hsla(333, 98%, 44%, 0.96);
  --cpd-color-alpha-pink-900: hsla(331, 100%, 28%, 0.97);
  --cpd-color-alpha-pink-1000: hsla(330, 97%, 26%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(329, 100%, 22%, 1);
  --cpd-color-alpha-pink-1200: hsl(332, 100%, 20%, 1);
  --cpd-color-alpha-pink-1300: hsl(337, 100%, 15%, 1);
  --cpd-color-alpha-pink-1400: hsl(341, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: light) and (prefers-contrast: more) {

        @layer cpd-base {
:root {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #f7f9fa;
  --cpd-color-gray-200: #f0f2f5;
  --cpd-color-gray-300: #e1e6ec;
  --cpd-color-gray-400: #d7dce3;
  --cpd-color-gray-500: #bdc4cc;
  --cpd-color-gray-600: #a6adb7;
  --cpd-color-gray-700: #878f9b;
  --cpd-color-gray-800: #6c737e;
  --cpd-color-gray-900: #474a51;
  --cpd-color-gray-1000: #3f4248;
  --cpd-color-gray-1100: #35383d;
  --cpd-color-gray-1200: #2d3034;
  --cpd-color-gray-1300: #1f2126;
  --cpd-color-gray-1400: #1a1c21;
  --cpd-color-red-100: #fff7f6;
  --cpd-color-red-200: #ffefec;
  --cpd-color-red-300: #ffdfda;
  --cpd-color-red-400: #ffd1ca;
  --cpd-color-red-500: #ffafa5;
  --cpd-color-red-600: #ff8c81;
  --cpd-color-red-700: #ff4e49;
  --cpd-color-red-800: #e11e2a;
  --cpd-color-red-900: #99001a;
  --cpd-color-red-1000: #8b000c;
  --cpd-color-red-1100: #770000;
  --cpd-color-red-1200: #670000;
  --cpd-color-red-1300: #4c0000;
  --cpd-color-red-1400: #420000;
  --cpd-color-orange-100: #fff6ef;
  --cpd-color-orange-200: #ffefe4;
  --cpd-color-orange-300: #ffdfc8;
  --cpd-color-orange-400: #ffd4b5;
  --cpd-color-orange-500: #fdb37c;
  --cpd-color-orange-600: #f89440;
  --cpd-color-orange-700: #e26e00;
  --cpd-color-orange-800: #c44d00;
  --cpd-color-orange-900: #931700;
  --cpd-color-orange-1000: #890800;
  --cpd-color-orange-1100: #770000;
  --cpd-color-orange-1200: #670000;
  --cpd-color-orange-1300: #4c0000;
  --cpd-color-orange-1400: #420000;
  --cpd-color-yellow-100: #fff8e0;
  --cpd-color-yellow-200: #fff2c1;
  --cpd-color-yellow-300: #ffe484;
  --cpd-color-yellow-400: #ffda49;
  --cpd-color-yellow-500: #f1bd00;
  --cpd-color-yellow-600: #dea200;
  --cpd-color-yellow-700: #c38100;
  --cpd-color-yellow-800: #a76300;
  --cpd-color-yellow-900: #773800;
  --cpd-color-yellow-1000: #6e3100;
  --cpd-color-yellow-1100: #612600;
  --cpd-color-yellow-1200: #571d00;
  --cpd-color-yellow-1300: #450c00;
  --cpd-color-yellow-1400: #3f0500;
  --cpd-color-lime-100: #f1fcee;
  --cpd-color-lime-200: #e0f8d9;
  --cpd-color-lime-300: #c8f1ba;
  --cpd-color-lime-400: #afeb9b;
  --cpd-color-lime-500: #76db4c;
  --cpd-color-lime-600: #54c424;
  --cpd-color-lime-700: #3aa31a;
  --cpd-color-lime-800: #1f850f;
  --cpd-color-lime-900: #005700;
  --cpd-color-lime-1000: #004f00;
  --cpd-color-lime-1100: #004200;
  --cpd-color-lime-1200: #003900;
  --cpd-color-lime-1300: #002900;
  --cpd-color-lime-1400: #002200;
  --cpd-color-green-100: #f1fbf6;
  --cpd-color-green-200: #e3f7ed;
  --cpd-color-green-300: #c6eedb;
  --cpd-color-green-400: #afe8ce;
  --cpd-color-green-500: #71d7ae;
  --cpd-color-green-600: #0bc491;
  --cpd-color-green-700: #00a27c;
  --cpd-color-green-800: #008268;
  --cpd-color-green-900: #00553d;
  --cpd-color-green-1000: #004d36;
  --cpd-color-green-1100: #00402b;
  --cpd-color-green-1200: #003723;
  --cpd-color-green-1300: #002715;
  --cpd-color-green-1400: #00210f;
  --cpd-color-cyan-100: #f1fafb;
  --cpd-color-cyan-200: #e3f5f8;
  --cpd-color-cyan-300: #c7ecf0;
  --cpd-color-cyan-400: #b1e4eb;
  --cpd-color-cyan-500: #76d1dd;
  --cpd-color-cyan-600: #15becf;
  --cpd-color-cyan-700: #009ac3;
  --cpd-color-cyan-800: #007ab3;
  --cpd-color-cyan-900: #004c84;
  --cpd-color-cyan-1000: #00447b;
  --cpd-color-cyan-1100: #00376e;
  --cpd-color-cyan-1200: #002e64;
  --cpd-color-cyan-1300: #001e53;
  --cpd-color-cyan-1400: #00174d;
  --cpd-color-blue-100: #f4f8ff;
  --cpd-color-blue-200: #e9f2ff;
  --cpd-color-blue-300: #d8e7fe;
  --cpd-color-blue-400: #c8ddfd;
  --cpd-color-blue-500: #a3c6fa;
  --cpd-color-blue-600: #7eaff6;
  --cpd-color-blue-700: #4a8ef0;
  --cpd-color-blue-800: #046ee8;
  --cpd-color-blue-900: #0543a7;
  --cpd-color-blue-1000: #053b9a;
  --cpd-color-blue-1100: #043088;
  --cpd-color-blue-1200: #03277b;
  --cpd-color-blue-1300: #001569;
  --cpd-color-blue-1400: #000c63;
  --cpd-color-purple-100: #f8f7ff;
  --cpd-color-purple-200: #f1efff;
  --cpd-color-purple-300: #e6e2ff;
  --cpd-color-purple-400: #ddd8ff;
  --cpd-color-purple-500: #c5bbff;
  --cpd-color-purple-600: #b1a0ff;
  --cpd-color-purple-700: #9778fe;
  --cpd-color-purple-800: #824ef9;
  --cpd-color-purple-900: #571cc4;
  --cpd-color-purple-1000: #4f0dba;
  --cpd-color-purple-1100: #4200a6;
  --cpd-color-purple-1200: #360094;
  --cpd-color-purple-1300: #240070;
  --cpd-color-purple-1400: #1f0062;
  --cpd-color-fuchsia-100: #fcf5fd;
  --cpd-color-fuchsia-200: #faeefb;
  --cpd-color-fuchsia-300: #f6dff7;
  --cpd-color-fuchsia-400: #f1d2f3;
  --cpd-color-fuchsia-500: #e7b2ea;
  --cpd-color-fuchsia-600: #db93e1;
  --cpd-color-fuchsia-700: #cb68d4;
  --cpd-color-fuchsia-800: #b937c6;
  --cpd-color-fuchsia-900: #781c90;
  --cpd-color-fuchsia-1000: #6c1785;
  --cpd-color-fuchsia-1100: #5c0f76;
  --cpd-color-fuchsia-1200: #52026c;
  --cpd-color-fuchsia-1300: #3b0053;
  --cpd-color-fuchsia-1400: #32004a;
  --cpd-color-pink-100: #fff5f7;
  --cpd-color-pink-200: #ffecf0;
  --cpd-color-pink-300: #ffdee5;
  --cpd-color-pink-400: #ffd0da;
  --cpd-color-pink-500: #ffadc0;
  --cpd-color-pink-600: #ff88a6;
  --cpd-color-pink-700: #f94e84;
  --cpd-color-pink-800: #e00c6a;
  --cpd-color-pink-900: #92084b;
  --cpd-color-pink-1000: #840745;
  --cpd-color-pink-1100: #72003a;
  --cpd-color-pink-1200: #64002f;
  --cpd-color-pink-1300: #4a001c;
  --cpd-color-pink-1400: #410015;
  --cpd-color-alpha-gray-100: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-200: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-300: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-400: hsla(215, 88%, 17%, 0.16);
  --cpd-color-alpha-gray-500: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-600: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-700: hsla(216, 81%, 10%, 0.48);
  --cpd-color-alpha-gray-800: hsla(217, 89%, 7%, 0.58);
  --cpd-color-alpha-gray-900: hsla(223, 70%, 4%, 0.73);
  --cpd-color-alpha-gray-1000: hsla(220, 75%, 3%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(222, 63%, 3%, 0.8);
  --cpd-color-alpha-gray-1200: hsla(210, 67%, 2%, 0.83);
  --cpd-color-alpha-gray-1300: hsla(218, 100%, 2%, 0.88);
  --cpd-color-alpha-gray-1400: hsla(223, 78%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-200: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-300: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-400: hsla(8, 100%, 51%, 0.21);
  --cpd-color-alpha-red-500: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-600: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-700: hsla(2, 100%, 50%, 0.72);
  --cpd-color-alpha-red-800: hsla(356, 98%, 44%, 0.89);
  --cpd-color-alpha-red-900: hsl(350, 100%, 30%, 1);
  --cpd-color-alpha-red-1000: hsl(355, 100%, 27%, 1);
  --cpd-color-alpha-red-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-red-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-orange-100: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-200: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-300: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 52%, 0.3);
  --cpd-color-alpha-orange-500: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-600: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-700: hsl(29, 100%, 44%, 1);
  --cpd-color-alpha-orange-800: hsl(24, 100%, 38%, 1);
  --cpd-color-alpha-orange-900: hsl(9, 100%, 29%, 1);
  --cpd-color-alpha-orange-1000: hsl(4, 100%, 27%, 1);
  --cpd-color-alpha-orange-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-yellow-100: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-200: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-400: hsla(48, 100%, 50%, 0.72);
  --cpd-color-alpha-yellow-500: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-600: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-700: hsl(40, 100%, 38%, 1);
  --cpd-color-alpha-yellow-800: hsl(36, 100%, 33%, 1);
  --cpd-color-alpha-yellow-900: hsl(28, 100%, 23%, 1);
  --cpd-color-alpha-yellow-1000: hsl(27, 100%, 22%, 1);
  --cpd-color-alpha-yellow-1100: hsl(24, 100%, 19%, 1);
  --cpd-color-alpha-yellow-1200: hsl(20, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1300: hsl(10, 100%, 14%, 1);
  --cpd-color-alpha-yellow-1400: hsl(5, 100%, 12%, 1);
  --cpd-color-alpha-lime-100: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-200: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-300: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-400: hsla(105, 95%, 41%, 0.4);
  --cpd-color-alpha-lime-500: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-600: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-700: hsla(106, 99%, 30%, 0.9);
  --cpd-color-alpha-lime-800: hsla(112, 97%, 25%, 0.95);
  --cpd-color-alpha-lime-900: hsl(120, 100%, 17%, 1);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 16%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 13%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-200: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-300: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-400: hsla(153, 95%, 37%, 0.32);
  --cpd-color-alpha-green-500: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-600: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-700: hsl(166, 100%, 32%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 26%, 1);
  --cpd-color-alpha-green-900: hsl(163, 100%, 17%, 1);
  --cpd-color-alpha-green-1000: hsl(162, 100%, 15%, 1);
  --cpd-color-alpha-green-1100: hsl(160, 100%, 13%, 1);
  --cpd-color-alpha-green-1200: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-1300: hsl(152, 100%, 8%, 1);
  --cpd-color-alpha-green-1400: hsl(147, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-200: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-300: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-400: hsla(187, 97%, 38%, 0.31);
  --cpd-color-alpha-cyan-500: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-600: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-700: hsl(193, 100%, 38%, 1);
  --cpd-color-alpha-cyan-800: hsl(199, 100%, 35%, 1);
  --cpd-color-alpha-cyan-900: hsl(205, 100%, 26%, 1);
  --cpd-color-alpha-cyan-1000: hsl(207, 100%, 24%, 1);
  --cpd-color-alpha-cyan-1100: hsl(210, 100%, 22%, 1);
  --cpd-color-alpha-cyan-1200: hsl(212, 100%, 20%, 1);
  --cpd-color-alpha-cyan-1300: hsl(218, 100%, 16%, 1);
  --cpd-color-alpha-cyan-1400: hsl(222, 100%, 15%, 1);
  --cpd-color-alpha-blue-100: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-200: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-300: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-400: hsla(216, 96%, 49%, 0.22);
  --cpd-color-alpha-blue-500: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-600: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-700: hsla(215, 100%, 46%, 0.71);
  --cpd-color-alpha-blue-800: hsla(212, 99%, 46%, 0.99);
  --cpd-color-alpha-blue-900: hsla(217, 98%, 33%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(218, 97%, 30%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(220, 99%, 27%, 0.99);
  --cpd-color-alpha-blue-1200: hsla(222, 100%, 24%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(228, 100%, 21%, 1);
  --cpd-color-alpha-blue-1400: hsl(233, 100%, 19%, 1);
  --cpd-color-alpha-purple-100: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 52%, 0.16);
  --cpd-color-alpha-purple-500: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-600: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-700: hsla(254, 100%, 50%, 0.53);
  --cpd-color-alpha-purple-800: hsla(258, 98%, 49%, 0.7);
  --cpd-color-alpha-purple-900: hsla(261, 97%, 38%, 0.9);
  --cpd-color-alpha-purple-1000: hsla(263, 100%, 36%, 0.95);
  --cpd-color-alpha-purple-1100: hsl(264, 100%, 33%, 1);
  --cpd-color-alpha-purple-1200: hsl(262, 100%, 29%, 1);
  --cpd-color-alpha-purple-1300: hsl(259, 100%, 22%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 19%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-200: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-300: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-400: hsla(296, 95%, 38%, 0.18);
  --cpd-color-alpha-fuchsia-500: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-600: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-700: hsla(295, 97%, 37%, 0.6);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 36%, 0.79);
  --cpd-color-alpha-fuchsia-900: hsla(287, 96%, 27%, 0.9);
  --cpd-color-alpha-fuchsia-1000: hsla(286, 100%, 24%, 0.91);
  --cpd-color-alpha-fuchsia-1100: hsla(285, 97%, 22%, 0.95);
  --cpd-color-alpha-fuchsia-1200: hsl(285, 96%, 22%, 1);
  --cpd-color-alpha-fuchsia-1300: hsl(283, 100%, 16%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-200: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 52%, 0.19);
  --cpd-color-alpha-pink-500: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-600: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-700: hsla(341, 98%, 49%, 0.7);
  --cpd-color-alpha-pink-800: hsla(333, 98%, 44%, 0.96);
  --cpd-color-alpha-pink-900: hsla(331, 100%, 28%, 0.97);
  --cpd-color-alpha-pink-1000: hsla(330, 97%, 26%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(329, 100%, 22%, 1);
  --cpd-color-alpha-pink-1200: hsl(332, 100%, 20%, 1);
  --cpd-color-alpha-pink-1300: hsl(337, 100%, 15%, 1);
  --cpd-color-alpha-pink-1400: hsl(341, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-semantic {
.cpd-theme-light-hc.cpd-theme-light-hc {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: light) and (prefers-contrast: more) {

        @layer cpd-semantic {
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-base {
.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #14171b;
  --cpd-color-gray-200: #181a1f;
  --cpd-color-gray-300: #1d1f24;
  --cpd-color-gray-400: #26282d;
  --cpd-color-gray-500: #323539;
  --cpd-color-gray-600: #3c3f44;
  --cpd-color-gray-700: #4a4f55;
  --cpd-color-gray-800: #656c76;
  --cpd-color-gray-900: #808994;
  --cpd-color-gray-1000: #9199a4;
  --cpd-color-gray-1100: #a3aab4;
  --cpd-color-gray-1200: #bdc3cc;
  --cpd-color-gray-1300: #d9dee4;
  --cpd-color-gray-1400: #ebeef2;
  --cpd-color-red-100: #370000;
  --cpd-color-red-200: #3e0000;
  --cpd-color-red-300: #470000;
  --cpd-color-red-400: #590000;
  --cpd-color-red-500: #710000;
  --cpd-color-red-600: #830009;
  --cpd-color-red-700: #9f0d1e;
  --cpd-color-red-800: #d1212a;
  --cpd-color-red-900: #fd3e3c;
  --cpd-color-red-1000: #ff665d;
  --cpd-color-red-1100: #ff877c;
  --cpd-color-red-1200: #ffaea4;
  --cpd-color-red-1300: #ffd4cd;
  --cpd-color-red-1400: #ffe9e6;
  --cpd-color-orange-100: #380000;
  --cpd-color-orange-200: #3c0000;
  --cpd-color-orange-300: #470000;
  --cpd-color-orange-400: #580000;
  --cpd-color-orange-500: #710000;
  --cpd-color-orange-600: #830500;
  --cpd-color-orange-700: #972206;
  --cpd-color-orange-800: #b94607;
  --cpd-color-orange-900: #da670d;
  --cpd-color-orange-1000: #eb7a12;
  --cpd-color-orange-1100: #f6913d;
  --cpd-color-orange-1200: #fbb37e;
  --cpd-color-orange-1300: #ffd5b9;
  --cpd-color-orange-1400: #ffeadb;
  --cpd-color-yellow-100: #360000;
  --cpd-color-yellow-200: #3a0300;
  --cpd-color-yellow-300: #410900;
  --cpd-color-yellow-400: #4c1400;
  --cpd-color-yellow-500: #5c2400;
  --cpd-color-yellow-600: #682e03;
  --cpd-color-yellow-700: #7c3e02;
  --cpd-color-yellow-800: #9d5b00;
  --cpd-color-yellow-900: #bc7a00;
  --cpd-color-yellow-1000: #cc8c00;
  --cpd-color-yellow-1100: #db9f00;
  --cpd-color-yellow-1200: #efbb0b;
  --cpd-color-yellow-1300: #fedb58;
  --cpd-color-yellow-1400: #ffedb1;
  --cpd-color-lime-100: #001b00;
  --cpd-color-lime-200: #002000;
  --cpd-color-lime-300: #002600;
  --cpd-color-lime-400: #003000;
  --cpd-color-lime-500: #003e00;
  --cpd-color-lime-600: #004a00;
  --cpd-color-lime-700: #005c00;
  --cpd-color-lime-800: #1d7c13;
  --cpd-color-lime-900: #389b20;
  --cpd-color-lime-1000: #47ad26;
  --cpd-color-lime-1100: #56c02c;
  --cpd-color-lime-1200: #77d94f;
  --cpd-color-lime-1300: #b6eca3;
  --cpd-color-lime-1400: #daf6d0;
  --cpd-color-green-100: #001c0b;
  --cpd-color-green-200: #001f0e;
  --cpd-color-green-300: #002513;
  --cpd-color-green-400: #002e1b;
  --cpd-color-green-500: #003d29;
  --cpd-color-green-600: #004832;
  --cpd-color-green-700: #005a43;
  --cpd-color-green-800: #007a62;
  --cpd-color-green-900: #129a78;
  --cpd-color-green-1000: #17ac84;
  --cpd-color-green-1100: #1fc090;
  --cpd-color-green-1200: #72d5ae;
  --cpd-color-green-1300: #b5e8d1;
  --cpd-color-green-1400: #d9f4e7;
  --cpd-color-cyan-100: #001144;
  --cpd-color-cyan-200: #001448;
  --cpd-color-cyan-300: #001b4e;
  --cpd-color-cyan-400: #002559;
  --cpd-color-cyan-500: #003468;
  --cpd-color-cyan-600: #003f75;
  --cpd-color-cyan-700: #005188;
  --cpd-color-cyan-800: #0271aa;
  --cpd-color-cyan-900: #0093be;
  --cpd-color-cyan-1000: #02a7c6;
  --cpd-color-cyan-1100: #21bacd;
  --cpd-color-cyan-1200: #78d0dc;
  --cpd-color-cyan-1300: #b8e5eb;
  --cpd-color-cyan-1400: #dbf2f5;
  --cpd-color-blue-100: #00055a;
  --cpd-color-blue-200: #00095d;
  --cpd-color-blue-300: #001264;
  --cpd-color-blue-400: #001e6f;
  --cpd-color-blue-500: #062d80;
  --cpd-color-blue-600: #083891;
  --cpd-color-blue-700: #0b49ab;
  --cpd-color-blue-800: #0e67d9;
  --cpd-color-blue-900: #4187eb;
  --cpd-color-blue-1000: #5e99f0;
  --cpd-color-blue-1100: #7aacf4;
  --cpd-color-blue-1200: #a1c4f8;
  --cpd-color-blue-1300: #cbdffc;
  --cpd-color-blue-1400: #e4eefe;
  --cpd-color-purple-100: #1a0055;
  --cpd-color-purple-200: #1c005a;
  --cpd-color-purple-300: #22006a;
  --cpd-color-purple-400: #2c0080;
  --cpd-color-purple-500: #3d009e;
  --cpd-color-purple-600: #4a0db1;
  --cpd-color-purple-700: #5a27c6;
  --cpd-color-purple-800: #7849ec;
  --cpd-color-purple-900: #9171f9;
  --cpd-color-purple-1000: #9e87fc;
  --cpd-color-purple-1100: #ad9cfe;
  --cpd-color-purple-1200: #c4baff;
  --cpd-color-purple-1300: #dedaff;
  --cpd-color-purple-1400: #eeebff;
  --cpd-color-fuchsia-100: #28003d;
  --cpd-color-fuchsia-200: #2e0044;
  --cpd-color-fuchsia-300: #37004e;
  --cpd-color-fuchsia-400: #46005e;
  --cpd-color-fuchsia-500: #560f6f;
  --cpd-color-fuchsia-600: #65177d;
  --cpd-color-fuchsia-700: #7d2394;
  --cpd-color-fuchsia-800: #aa36ba;
  --cpd-color-fuchsia-900: #c560cf;
  --cpd-color-fuchsia-1000: #cf78d7;
  --cpd-color-fuchsia-1100: #d991de;
  --cpd-color-fuchsia-1200: #e5b1e9;
  --cpd-color-fuchsia-1300: #f1d4f3;
  --cpd-color-fuchsia-1400: #f8e9f9;
  --cpd-color-pink-100: #37000f;
  --cpd-color-pink-200: #3c0012;
  --cpd-color-pink-300: #450018;
  --cpd-color-pink-400: #550024;
  --cpd-color-pink-500: #6d0036;
  --cpd-color-pink-600: #7c0c41;
  --cpd-color-pink-700: #99114f;
  --cpd-color-pink-800: #ce1865;
  --cpd-color-pink-900: #f4427d;
  --cpd-color-pink-1000: #fa658f;
  --cpd-color-pink-1100: #fe84a2;
  --cpd-color-pink-1200: #ffabbe;
  --cpd-color-pink-1300: #ffd2dc;
  --cpd-color-pink-1400: #ffe8ed;
  --cpd-color-alpha-gray-100: hsla(214, 10%, 86%, 0.02);
  --cpd-color-alpha-gray-200: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-300: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-400: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
  --cpd-color-alpha-gray-600: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-700: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-800: hsla(216, 100%, 94%, 0.41);
  --cpd-color-alpha-gray-900: hsla(211, 94%, 94%, 0.54);
  --cpd-color-alpha-gray-1000: hsla(213, 93%, 94%, 0.61);
  --cpd-color-alpha-gray-1100: hsla(215, 92%, 95%, 0.68);
  --cpd-color-alpha-gray-1200: hsla(215, 74%, 96%, 0.79);
  --cpd-color-alpha-gray-1300: hsla(213, 73%, 97%, 0.89);
  --cpd-color-alpha-gray-1400: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-red-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-red-600: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-700: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-800: hsla(357, 99%, 57%, 0.81);
  --cpd-color-alpha-red-900: hsl(1, 98%, 61%, 1);
  --cpd-color-alpha-red-1000: hsl(3, 100%, 68%, 1);
  --cpd-color-alpha-red-1100: hsl(5, 100%, 74%, 1);
  --cpd-color-alpha-red-1200: hsl(7, 100%, 82%, 1);
  --cpd-color-alpha-red-1300: hsl(8, 100%, 90%, 1);
  --cpd-color-alpha-red-1400: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-orange-600: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-700: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-800: hsla(21, 100%, 50%, 0.71);
  --cpd-color-alpha-orange-900: hsla(26, 99%, 52%, 0.85);
  --cpd-color-alpha-orange-1000: hsla(29, 99%, 53%, 0.92);
  --cpd-color-alpha-orange-1100: hsla(27, 98%, 62%, 0.97);
  --cpd-color-alpha-orange-1200: hsla(26, 97%, 75%, 0.99);
  --cpd-color-alpha-orange-1300: hsl(24, 100%, 86%, 1);
  --cpd-color-alpha-orange-1400: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-yellow-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-300: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-400: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-500: hsl(23, 100%, 18%, 1);
  --cpd-color-alpha-yellow-600: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-700: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-800: hsl(35, 100%, 31%, 1);
  --cpd-color-alpha-yellow-900: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-1000: hsl(41, 100%, 40%, 1);
  --cpd-color-alpha-yellow-1100: hsl(44, 100%, 43%, 1);
  --cpd-color-alpha-yellow-1200: hsla(46, 98%, 52%, 0.94);
  --cpd-color-alpha-yellow-1300: hsl(47, 99%, 67%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 5%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 12%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-700: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-800: hsla(112, 98%, 52%, 0.45);
  --cpd-color-alpha-lime-900: hsla(107, 98%, 57%, 0.58);
  --cpd-color-alpha-lime-1000: hsla(105, 97%, 58%, 0.66);
  --cpd-color-alpha-lime-1100: hsla(102, 98%, 60%, 0.74);
  --cpd-color-alpha-lime-1200: hsla(102, 100%, 68%, 0.84);
  --cpd-color-alpha-lime-1300: hsla(104, 100%, 84%, 0.92);
  --cpd-color-alpha-lime-1400: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-green-100: hsl(144, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-300: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-400: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-500: hsl(160, 100%, 12%, 1);
  --cpd-color-alpha-green-600: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-700: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-900: hsla(164, 98%, 53%, 0.58);
  --cpd-color-alpha-green-1000: hsla(163, 99%, 55%, 0.65);
  --cpd-color-alpha-green-1100: hsla(162, 98%, 57%, 0.74);
  --cpd-color-alpha-green-1200: hsla(156, 97%, 76%, 0.83);
  --cpd-color-alpha-green-1300: hsla(152, 93%, 88%, 0.91);
  --cpd-color-alpha-green-1400: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-cyan-100: hsl(225, 100%, 13%, 1);
  --cpd-color-alpha-cyan-200: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-300: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-400: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-500: hsl(210, 100%, 20%, 1);
  --cpd-color-alpha-cyan-600: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-700: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-800: hsla(200, 100%, 37%, 0.88);
  --cpd-color-alpha-cyan-900: hsl(194, 100%, 37%, 1);
  --cpd-color-alpha-cyan-1000: hsla(189, 100%, 44%, 0.88);
  --cpd-color-alpha-cyan-1100: hsla(186, 98%, 57%, 0.79);
  --cpd-color-alpha-cyan-1200: hsla(187, 100%, 77%, 0.85);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 89%, 0.92);
  --cpd-color-alpha-cyan-1400: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-blue-100: hsl(237, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-300: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-400: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-500: hsla(221, 100%, 37%, 0.63);
  --cpd-color-alpha-blue-600: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-700: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-800: hsla(214, 99%, 53%, 0.84);
  --cpd-color-alpha-blue-900: hsla(215, 98%, 63%, 0.92);
  --cpd-color-alpha-blue-1000: hsla(216, 99%, 69%, 0.94);
  --cpd-color-alpha-blue-1100: hsla(215, 97%, 74%, 0.96);
  --cpd-color-alpha-blue-1200: hsla(216, 100%, 82%, 0.97);
  --cpd-color-alpha-blue-1300: hsla(216, 96%, 90%, 0.99);
  --cpd-color-alpha-blue-1400: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-purple-100: hsl(258, 100%, 17%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-300: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-400: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-500: hsl(263, 100%, 31%, 1);
  --cpd-color-alpha-purple-600: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-700: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-800: hsla(257, 100%, 65%, 0.92);
  --cpd-color-alpha-purple-900: hsla(254, 99%, 72%, 0.98);
  --cpd-color-alpha-purple-1000: hsla(252, 98%, 77%, 0.99);
  --cpd-color-alpha-purple-1100: hsl(250, 98%, 80%, 1);
  --cpd-color-alpha-purple-1200: hsl(249, 100%, 87%, 1);
  --cpd-color-alpha-purple-1300: hsl(246, 100%, 93%, 1);
  --cpd-color-alpha-purple-1400: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(279, 100%, 12%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-400: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-500: hsla(287, 100%, 52%, 0.38);
  --cpd-color-alpha-fuchsia-600: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-700: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 63%, 0.71);
  --cpd-color-alpha-fuchsia-900: hsla(295, 97%, 72%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 98%, 78%, 0.83);
  --cpd-color-alpha-fuchsia-1100: hsla(297, 98%, 82%, 0.86);
  --cpd-color-alpha-fuchsia-1200: hsla(296, 97%, 88%, 0.91);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 100%, 94%, 0.95);
  --cpd-color-alpha-fuchsia-1400: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-pink-100: hsl(344, 100%, 11%, 1);
  --cpd-color-alpha-pink-200: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-300: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-400: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-500: hsl(330, 100%, 21%, 1);
  --cpd-color-alpha-pink-600: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-700: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-800: hsla(335, 99%, 55%, 0.8);
  --cpd-color-alpha-pink-900: hsla(340, 99%, 63%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(343, 100%, 70%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(345, 98%, 76%, 1);
  --cpd-color-alpha-pink-1200: hsl(346, 100%, 84%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 91%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 96%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: dark) {

        @layer cpd-base {
:root {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #14171b;
  --cpd-color-gray-200: #181a1f;
  --cpd-color-gray-300: #1d1f24;
  --cpd-color-gray-400: #26282d;
  --cpd-color-gray-500: #323539;
  --cpd-color-gray-600: #3c3f44;
  --cpd-color-gray-700: #4a4f55;
  --cpd-color-gray-800: #656c76;
  --cpd-color-gray-900: #808994;
  --cpd-color-gray-1000: #9199a4;
  --cpd-color-gray-1100: #a3aab4;
  --cpd-color-gray-1200: #bdc3cc;
  --cpd-color-gray-1300: #d9dee4;
  --cpd-color-gray-1400: #ebeef2;
  --cpd-color-red-100: #370000;
  --cpd-color-red-200: #3e0000;
  --cpd-color-red-300: #470000;
  --cpd-color-red-400: #590000;
  --cpd-color-red-500: #710000;
  --cpd-color-red-600: #830009;
  --cpd-color-red-700: #9f0d1e;
  --cpd-color-red-800: #d1212a;
  --cpd-color-red-900: #fd3e3c;
  --cpd-color-red-1000: #ff665d;
  --cpd-color-red-1100: #ff877c;
  --cpd-color-red-1200: #ffaea4;
  --cpd-color-red-1300: #ffd4cd;
  --cpd-color-red-1400: #ffe9e6;
  --cpd-color-orange-100: #380000;
  --cpd-color-orange-200: #3c0000;
  --cpd-color-orange-300: #470000;
  --cpd-color-orange-400: #580000;
  --cpd-color-orange-500: #710000;
  --cpd-color-orange-600: #830500;
  --cpd-color-orange-700: #972206;
  --cpd-color-orange-800: #b94607;
  --cpd-color-orange-900: #da670d;
  --cpd-color-orange-1000: #eb7a12;
  --cpd-color-orange-1100: #f6913d;
  --cpd-color-orange-1200: #fbb37e;
  --cpd-color-orange-1300: #ffd5b9;
  --cpd-color-orange-1400: #ffeadb;
  --cpd-color-yellow-100: #360000;
  --cpd-color-yellow-200: #3a0300;
  --cpd-color-yellow-300: #410900;
  --cpd-color-yellow-400: #4c1400;
  --cpd-color-yellow-500: #5c2400;
  --cpd-color-yellow-600: #682e03;
  --cpd-color-yellow-700: #7c3e02;
  --cpd-color-yellow-800: #9d5b00;
  --cpd-color-yellow-900: #bc7a00;
  --cpd-color-yellow-1000: #cc8c00;
  --cpd-color-yellow-1100: #db9f00;
  --cpd-color-yellow-1200: #efbb0b;
  --cpd-color-yellow-1300: #fedb58;
  --cpd-color-yellow-1400: #ffedb1;
  --cpd-color-lime-100: #001b00;
  --cpd-color-lime-200: #002000;
  --cpd-color-lime-300: #002600;
  --cpd-color-lime-400: #003000;
  --cpd-color-lime-500: #003e00;
  --cpd-color-lime-600: #004a00;
  --cpd-color-lime-700: #005c00;
  --cpd-color-lime-800: #1d7c13;
  --cpd-color-lime-900: #389b20;
  --cpd-color-lime-1000: #47ad26;
  --cpd-color-lime-1100: #56c02c;
  --cpd-color-lime-1200: #77d94f;
  --cpd-color-lime-1300: #b6eca3;
  --cpd-color-lime-1400: #daf6d0;
  --cpd-color-green-100: #001c0b;
  --cpd-color-green-200: #001f0e;
  --cpd-color-green-300: #002513;
  --cpd-color-green-400: #002e1b;
  --cpd-color-green-500: #003d29;
  --cpd-color-green-600: #004832;
  --cpd-color-green-700: #005a43;
  --cpd-color-green-800: #007a62;
  --cpd-color-green-900: #129a78;
  --cpd-color-green-1000: #17ac84;
  --cpd-color-green-1100: #1fc090;
  --cpd-color-green-1200: #72d5ae;
  --cpd-color-green-1300: #b5e8d1;
  --cpd-color-green-1400: #d9f4e7;
  --cpd-color-cyan-100: #001144;
  --cpd-color-cyan-200: #001448;
  --cpd-color-cyan-300: #001b4e;
  --cpd-color-cyan-400: #002559;
  --cpd-color-cyan-500: #003468;
  --cpd-color-cyan-600: #003f75;
  --cpd-color-cyan-700: #005188;
  --cpd-color-cyan-800: #0271aa;
  --cpd-color-cyan-900: #0093be;
  --cpd-color-cyan-1000: #02a7c6;
  --cpd-color-cyan-1100: #21bacd;
  --cpd-color-cyan-1200: #78d0dc;
  --cpd-color-cyan-1300: #b8e5eb;
  --cpd-color-cyan-1400: #dbf2f5;
  --cpd-color-blue-100: #00055a;
  --cpd-color-blue-200: #00095d;
  --cpd-color-blue-300: #001264;
  --cpd-color-blue-400: #001e6f;
  --cpd-color-blue-500: #062d80;
  --cpd-color-blue-600: #083891;
  --cpd-color-blue-700: #0b49ab;
  --cpd-color-blue-800: #0e67d9;
  --cpd-color-blue-900: #4187eb;
  --cpd-color-blue-1000: #5e99f0;
  --cpd-color-blue-1100: #7aacf4;
  --cpd-color-blue-1200: #a1c4f8;
  --cpd-color-blue-1300: #cbdffc;
  --cpd-color-blue-1400: #e4eefe;
  --cpd-color-purple-100: #1a0055;
  --cpd-color-purple-200: #1c005a;
  --cpd-color-purple-300: #22006a;
  --cpd-color-purple-400: #2c0080;
  --cpd-color-purple-500: #3d009e;
  --cpd-color-purple-600: #4a0db1;
  --cpd-color-purple-700: #5a27c6;
  --cpd-color-purple-800: #7849ec;
  --cpd-color-purple-900: #9171f9;
  --cpd-color-purple-1000: #9e87fc;
  --cpd-color-purple-1100: #ad9cfe;
  --cpd-color-purple-1200: #c4baff;
  --cpd-color-purple-1300: #dedaff;
  --cpd-color-purple-1400: #eeebff;
  --cpd-color-fuchsia-100: #28003d;
  --cpd-color-fuchsia-200: #2e0044;
  --cpd-color-fuchsia-300: #37004e;
  --cpd-color-fuchsia-400: #46005e;
  --cpd-color-fuchsia-500: #560f6f;
  --cpd-color-fuchsia-600: #65177d;
  --cpd-color-fuchsia-700: #7d2394;
  --cpd-color-fuchsia-800: #aa36ba;
  --cpd-color-fuchsia-900: #c560cf;
  --cpd-color-fuchsia-1000: #cf78d7;
  --cpd-color-fuchsia-1100: #d991de;
  --cpd-color-fuchsia-1200: #e5b1e9;
  --cpd-color-fuchsia-1300: #f1d4f3;
  --cpd-color-fuchsia-1400: #f8e9f9;
  --cpd-color-pink-100: #37000f;
  --cpd-color-pink-200: #3c0012;
  --cpd-color-pink-300: #450018;
  --cpd-color-pink-400: #550024;
  --cpd-color-pink-500: #6d0036;
  --cpd-color-pink-600: #7c0c41;
  --cpd-color-pink-700: #99114f;
  --cpd-color-pink-800: #ce1865;
  --cpd-color-pink-900: #f4427d;
  --cpd-color-pink-1000: #fa658f;
  --cpd-color-pink-1100: #fe84a2;
  --cpd-color-pink-1200: #ffabbe;
  --cpd-color-pink-1300: #ffd2dc;
  --cpd-color-pink-1400: #ffe8ed;
  --cpd-color-alpha-gray-100: hsla(214, 10%, 86%, 0.02);
  --cpd-color-alpha-gray-200: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-300: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-400: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
  --cpd-color-alpha-gray-600: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-700: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-800: hsla(216, 100%, 94%, 0.41);
  --cpd-color-alpha-gray-900: hsla(211, 94%, 94%, 0.54);
  --cpd-color-alpha-gray-1000: hsla(213, 93%, 94%, 0.61);
  --cpd-color-alpha-gray-1100: hsla(215, 92%, 95%, 0.68);
  --cpd-color-alpha-gray-1200: hsla(215, 74%, 96%, 0.79);
  --cpd-color-alpha-gray-1300: hsla(213, 73%, 97%, 0.89);
  --cpd-color-alpha-gray-1400: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-red-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-red-600: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-700: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-800: hsla(357, 99%, 57%, 0.81);
  --cpd-color-alpha-red-900: hsl(1, 98%, 61%, 1);
  --cpd-color-alpha-red-1000: hsl(3, 100%, 68%, 1);
  --cpd-color-alpha-red-1100: hsl(5, 100%, 74%, 1);
  --cpd-color-alpha-red-1200: hsl(7, 100%, 82%, 1);
  --cpd-color-alpha-red-1300: hsl(8, 100%, 90%, 1);
  --cpd-color-alpha-red-1400: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-orange-600: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-700: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-800: hsla(21, 100%, 50%, 0.71);
  --cpd-color-alpha-orange-900: hsla(26, 99%, 52%, 0.85);
  --cpd-color-alpha-orange-1000: hsla(29, 99%, 53%, 0.92);
  --cpd-color-alpha-orange-1100: hsla(27, 98%, 62%, 0.97);
  --cpd-color-alpha-orange-1200: hsla(26, 97%, 75%, 0.99);
  --cpd-color-alpha-orange-1300: hsl(24, 100%, 86%, 1);
  --cpd-color-alpha-orange-1400: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-yellow-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-300: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-400: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-500: hsl(23, 100%, 18%, 1);
  --cpd-color-alpha-yellow-600: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-700: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-800: hsl(35, 100%, 31%, 1);
  --cpd-color-alpha-yellow-900: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-1000: hsl(41, 100%, 40%, 1);
  --cpd-color-alpha-yellow-1100: hsl(44, 100%, 43%, 1);
  --cpd-color-alpha-yellow-1200: hsla(46, 98%, 52%, 0.94);
  --cpd-color-alpha-yellow-1300: hsl(47, 99%, 67%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 5%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 12%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-700: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-800: hsla(112, 98%, 52%, 0.45);
  --cpd-color-alpha-lime-900: hsla(107, 98%, 57%, 0.58);
  --cpd-color-alpha-lime-1000: hsla(105, 97%, 58%, 0.66);
  --cpd-color-alpha-lime-1100: hsla(102, 98%, 60%, 0.74);
  --cpd-color-alpha-lime-1200: hsla(102, 100%, 68%, 0.84);
  --cpd-color-alpha-lime-1300: hsla(104, 100%, 84%, 0.92);
  --cpd-color-alpha-lime-1400: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-green-100: hsl(144, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-300: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-400: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-500: hsl(160, 100%, 12%, 1);
  --cpd-color-alpha-green-600: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-700: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-900: hsla(164, 98%, 53%, 0.58);
  --cpd-color-alpha-green-1000: hsla(163, 99%, 55%, 0.65);
  --cpd-color-alpha-green-1100: hsla(162, 98%, 57%, 0.74);
  --cpd-color-alpha-green-1200: hsla(156, 97%, 76%, 0.83);
  --cpd-color-alpha-green-1300: hsla(152, 93%, 88%, 0.91);
  --cpd-color-alpha-green-1400: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-cyan-100: hsl(225, 100%, 13%, 1);
  --cpd-color-alpha-cyan-200: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-300: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-400: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-500: hsl(210, 100%, 20%, 1);
  --cpd-color-alpha-cyan-600: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-700: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-800: hsla(200, 100%, 37%, 0.88);
  --cpd-color-alpha-cyan-900: hsl(194, 100%, 37%, 1);
  --cpd-color-alpha-cyan-1000: hsla(189, 100%, 44%, 0.88);
  --cpd-color-alpha-cyan-1100: hsla(186, 98%, 57%, 0.79);
  --cpd-color-alpha-cyan-1200: hsla(187, 100%, 77%, 0.85);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 89%, 0.92);
  --cpd-color-alpha-cyan-1400: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-blue-100: hsl(237, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-300: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-400: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-500: hsla(221, 100%, 37%, 0.63);
  --cpd-color-alpha-blue-600: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-700: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-800: hsla(214, 99%, 53%, 0.84);
  --cpd-color-alpha-blue-900: hsla(215, 98%, 63%, 0.92);
  --cpd-color-alpha-blue-1000: hsla(216, 99%, 69%, 0.94);
  --cpd-color-alpha-blue-1100: hsla(215, 97%, 74%, 0.96);
  --cpd-color-alpha-blue-1200: hsla(216, 100%, 82%, 0.97);
  --cpd-color-alpha-blue-1300: hsla(216, 96%, 90%, 0.99);
  --cpd-color-alpha-blue-1400: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-purple-100: hsl(258, 100%, 17%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-300: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-400: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-500: hsl(263, 100%, 31%, 1);
  --cpd-color-alpha-purple-600: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-700: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-800: hsla(257, 100%, 65%, 0.92);
  --cpd-color-alpha-purple-900: hsla(254, 99%, 72%, 0.98);
  --cpd-color-alpha-purple-1000: hsla(252, 98%, 77%, 0.99);
  --cpd-color-alpha-purple-1100: hsl(250, 98%, 80%, 1);
  --cpd-color-alpha-purple-1200: hsl(249, 100%, 87%, 1);
  --cpd-color-alpha-purple-1300: hsl(246, 100%, 93%, 1);
  --cpd-color-alpha-purple-1400: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(279, 100%, 12%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-400: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-500: hsla(287, 100%, 52%, 0.38);
  --cpd-color-alpha-fuchsia-600: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-700: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 63%, 0.71);
  --cpd-color-alpha-fuchsia-900: hsla(295, 97%, 72%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 98%, 78%, 0.83);
  --cpd-color-alpha-fuchsia-1100: hsla(297, 98%, 82%, 0.86);
  --cpd-color-alpha-fuchsia-1200: hsla(296, 97%, 88%, 0.91);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 100%, 94%, 0.95);
  --cpd-color-alpha-fuchsia-1400: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-pink-100: hsl(344, 100%, 11%, 1);
  --cpd-color-alpha-pink-200: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-300: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-400: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-500: hsl(330, 100%, 21%, 1);
  --cpd-color-alpha-pink-600: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-700: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-800: hsla(335, 99%, 55%, 0.8);
  --cpd-color-alpha-pink-900: hsla(340, 99%, 63%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(343, 100%, 70%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(345, 98%, 76%, 1);
  --cpd-color-alpha-pink-1200: hsl(346, 100%, 84%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 91%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 96%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-semantic {
.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: dark) {

        @layer cpd-semantic {
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-base {
.cpd-theme-dark-hc.cpd-theme-dark-hc {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #181a1f;
  --cpd-color-gray-200: #1d1f24;
  --cpd-color-gray-300: #26282d;
  --cpd-color-gray-400: #2b2e33;
  --cpd-color-gray-500: #3c3f44;
  --cpd-color-gray-600: #4a4f55;
  --cpd-color-gray-700: #606770;
  --cpd-color-gray-800: #79818d;
  --cpd-color-gray-900: #acb4bd;
  --cpd-color-gray-1000: #b8bfc7;
  --cpd-color-gray-1100: #c8ced5;
  --cpd-color-gray-1200: #d5dae1;
  --cpd-color-gray-1300: #ebeef2;
  --cpd-color-gray-1400: #f2f5f7;
  --cpd-color-red-100: #3e0000;
  --cpd-color-red-200: #470000;
  --cpd-color-red-300: #590000;
  --cpd-color-red-400: #640000;
  --cpd-color-red-500: #830009;
  --cpd-color-red-600: #9f0d1e;
  --cpd-color-red-700: #c81e28;
  --cpd-color-red-800: #f52f33;
  --cpd-color-red-900: #ff968c;
  --cpd-color-red-1000: #ffa79d;
  --cpd-color-red-1100: #ffbdb5;
  --cpd-color-red-1200: #ffcfc8;
  --cpd-color-red-1300: #ffe9e6;
  --cpd-color-red-1400: #fff2ef;
  --cpd-color-orange-100: #3c0000;
  --cpd-color-orange-200: #470000;
  --cpd-color-orange-300: #580000;
  --cpd-color-orange-400: #650000;
  --cpd-color-orange-500: #830500;
  --cpd-color-orange-600: #972206;
  --cpd-color-orange-700: #b44007;
  --cpd-color-orange-800: #d15f0b;
  --cpd-color-orange-900: #f89d58;
  --cpd-color-orange-1000: #faad73;
  --cpd-color-orange-1100: #fdc197;
  --cpd-color-orange-1200: #fed0b1;
  --cpd-color-orange-1300: #ffeadb;
  --cpd-color-orange-1400: #fff2ea;
  --cpd-color-yellow-100: #3a0300;
  --cpd-color-yellow-200: #410900;
  --cpd-color-yellow-300: #4c1400;
  --cpd-color-yellow-400: #541d00;
  --cpd-color-yellow-500: #682e03;
  --cpd-color-yellow-600: #7c3e02;
  --cpd-color-yellow-700: #985600;
  --cpd-color-yellow-800: #b47200;
  --cpd-color-yellow-900: #e3aa00;
  --cpd-color-yellow-1000: #ebb607;
  --cpd-color-yellow-1100: #f7c816;
  --cpd-color-yellow-1200: #fed632;
  --cpd-color-yellow-1300: #ffedb1;
  --cpd-color-yellow-1400: #fff4d0;
  --cpd-color-lime-100: #002000;
  --cpd-color-lime-200: #002600;
  --cpd-color-lime-300: #003000;
  --cpd-color-lime-400: #003700;
  --cpd-color-lime-500: #004a00;
  --cpd-color-lime-600: #005c00;
  --cpd-color-lime-700: #187611;
  --cpd-color-lime-800: #31941d;
  --cpd-color-lime-900: #5eca2f;
  --cpd-color-lime-1000: #6ad639;
  --cpd-color-lime-1100: #92e175;
  --cpd-color-lime-1200: #afe99a;
  --cpd-color-lime-1300: #daf6d0;
  --cpd-color-lime-1400: #e9f9e3;
  --cpd-color-green-100: #001f0e;
  --cpd-color-green-200: #002513;
  --cpd-color-green-300: #002e1b;
  --cpd-color-green-400: #003622;
  --cpd-color-green-500: #004832;
  --cpd-color-green-600: #005a43;
  --cpd-color-green-700: #00745c;
  --cpd-color-green-800: #109173;
  --cpd-color-green-900: #37c998;
  --cpd-color-green-1000: #61d2a6;
  --cpd-color-green-1100: #8fddbc;
  --cpd-color-green-1200: #ace6cc;
  --cpd-color-green-1300: #d9f4e7;
  --cpd-color-green-1400: #e9f8f1;
  --cpd-color-cyan-100: #001448;
  --cpd-color-cyan-200: #001b4e;
  --cpd-color-cyan-300: #002559;
  --cpd-color-cyan-400: #002d61;
  --cpd-color-cyan-500: #003f75;
  --cpd-color-cyan-600: #005188;
  --cpd-color-cyan-700: #006ca4;
  --cpd-color-cyan-800: #008aba;
  --cpd-color-cyan-900: #46c3d2;
  --cpd-color-cyan-1000: #6bccd9;
  --cpd-color-cyan-1100: #93d9e2;
  --cpd-color-cyan-1200: #afe2e9;
  --cpd-color-cyan-1300: #dbf2f5;
  --cpd-color-cyan-1400: #eaf7f9;
  --cpd-color-blue-100: #00095d;
  --cpd-color-blue-200: #001264;
  --cpd-color-blue-300: #001e6f;
  --cpd-color-blue-400: #032677;
  --cpd-color-blue-500: #083891;
  --cpd-color-blue-600: #0b49ab;
  --cpd-color-blue-700: #0e61d1;
  --cpd-color-blue-800: #337fe9;
  --cpd-color-blue-900: #89b5f6;
  --cpd-color-blue-1000: #9ac0f8;
  --cpd-color-blue-1100: #b2cffa;
  --cpd-color-blue-1200: #c5dbfc;
  --cpd-color-blue-1300: #e4eefe;
  --cpd-color-blue-1400: #eff5fe;
  --cpd-color-purple-100: #1c005a;
  --cpd-color-purple-200: #22006a;
  --cpd-color-purple-300: #2c0080;
  --cpd-color-purple-400: #350090;
  --cpd-color-purple-500: #4a0db1;
  --cpd-color-purple-600: #5a27c6;
  --cpd-color-purple-700: #7343e6;
  --cpd-color-purple-800: #8b66f8;
  --cpd-color-purple-900: #b6a7ff;
  --cpd-color-purple-1000: #c0b5ff;
  --cpd-color-purple-1100: #cec7ff;
  --cpd-color-purple-1200: #dad5ff;
  --cpd-color-purple-1300: #eeebff;
  --cpd-color-purple-1400: #f5f3ff;
  --cpd-color-fuchsia-100: #2e0044;
  --cpd-color-fuchsia-200: #37004e;
  --cpd-color-fuchsia-300: #46005e;
  --cpd-color-fuchsia-400: #4f0368;
  --cpd-color-fuchsia-500: #65177d;
  --cpd-color-fuchsia-600: #7d2394;
  --cpd-color-fuchsia-700: #a233b3;
  --cpd-color-fuchsia-800: #c153cb;
  --cpd-color-fuchsia-900: #dd9de3;
  --cpd-color-fuchsia-1000: #e3abe7;
  --cpd-color-fuchsia-1100: #eac0ed;
  --cpd-color-fuchsia-1200: #f0cff2;
  --cpd-color-fuchsia-1300: #f8e9f9;
  --cpd-color-fuchsia-1400: #fbf1fb;
  --cpd-color-pink-100: #3c0012;
  --cpd-color-pink-200: #450018;
  --cpd-color-pink-300: #550024;
  --cpd-color-pink-400: #61002d;
  --cpd-color-pink-500: #7c0c41;
  --cpd-color-pink-600: #99114f;
  --cpd-color-pink-700: #c51761;
  --cpd-color-pink-800: #f12c75;
  --cpd-color-pink-900: #ff92ac;
  --cpd-color-pink-1000: #ffa4b9;
  --cpd-color-pink-1100: #ffbbca;
  --cpd-color-pink-1200: #ffccd7;
  --cpd-color-pink-1300: #ffe8ed;
  --cpd-color-pink-1400: #fff1f4;
  --cpd-color-alpha-gray-100: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-200: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-300: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-400: hsla(227, 29%, 91%, 0.13);
  --cpd-color-alpha-gray-500: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-600: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-700: hsla(214, 79%, 93%, 0.39);
  --cpd-color-alpha-gray-800: hsla(216, 94%, 93%, 0.51);
  --cpd-color-alpha-gray-900: hsla(211, 91%, 96%, 0.72);
  --cpd-color-alpha-gray-1000: hsla(213, 100%, 97%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(212, 100%, 97%, 0.82);
  --cpd-color-alpha-gray-1200: hsla(217, 77%, 97%, 0.88);
  --cpd-color-alpha-gray-1300: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-gray-1400: hsla(204, 71%, 99%, 0.97);
  --cpd-color-alpha-red-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-500: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-600: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-700: hsla(357, 100%, 57%, 0.77);
  --cpd-color-alpha-red-800: hsla(359, 100%, 59%, 0.96);
  --cpd-color-alpha-red-900: hsl(5, 100%, 78%, 1);
  --cpd-color-alpha-red-1000: hsl(6, 100%, 81%, 1);
  --cpd-color-alpha-red-1100: hsl(6, 100%, 86%, 1);
  --cpd-color-alpha-red-1200: hsl(8, 100%, 89%, 1);
  --cpd-color-alpha-red-1300: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-red-1400: hsl(11, 100%, 97%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-500: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-600: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-700: hsla(20, 100%, 49%, 0.7);
  --cpd-color-alpha-orange-800: hsla(26, 99%, 51%, 0.81);
  --cpd-color-alpha-orange-900: hsla(26, 98%, 67%, 0.98);
  --cpd-color-alpha-orange-1000: hsla(26, 100%, 73%, 0.98);
  --cpd-color-alpha-orange-1100: hsl(25, 96%, 79%, 1);
  --cpd-color-alpha-orange-1200: hsl(24, 98%, 85%, 1);
  --cpd-color-alpha-orange-1300: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-orange-1400: hsl(23, 100%, 96%, 1);
  --cpd-color-alpha-yellow-100: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-300: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-400: hsl(21, 100%, 17%, 1);
  --cpd-color-alpha-yellow-500: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-600: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-700: hsl(34, 100%, 30%, 1);
  --cpd-color-alpha-yellow-800: hsl(38, 100%, 35%, 1);
  --cpd-color-alpha-yellow-900: hsl(45, 100%, 45%, 1);
  --cpd-color-alpha-yellow-1000: hsla(46, 99%, 51%, 0.92);
  --cpd-color-alpha-yellow-1100: hsla(48, 99%, 54%, 0.97);
  --cpd-color-alpha-yellow-1200: hsl(48, 99%, 60%, 1);
  --cpd-color-alpha-yellow-1300: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 91%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-700: hsla(114, 100%, 52%, 0.42);
  --cpd-color-alpha-lime-800: hsla(109, 99%, 57%, 0.55);
  --cpd-color-alpha-lime-900: hsla(101, 99%, 60%, 0.78);
  --cpd-color-alpha-lime-1000: hsla(101, 99%, 62%, 0.83);
  --cpd-color-alpha-lime-1100: hsla(103, 97%, 75%, 0.88);
  --cpd-color-alpha-lime-1200: hsla(103, 98%, 83%, 0.91);
  --cpd-color-alpha-lime-1300: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-lime-1400: hsla(104, 92%, 95%, 0.98);
  --cpd-color-alpha-green-100: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-300: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-400: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-500: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-600: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-700: hsl(168, 100%, 23%, 1);
  --cpd-color-alpha-green-800: hsla(165, 98%, 53%, 0.54);
  --cpd-color-alpha-green-900: hsla(159, 97%, 62%, 0.78);
  --cpd-color-alpha-green-1000: hsla(156, 100%, 73%, 0.81);
  --cpd-color-alpha-green-1100: hsla(154, 98%, 82%, 0.86);
  --cpd-color-alpha-green-1200: hsla(153, 94%, 87%, 0.9);
  --cpd-color-alpha-green-1300: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-green-1400: hsla(150, 80%, 96%, 0.98);
  --cpd-color-alpha-cyan-100: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-200: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-300: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-400: hsl(212, 100%, 19%, 1);
  --cpd-color-alpha-cyan-500: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-600: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-700: hsl(200, 100%, 32%, 1);
  --cpd-color-alpha-cyan-800: hsl(195, 100%, 37%, 1);
  --cpd-color-alpha-cyan-900: hsla(186, 99%, 66%, 0.81);
  --cpd-color-alpha-cyan-1000: hsla(187, 99%, 74%, 0.84);
  --cpd-color-alpha-cyan-1100: hsla(187, 98%, 82%, 0.88);
  --cpd-color-alpha-cyan-1200: hsla(188, 97%, 87%, 0.91);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-cyan-1400: hsla(187, 89%, 97%, 0.98);
  --cpd-color-alpha-blue-100: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-300: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-400: hsla(222, 100%, 28%, 0.82);
  --cpd-color-alpha-blue-500: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-600: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 52%, 0.81);
  --cpd-color-alpha-blue-800: hsla(215, 99%, 60%, 0.91);
  --cpd-color-alpha-blue-900: hsla(216, 97%, 77%, 0.97);
  --cpd-color-alpha-blue-1000: hsla(216, 100%, 81%, 0.97);
  --cpd-color-alpha-blue-1100: hsla(216, 100%, 86%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(216, 97%, 89%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-blue-1400: hsl(216, 88%, 97%, 1);
  --cpd-color-alpha-purple-100: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-300: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-400: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-500: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-600: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-700: hsla(258, 98%, 64%, 0.9);
  --cpd-color-alpha-purple-800: hsla(255, 100%, 71%, 0.97);
  --cpd-color-alpha-purple-900: hsl(250, 100%, 83%, 1);
  --cpd-color-alpha-purple-1000: hsl(249, 100%, 86%, 1);
  --cpd-color-alpha-purple-1100: hsl(248, 100%, 89%, 1);
  --cpd-color-alpha-purple-1200: hsl(247, 100%, 92%, 1);
  --cpd-color-alpha-purple-1300: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-purple-1400: hsl(250, 100%, 98%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-400: hsla(286, 100%, 23%, 0.85);
  --cpd-color-alpha-fuchsia-500: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-600: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-700: hsla(293, 97%, 62%, 0.68);
  --cpd-color-alpha-fuchsia-800: hsla(296, 99%, 70%, 0.78);
  --cpd-color-alpha-fuchsia-900: hsla(295, 100%, 85%, 0.88);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 97%, 87%, 0.9);
  --cpd-color-alpha-fuchsia-1100: hsla(296, 92%, 90%, 0.93);
  --cpd-color-alpha-fuchsia-1200: hsla(297, 95%, 92%, 0.95);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-fuchsia-1400: hsla(300, 71%, 97%, 0.99);
  --cpd-color-alpha-pink-100: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-200: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-300: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-400: hsl(332, 100%, 19%, 1);
  --cpd-color-alpha-pink-500: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-600: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-700: hsla(335, 99%, 55%, 0.76);
  --cpd-color-alpha-pink-800: hsla(338, 98%, 58%, 0.95);
  --cpd-color-alpha-pink-900: hsl(346, 100%, 79%, 1);
  --cpd-color-alpha-pink-1000: hsl(346, 100%, 82%, 1);
  --cpd-color-alpha-pink-1100: hsl(347, 100%, 87%, 1);
  --cpd-color-alpha-pink-1200: hsl(347, 100%, 90%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 96%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 97%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: dark) and (prefers-contrast: more) {

        @layer cpd-base {
:root {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #181a1f;
  --cpd-color-gray-200: #1d1f24;
  --cpd-color-gray-300: #26282d;
  --cpd-color-gray-400: #2b2e33;
  --cpd-color-gray-500: #3c3f44;
  --cpd-color-gray-600: #4a4f55;
  --cpd-color-gray-700: #606770;
  --cpd-color-gray-800: #79818d;
  --cpd-color-gray-900: #acb4bd;
  --cpd-color-gray-1000: #b8bfc7;
  --cpd-color-gray-1100: #c8ced5;
  --cpd-color-gray-1200: #d5dae1;
  --cpd-color-gray-1300: #ebeef2;
  --cpd-color-gray-1400: #f2f5f7;
  --cpd-color-red-100: #3e0000;
  --cpd-color-red-200: #470000;
  --cpd-color-red-300: #590000;
  --cpd-color-red-400: #640000;
  --cpd-color-red-500: #830009;
  --cpd-color-red-600: #9f0d1e;
  --cpd-color-red-700: #c81e28;
  --cpd-color-red-800: #f52f33;
  --cpd-color-red-900: #ff968c;
  --cpd-color-red-1000: #ffa79d;
  --cpd-color-red-1100: #ffbdb5;
  --cpd-color-red-1200: #ffcfc8;
  --cpd-color-red-1300: #ffe9e6;
  --cpd-color-red-1400: #fff2ef;
  --cpd-color-orange-100: #3c0000;
  --cpd-color-orange-200: #470000;
  --cpd-color-orange-300: #580000;
  --cpd-color-orange-400: #650000;
  --cpd-color-orange-500: #830500;
  --cpd-color-orange-600: #972206;
  --cpd-color-orange-700: #b44007;
  --cpd-color-orange-800: #d15f0b;
  --cpd-color-orange-900: #f89d58;
  --cpd-color-orange-1000: #faad73;
  --cpd-color-orange-1100: #fdc197;
  --cpd-color-orange-1200: #fed0b1;
  --cpd-color-orange-1300: #ffeadb;
  --cpd-color-orange-1400: #fff2ea;
  --cpd-color-yellow-100: #3a0300;
  --cpd-color-yellow-200: #410900;
  --cpd-color-yellow-300: #4c1400;
  --cpd-color-yellow-400: #541d00;
  --cpd-color-yellow-500: #682e03;
  --cpd-color-yellow-600: #7c3e02;
  --cpd-color-yellow-700: #985600;
  --cpd-color-yellow-800: #b47200;
  --cpd-color-yellow-900: #e3aa00;
  --cpd-color-yellow-1000: #ebb607;
  --cpd-color-yellow-1100: #f7c816;
  --cpd-color-yellow-1200: #fed632;
  --cpd-color-yellow-1300: #ffedb1;
  --cpd-color-yellow-1400: #fff4d0;
  --cpd-color-lime-100: #002000;
  --cpd-color-lime-200: #002600;
  --cpd-color-lime-300: #003000;
  --cpd-color-lime-400: #003700;
  --cpd-color-lime-500: #004a00;
  --cpd-color-lime-600: #005c00;
  --cpd-color-lime-700: #187611;
  --cpd-color-lime-800: #31941d;
  --cpd-color-lime-900: #5eca2f;
  --cpd-color-lime-1000: #6ad639;
  --cpd-color-lime-1100: #92e175;
  --cpd-color-lime-1200: #afe99a;
  --cpd-color-lime-1300: #daf6d0;
  --cpd-color-lime-1400: #e9f9e3;
  --cpd-color-green-100: #001f0e;
  --cpd-color-green-200: #002513;
  --cpd-color-green-300: #002e1b;
  --cpd-color-green-400: #003622;
  --cpd-color-green-500: #004832;
  --cpd-color-green-600: #005a43;
  --cpd-color-green-700: #00745c;
  --cpd-color-green-800: #109173;
  --cpd-color-green-900: #37c998;
  --cpd-color-green-1000: #61d2a6;
  --cpd-color-green-1100: #8fddbc;
  --cpd-color-green-1200: #ace6cc;
  --cpd-color-green-1300: #d9f4e7;
  --cpd-color-green-1400: #e9f8f1;
  --cpd-color-cyan-100: #001448;
  --cpd-color-cyan-200: #001b4e;
  --cpd-color-cyan-300: #002559;
  --cpd-color-cyan-400: #002d61;
  --cpd-color-cyan-500: #003f75;
  --cpd-color-cyan-600: #005188;
  --cpd-color-cyan-700: #006ca4;
  --cpd-color-cyan-800: #008aba;
  --cpd-color-cyan-900: #46c3d2;
  --cpd-color-cyan-1000: #6bccd9;
  --cpd-color-cyan-1100: #93d9e2;
  --cpd-color-cyan-1200: #afe2e9;
  --cpd-color-cyan-1300: #dbf2f5;
  --cpd-color-cyan-1400: #eaf7f9;
  --cpd-color-blue-100: #00095d;
  --cpd-color-blue-200: #001264;
  --cpd-color-blue-300: #001e6f;
  --cpd-color-blue-400: #032677;
  --cpd-color-blue-500: #083891;
  --cpd-color-blue-600: #0b49ab;
  --cpd-color-blue-700: #0e61d1;
  --cpd-color-blue-800: #337fe9;
  --cpd-color-blue-900: #89b5f6;
  --cpd-color-blue-1000: #9ac0f8;
  --cpd-color-blue-1100: #b2cffa;
  --cpd-color-blue-1200: #c5dbfc;
  --cpd-color-blue-1300: #e4eefe;
  --cpd-color-blue-1400: #eff5fe;
  --cpd-color-purple-100: #1c005a;
  --cpd-color-purple-200: #22006a;
  --cpd-color-purple-300: #2c0080;
  --cpd-color-purple-400: #350090;
  --cpd-color-purple-500: #4a0db1;
  --cpd-color-purple-600: #5a27c6;
  --cpd-color-purple-700: #7343e6;
  --cpd-color-purple-800: #8b66f8;
  --cpd-color-purple-900: #b6a7ff;
  --cpd-color-purple-1000: #c0b5ff;
  --cpd-color-purple-1100: #cec7ff;
  --cpd-color-purple-1200: #dad5ff;
  --cpd-color-purple-1300: #eeebff;
  --cpd-color-purple-1400: #f5f3ff;
  --cpd-color-fuchsia-100: #2e0044;
  --cpd-color-fuchsia-200: #37004e;
  --cpd-color-fuchsia-300: #46005e;
  --cpd-color-fuchsia-400: #4f0368;
  --cpd-color-fuchsia-500: #65177d;
  --cpd-color-fuchsia-600: #7d2394;
  --cpd-color-fuchsia-700: #a233b3;
  --cpd-color-fuchsia-800: #c153cb;
  --cpd-color-fuchsia-900: #dd9de3;
  --cpd-color-fuchsia-1000: #e3abe7;
  --cpd-color-fuchsia-1100: #eac0ed;
  --cpd-color-fuchsia-1200: #f0cff2;
  --cpd-color-fuchsia-1300: #f8e9f9;
  --cpd-color-fuchsia-1400: #fbf1fb;
  --cpd-color-pink-100: #3c0012;
  --cpd-color-pink-200: #450018;
  --cpd-color-pink-300: #550024;
  --cpd-color-pink-400: #61002d;
  --cpd-color-pink-500: #7c0c41;
  --cpd-color-pink-600: #99114f;
  --cpd-color-pink-700: #c51761;
  --cpd-color-pink-800: #f12c75;
  --cpd-color-pink-900: #ff92ac;
  --cpd-color-pink-1000: #ffa4b9;
  --cpd-color-pink-1100: #ffbbca;
  --cpd-color-pink-1200: #ffccd7;
  --cpd-color-pink-1300: #ffe8ed;
  --cpd-color-pink-1400: #fff1f4;
  --cpd-color-alpha-gray-100: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-200: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-300: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-400: hsla(227, 29%, 91%, 0.13);
  --cpd-color-alpha-gray-500: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-600: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-700: hsla(214, 79%, 93%, 0.39);
  --cpd-color-alpha-gray-800: hsla(216, 94%, 93%, 0.51);
  --cpd-color-alpha-gray-900: hsla(211, 91%, 96%, 0.72);
  --cpd-color-alpha-gray-1000: hsla(213, 100%, 97%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(212, 100%, 97%, 0.82);
  --cpd-color-alpha-gray-1200: hsla(217, 77%, 97%, 0.88);
  --cpd-color-alpha-gray-1300: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-gray-1400: hsla(204, 71%, 99%, 0.97);
  --cpd-color-alpha-red-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-500: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-600: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-700: hsla(357, 100%, 57%, 0.77);
  --cpd-color-alpha-red-800: hsla(359, 100%, 59%, 0.96);
  --cpd-color-alpha-red-900: hsl(5, 100%, 78%, 1);
  --cpd-color-alpha-red-1000: hsl(6, 100%, 81%, 1);
  --cpd-color-alpha-red-1100: hsl(6, 100%, 86%, 1);
  --cpd-color-alpha-red-1200: hsl(8, 100%, 89%, 1);
  --cpd-color-alpha-red-1300: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-red-1400: hsl(11, 100%, 97%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-500: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-600: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-700: hsla(20, 100%, 49%, 0.7);
  --cpd-color-alpha-orange-800: hsla(26, 99%, 51%, 0.81);
  --cpd-color-alpha-orange-900: hsla(26, 98%, 67%, 0.98);
  --cpd-color-alpha-orange-1000: hsla(26, 100%, 73%, 0.98);
  --cpd-color-alpha-orange-1100: hsl(25, 96%, 79%, 1);
  --cpd-color-alpha-orange-1200: hsl(24, 98%, 85%, 1);
  --cpd-color-alpha-orange-1300: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-orange-1400: hsl(23, 100%, 96%, 1);
  --cpd-color-alpha-yellow-100: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-300: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-400: hsl(21, 100%, 17%, 1);
  --cpd-color-alpha-yellow-500: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-600: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-700: hsl(34, 100%, 30%, 1);
  --cpd-color-alpha-yellow-800: hsl(38, 100%, 35%, 1);
  --cpd-color-alpha-yellow-900: hsl(45, 100%, 45%, 1);
  --cpd-color-alpha-yellow-1000: hsla(46, 99%, 51%, 0.92);
  --cpd-color-alpha-yellow-1100: hsla(48, 99%, 54%, 0.97);
  --cpd-color-alpha-yellow-1200: hsl(48, 99%, 60%, 1);
  --cpd-color-alpha-yellow-1300: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 91%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-700: hsla(114, 100%, 52%, 0.42);
  --cpd-color-alpha-lime-800: hsla(109, 99%, 57%, 0.55);
  --cpd-color-alpha-lime-900: hsla(101, 99%, 60%, 0.78);
  --cpd-color-alpha-lime-1000: hsla(101, 99%, 62%, 0.83);
  --cpd-color-alpha-lime-1100: hsla(103, 97%, 75%, 0.88);
  --cpd-color-alpha-lime-1200: hsla(103, 98%, 83%, 0.91);
  --cpd-color-alpha-lime-1300: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-lime-1400: hsla(104, 92%, 95%, 0.98);
  --cpd-color-alpha-green-100: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-300: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-400: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-500: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-600: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-700: hsl(168, 100%, 23%, 1);
  --cpd-color-alpha-green-800: hsla(165, 98%, 53%, 0.54);
  --cpd-color-alpha-green-900: hsla(159, 97%, 62%, 0.78);
  --cpd-color-alpha-green-1000: hsla(156, 100%, 73%, 0.81);
  --cpd-color-alpha-green-1100: hsla(154, 98%, 82%, 0.86);
  --cpd-color-alpha-green-1200: hsla(153, 94%, 87%, 0.9);
  --cpd-color-alpha-green-1300: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-green-1400: hsla(150, 80%, 96%, 0.98);
  --cpd-color-alpha-cyan-100: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-200: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-300: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-400: hsl(212, 100%, 19%, 1);
  --cpd-color-alpha-cyan-500: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-600: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-700: hsl(200, 100%, 32%, 1);
  --cpd-color-alpha-cyan-800: hsl(195, 100%, 37%, 1);
  --cpd-color-alpha-cyan-900: hsla(186, 99%, 66%, 0.81);
  --cpd-color-alpha-cyan-1000: hsla(187, 99%, 74%, 0.84);
  --cpd-color-alpha-cyan-1100: hsla(187, 98%, 82%, 0.88);
  --cpd-color-alpha-cyan-1200: hsla(188, 97%, 87%, 0.91);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-cyan-1400: hsla(187, 89%, 97%, 0.98);
  --cpd-color-alpha-blue-100: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-300: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-400: hsla(222, 100%, 28%, 0.82);
  --cpd-color-alpha-blue-500: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-600: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 52%, 0.81);
  --cpd-color-alpha-blue-800: hsla(215, 99%, 60%, 0.91);
  --cpd-color-alpha-blue-900: hsla(216, 97%, 77%, 0.97);
  --cpd-color-alpha-blue-1000: hsla(216, 100%, 81%, 0.97);
  --cpd-color-alpha-blue-1100: hsla(216, 100%, 86%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(216, 97%, 89%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-blue-1400: hsl(216, 88%, 97%, 1);
  --cpd-color-alpha-purple-100: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-300: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-400: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-500: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-600: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-700: hsla(258, 98%, 64%, 0.9);
  --cpd-color-alpha-purple-800: hsla(255, 100%, 71%, 0.97);
  --cpd-color-alpha-purple-900: hsl(250, 100%, 83%, 1);
  --cpd-color-alpha-purple-1000: hsl(249, 100%, 86%, 1);
  --cpd-color-alpha-purple-1100: hsl(248, 100%, 89%, 1);
  --cpd-color-alpha-purple-1200: hsl(247, 100%, 92%, 1);
  --cpd-color-alpha-purple-1300: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-purple-1400: hsl(250, 100%, 98%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-400: hsla(286, 100%, 23%, 0.85);
  --cpd-color-alpha-fuchsia-500: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-600: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-700: hsla(293, 97%, 62%, 0.68);
  --cpd-color-alpha-fuchsia-800: hsla(296, 99%, 70%, 0.78);
  --cpd-color-alpha-fuchsia-900: hsla(295, 100%, 85%, 0.88);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 97%, 87%, 0.9);
  --cpd-color-alpha-fuchsia-1100: hsla(296, 92%, 90%, 0.93);
  --cpd-color-alpha-fuchsia-1200: hsla(297, 95%, 92%, 0.95);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-fuchsia-1400: hsla(300, 71%, 97%, 0.99);
  --cpd-color-alpha-pink-100: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-200: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-300: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-400: hsl(332, 100%, 19%, 1);
  --cpd-color-alpha-pink-500: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-600: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-700: hsla(335, 99%, 55%, 0.76);
  --cpd-color-alpha-pink-800: hsla(338, 98%, 58%, 0.95);
  --cpd-color-alpha-pink-900: hsl(346, 100%, 79%, 1);
  --cpd-color-alpha-pink-1000: hsl(346, 100%, 82%, 1);
  --cpd-color-alpha-pink-1100: hsl(347, 100%, 87%, 1);
  --cpd-color-alpha-pink-1200: hsl(347, 100%, 90%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 96%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 97%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
        }
    }
}

@layer compound {

    @media screen {

        @layer cpd-semantic {
.cpd-theme-dark-hc.cpd-theme-dark-hc {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

@layer compound {

    @media screen and (prefers-color-scheme: dark) and (prefers-contrast: more) {

        @layer cpd-semantic {
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
        }
    }
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* TODO: Review entire file for semantic token definiton */

._alert_zx76t_10 {
  container-type: inline-size;
  container-name: alert;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: var(--cpd-space-3x);
  padding: var(--cpd-space-4x);
  border-radius: 8px;
  border: 1px solid;
}

._alert_zx76t_10[data-type="success"] {
  background-color: var(--cpd-color-green-200);
  border-color: var(--cpd-color-green-500);
}

._alert_zx76t_10[data-type="critical"] {
  background-color: var(--cpd-color-red-200);
  border-color: var(--cpd-color-red-500);
}

._alert_zx76t_10[data-type="info"] {
  background-color: var(--cpd-color-blue-200);
  border-color: var(--cpd-color-blue-500);
}

._content_zx76t_37 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--cpd-space-3x);
}

._text-content_zx76t_44 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}

[data-type="success"] :is(._title_zx76t_48, ._icon_zx76t_48) {
  color: var(--cpd-color-green-900);
}

[data-type="critical"] :is(._title_zx76t_48, ._icon_zx76t_48) {
  color: var(--cpd-color-red-900);
}

[data-type="info"] :is(._title_zx76t_48, ._icon_zx76t_48) {
  color: var(--cpd-color-blue-900);
}

._alert_zx76t_10 p {
  margin: 0;
}

._actions_zx76t_64 {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--cpd-space-1x);
  -ms-flex-item-align: center;
      align-self: center;
}

._icon_zx76t_48 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* @TODO 600px break should be a token */

/* wrap actions into a stacked layout when the alert is <=600px */

@container alert (max-width: 600px) {
  ._content_zx76t_37 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  ._text-content_zx76t_44 {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
  }
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/**
 * Font – Body – Extra Small
 */

._font-body-xs-regular_6v6n8_12 {
  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
  font: var(--cpd-font-body-xs-regular);
}

._font-body-xs-semibold_6v6n8_17 {
  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
  font: var(--cpd-font-body-xs-semibold);
}

._font-body-xs-medium_6v6n8_22 {
  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
  font: var(--cpd-font-body-xs-medium);
}

/**
 * Font – Body – Small
 */

._font-body-sm-regular_6v6n8_31 {
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  font: var(--cpd-font-body-sm-regular);
}

._font-body-sm-semibold_6v6n8_36 {
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  font: var(--cpd-font-body-sm-semibold);
}

._font-body-sm-medium_6v6n8_41 {
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  font: var(--cpd-font-body-sm-medium);
}

/**
 * Font – Body – Medium
 */

._font-body-md-regular_6v6n8_50 {
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
  font: var(--cpd-font-body-md-regular);
}

._font-body-md-semibold_6v6n8_55 {
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
  font: var(--cpd-font-body-md-semibold);
}

._font-body-md-medium_6v6n8_60 {
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
  font: var(--cpd-font-body-md-medium);
}

/**
 * Font – Body – Large
 */

._font-body-lg-regular_6v6n8_69 {
  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
  font: var(--cpd-font-body-lg-regular);
}

._font-body-lg-semibold_6v6n8_74 {
  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
  font: var(--cpd-font-body-lg-semibold);
}

._font-body-lg-medium_6v6n8_79 {
  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
  font: var(--cpd-font-body-lg-medium);
}

/**
 * Font – Heading – Small
 */

._font-heading-sm-regular_6v6n8_88 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
  font: var(--cpd-font-heading-sm-regular);
}

._font-heading-sm-semibold_6v6n8_93 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
  font: var(--cpd-font-heading-sm-semibold);
}

._font-heading-sm-medium_6v6n8_98 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
  font: var(--cpd-font-heading-sm-medium);
}

/**
 * Font – Heading – Medium
 */

._font-heading-md-regular_6v6n8_107 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
  font: var(--cpd-font-heading-md-regular);
}

._font-heading-md-semibold_6v6n8_112 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
  font: var(--cpd-font-heading-md-semibold);
}

/**
 * Font – Heading – Large
 */

._font-heading-lg-regular_6v6n8_121 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
  font: var(--cpd-font-heading-lg-regular);
}

._font-heading-lg-semibold_6v6n8_126 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
  font: var(--cpd-font-heading-lg-semibold);
}

/**
 * Font – Heading – Extra Large
 */

._font-heading-xl-regular_6v6n8_135 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
  font: var(--cpd-font-heading-xl-regular);
}

._font-heading-xl-semibold_6v6n8_140 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
  font: var(--cpd-font-heading-xl-semibold);
}

/**
  * Reset font-feature-settings after letter-spacing has been tweaked.
  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
  * We need to tweak the `letter-spacing` property and doing so, disables by
  * default the optional ligatures
  * `font-feature-settings` allows us to override this behaviour and have the
  * correct ligatures and the proper dynamic metric spacing.
  */

._typography_6v6n8_153 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
          font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: var(--cpd-font-feature-settings);
          font-feature-settings: var(--cpd-font-feature-settings);
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._icon-button_1pz9o_8 {
  --cpd-icon-button-indicator-border-size: calc(
    var(--cpd-icon-button-size) * 0.0625
  );

  inline-size: var(--cpd-icon-button-size);
  block-size: var(--cpd-icon-button-size);

  /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
  padding: calc(var(--cpd-icon-button-size) * 0.125);
  aspect-ratio: 1 / 1;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  background: transparent;
  line-height: 0px;
}

._icon-button_1pz9o_8[data-kind="primary"] * {
    color: var(--cpd-color-icon-tertiary);
  }

._icon-button_1pz9o_8[data-kind="secondary"] {
  background: var(--cpd-color-bg-subtle-secondary);
}

._icon-button_1pz9o_8[data-kind="secondary"] * {
    color: var(--cpd-color-icon-secondary);
  }

._no-background_1pz9o_42[data-kind="secondary"] {
  background: transparent;
}

._icon-button_1pz9o_8[aria-disabled="true"] {
  cursor: not-allowed;
}

._icon-button_1pz9o_8[aria-disabled="true"] * {
    color: var(--cpd-color-icon-disabled);
  }

/**
 * Hover state
 */

@media (hover) {
  ._icon-button_1pz9o_8:not([aria-disabled="true"]):hover {
    background: var(--cpd-color-bg-subtle-primary);
  }

    ._icon-button_1pz9o_8:not([aria-disabled="true"]):hover * {
      color: var(--cpd-color-icon-primary);
    }
}

._icon-button_1pz9o_8:not([aria-disabled="true"]):active {
  background: var(--cpd-color-bg-subtle-primary);
}

._icon-button_1pz9o_8:not([aria-disabled="true"]):active * {
    color: var(--cpd-color-icon-primary);
  }

@media (hover) {
  ._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
    /* Same colour as the background */
    border: var(--cpd-icon-button-indicator-border-size) solid
      var(--cpd-color-bg-subtle-primary);
    inset-block-start: 0;
    inset-inline-end: 0;
  }
}

._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
  /* Same colour as the background */
  border: var(--cpd-icon-button-indicator-border-size) solid
    var(--cpd-color-bg-subtle-primary);
  inset-block-start: 0;
  inset-inline-end: 0;
}

@media (hover) {
  ._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95:hover {
    background: var(--cpd-color-bg-critical-subtle-hovered);
    outline: 1px solid var(--cpd-color-border-critical-subtle);
  }
}

._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95 * {
    color: var(--cpd-color-icon-critical-primary);
  }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * Note this is very closely coupled to the indicator mask SVG as this masks out
 * the icon behind to draw the 'stroke' around the indicator dot.
 *
 * The SVG is a 24x24px black square with a circle of radius 6 positioned
 * 4px above and to the right of the canvas. This is the size of the indicator
 * dot plus the stroke (dimensions calculated from the figma).
 */

._indicator-icon_zr2a0_17 {
  /* This is called 'button size' but the docs say 'icon size' */
  inline-size: var(--cpd-icon-button-size);
  block-size: var(--cpd-icon-button-size);
  aspect-ratio: 1 / 1;
  color: var(--cpd-color-icon-tertiary);
  position: relative;
}

._indicator-icon_zr2a0_17 svg {
  inline-size: 100%;
  block-size: 100%;
}

._indicator-icon_zr2a0_17[data-indicator] svg {
  -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m0%200v24h24v-16.359a6%206%200%200%201-2%200.35938%206%206%200%200%201-6-6%206%206%200%200%201%200.35938-2h-16.359z'%20fill='%23000'%20stroke-width='0'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m0%200v24h24v-16.359a6%206%200%200%201-2%200.35938%206%206%200%200%201-6-6%206%206%200%200%201%200.35938-2h-16.359z'%20fill='%23000'%20stroke-width='0'/%3e%3c/svg%3e");
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}

._indicator-icon_zr2a0_17[data-indicator]::before {
  content: "";
  position: absolute;

  /* The dot is 1/12th above & to the right of the canvas */
  inset-block-start: -8.3333%;
  inset-inline-end: -8.3333%;

  /* and is 1/3rd the size of the canvas */
  inline-size: 33.3333%;
  block-size: 33.333%;
  border-radius: 50%;
  background: var(--cpd-color-icon-primary);
}

._indicator-icon_zr2a0_17[data-indicator="success"]::before {
  background: var(--cpd-color-icon-success-primary);
}

._indicator-icon_zr2a0_17[data-indicator="critical"]::before {
  background: var(--cpd-color-icon-critical-primary);
}

/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._tooltip_6ode6_8 {
  font: var(--cpd-font-body-xs-medium);
  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
  background: var(--cpd-color-alpha-gray-1400);
  color: var(--cpd-color-text-on-solid-primary);
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  cursor: pointer;
}

._tooltip_6ode6_8._invisible_6ode6_21 {
  /* Hide the tooltip in a way that allows it to act as an accessible label,
  even when invisible */
  clip-path: inset(50%);
  pointer-events: none;
}

._caption_6ode6_28 {
  font-weight: var(--cpd-font-weight-regular);
  color: var(--cpd-color-text-secondary);
}

._arrow_6ode6_33 {
  /* same color as the tooltip background */
  fill: var(--cpd-color-alpha-gray-1400);
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._avatar_1qbcf_8 {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: var(--cpd-avatar-size);
  text-align: center;
  font-size: min(calc(var(--cpd-avatar-size) * 0.5625), 60px);
  text-transform: uppercase;
  speak: none; /* stylelint-disable-line declaration-property-value-no-unknown */
  font-family: var(--cpd-font-family-sans);
  font-weight: bold;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  /* Set a background color to help with visual consistency when displaying
   * avatars with a translucent background */
  background: var(--cpd-color-bg-canvas-default);
}

button._avatar_1qbcf_8 {
  /**
   * The avatar can be a button element, we need to reset its style
   */
  padding: 0;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

button._avatar_1qbcf_8:disabled {
  cursor: not-allowed;
}

._avatar_1qbcf_8,
._image_1qbcf_41 {
  aspect-ratio: 1 / 1;
  inline-size: var(--cpd-avatar-size);
  border-radius: var(--cpd-avatar-radius);
}

._image_1qbcf_41 {
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

._avatar-imageless_1qbcf_52 {
  /* In the future we'd prefer to pass the HEX code as the data attr
     and use `attr(data-color)` to avoid the style declaration from below
     but this is currently not supported in all browsers */
  background: var(--cpd-avatar-bg);
  color: var(--cpd-avatar-color);
}

._avatar_1qbcf_8[data-color] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
  --cpd-avatar-color: var(--cpd-color-text-decorative-1);
}

._avatar_1qbcf_8[data-color="2"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
  --cpd-avatar-color: var(--cpd-color-text-decorative-2);
}

._avatar_1qbcf_8[data-color="3"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
  --cpd-avatar-color: var(--cpd-color-text-decorative-3);
}

._avatar_1qbcf_8[data-color="4"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
  --cpd-avatar-color: var(--cpd-color-text-decorative-4);
}

._avatar_1qbcf_8[data-color="5"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
  --cpd-avatar-color: var(--cpd-color-text-decorative-5);
}

._avatar_1qbcf_8[data-color="6"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
  --cpd-avatar-color: var(--cpd-color-text-decorative-6);
}

._avatar_1qbcf_8[data-type="round"] {
  --cpd-avatar-radius: 50%;
}

._avatar_1qbcf_8[data-type="square"] {
  --cpd-avatar-radius: 25%;
}

/**
 * Stacked avatars 
 */

._stacked-avatars_1qbcf_102::after {
  content: "";
  display: table;
  clear: both;
}

._stacked-avatars_1qbcf_102 ._avatar_1qbcf_8 {
  float: inline-start;
}

._stacked-avatars_1qbcf_102 ._avatar_1qbcf_8:not(:last-child) {
  /* injected in the document from AvatarStack.tsx */
  clip-path: url("#cpdAvatarClip");
}

._stacked-avatars_1qbcf_102 > *:not(:first-child) {
  -webkit-margin-start: calc(var(--cpd-avatar-size) * -0.2);
          margin-inline-start: calc(var(--cpd-avatar-size) * -0.2);
}

._clip-path_1qbcf_121 {
  /* In theory the SVG is invisible, but we still need to ensure it doesn't
  affect the page's layout or otherwise make an appearance */
  position: fixed;
  inset-inline-start: -9999px;
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._badge_1t12g_8 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: var(--cpd-space-1x);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 9999px; /* pill effect */
  padding: var(--cpd-space-1x) var(--cpd-space-3x);
}

._badge_1t12g_8[data-kind="default"] {
  border: 1px solid var(--cpd-color-alpha-gray-400);
  color: var(--cpd-color-gray-1100);
}

._badge_1t12g_8[data-kind="grey"] {
  background: var(--cpd-color-alpha-gray-300);
  color: var(--cpd-color-gray-1100);
}

._badge_1t12g_8[data-kind="on-solid"] {
  background: var(--cpd-color-alpha-gray-1200);
  color: var(--cpd-color-text-on-solid-primary);
}

._badge_1t12g_8[data-kind="blue"] {
  background: var(--cpd-color-alpha-blue-300);
  color: var(--cpd-color-blue-1100);
}

._badge_1t12g_8[data-kind="green"] {
  background: var(--cpd-color-alpha-green-300);
  color: var(--cpd-color-green-1100);
}

._badge_1t12g_8[data-kind="red"] {
  background: var(--cpd-color-alpha-red-300);
  color: var(--cpd-color-red-1100);
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._menu_19sse_8 {
  border-radius: var(--cpd-space-3x);
  background: var(--cpd-color-bg-canvas-default);

  /* Here we use outline to create a border internal to the container. The Radix
  menu component may try to override it with outline: none, hence the need for
  !important. */
  outline: var(--cpd-border-width-1) solid
    var(--cpd-color-border-interactive-secondary) !important;
  outline-offset: calc(-1 * var(--cpd-border-width-1));
  -webkit-box-shadow: 0 4px 24px 0 rgba(0 0 0 / 10%);
          box-shadow: 0 4px 24px 0 rgba(0 0 0 / 10%);
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  max-inline-size: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);
  padding-block: var(--cpd-space-5x) var(--cpd-space-4x);

  --cpd-separator-spacing: 0;
  --cpd-separator-inset: var(--cpd-space-4x);
}

@-webkit-keyframes _slide-in_19sse_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-3x));
            transform: translate(0, var(--cpd-space-3x));
  }
}

@keyframes _slide-in_19sse_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-3x));
            transform: translate(0, var(--cpd-space-3x));
  }
}

@-webkit-keyframes _slide-out_19sse_1 {
  to {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-2x));
            transform: translate(0, var(--cpd-space-2x));
  }
}

@keyframes _slide-out_19sse_1 {
  to {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-2x));
            transform: translate(0, var(--cpd-space-2x));
  }
}

._menu_19sse_8[data-state="open"] {
  -webkit-animation: _slide-in_19sse_1 180ms;
          animation: _slide-in_19sse_1 180ms;
}

._menu_19sse_8[data-state="closed"] {
  -webkit-animation: _slide-out_19sse_1 110ms;
          animation: _slide-out_19sse_1 110ms;
}

@-webkit-keyframes _fade-in_19sse_1 {
  from {
    opacity: 0;
  }
}

@keyframes _fade-in_19sse_1 {
  from {
    opacity: 0;
  }
}

@-webkit-keyframes _fade-out_19sse_1 {
  to {
    opacity: 0;
  }
}

@keyframes _fade-out_19sse_1 {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion) {
  ._menu_19sse_8[data-state="open"] {
    -webkit-animation-name: _fade-in_19sse_1;
            animation-name: _fade-in_19sse_1;
  }

  ._menu_19sse_8[data-state="closed"] {
    -webkit-animation-name: _fade-out_19sse_1;
            animation-name: _fade-out_19sse_1;
  }
}

._title_19sse_74 {
  /** Override MenuTitle margin top **/
  -webkit-margin-before: 0 !important;
          margin-block-start: 0 !important;
}

/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._menu-title_1sgvx_8 {
  color: var(--cpd-color-text-secondary);
  padding-inline: var(--cpd-space-4x);
  -webkit-padding-after: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
          padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
  -webkit-border-after: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
          border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
  margin-block: var(--cpd-space-2x);
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._bg_1y38p_8 {
  position: fixed;
  inset: 0;

  /* TODO: This value is used across modals and menu drawers, so would be worth
  tokenizing */
  background: rgba(3 12 27 / 52.8%);
}

._drawer_1y38p_17 {
  position: fixed;
  background: var(--cpd-color-bg-canvas-default);
  inset-block-end: 0;
  inset-inline: 0;

  /* Cap the inline content size at 520px, filling the rest of the space with
  padding */
  padding-inline: max(0px, calc((100% - 520px) / 2));
  border-start-start-radius: 28px;
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: 28px;
  border-start-end-radius: var(--border-radius);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  /* Drawer comes in the Android style by default */
  --border-radius: 28px;
  --handle-block-size: 4px;
  --handle-inline-size: 32px;
  --handle-inset-block-start: var(--cpd-space-4x);
  --handle-inset-block-end: 0px;
  --content-inset-block-start: calc(
    var(--handle-inset-block-start) + var(--handle-block-size) +
      var(--handle-inset-block-end)
  );
}

._drawer_1y38p_17[data-platform="ios"] {
  --border-radius: 10px;
  --handle-block-size: 5px;
  --handle-inline-size: 36px;
  --handle-inset-block-start: var(--cpd-space-1-5x);
  --handle-inset-block-end: 1px;
}

._body_1y38p_51 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-2x);
  padding-block: calc(var(--content-inset-block-start) + var(--cpd-space-6x))
    var(--cpd-space-12x);
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);

  /* Even with overflow: auto, the content can still overflow at the corners
  where it meets with the curved border. A contain: paint fixes that. */
  contain: paint;
  overflow: auto;
  scrollbar-width: none;

  --cpd-separator-spacing: 0;
  --cpd-separator-inset: var(--cpd-space-4x);
}

._body_1y38p_51::before {
  content: "";
  position: absolute;
  block-size: var(--handle-block-size);
  inset-inline: calc((100% - var(--handle-inline-size)) / 2);
  inset-block-start: var(--handle-inset-block-start);
  background: var(--cpd-color-icon-secondary);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
}

/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._content_vnv5k_8[data-state="closed"] {
  -webkit-animation: none;
          animation: none;
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._glass_sepwu_8 {
  border-radius: var(--cpd-space-9x);
  padding: var(--cpd-space-3x);

  /* We use an outline here to create an "inner border", rather than one that
  adds to the component's size */
  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
  outline-offset: calc(-1 * var(--cpd-border-width-1));
  background: var(--cpd-color-alpha-gray-400);
  backdrop-filter: blur(20px);
}

._glass_sepwu_8 > :first-child {
  border-radius: var(--cpd-space-6x);
  inline-size: 100%;
  block-size: 100%;
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._link_1v5rz_8 {
  display: inline-block;
  text-decoration: underline;
  color: var(--cpd-color-text-primary);
  font-weight: var(--cpd-font-weight-medium);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  padding-inline: 0.25rem;
}

._link_1v5rz_8[data-kind="primary"] {
  color: var(--cpd-color-text-primary);
}

._link_1v5rz_8[data-kind="critical"] {
  color: var(--cpd-color-text-critical-primary);
}

@media (hover) {
  ._link_1v5rz_8[data-kind="primary"]:hover {
    background: var(--cpd-color-gray-300);
  }

  ._link_1v5rz_8[data-kind="critical"]:hover {
    background: var(--cpd-color-red-300);
  }
}

._link_1v5rz_8:active {
  color: var(--cpd-color-text-on-solid-primary);
}

._link_1v5rz_8[data-kind="primary"]:active {
  background: var(--cpd-color-text-primary);
}

._link_1v5rz_8[data-kind="critical"]:active {
  background: var(--cpd-color-text-critical-primary);
}

._link_1v5rz_8[data-size="small"] {
  font-size: var(--cpd-font-size-body-sm);
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._item_dyt4i_8 {
  display: grid;
  grid-template: "icon label ." auto "empty1 label empty2" auto / auto auto minmax(
      /* Reserve space for the chevron so that the layout doesn't shift on
      hover */
        var(--cpd-space-2x),
      1fr
    );
  place-items: center end;
  padding-block: var(--cpd-space-2x);
  padding-inline: var(--cpd-space-4x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 200px;
  color: var(--cpd-color-text-secondary);
  background: var(--cpd-color-bg-action-secondary-rest);
}

._item_dyt4i_8._interactive_dyt4i_26 {
  cursor: pointer;
}

._item_dyt4i_8._no-label_dyt4i_30 {
  grid-template: "icon ." auto / auto 1fr;
}

._label_dyt4i_34 {
  grid-area: label;
  -webkit-margin-end: var(--cpd-space-4x);
          margin-inline-end: var(--cpd-space-4x);
  text-align: start;
  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
}

._item_dyt4i_8._no-icon_dyt4i_41 {
  grid-template: "label ." auto / auto 1fr;
}

._item_dyt4i_8._no-icon_dyt4i_41 ._label_dyt4i_34 {
    /* Without icon, the height changes when hovered */
    min-block-size: 24px;
  }

._icon_dyt4i_50 {
  grid-area: icon;
  -webkit-margin-end: var(--cpd-space-3x);
          margin-inline-end: var(--cpd-space-3x);
}

._item_dyt4i_8._no-label_dyt4i_30 ._icon_dyt4i_50 {
  -webkit-margin-end: var(--cpd-space-4x);
          margin-inline-end: var(--cpd-space-4x);
}

._nav-hint_dyt4i_59 {
  /* Hidden until the item is hovered over */
  display: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

button._item_dyt4i_8 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}

._item_dyt4i_8[data-kind="primary"] > ._label_dyt4i_34 {
  color: var(--cpd-color-text-primary);
}

._item_dyt4i_8[data-kind="primary"] > ._icon_dyt4i_50 {
  color: var(--cpd-color-icon-primary);
}

._item_dyt4i_8[data-kind="primary"] > ._nav-hint_dyt4i_59 {
  color: var(--cpd-color-icon-tertiary);
}

._item_dyt4i_8[data-kind="critical"] > ._label_dyt4i_34 {
  color: var(--cpd-color-text-critical-primary);
}

._item_dyt4i_8[data-kind="critical"] > ._icon_dyt4i_50,
._item_dyt4i_8[data-kind="critical"] > ._nav-hint_dyt4i_59 {
  color: var(--cpd-color-icon-critical-primary);
}

@media (hover) {
  ._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:hover {
    background: var(--cpd-color-bg-action-secondary-hovered);
  }

  ._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:hover {
    background: var(--cpd-color-bg-critical-subtle);
  }

  /* Replace the children with the navigation hint on hover */
  ._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 {
    display: inline;
    display: initial;
  }

  ._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 ~ * {
    display: none;
  }
}

._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:active {
  background: var(--cpd-color-bg-action-secondary-pressed);
}

._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:active {
  background: var(--cpd-color-bg-critical-subtle-hovered);
}

._item_dyt4i_8[data-kind]._disabled_dyt4i_118 {
  pointer-events: none;
}

._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._label_dyt4i_34,
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._icon_dyt4i_50,
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._nav-hint_dyt4i_59 {
  color: var(--cpd-color-text-disabled);
}

/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_1e0uz_10 {
  --size: 20px;

  display: grid;
  inline-size: 20px;
  inline-size: var(--size);
  block-size: 20px;
  block-size: var(--size);
}

._input_1e0uz_18,
._ui_1e0uz_19 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  grid-area: 1/1;
  inline-size: var(--size);
  block-size: var(--size);
}

._input_1e0uz_18 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

._ui_1e0uz_19 {
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid;
  border-color: var(--cpd-color-border-interactive-primary);

  /* To align the ::after pseudo-element to the center of the radio button */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._ui_1e0uz_19::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: transparent;
}

._input_1e0uz_18:checked + ._ui_1e0uz_19 {
  background-color: var(--cpd-color-bg-accent-rest);
  border-color: var(--cpd-color-bg-accent-rest);
}

._input_1e0uz_18:checked + ._ui_1e0uz_19::after {
  background: var(--cpd-color-icon-on-solid-primary);
}

._input_1e0uz_18:focus-visible + ._ui_1e0uz_19 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

._input_1e0uz_18[readonly] {
  pointer-events: none;
}

._input_1e0uz_18[readonly] + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}

._input_1e0uz_18[disabled] + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}

._input_1e0uz_18[disabled]:checked + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-bg-action-primary-disabled);
  background: var(--cpd-color-bg-action-primary-disabled);
}

._input_1e0uz_18[readonly]:checked + ._ui_1e0uz_19::after {
  background-color: var(--cpd-color-icon-secondary);
}

@media (hover) {
  ._input_1e0uz_18:not([disabled], [readonly], :checked):hover + ._ui_1e0uz_19 {
    border-color: var(--cpd-color-bg-accent-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }

  ._input_1e0uz_18:not([disabled], [readonly], :checked):hover + ._ui_1e0uz_19::after {
    background: var(--cpd-color-icon-quaternary);
  }

  ._input_1e0uz_18:not([disabled], [readonly]):checked:hover + ._ui_1e0uz_19 {
    border-color: var(--cpd-color-bg-accent-hovered);
    background: var(--cpd-color-bg-accent-hovered);
  }

  ._input_1e0uz_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1e0uz_19 {
    border-color: var(--cpd-color-bg-critical-hovered);
    background: var(--cpd-color-bg-critical-hovered);
  }
}

._input_1e0uz_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-border-critical-primary);
}

._input_1e0uz_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1e0uz_19 {
  background-color: var(--cpd-color-bg-critical-primary);
  border-color: var(--cpd-color-bg-critical-primary);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._progress-bar_9g67e_8 {
  position: relative;
  background-color: var(--cpd-color-gray-200);
  border: 1px solid var(--cpd-color-gray-400);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  overflow: hidden;
}

._progress-bar_9g67e_8[data-size="sm"] {
    block-size: var(--cpd-space-2x);
  }

._progress-bar_9g67e_8[data-size="lg"] {
    block-size: var(--cpd-space-4x);
  }

._progress-bar-container_9g67e_24 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);

  --cpd-progress-bar-main: var(--cpd-color-text-secondary);
  --cpd-progress-bar-muted: var(--cpd-color-gray-800);
}

._progress-bar-container_9g67e_24[data-tint="green"] {
    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);
    --cpd-progress-bar-muted: var(--cpd-color-green-800);
  }

._progress-bar-container_9g67e_24[data-tint="lime"] {
    --cpd-progress-bar-main: var(--cpd-color-lime-900);
    --cpd-progress-bar-muted: var(--cpd-color-lime-800);
  }

._progress-bar-container_9g67e_24[data-tint="orange"] {
    --cpd-progress-bar-main: var(--cpd-color-orange-900);
    --cpd-progress-bar-muted: var(--cpd-color-orange-800);
  }

._progress-bar-container_9g67e_24[data-tint="red"] {
    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);
    --cpd-progress-bar-muted: var(--cpd-color-red-800);
  }

._progress-bar-label_9g67e_53 {
  font: var(--cpd-font-body-sm-medium);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  color: var(--cpd-progress-bar-main);
}

._progress-bar-indicator_9g67e_59 {
  position: absolute;
  inset: 0;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  background-image: linear-gradient(
    135deg,
    var(--cpd-progress-bar-muted) 0%,
    var(--cpd-progress-bar-muted) 25%,
    var(--cpd-progress-bar-main) 25%,
    var(--cpd-progress-bar-main) 50%,
    var(--cpd-progress-bar-muted) 50%,
    var(--cpd-progress-bar-muted) 75%,
    var(--cpd-progress-bar-main) 75%,
    var(--cpd-progress-bar-main) 100%,
    var(--cpd-progress-bar-muted) 100%
  );

  /* sqrt(number of stripes * 2 * (stripe width)^2) = sqrt(4 * 2 * 2^2) = sqrt(32) */
  background-size: 5.6569px 5.6569px;
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._search_b2pjl_8 {
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  border-radius: 9999px;
  block-size: 36px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: var(--cpd-color-text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* !important to override Field's default flex settings */
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  gap: var(--cpd-space-2x) !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
}

@media (hover) {
  ._search_b2pjl_8:hover {
    border-color: var(--cpd-color-border-interactive-hovered);
  }
}

._search_b2pjl_8:active {
  border-color: var(--cpd-color-border-interactive-hovered);
}

._search_b2pjl_8:focus-within {
  border-color: currentcolor;
}

._icon_b2pjl_37 {
  color: var(--cpd-color-icon-secondary);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (hover) {
  ._search_b2pjl_8:hover ._icon_b2pjl_37 {
    color: var(--cpd-color-icon-primary);
  }
}

._search_b2pjl_8:active ._icon_b2pjl_37 {
  color: var(--cpd-color-icon-primary);
}

._input_b2pjl_52 {
  border: 0;
  background: inherit;
  outline: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-inline-size: 0;
}

._input_b2pjl_52::-webkit-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52::-moz-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52::-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52::placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::-webkit-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::-moz-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus:-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::placeholder {
  color: var(--cpd-color-text-secondary);
}

@media (hover) {
  ._search_b2pjl_8:hover ._input_b2pjl_52::-webkit-input-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52::-moz-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52:-ms-input-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52::-ms-input-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52::placeholder {
    color: var(--cpd-color-text-secondary);
  }
}

/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* Styling the Radix UI Form component */

/**
 * ROOT: Form Element
 */

._root_19upo_16 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-5x);
}

/**
 * FIELD: Wrapper around label, control and message
 */

._field_19upo_26 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);
}

._inline-field_19upo_32 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--cpd-space-2x);
}

._inline-field-body_19upo_38 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._inline-field-control_19upo_44 {
  /* The control should have the same height as the label */
  block-size: calc(
    var(--cpd-font-size-body-md) * var(--cpd-font-line-height-regular)
  );

  /* Align the control in the middle of the label */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/**
 * LABEL
 */

._label_19upo_59 {
  font: var(--cpd-font-body-md-medium);
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
}

._label_19upo_59[for] {
  cursor: pointer;
}

._label_19upo_59[data-invalid] {
  color: var(--cpd-color-text-critical-primary);
}

/* Currently working everywhere but on Firefox (only behind a labs flag)
https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */

._label_19upo_59:has(~ * input[disabled]),
._label_19upo_59:has(~ input[disabled]),
._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._label_19upo_59 {
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
}

/**
 * Help and error messages
 */

._message_19upo_85 {
  font: var(--cpd-font-body-sm-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  -webkit-margin-before: var(--cpd-space-1x);
          margin-block-start: var(--cpd-space-1x);
}

._help-message_19upo_91 {
  color: var(--cpd-color-text-secondary);
}

._error-message_19upo_95 {
  color: var(--cpd-color-text-critical-primary);
}

._success-message_19upo_99 {
  color: var(--cpd-color-text-success-primary);
}

/* Currently working everywhere but on Firefox (only behind a labs flag)
https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */

input[disabled] ~ ._message_19upo_85,
*:has(input[disabled]) ~ ._message_19upo_85,
._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._message_19upo_85 {
  color: var(--cpd-color-text-disabled);
}

._message_19upo_85 > svg {
  display: inline-block;
  vertical-align: bottom;
  -webkit-margin-end: var(--cpd-space-2x);
          margin-inline-end: var(--cpd-space-2x);

  /* Calculate the size of the icon based on the font size and line height */
  block-size: calc(1em * var(--cpd-font-line-height-regular));
  inline-size: calc(1em * var(--cpd-font-line-height-regular));
}

/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._separator_7ckbw_8 {
  --cpd-separator-color: var(--cpd-color-gray-400);
  --cpd-separator-size: 1px;

  background-color: var(--cpd-separator-color);
}

._separator_7ckbw_8[data-kind="secondary"] {
  --cpd-separator-color: var(--cpd-color-gray-300);
}

._separator_7ckbw_8[data-kind="section"] {
  --cpd-separator-size: 2px;
}

._separator_7ckbw_8[data-orientation="horizontal"] {
  margin-block: var(--cpd-separator-spacing);
  margin-inline: 0;
  margin-inline: var(--cpd-separator-inset);
  block-size: var(--cpd-separator-size);
}

._separator_7ckbw_8[data-orientation="vertical"] {
  margin-inline: var(--cpd-separator-spacing);
  margin-block: 0;
  margin-block: var(--cpd-separator-inset);
  inline-size: var(--cpd-separator-size);
}

/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_19o42_10 {
  display: grid;
  inline-size: 2.25rem;
  block-size: 1.25rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._container_19o42_10 > * {
  grid-area: 1/1;
  inline-size: inherit;
  block-size: inherit;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

._container_19o42_10 > ._input_19o42_24 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

._container_19o42_10 > ._input_19o42_24[disabled] {
  cursor: not-allowed;
}

._ui_19o42_34 {
  pointer-events: none;
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  border: 1px solid var(--cpd-color-border-interactive-primary);
  background: var(--cpd-color-bg-canvas-default);
  position: relative;
  padding: 1px;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-property: background-color, border-color;
  transition-property: background-color, border-color;
}

._input_19o42_24:checked + ._ui_19o42_34 {
  background: var(--cpd-color-bg-accent-rest);
  border-color: var(--cpd-color-bg-accent-rest);
}

._ui_19o42_34::after {
  content: "";
  display: block;
  block-size: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--cpd-color-icon-secondary);
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
}

/* Note the use of :focus-visible rather than :focus to avoid showing the focus
ring after a simple click */

._input_19o42_24:focus-visible + ._ui_19o42_34 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

:checked + ._ui_19o42_34::after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  background: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  :checked:not([disabled]):hover + ._ui_19o42_34 {
    background: var(--cpd-color-bg-accent-hovered);
    border-color: var(--cpd-color-bg-accent-hovered);
  }
}

:checked:active + ._ui_19o42_34 {
  background: var(--cpd-color-bg-accent-hovered);
  border-color: var(--cpd-color-bg-accent-hovered);
}

._input_19o42_24[readonly] {
  pointer-events: none;
}

._input_19o42_24[readonly] + ._ui_19o42_34 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}

._input_19o42_24[readonly] + ._ui_19o42_34::after {
  background: var(--cpd-color-icon-secondary);
}

._input_19o42_24[disabled] + ._ui_19o42_34 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}

._input_19o42_24[disabled] + ._ui_19o42_34::after {
  background: var(--cpd-color-bg-action-primary-disabled);
}

._input_19o42_24[readonly]:checked + ._ui_19o42_34 {
  border-color: var(--cpd-color-icon-secondary);
  background: var(--cpd-color-icon-secondary);
}

._input_19o42_24[readonly]:checked + ._ui_19o42_34::after {
  background: var(--cpd-color-icon-on-solid-primary);
}

._input_19o42_24[disabled]:checked + ._ui_19o42_34 {
  background: var(--cpd-color-bg-action-primary-disabled);
  border-color: var(--cpd-color-bg-action-primary-disabled);
}

._input_19o42_24[disabled]:checked + ._ui_19o42_34::after {
  background: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  ._input_19o42_24:not(:checked, [disabled], [readonly]):hover + ._ui_19o42_34 {
    border-color: var(--cpd-color-border-interactive-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }
}

._input_19o42_24:not(:checked, [disabled], [readonly]):active + ._ui_19o42_34 {
  border-color: var(--cpd-color-border-interactive-hovered);
}

/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_1hel1_10 {
  --size: 20px;

  display: grid;
  inline-size: 20px;
  inline-size: var(--size);
  block-size: 20px;
  block-size: var(--size);
}

._input_1hel1_18,
._ui_1hel1_19 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  grid-area: 1/1;
  inline-size: var(--size);
  block-size: var(--size);
}

._input_1hel1_18 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

._ui_1hel1_19 {
  pointer-events: none;
  border-radius: 4px; /* TODO: Ought to be a token */
  border: 1px solid;
  border-color: var(--cpd-color-border-interactive-primary);

  /** Default, rest state */
  color: transparent;
}

._ui_1hel1_19 svg {
  inline-size: var(--size);
  block-size: var(--size);

  /* compensate for the parent border */
  margin: -1px;
}

._input_1hel1_18:checked + ._ui_1hel1_19 {
  color: var(--cpd-color-icon-on-solid-primary);
  background-color: var(--cpd-color-bg-accent-rest);
  border-color: var(--cpd-color-bg-accent-rest);
}

._input_1hel1_18:focus-visible + ._ui_1hel1_19 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

._input_1hel1_18[disabled] + ._ui_1hel1_19 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}

._input_1hel1_18[readonly] {
  pointer-events: none;
}

._input_1hel1_18[readonly] + ._ui_1hel1_19 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}

._input_1hel1_18[disabled]:checked + ._ui_1hel1_19 {
  border-color: var(--cpd-color-bg-action-primary-disabled);
  background: var(--cpd-color-bg-action-primary-disabled);
}

._input_1hel1_18[readonly]:checked + ._ui_1hel1_19 {
  color: var(--cpd-color-icon-secondary);
}

@media (hover) {
  ._input_1hel1_18:not([disabled], [readonly], :checked):hover + ._ui_1hel1_19 {
    color: var(--cpd-color-icon-quaternary);
    border-color: var(--cpd-color-bg-accent-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }

  ._input_1hel1_18:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
    border-color: var(--cpd-color-bg-accent-hovered);
    background: var(--cpd-color-bg-accent-hovered);
  }

  ._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
    border-color: var(--cpd-color-bg-critical-hovered);
    background: var(--cpd-color-bg-critical-hovered);
  }
}

._input_1hel1_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_1hel1_19 {
  border-color: var(--cpd-color-border-critical-primary);
}

._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1hel1_19 {
  background-color: var(--cpd-color-bg-critical-primary);
  border-color: var(--cpd-color-bg-critical-primary);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._toast-container_xzz4o_8 {
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  background-color: var(--cpd-color-alpha-gray-1300);
  color: var(--cpd-color-text-on-solid-primary);
  border-radius: 99px;
  font-size: var(--cpd-font-body-sm-medium);
  padding: var(--cpd-space-2x) var(--cpd-space-4x);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

@-webkit-keyframes _spin_11k6c_1 {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes _spin_11k6c_1 {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

._icon_11k6c_18 {
  color: var(--cpd-color-icon-secondary);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  inline-size: 100%;
  block-size: 100%;
  -webkit-animation: 1s linear _spin_11k6c_1 infinite;
          animation: 1s linear _spin_11k6c_1 infinite;
}

/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._button_vczzf_8 {
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--cpd-space-2x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font: var(--cpd-font-body-md-semibold);
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  -webkit-transition-property: color, background-color, border-color;
  transition-property: color, background-color, border-color;
}

a._button_vczzf_8 {
  /* Make the width match that of a real button */
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;
}

._button_vczzf_8 > svg {
  -webkit-transition: color 0.1s;
  transition: color 0.1s;
}

._button_vczzf_8[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled) !important;
}

._button_vczzf_8[aria-disabled="true"] > svg {
  color: var(--cpd-color-icon-disabled) !important;
}

/**
 * SIZES
 */

._button_vczzf_8[data-size="lg"] {
  padding-block: var(--cpd-space-2x);
  padding-inline: var(--cpd-space-8x);
  min-block-size: var(--cpd-space-12x);
}

._button_vczzf_8[data-size="lg"]._icon-only_vczzf_50 {
    padding-inline: var(--cpd-space-2x);
    block-size: var(--cpd-space-12x);
    inline-size: var(--cpd-space-12x);
  }

._button_vczzf_8[data-size="lg"]._has-icon_vczzf_57:not(._icon-only_vczzf_50) {
  -webkit-padding-start: var(--cpd-space-7x);
          padding-inline-start: var(--cpd-space-7x);
}

._button_vczzf_8[data-size="sm"] {
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-5x);
  min-block-size: var(--cpd-space-9x);
}

._button_vczzf_8[data-size="sm"]._icon-only_vczzf_50 {
    padding-inline: var(--cpd-space-1x);
    block-size: var(--cpd-space-9x);
    inline-size: var(--cpd-space-9x);
  }

._button_vczzf_8[data-size="sm"]._has-icon_vczzf_57:not(._icon-only_vczzf_50) {
  -webkit-padding-start: var(--cpd-space-4x);
          padding-inline-start: var(--cpd-space-4x);
}

/**
 * KINDS
 */

._button_vczzf_8[data-kind="primary"] {
  color: var(--cpd-color-text-on-solid-primary);
  background: var(--cpd-color-bg-action-primary-rest);
  border-width: 0;
}

._button_vczzf_8[data-kind="primary"] > svg {
  color: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="primary"]:hover {
    background: var(--cpd-color-bg-action-primary-hovered);
  }
}

._button_vczzf_8[data-kind="primary"]:active,
._button_vczzf_8[data-kind="primary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-action-primary-pressed);
}

._button_vczzf_8[data-kind="primary"][aria-disabled="true"] {
  /* !important to override destructive background */
  background: var(--cpd-color-bg-subtle-primary) !important;
}

._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107 {
  background: var(--cpd-color-bg-critical-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107:hover {
    background: var(--cpd-color-bg-critical-hovered);
  }
}

._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107:active,
._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107[aria-expanded="true"] {
  /* TODO: We're waiting for this value to be formalized as a semantic token */
  background: var(--cpd-color-red-1100);
}

._button_vczzf_8[data-kind="secondary"] {
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  color: var(--cpd-color-text-primary);
  background: var(--cpd-color-bg-canvas-default);
}

._button_vczzf_8[data-kind="secondary"] > svg {
  color: var(--cpd-color-icon-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="secondary"]:hover {
    border-color: var(--cpd-color-border-interactive-hovered);
    background: var(--cpd-color-bg-subtle-secondary);
  }
}

._button_vczzf_8[data-kind="secondary"]:active,
._button_vczzf_8[data-kind="secondary"][aria-expanded="true"] {
  border-color: var(--cpd-color-border-interactive-hovered);
  background: var(--cpd-color-bg-subtle-primary);
}

._button_vczzf_8[data-kind="secondary"][aria-disabled="true"] {
  /* !important to override destructive values */
  border-color: var(--cpd-color-border-interactive-secondary) !important;
  background: var(--cpd-color-bg-subtle-secondary) !important;
}

._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107 {
  border-color: var(--cpd-color-border-critical-subtle);
  color: var(--cpd-color-text-critical-primary);
}

._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107 > svg {
  color: var(--cpd-color-icon-critical-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107:hover {
    border-color: var(--cpd-color-border-critical-hovered);
    background: var(--cpd-color-bg-critical-subtle);
  }
}

._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107:active,
._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107[aria-expanded="true"] {
  border-color: var(--cpd-color-border-critical-hovered);
  background: var(--cpd-color-bg-critical-subtle-hovered);
}

._button_vczzf_8[data-kind="tertiary"] {
  border: none;
  color: var(--cpd-color-text-primary);
  text-decoration: underline;
  background: transparent;
}

@media (hover) {
  ._button_vczzf_8[data-kind="tertiary"]:hover {
    background: var(--cpd-color-bg-subtle-secondary);
  }
}

._button_vczzf_8[data-kind="tertiary"]:active,
._button_vczzf_8[data-kind="tertiary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-subtle-primary);
}

._button_vczzf_8[data-kind="tertiary"][aria-disabled="true"] {
  color: var(--cpd-color-text-disabled);

  /* !important to override destructive background */
  background: transparent !important;
}

._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107 {
  color: var(--cpd-color-text-critical-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107:hover {
    background: var(--cpd-color-bg-critical-subtle);
  }
}

._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107:active,
._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107[aria-expanded="true"] {
  background: var(--cpd-color-bg-critical-subtle-hovered);
}

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_1s836_8 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

._control_1s836_13 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-padding-end: var(--cpd-space-12x) !important;
          padding-inline-end: var(--cpd-space-12x) !important;

  /* From the flexbox spec:
   *   "By default, flex items won’t shrink below their minimum content size"
   * This allows the element to shrink lower than its natural default size.
   */
  min-inline-size: 0;
}

._action_1s836_24 {
  all: unset;
  color: var(--cpd-color-icon-secondary);
  background-color: transparent;
  cursor: pointer;
  position: absolute;
  inset-block: var(--cpd-space-2x);
  inset-inline-end: var(--cpd-space-2x);
  padding: var(--cpd-space-1x);
  overflow: visible;
  border-radius: 50%;
}

._action_1s836_24 > svg {
  inline-size: var(--cpd-space-6x);
  block-size: var(--cpd-space-6x);
}

@media (hover) {
  ._action_1s836_24:hover {
    color: var(--cpd-color-icon-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }
}

._action_1s836_24:focus-visible {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

._control_1s836_13[disabled] + ._action_1s836_24 {
  pointer-events: none;
  color: var(--cpd-color-text-disabled);
}

._control_1s836_13[readonly] + ._action_1s836_24 {
  pointer-events: none;
  color: var(--cpd-color-text-secondary);
}

/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._control_sqdq4_10 {
  border: 1px solid var(--cpd-color-border-interactive-primary);
  background: var(--cpd-color-bg-canvas-default);
  border-radius: 0.5rem;
  padding: var(--cpd-space-3x) var(--cpd-space-4x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  /**
  * Disable contextual alternate ligatures in inputs
  * https://github.com/rsms/inter/issues/222
  * https://github.com/rsms/inter/blob/master/src/features/calt.fea
  */
  -webkit-font-feature-settings: "calt" 0;
          font-feature-settings: "calt" 0;
}

@media (hover) {
  ._control_sqdq4_10:hover {
    border-color: var(--cpd-color-border-interactive-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }
}

._control_sqdq4_10:active {
  border-color: var(--cpd-color-border-interactive-hovered);
}

._control_sqdq4_10:focus {
  outline: 2px solid var(--cpd-color-border-focused);
  border-color: transparent;
}

._control_sqdq4_10[data-invalid] {
  border-color: var(--cpd-color-text-critical-primary);
}

._control_sqdq4_10:disabled {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-canvas-disabled);
  border-color: var(--cpd-color-border-disabled);
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
}

._control_sqdq4_10[readonly] {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-subtle-secondary);
  border-color: var(--cpd-color-bg-subtle-secondary);
  color: var(--cpd-color-text-secondary);
}

._control_sqdq4_10._enable-ligatures_sqdq4_62 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
          font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: var(--cpd-font-feature-settings);
          font-feature-settings: var(--cpd-font-feature-settings);
}

/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_43om7_10 {
  --gap: var(--cpd-space-3x);
  --digit-size: var(--cpd-space-10x);
  --digit-height: var(--cpd-space-12x);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--gap);

  /* The input is positioned absolutely
     so the container needs to be positioned relatively */
  position: relative;
}

._control_43om7_25 {
  all: unset;

  /** TODO: semantic token */
  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;
  font-weight: 700;

  /* Position the input to fill the container */
  position: absolute;
  inset: 0;

  /* Spacing between digits is set to the gap
     plus the size of one digit box
     minus the size of one character */
  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);
  line-height: var(--digit-height);

  /* The padding at the start positions the first digit at the middle of the digit box */
  -webkit-padding-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));
          padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));

  /* The negative margin at the end is to keep space for the cursor when the input is full */
  -webkit-margin-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
          margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
}

._digit_43om7_49 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  inline-size: var(--cpd-space-10x);
  block-size: var(--cpd-space-12x);
  border: 1px solid var(--cpd-color-border-interactive-primary);
  background: var(--cpd-color-bg-canvas-default);
  border-radius: 0.5rem;
  padding: var(--cpd-space-3x) var(--cpd-space-4x);
}

@media (hover) {
  ._control_43om7_25:hover ~ ._digit_43om7_49 {
    border-color: var(--cpd-color-border-interactive-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }
}

._control_43om7_25:disabled {
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
}

._control_43om7_25:disabled ~ ._digit_43om7_49 {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-canvas-disabled);
  border-color: var(--cpd-color-border-disabled);
}

._control_43om7_25[readonly] {
  color: var(--cpd-color-text-secondary);
}

._control_43om7_25[readonly] ~ ._digit_43om7_49 {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-subtle-secondary);
  border-color: var(--cpd-color-bg-subtle-secondary);
}

._control_43om7_25[data-invalid] ~ ._digit_43om7_49 {
  border-color: var(--cpd-color-text-critical-primary);
}

._control_43om7_25:focus ~ ._digit_43om7_49:not([data-filled]) {
  outline: 2px solid var(--cpd-color-border-focused);
  border-color: transparent;
}

._digit_43om7_49[data-selected] {
  border-color: var(--cpd-color-border-focused);
  background-color: var(--cpd-color-bg-info-subtle);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._controls_17lij_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}

._controls_17lij_8 > input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-inline-size: 0;
  }

._button-group_17lij_18 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  inset-block-start: var(--cpd-space-1x);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-2x);
}

/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

:root {
  --cpd-radius-pill-effect: 9999px;

  /* Default icon and avatar size */
  --cpd-icon-button-size: var(--cpd-space-8x);
  --cpd-avatar-size: var(--cpd-space-16x);

  /**
  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
  * We need to tweak the `letter-spacing` property and doing so, disables by
  * default the optional ligatures
  * `font-feature-settings` allows us to override this behaviour and have the
  * correct ligatures and the proper dynamic metric spacing.
  */
  --cpd-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  --cpd-separator-spacing: var(--cpd-space-2x);
  --cpd-separator-inset: 0;
}

html,
body,
input {
  font: var(--cpd-font-body-md-regular);
  color: var(--cpd-color-text-primary);
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
          font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: var(--cpd-font-feature-settings);
          font-feature-settings: var(--cpd-font-feature-settings);
}

html,
body {
  block-size: 100%;
  font-size: var(--cpd-font-size-root);
}

body {
  background: var(--cpd-color-bg-canvas-default);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._content_o77nw_8 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: var(--cpd-color-bg-subtle-secondary);
  padding: var(--cpd-space-4x);
  border-radius: var(--cpd-space-2x);
  color: var(--cpd-color-icon-secondary);
}

._content_o77nw_8 > svg {
    inline-size: 32px;
    block-size: 32px;
  }

._content_o77nw_8[data-size="medium"] {
  padding: var(--cpd-space-3x);
}

._content_o77nw_8[data-size="small"] {
  padding: var(--cpd-space-3x);
}

._content_o77nw_8[data-size="small"] > svg {
    inline-size: 24px;
    block-size: 24px;
  }

._destructive_o77nw_34 {
  background-color: var(--cpd-color-bg-critical-subtle);
  color: var(--cpd-color-icon-critical-primary);
}

._success_o77nw_39 {
  background-color: var(--cpd-color-bg-success-subtle);
  color: var(--cpd-color-icon-success-primary);
}

/* Copyright 2025 New Vector Ltd.
 * Copyright 2023 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._nav-bar_1fp3r_8 {
  -webkit-border-after: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
          border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
  margin: var(--cpd-space-6x) 0;
  padding: 0;
}

._nav-bar-items_1fp3r_14 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-3x);
  list-style: none;
  padding: 0;
  margin: 0;
}

._nav-tab_1fp3r_25 {
  padding: var(--cpd-space-4x) 0;
  position: relative;
}

/* Underline effect */

._nav-tab_1fp3r_25::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 0;
  border-radius: 9999px 9999px 0 0;
  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
  background-color: var(--cpd-color-bg-action-primary-rest);
  -webkit-transition: height 0.1s ease-in-out;
  transition: height 0.1s ease-in-out;
}

._nav-tab_1fp3r_25[data-current]::before {
  /* This is not exactly right: designs says 3px, but there are no variables for that */
  block-size: var(--cpd-border-width-4);
}

._nav-item_1fp3r_47 {
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-2x);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--cpd-space-2x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: transparent;
  border: 0;
  font: var(--cpd-font-body-md-medium);
  color: var(--cpd-color-text-secondary);
  text-decoration: none;
}

@media (hover) {
  ._nav-item_1fp3r_47:not([disabled]):hover {
    color: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }
}

._nav-item_1fp3r_47:focus-visible {
  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
}

._nav-item_1fp3r_47:not([disabled]):active {
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-subtle-primary);
}

._nav-item_1fp3r_47[aria-current],
._nav-item_1fp3r_47[aria-selected="true"] {
  color: var(--cpd-color-text-primary);
}

._nav-item_1fp3r_47[disabled] {
  cursor: not-allowed;

  /* Enable pointer events for svgs even with fill=none */
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._content_3xq91_8 {
  /* 320px + 20px padding left + 20px padding right */
  max-inline-size: 320px;
  border-radius: var(--cpd-space-3x);
  background: var(--cpd-color-bg-action-primary-rest);
  padding: var(--cpd-space-5x) var(--cpd-space-6x);

  /* from figma */
  -webkit-box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
          box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);

  /*
  * Grid, we want to have the following layout:
  * ----------------------------------
  * -  ---------------   ----------  -
  * -  | heading     |   |        |  -
  * -  --------------    | button |  -
  * -  ---------------   | button |  -
  * -  | description |   |        |  -
  * -  ---------------   ----------  -
  * ----------------------------------
  */
  display: grid;
  grid-template:
    "header button" auto
    "description button" auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-column-gap: var(--cpd-space-6x);
  -webkit-column-gap: var(--cpd-space-6x);
     -moz-column-gap: var(--cpd-space-6x);
          column-gap: var(--cpd-space-6x);
}

._header_3xq91_37 {
  margin: 0;
  color: var(--cpd-color-text-on-solid-primary);
  grid-area: header;
}

._description_3xq91_43 {
  color: var(--cpd-color-gray-500);
  grid-area: description;
}

._button_3xq91_48 {
  color: var(--cpd-color-bg-subtle-secondary);
  grid-area: button;
}

._arrow_3xq91_53 {
  fill: var(--cpd-color-bg-action-primary-rest);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_j0rlq_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._container_j0rlq_8 label {
    font: var(--cpd-font-body-md-medium);
    -webkit-margin-after: var(--cpd-space-1x);
            margin-block-end: var(--cpd-space-1x);
  }

._container_j0rlq_8 button {
    inline-size: 100%;
    border: 1px solid var(--cpd-color-border-interactive-primary);
    background: var(--cpd-color-bg-canvas-default);
    border-radius: 0.5rem;
    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)
      var(--cpd-space-4x);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: var(--cpd-color-text-primary);
    font: var(--cpd-font-body-md-regular);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--cpd-space-4x);
  }

._container_j0rlq_8 button svg {
      -webkit-transition: -webkit-transform 0.1s linear;
      transition: -webkit-transform 0.1s linear;
      transition: transform 0.1s linear;
      transition: transform 0.1s linear, -webkit-transform 0.1s linear;
    }

/**
   * When the dropdown is open, rotate the arrow icon
   */

._container_j0rlq_8 button[aria-expanded="true"] svg {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }

._container_j0rlq_8 button._placeholder_j0rlq_47 {
    color: var(--cpd-color-text-secondary);
  }

._container_j0rlq_8 ._border_j0rlq_51 {
    display: none;
    -webkit-border-start: 1px solid var(--cpd-color-border-interactive-secondary);
            border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);
    -webkit-border-end: 1px solid var(--cpd-color-border-interactive-secondary);
            border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);
    block-size: var(--cpd-space-1x);
    -webkit-margin-before: calc(var(--cpd-space-1x) * -1);
            margin-block-start: calc(var(--cpd-space-1x) * -1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

._container_j0rlq_8 ._content_j0rlq_60 {
    display: none;
    position: relative;
  }

._container_j0rlq_8 ._content_j0rlq_60 ul {
      /**
       * To make the component going over the other elements
       */
      position: absolute;
      display: block;
      inline-size: 100%;
      background: var(--cpd-color-bg-canvas-default);
      border: 1px solid var(--cpd-color-border-interactive-secondary);
      -webkit-border-before: 0;
              border-block-start: 0;
      border-end-start-radius: var(--cpd-space-4x);
      border-end-end-radius: var(--cpd-space-4x);
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      -webkit-box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);
              box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);
      margin: 0;
      padding: 0;
      -webkit-padding-after: var(--cpd-space-4x);
              padding-block-end: var(--cpd-space-4x);
      cursor: pointer;
    }

._container_j0rlq_8 ._content_j0rlq_60 ul li {
        list-style: none;
        font: var(--cpd-font-body-md-medium);
        padding: var(--cpd-space-3x) var(--cpd-space-4x);
        -webkit-border-after: 1px solid var(--cpd-color-gray-300);
                border-block-end: 1px solid var(--cpd-color-gray-300);
        color: var(--cpd-color-text-secondary);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--cpd-space-4x);
      }

@media (hover) {
          ._container_j0rlq_8 ._content_j0rlq_60 ul li:hover {
            background: var(--cpd-color-gray-200);
          }
        }

._container_j0rlq_8 ._content_j0rlq_60 ul li[aria-selected="true"] {
          color: var(--cpd-color-text-primary);
          background: var(--cpd-color-gray-300);
        }

._container_j0rlq_8 ._open_j0rlq_108 {
    display: block;
  }

._container_j0rlq_8 ._help_j0rlq_112 {
    font: var(--cpd-font-body-sm-regular);
    color: var(--cpd-color-text-secondary);
  }

._container_j0rlq_8 ._error_j0rlq_117 {
    font: var(--cpd-font-body-sm-medium);
    color: var(--cpd-color-text-critical-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-2x);
  }

._container_j0rlq_8 ._error_j0rlq_117,
  ._container_j0rlq_8 ._help_j0rlq_112 {
    -webkit-margin-before: var(--cpd-space-2x);
            margin-block-start: var(--cpd-space-2x);
  }

._container_j0rlq_8[aria-invalid="true"] label {
      color: var(--cpd-color-text-critical-primary);
    }

._container_j0rlq_8[aria-invalid="true"] button {
      border-color: var(--cpd-color-text-critical-primary);
    }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._breadcrumb_1xygz_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  block-size: 40px;
  gap: var(--cpd-space-3x);
  -webkit-padding-after: var(--cpd-space-3x);
          padding-block-end: var(--cpd-space-3x);
  -webkit-border-after: 1px solid var(--cpd-color-alpha-gray-400);
          border-block-end: 1px solid var(--cpd-color-alpha-gray-400);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._breadcrumb_1xygz_8 ._pages_1xygz_17 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-1x);

    /* override list styles */
    list-style: none;
    margin: 0;
    padding: 0;
  }

._breadcrumb_1xygz_8 ._pages_1xygz_17 a {
      cursor: pointer;
    }

._breadcrumb_1xygz_8 ._pages_1xygz_17 ._last-page_1xygz_30 {
      font: var(--cpd-font-body-sm-regular);
      color: var(--cpd-color-text-secondary);
    }

/*
     * Breadcrumb separator
     * We want this separator to be only visual and to not be in the accessibility tree.
     * The nav html element already provides an accessible way to separate the links.
     */

._breadcrumb_1xygz_8 ._pages_1xygz_17 li + li::before {
      display: inline-block;
      margin: 0 0.3em 0 0.25em;
      -webkit-transform: rotate(15deg);
              transform: rotate(15deg);
      -webkit-border-end: 1px solid var(--cpd-color-text-secondary);
              border-inline-end: 1px solid var(--cpd-color-text-secondary);
      block-size: var(--cpd-space-3x);
      content: "";
    }

/* Last page */

._breadcrumb_1xygz_8 ._pages_1xygz_17 :last-child span {
        -webkit-padding-start: var(--cpd-space-1x);
                padding-inline-start: var(--cpd-space-1x);
      }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._visual-list_15wzx_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-radius: var(--cpd-space-3x);
  overflow: hidden;
}

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._visual-list-item_1ma3e_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--cpd-space-3x);
  padding: var(--cpd-space-3x) var(--cpd-space-4x);
  background-color: var(--cpd-color-bg-subtle-secondary);
  font: var(--cpd-font-body-md-medium);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._visual-list-item-icon_1ma3e_17 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--cpd-color-icon-secondary);
}

._visual-list-item-icon-success_1ma3e_22 {
  color: var(--cpd-color-icon-success-primary);
}

._visual-list-item-icon-destructive_1ma3e_26 {
  color: var(--cpd-color-icon-critical-primary);
}

/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._chat-filter_5qdp0_8 {
  font: var(--cpd-font-body-sm-medium);
  color: var(--cpd-color-text-primary);
  background-color: transparent;
  border: var(--cpd-border-width-1) solid
    var(--cpd-color-border-interactive-secondary);
  border-radius: 99px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: var(--cpd-space-1x) var(--cpd-space-2x);
}

@media (hover) {
  ._chat-filter_5qdp0_8:hover {
    border-color: var(--cpd-color-border-interactive-primary);
    background: var(--cpd-color-bg-subtle-primary);
  }
}

._chat-filter_5qdp0_8[aria-selected="true"] {
  border-color: var(--cpd-color-bg-action-primary-rest);
  background: var(--cpd-color-bg-action-primary-rest);
  color: var(--cpd-color-text-on-solid-primary);
}

/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._unread-counter_9mg0k_8 {
  border-radius: 38px;
  font: var(--cpd-font-body-xs-semibold);
  color: var(--cpd-color-text-on-solid-primary);
  background-color: var(--cpd-color-icon-success-primary);
  block-size: 20px;
  min-inline-size: 20px;
  padding: 0 var(--cpd-space-1-5x);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._pill_1pem8_8 {
  border-radius: 38px;
  font: var(--cpd-font-body-xs-semibold);
  color: var(--cpd-color-text-on-solid-primary);
  background-color: var(--cpd-color-icon-success-primary);
  padding: 0 var(--cpd-space-2x);
  block-size: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._unread_1k06b_8 {
  inline-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._unread_1k06b_8 div {
    block-size: 8px;
    inline-size: 8px;
    background-color: var(--cpd-color-icon-secondary);
    border-radius: 100%;
  }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* SCSS variables representing a range of standard lengths.
 *
 * Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are
 * effectively equivalent to using hardcoded values.
 *
 * In future, we plan to introduce variables named according to their purpose rather than their size. Additionally,
 * we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have
 * `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font
 * sizes, for which see the `$font-<N>px` variables).
 */

.maplibregl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}

.maplibregl-canvas{left:0;position:absolute;top:0}

.maplibregl-map:-webkit-full-screen{height:100%;width:100%}

.maplibregl-map:-ms-fullscreen{height:100%;width:100%}

.maplibregl-map:fullscreen{height:100%;width:100%}

.maplibregl-ctrl-group button.maplibregl-ctrl-compass{-ms-touch-action:none;touch-action:none}

.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}

.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:-webkit-grabbing;cursor:grabbing}

.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}

.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{-ms-touch-action:pinch-zoom;touch-action:pinch-zoom}

.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{-ms-touch-action:none;touch-action:none}

.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}

.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}

.maplibregl-ctrl-top-left{left:0;top:0}

.maplibregl-ctrl-top-right{right:0;top:0}

.maplibregl-ctrl-bottom-left{bottom:0;left:0}

.maplibregl-ctrl-bottom-right{bottom:0;right:0}

.maplibregl-ctrl{clear:both;pointer-events:auto;-webkit-transform:translate(0);transform:translate(0)}

.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px}

.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0}

.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px}

.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0}

.maplibregl-ctrl-group{background:#fff;border-radius:4px}

.maplibregl-ctrl-group:not(:empty){-webkit-box-shadow:0 0 0 2px rgba(0,0,0,.1);box-shadow:0 0 0 2px rgba(0,0,0,.1)}

@media (forced-colors:active){.maplibregl-ctrl-group:not(:empty){-webkit-box-shadow:0 0 0 2px ButtonText;box-shadow:0 0 0 2px ButtonText}}

.maplibregl-ctrl-group button{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;padding:0;width:29px}

.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}

.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}

@media (forced-colors:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}

.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}

.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{-webkit-box-shadow:0 0 2px 2px #0096ff;box-shadow:0 0 2px 2px #0096ff}

.maplibregl-ctrl button:disabled{cursor:not-allowed}

.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}

@media (hover:hover){.maplibregl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)}}

.maplibregl-ctrl button:not(:disabled):active{background-color:rgb(0 0 0/5%)}

.maplibregl-ctrl-group button:focus:focus-visible{-webkit-box-shadow:0 0 2px 2px #0096ff;box-shadow:0 0 2px 2px #0096ff}

.maplibregl-ctrl-group button:focus:not(:focus-visible){-webkit-box-shadow:none;box-shadow:none}

.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}

.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}

.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}

.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}

@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}

@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}

.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}

@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}

@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}

.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}

@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}

@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}

.maplibregl-ctrl button.maplibregl-ctrl-globe .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23333' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%2333b5e5' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23333' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}

.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{-webkit-animation:maplibregl-spin 2s linear infinite;animation:maplibregl-spin 2s linear infinite}

@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23999' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}}

@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}}

@-webkit-keyframes maplibregl-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}

@keyframes maplibregl-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}

a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}

a.maplibregl-ctrl-logo.maplibregl-compact{width:14px}

@media (forced-colors:active){a.maplibregl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}

@media (forced-colors:active) and (prefers-color-scheme:light){a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}

.maplibregl-ctrl.maplibregl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}

@media screen{.maplibregl-ctrl-attrib.maplibregl-compact{background-color:#fff;border-radius:12px;-webkit-box-sizing:content-box;box-sizing:content-box;color:#000;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgb(0 0 0/5%)}.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{right:0;top:0}.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{left:0;top:0}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}}

@media screen and (forced-colors:active){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}

@media screen and (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}

.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}

.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}

.maplibregl-attrib-empty{display:none}

.maplibregl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;-webkit-box-sizing:border-box;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px}

.maplibregl-popup{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}

.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}

.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}

.maplibregl-popup-anchor-left{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}

.maplibregl-popup-anchor-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}

.maplibregl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}

.maplibregl-popup-anchor-top .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-bottom-color:#fff;border-top:none}

.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}

.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-bottom:none;border-top-color:#fff}

.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}

.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}

.maplibregl-popup-anchor-left .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-left:none;border-right-color:#fff}

.maplibregl-popup-anchor-right .maplibregl-popup-tip{-ms-flex-item-align:center;align-self:center;border-left-color:#fff;border-right:none}

.maplibregl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}

.maplibregl-popup-close-button:hover{background-color:rgb(0 0 0/5%)}

.maplibregl-popup-content{background:#fff;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px 10px;pointer-events:auto;position:relative}

.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0}

.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0}

.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0}

.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0}

.maplibregl-popup-track-pointer{display:none}

.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.maplibregl-map:hover .maplibregl-popup-track-pointer{display:-webkit-box;display:-ms-flexbox;display:flex}

.maplibregl-map:active .maplibregl-popup-track-pointer{display:none}

.maplibregl-marker{left:0;position:absolute;top:0;-webkit-transition:opacity .2s;transition:opacity .2s;will-change:transform}

.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}

.maplibregl-user-location-dot:before{-webkit-animation:maplibregl-user-location-dot-pulse 2s infinite;animation:maplibregl-user-location-dot-pulse 2s infinite;content:"";position:absolute}

.maplibregl-user-location-dot:after{border:2px solid #fff;border-radius:50%;-webkit-box-shadow:0 0 3px rgba(0,0,0,.35);box-shadow:0 0 3px rgba(0,0,0,.35);-webkit-box-sizing:border-box;box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}

@-webkit-keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}70%{opacity:0;-webkit-transform:scale(3);transform:scale(3)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}

@keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}70%{opacity:0;-webkit-transform:scale(3);transform:scale(3)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}

.maplibregl-user-location-dot-stale{background-color:#aaa}

.maplibregl-user-location-dot-stale:after{display:none}

.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}

.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair}

.maplibregl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}

.maplibregl-cooperative-gesture-screen{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,.4);color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.4em;inset:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1.2;opacity:0;padding:1rem;pointer-events:none;position:absolute;-webkit-transition:opacity 1s ease 1s;transition:opacity 1s ease 1s;z-index:99999}

.maplibregl-cooperative-gesture-screen.maplibregl-show{opacity:1;-webkit-transition:opacity .05s;transition:opacity .05s}

.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:none}

@media (hover:none),(pointer:coarse){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}}

.maplibregl-pseudo-fullscreen{height:100%!important;left:0!important;position:fixed!important;top:0!important;width:100%!important;z-index:99999}

:root {
    --container-border-width: 8px;
    --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
    --transition-short: 0.1s;
    --transition-standard: 0.3s;
    --buttons-dialog-gap-row: 8px;
    --buttons-dialog-gap-column: 8px;
    --MBody-border-radius: 8px;

    /* 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.
     */
    --dialog-zIndex-wrapper-default: 4000;
    --dialog-zIndex-static-background: 4009;
    --dialog-zIndex-static: calc(var(--dialog-zIndex-static-background) + 1); /* 4010 */
    --dialog-zIndex-standard-background: calc(var(--dialog-zIndex-static) + 1); /* 4011 */
    --dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */
}

#matrixchat {
    /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
    contain: strict;
}

#mx_ContextualMenu_Container,
#mx_PersistedElement_container,
#mx_Dialog_Container,
#mx_Dialog_StaticContainer {
    /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
    isolation: isolate;
}

/**
 * We need to increase the specificity of the selector to override the
 * custom property set by the design tokens package
 */

[class^="cpd-theme"][class^="cpd-theme"] {
    /**
     * The design tokens package currently does not expose the fallback fonts
     * We want to keep on re-using `$font-family` to not break custom themes
     * and because we can to use `Twemoji` to display emoji rather than using
     * system ones
     */
    --cpd-font-family-sans: "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
    "Noto Color Emoji";
}

@media (prefers-reduced-motion) {
    :root {
        --transition-short: 0;
        --transition-standard: 0;
    }
}

html {
    /* hack to stop overscroll bounce on OSX and iOS.
       N.B. Breaks things when we have legitimate horizontal overscroll */
    height: 100%;
    overflow: hidden;
    /* Stop similar overscroll bounce in Firefox Nightly for macOS */
    -ms-scroll-chaining: none;
        overscroll-behavior: none;
}

body {
    font: var(--cpd-font-body-md-regular);
    letter-spacing: var(--cpd-font-letter-spacing-body-md);
    /**
     * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
     * We need to tweak the `letter-spacing` property and doing so, disables by
     * default the optional ligatures
     * `font-feature-settings` allows us to override this behaviour and have the
     * correct ligatures and the proper dynamic metric spacing.
     */
    -webkit-font-feature-settings:
        "kern" 1,
        "liga" 1,
        "calt" 1;
            font-feature-settings:
        "kern" 1,
        "liga" 1,
        "calt" 1;

    background-color: #181b21;
    color: #edf3ff;
    border: 0px;
    margin: 0px;

    /* needed to match the designs correctly on macOS */
    /* see https://github.com/vector-im/element-web/issues/11425 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

pre,
code {
    font-family: "Inconsolata", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji";
    font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji";
    font-size: 100% !important;
}

.error,
.warning,
.text-error,
.text-warning {
    color: #ff5b55;
}

.text-success {
    color: #0dbd8b;
}

.text-muted {
    color: #a1b2d1;
}

.text-primary {
    color: #edf3ff;
}

.text-secondary {
    color: #edf3ff;
}

.mx_Verified {
    color: #0dbd8b;
}

.mx_Untrusted {
    color: #ff5b55;
}

b {
    /* On Firefox, the default weight for `<b>` is `bolder` which results in no bold */
    /* effect since we only have specific weights of our fonts available. */
    font-weight: bold;
}

h2 {
    color: #edf3ff;
    font: var(--cpd-font-heading-lg-regular);
    letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
    margin-top: 16px;
    margin-bottom: 16px;
}

a:hover,
a:link,
a:visited {
    color: #238cf5;
}

:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="text"],
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="search"],
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="password"] {
    padding: 9px;
    font: var(--cpd-font-body-md-semibold);
    font-weight: var(--cpd-font-weight-semibold);
    min-width: 0;
}

input[type="text"].mx_textinput_icon,
input[type="search"].mx_textinput_icon {
    padding-left: 36px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

/* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */

input[type="text"].mx_textinput_icon.mx_textinput_search,
input[type="search"].mx_textinput_icon.mx_textinput_search {
    background-image: url(../../icons/search.7258145.svg);
}

/* dont search UI as not all browsers support it, */

/* we implement it ourselves where needed instead */

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;
}

/* Override Firefox's UA style so we get a consistent look across browsers */

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    opacity: 1;
    opacity: initial;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 1;
    opacity: initial;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    opacity: 1;
    opacity: initial;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    opacity: 1;
    opacity: initial;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    opacity: initial;
}

input[type="text"],
input[type="password"],
textarea {
    background-color: transparent;
    color: #edf3ff;
}

/* Required by Firefox */

textarea {
    color: #edf3ff;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}

/* This is used to hide the standard outline added by browsers for */

/* accessible (focusable) components. Not intended for buttons, but */

/* should be used on things like focusable containers where the outline */

/* is usually not helping anyone. */

*:focus:not(:focus-visible) {
    outline: none;
}

/* override defaults */

fieldset {
    display: inline-block;
    margin-inline: unset;
    padding-block: unset;
    padding-inline: unset;
    min-inline-size: unset;
    border: none;
}

summary {
    cursor: pointer;
}

legend {
    padding-inline: unset;
    border: none;
}

/* .mx_textinput is a container for a text input */

/* + some other controls like buttons, ... */

/* it has the appearance of a text box so the controls */

/* appear to be part of the input */

.mx_Dialog .mx_textinput > input[type="text"],
    .mx_Dialog .mx_textinput > input[type="search"],
    .mx_MatrixChat_wrapper .mx_textinput > input[type="text"],
    .mx_MatrixChat_wrapper .mx_textinput > input[type="search"] {
        border: none;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        color: #edf3ff;
    }

.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
    .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
    .mx_Dialog .mx_textinput,
    .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
    .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
    .mx_MatrixChat_wrapper .mx_textinput {
        display: block;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-color: transparent;
        color: #61708b;
        border-radius: 4px;
        border: 1px solid var(--cpd-color-gray-300);
        /* these things should probably not be defined globally */
        margin: 9px;
    }

.mx_Dialog .mx_textinput, .mx_MatrixChat_wrapper .mx_textinput {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-webkit-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-webkit-input-placeholder, .mx_Dialog .mx_textinput input::-webkit-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-webkit-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-webkit-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-webkit-input-placeholder {
        color: var(--cpd-color-text-secondary);
    }

.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-moz-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-moz-placeholder, .mx_Dialog .mx_textinput input::-moz-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-moz-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-moz-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-moz-placeholder {
        color: var(--cpd-color-text-secondary);
    }

.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]:-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]:-ms-input-placeholder, .mx_Dialog .mx_textinput input:-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]:-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]:-ms-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input:-ms-input-placeholder {
        color: var(--cpd-color-text-secondary);
    }

.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-ms-input-placeholder, .mx_Dialog .mx_textinput input::-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::-ms-input-placeholder, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::-ms-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-ms-input-placeholder {
        color: var(--cpd-color-text-secondary);
    }

.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
    .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
    .mx_Dialog .mx_textinput input::placeholder,
    .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
    .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
    .mx_MatrixChat_wrapper .mx_textinput input::placeholder {
        color: var(--cpd-color-text-secondary);
    }

/* Prevent ugly dotted highlight around selected elements in Firefox */

::-moz-focus-inner {
    border: 0;
}

/* These are magic constants which are excluded from tinting, to let themes */

/* (which only have CSS) tell the app what their non-tinted */

/* colourscheme is by inspecting the stylesheet DOM. */

/* They are not used for layout!! */

#mx_theme_accentColor {
    color: #0dbd8b;
}

#mx_theme_secondaryAccentColor {
    color: #f2f5f8;
}

.mx_Dialog_wrapper {
    position: fixed;
    z-index: 4000;
    z-index: var(--dialog-zIndex-wrapper-default);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_Dialog_border {
    z-index: calc(calc(calc(4009 + 1) + 1) + 1);
    z-index: var(--dialog-zIndex-standard);
    position: relative;
    width: 100%;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-height: calc(100% - var(--cpd-space-6x));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_Dialog_lightbox .mx_Dialog_border {
        /* The lightbox isn't so much of a dialog as a fullscreen overlay. We
        don't want the glass border. */
        display: contents;
    }

.mx_Dialog {
    background-color: #181b21;
    color: #c8c8cd;
    font-size: 0.9375rem;
    position: relative;
    padding: var(--cpd-space-8x) var(--cpd-space-10x);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-y: auto;
}

.mx_Dialog_staticWrapper .mx_Dialog {
        z-index: calc(4009 + 1);
        z-index: var(--dialog-zIndex-static);
        contain: content;
    }

.mx_Dialog_lightbox .mx_Dialog {
        border-radius: 0px;
        background-color: transparent;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        pointer-events: none;
        padding: 0;
    }

/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */

.mx_Dialog .markdown-body {
        font: var(--cpd-font-body-md-regular) !important;
        letter-spacing: var(--cpd-font-letter-spacing-body-md);
        font-family: inherit !important;
        white-space: normal !important;
        line-height: inherit !important;
        background-color: inherit;
        color: inherit;

        /* Make h1 and h2 the same size as h3. */
    }

/* inherit the colour from the dark or light theme by default (but not for code blocks) */

.mx_Dialog .markdown-body pre,
        .mx_Dialog .markdown-body code {
            font-family: "Inconsolata", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
            font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
            background-color: #2a3039;
        }

/* this selector wrongly applies to code blocks too but we will unset it in the next one */

.mx_Dialog .markdown-body code {
            white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
        }

.mx_Dialog .markdown-body pre {
            /* 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 */
            overflow-x: overlay;
            overflow-y: visible;
        }

.mx_Dialog .markdown-body pre::-webkit-scrollbar-corner {
                background: transparent;
            }

.mx_Dialog .markdown-body pre code {
                white-space: pre; /* we want code blocks to be scrollable and not wrap */
            }

.mx_Dialog .markdown-body pre code > * {
                    display: inline;
                }

.mx_Dialog .markdown-body h1,
        .mx_Dialog .markdown-body h2,
        .mx_Dialog .markdown-body h3,
        .mx_Dialog .markdown-body h4,
        .mx_Dialog .markdown-body h5,
        .mx_Dialog .markdown-body h6 {
            font-family: inherit !important;
            color: inherit;
        }

.mx_Dialog .markdown-body h1,
        .mx_Dialog .markdown-body h2 {
            font-size: 1.5em;
            border-bottom: none !important; /* override GFM */
        }

.mx_Dialog .markdown-body a {
            color: #238cf5;
        }

.mx_Dialog .markdown-body blockquote {
            border-left: 2px solid var(--cpd-color-border-interactive-primary);
            color: #edf3ff;
            border-radius: 2px;
            padding: 0 10px;
        }

.mx_Dialog_fixedWidth {
    width: 60vw;
    max-width: 704px;
}

.mx_Dialog_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    z-index: calc(calc(4009 + 1) + 1);
    z-index: var(--dialog-zIndex-standard-background);
}

.mx_Dialog_background.mx_Dialog_staticBackground {
        z-index: 4009;
        z-index: var(--dialog-zIndex-static-background);
    }

.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
        /* Roughly half of what it would normally be - we don't want to black out */
        /* the app, just make it clear that the dialogs are stacked. */
        opacity: 0.4;
    }

.mx_Dialog_lightbox .mx_Dialog_background {
        opacity: 0.85;
        background-color: #000;
        -webkit-animation-name: mx_Dialog_lightbox_background_keyframes;
                animation-name: mx_Dialog_lightbox_background_keyframes;
        -webkit-animation-duration: 300ms;
                animation-duration: 300ms;
    }

.mx_Dialog_titleImage {
    vertical-align: sub;
    width: 25px;
    height: 25px;
    margin-left: -2px;
    margin-right: 4px;
    margin-bottom: 2px;
}

.mx_Dialog_title {
    color: #edf3ff;
    display: inline-block;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
}

.mx_Dialog_title.danger {
        color: #ff5b55;
    }

.mx_Dialog_header {
    position: relative;
    padding: 0;
    -webkit-padding-end: 20px;
            padding-inline-end: 20px; /* Reserve room for the close button */
    margin-bottom: var(--cpd-space-2x);
}

.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
        text-align: center;
    }

.mx_Dialog_cancelButton {
    cursor: pointer;
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--cpd-color-bg-subtle-secondary);
}

.mx_Dialog_cancelButton:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_Dialog_cancelButton::before {
        content: "";
        width: 28px;
        height: 28px;
        left: 0;
        top: 0;
        position: absolute;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_Dialog_cancelButton {
    position: absolute;
    top: var(--cpd-space-4x);
    right: var(--cpd-space-4x);
}

.mx_Dialog_content {
    margin: 24px 0 68px;
    font: var(--cpd-font-body-md-regular);
    color: #edf3ff;
    word-wrap: break-word;
}

.mx_Dialog_buttons {
    margin-top: 20px;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    text-align: right;
}

.mx_Dialog_buttons .mx_Dialog_buttons_additive {
        /* The consumer is responsible for positioning their elements. */
        float: left;
    }

.mx_Dialog_buttons .mx_Dialog_buttons_row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        text-align: left;
        text-align: initial;
        -webkit-margin-start: auto;
                margin-inline-start: auto;

        /* default gap among elements */
        -webkit-column-gap: 8px;
           -moz-column-gap: 8px;
                column-gap: 8px;
        -webkit-column-gap: var(--buttons-dialog-gap-column);
           -moz-column-gap: var(--buttons-dialog-gap-column);
                column-gap: var(--buttons-dialog-gap-column);
        row-gap: 8px;
        row-gap: var(--buttons-dialog-gap-row);
    }

.mx_Dialog_buttons .mx_Dialog_buttons_row button {
            margin: 0 !important; /* override the margin settings */
        }

/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
 * to them that no button anywhere else in the app gets by default. In practice, buttons in other places
 * in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
 * We should go through and have one consistent set of styles for buttons throughout the app.
 * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
 */

.mx_Dialog
    button:not(
        .mx_EncryptionUserSettingsTab button,
        .mx_EncryptionCard button,
        .mx_UserProfileSettings button,
        .mx_ShareDialog button,
        .mx_UnpinAllDialog button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_Dialog_nonDialogButton,
        .mx_AccessibleButton,
        .mx_IdentityServerPicker button,
        .mx_AccessSecretStorageDialog button,
        [class|="maplibregl"]
    ),
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons input[type="submit"] {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 24px;
    font: var(--cpd-font-body-md-regular);
    color: white;
    background-color: var(--cpd-color-bg-action-primary-rest);
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;

    /* flip colours for the secondary ones */
}

.mx_Dialog
    button:not(
        .mx_EncryptionUserSettingsTab button,
        .mx_EncryptionCard button,
        .mx_UserProfileSettings button,
        .mx_ShareDialog button,
        .mx_UnpinAllDialog button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_Dialog_nonDialogButton,
        .mx_AccessibleButton,
        .mx_IdentityServerPicker button,
        .mx_AccessSecretStorageDialog button,
        [class|="maplibregl"]
    ):not(:focus-visible), .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):not(:focus-visible), .mx_Dialog input[type="submit"]:not(:focus-visible), .mx_Dialog_buttons input[type="submit"]:not(:focus-visible) {
        outline: none;
    }

.mx_Dialog
    button:not(
        .mx_EncryptionUserSettingsTab button,
        .mx_EncryptionCard button,
        .mx_UserProfileSettings button,
        .mx_ShareDialog button,
        .mx_UnpinAllDialog button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_Dialog_nonDialogButton,
        .mx_AccessibleButton,
        .mx_IdentityServerPicker button,
        .mx_AccessSecretStorageDialog button,
        [class|="maplibregl"]
    ),
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons input[type="submit"] {
    margin-left: 0px;
    margin-right: 8px;
    margin-right: 8px;
    margin-right: var(--buttons-dialog-gap-column);
    margin-bottom: 5px;
    font-weight: var(--cpd-font-weight-semibold);
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    color: var(--cpd-color-text-primary);
    background-color: transparent;
    font-family: inherit;
}

.mx_Dialog
    button:not(
        .mx_Dialog_nonDialogButton,
        [class|="maplibregl"],
        .mx_AccessibleButton,
        .mx_UserProfileSettings button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_UnpinAllDialog button,
        .mx_ShareDialog button,
        .mx_EncryptionUserSettingsTab button
    ):last-child {
    margin-right: 0px;
}

.mx_Dialog
    button:not(
        .mx_Dialog_nonDialogButton,
        [class|="maplibregl"],
        .mx_AccessibleButton,
        .mx_UserProfileSettings button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_UnpinAllDialog button,
        .mx_ShareDialog button,
        .mx_EncryptionUserSettingsTab button
    ):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
    -webkit-filter: brightness(105%);
            filter: brightness(105%);
}

.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons
    button:not(
        .mx_Dialog_nonDialogButton,
        .mx_AccessibleButton,
        .mx_UserProfileSettings button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_UnpinAllDialog button,
        .mx_ShareDialog button,
        .mx_EncryptionUserSettingsTab button
    ),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
    color: var(--cpd-color-text-on-solid-primary);
    background-color: var(--cpd-color-bg-action-primary-rest);
    border-color: var(--cpd-color-bg-action-primary-rest);
    min-width: 156px;
}

.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons
    button.danger:not(
        .mx_Dialog_nonDialogButton,
        .mx_AccessibleButton,
        .mx_UserProfileSettings button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_UnpinAllDialog button,
        .mx_ShareDialog button,
        .mx_EncryptionUserSettingsTab button
    ),
.mx_Dialog_buttons input[type="submit"].danger {
    background-color: var(--cpd-color-bg-critical-primary);
    border: solid 1px var(--cpd-color-bg-critical-primary);
    color: var(--cpd-color-text-on-solid-primary);
}

.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
    border: solid 1px var(--cpd-color-border-critical-subtle);
    color: var(--cpd-color-text-critical-primary);
}

.mx_Dialog
    button:not(
        .mx_Dialog_nonDialogButton,
        [class|="maplibregl"],
        .mx_AccessibleButton,
        .mx_UserProfileSettings button,
        .mx_ThemeChoicePanel_CustomTheme button,
        .mx_UnpinAllDialog button,
        .mx_ShareDialog button,
        .mx_EncryptionUserSettingsTab button
    ):disabled,
.mx_Dialog input[type="submit"]:disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {
    background-color: #c8c8cd;
    border: solid 1px #c8c8cd;
    opacity: 0.7;
}

/* Spinner Dialog overide */

/* This is not a real dialog, so we shouldn't show a glass border */

.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog_border {
        display: contents;
    }

.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
        inline-size: auto;
        block-size: auto;
        border-radius: 8px;
        padding: 8px;
        -webkit-box-shadow: none;
                box-shadow: none;

        /* Don't show scroll-bars on spinner dialogs */
        overflow-x: hidden;
        overflow-y: hidden;
    }

/* TODO: Review mx_GeneralButton usage to see if it can use a different class */

/* These classes were brought in from the old UserSettings and are included here to avoid */

/* breaking the app. */

/* Ref: https://github.com/vector-im/element-web/issues/8420 */

.mx_GeneralButton {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 24px;
    font: var(--cpd-font-body-md-regular);
    color: white;
    background-color: var(--cpd-color-bg-action-primary-rest);
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
}

.mx_GeneralButton:not(:focus-visible) {
        outline: none;
    }

.mx_GeneralButton {
    display: inline;
    margin: auto;
}

.mx_TextInputDialog_label {
    text-align: left;
    padding-bottom: 12px;
}

.mx_TextInputDialog_input {
    font-size: 0.9375rem;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: #edf3ff;
    background-color: #181b21;
}

.mx_button_row {
    margin-top: 69px;
}

/* username colors */

/* used by SenderProfile & RoomPreviewBar */

.mx_Username_color1 {
    color: var(--cpd-color-text-decorative-1);
}

.mx_Username_color2 {
    color: var(--cpd-color-text-decorative-2);
}

.mx_Username_color3 {
    color: var(--cpd-color-text-decorative-3);
}

.mx_Username_color4 {
    color: var(--cpd-color-text-decorative-4);
}

.mx_Username_color5 {
    color: var(--cpd-color-text-decorative-5);
}

.mx_Username_color6 {
    color: var(--cpd-color-text-decorative-6);
}

.mx_AppWarning,
.mx_AppPermission {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_lineClamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    -webkit-line-clamp: var(--mx-line-clamp, 1);
    overflow: hidden;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BeaconListItem {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 12px 0;

    border-bottom: 1px solid #21262c;

    cursor: pointer;
}

.mx_BeaconListItem_avatarIcon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0;
            flex: 0 0;
    height: 32px;
    width: 32px;
}

.mx_BeaconListItem_avatar {
    -webkit-box-flex: 0;
        -ms-flex: 0 0;
            flex: 0 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    margin-right: 8px;
    border: 2px solid #5c56f5;
    border-radius: 50%;
}

.mx_BeaconListItem_info {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.mx_BeaconListItem_status {
    /* override beacon status padding */
    padding: 0 !important;
    margin-bottom: 8px;
}

.mx_BeaconListItem_status .mx_BeaconStatus_label {
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_BeaconListItem_lastUpdated {
    color: #edf3ff;
    font-size: 0.625rem;
}

.mx_BeaconListItem_interactions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BeaconStatus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
    padding: 8px;

    color: var(--color);
    font-size: 0.75rem;
}

.mx_BeaconStatus_Loading,
.mx_BeaconStatus_Stopped {
    --color: #edf3ff;
}

.mx_BeaconStatus_Active,
.mx_BeaconStatus_Error {
    --color: #edf3ff;
}

.mx_BeaconStatus_icon {
    height: 32px;
    width: 32px;

    -webkit-box-flex: 0;

        -ms-flex: 0 0 32px;

            flex: 0 0 32px;
    margin-right: 8px;
}

.mx_BeaconStatus_description {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    line-height: 0.875rem;

    padding-right: 8px;

    white-space: nowrap;
    overflow: hidden;
}

.mx_BeaconStatus_description .mx_BeaconStatus_description_status {
        text-overflow: ellipsis;
        overflow: hidden;
    }

.mx_BeaconStatus_expiryTime {
    color: #edf3ff;
}

.mx_BeaconStatus_label {
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BeaconStatusTooltip {
    position: absolute;
    top: 42px;
    max-width: 150px;
    height: 38px;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    padding-top: 8px;
}

.mx_BeaconStatusTooltip_inner {
    position: relative;
    height: 100%;
    border-radius: 4px;
    background: #22262e;
    -webkit-box-shadow: 4px 4px 12px 0 #181b21;
            box-shadow: 4px 4px 12px 0 #181b21;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BeaconViewDialog_wrapper .mx_Dialog {
    padding: 0px;

    /* Unset contain and position to allow the close button
    to appear outside the dialog */
    contain: unset;
    position: static;
    position: initial;
}

.mx_BeaconViewDialog {
    /* subtract 0.5px to prevent single-pixel margin due to rounding */
    width: calc(80vw - 0.5px);
    height: calc(80vh - 0.5px);
    overflow: hidden;

    /* sidebar is absolutely positioned inside */
    position: relative;
}

.mx_BeaconViewDialog .mx_Dialog_header {
        margin: 0px;
        padding: 0px;
        position: static;
        position: initial;
    }

.mx_BeaconViewDialog .mx_Dialog_header .mx_Dialog_title {
            display: none;
        }

.mx_BeaconViewDialog .mx_Dialog_header .mx_Dialog_cancelButton {
            z-index: 4010;
            position: fixed;
            right: 5vw;
            top: 5vh;
            width: 20px;
            height: 20px;
            background-color: #edf3ff;
        }

.mx_BeaconViewDialog_map {
    width: 80vw;
    height: 80vh;
    border-radius: 8px;
}

.mx_BeaconViewDialog_mapFallbackMessage {
    color: #edf3ff;
    margin-bottom: 16px;
}

.mx_BeaconViewDialog_viewListButton {
    position: absolute;
    top: 24px;
    left: 24px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DialogOwnBeaconStatus {
    position: absolute;
    bottom: 32px;
    width: 300px;
    margin-left: -150px;
    left: 50%;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
            justify-content: stretch;

    background: #181b21;
    border-radius: 8px;
    -webkit-box-shadow: 4px 4px 12px 0 #181b21;
            box-shadow: 4px 4px 12px 0 #181b21;

    padding: 0 12px;
}

.mx_DialogOwnBeaconStatus_avatarIcon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0;
            flex: 0 0;
    height: 32px;
    width: 32px;
    margin: 8px 0 8px 0;
}

.mx_DialogOwnBeaconStatus_avatar {
    -webkit-box-flex: 0;
        -ms-flex: 0 0;
            flex: 0 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    border: 2px solid #5c56f5;
    border-radius: 50%;
    margin: 8px 0 8px 0;
}

.mx_DialogOwnBeaconStatus_status {
    -webkit-box-flex: 1;
        -ms-flex: 1 1;
            flex: 1 1;
    padding-right: 0;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DialogSidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 265px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
    padding: 16px;

    background-color: #181b21;
    -webkit-box-shadow: 0px 4px 4px #181b21;
            box-shadow: 0px 4px 4px #181b21;
}

.mx_DialogSidebar .mx_DialogSidebar_header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;

        -webkit-box-flex: 0;

            -ms-flex: 0 0;

                flex: 0 0;
        margin-bottom: 16px;

        color: #edf3ff;
    }

.mx_DialogSidebar .mx_DialogSidebar_header .mx_DialogSidebar_closeButtonIcon {
            color: #edf3ff;
        }

.mx_DialogSidebar .mx_DialogSidebar_list {
        list-style: none;
        padding: 0;
        margin: 0;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
        width: 100%;
        overflow: auto;
    }

.mx_DialogSidebar_noResults {
    font: var(--cpd-font-body-md-regular);
    color: #edf3ff;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LeftPanelLiveShareWarning {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    padding: 4px;
    text-align: center;

    background-color: #0dbd8b;
    color: #fff;
    font-size: 0.625rem;

    /* panel backdrops overlay the whole sidepanel */
    /* go above to get hover for title */
    z-index: 1;
}

.mx_LeftPanelLiveShareWarning__error {
    background-color: #ff5b55;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LiveTimeRemaining {
    color: #edf3ff;
    font-size: 0.75rem;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_OwnBeaconStatus_button {
    margin-left: 8px;
}

.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
    /* align to top to make room for timestamp */
    /* in bubble view */
    -ms-flex-item-align: start;
        align-self: start;
}

.mx_OwnBeaconStatus_destructiveButton {
    /* override button link_inline styles */
    color: #ff5b55 !important;
    font-weight: var(--cpd-font-weight-semibold) !important;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ShareLatestLocation_icon {
    height: 13px;
    width: 13px;
    color: #edf3ff;
}

/* double class to be more specific than the general mx_CopyableText CSS rule */

/* override copyable text style to make compact */

.mx_CopyableText.mx_ShareLatestLocation_copy .mx_CopyableText_copyButton {
        height: 13px;
        margin-left: 8px !important;
        position: relative;
        top: -1px;
        width: 13px;
    }

.mx_CopyableText.mx_ShareLatestLocation_copy .mx_CopyableText_copyButton::before {
            background-color: #edf3ff;
            height: 13px;
            width: 13px;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_StyledLiveBeaconIcon {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;

    background-color: #5c56f5;
    border-color: #5c56f5;
    padding: 2px;
    /* colors icon */
    color: white;
}

.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
    background-color: #ff5b55;
    border-color: #ff5b55;
}

.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
    background-color: #6f7882;
    border-color: #6f7882;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_KebabContextMenu_icon {
    width: 24px;
    height: 24px;
    color: var(--cpd-color-icon-tertiary);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PollDetailHeader {
    /* override accessiblebutton style */
    font-size: 0.9375rem !important;
}

.mx_PollDetailHeader_icon {
    height: 16px;
    width: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PollListItem {
    width: 100%;
}

.mx_PollListItem_content {
    width: 100%;
    display: grid;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-gap: 8px;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    cursor: pointer;

    color: #edf3ff;
}

.mx_PollListItem_icon {
    height: 14px;
    width: 14px;
    color: #6f7882;
    padding-left: 8px;
}

.mx_PollListItem_question {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PollListItemEnded {
    width: 100%;
}

.mx_PollListItemEnded_content {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: #edf3ff;
    cursor: pointer;
}

.mx_PollListItemEnded_title {
    display: grid;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-gap: 8px;
    grid-template-columns: -webkit-min-content 1fr -webkit-min-content;
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: auto;
}

.mx_PollListItemEnded_icon {
    height: 14px;
    width: 14px;
    color: #6f7882;
    padding-left: 8px;
}

.mx_PollListItemEnded_date {
    font-size: 0.75rem;
    color: #edf3ff;
}

.mx_PollListItemEnded_question {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx_PollListItemEnded_answers {
    display: grid;
    grid-gap: 8px;
    margin-top: 12px;
}

.mx_PollListItemEnded_voteCount {
    /* 6px to match PollOption padding */
    margin: 8px 0 0 6px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2023 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AppPermission {
    font-size: 0.75rem;
    width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
    overflow-y: scroll;
}

.mx_AppPermission .mx_AppPermission_bolder,
    .mx_AppPermission .mx_AppPermission_content_bolder {
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_AppPermission .mx_AppPermission_content {
        margin-block: auto; /* place at the center */
    }

.mx_AppPermission .mx_AppPermission_content > div {
            margin-block: 12px;
        }

.mx_AppPermission .mx_AppPermission_content .mx_TextWithTooltip_target--helpIcon {
            display: inline-block;
            height: 0.875rem; /* align with characters on the same line */
            vertical-align: middle;
        }

.mx_AppPermission .mx_AppPermission_content .mx_TextWithTooltip_target--helpIcon .mx_Icon {
                color: #0dbd8b;
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Suguru Hirahara

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AppWarning {
    font-size: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_AppWarning h4 {
        margin: 0;
        padding: 0;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FilterDropdown .mx_Dropdown_menu {
        margin-top: 4px;
        left: auto;
        left: initial;
        right: -12px;
        width: 232px;
        padding: 12px;

        border: 1px solid #6f7882;
        border-radius: 8px;
        -webkit-box-shadow: 0px 1px 3px rgb(23, 25, 28, 0.05);
                box-shadow: 0px 1px 3px rgb(23, 25, 28, 0.05);

        background-color: #21262c;
    }

.mx_FilterDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight {
            background-color: transparent;
        }

.mx_FilterDropdown .mx_Dropdown_input {
        height: 24px;
        background-color: transparent;
        border-color: transparent;
        color: #edf3ff;
        border-radius: 4px;
    }

.mx_FilterDropdown .mx_Dropdown_input:focus,
        .mx_FilterDropdown .mx_Dropdown_input:hover {
            background-color: #6f7882;
            border-color: #6f7882;
        }

.mx_FilterDropdown .mx_Dropdown_arrow {
        background: #edf3ff;
    }

.mx_FilterDropdown_option {
    position: relative;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 8px 0 8px 20px;

    font-size: 0.75rem;
    line-height: 0.9375rem;
    color: #edf3ff;
}

.mx_FilterDropdown_optionSelectedIcon {
    height: 14px;
    width: 14px;
    position: absolute;
    top: 8px;
    left: 0;
}

.mx_FilterDropdown_optionLabel {
    font-weight: var(--cpd-font-weight-semibold);
    display: block;
}

.mx_FilterDropdown_optionDescription {
    color: #edf3ff;
    margin-top: 4px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FilterTabGroup {
    color: #edf3ff;
}

.mx_FilterTabGroup label {
        margin-right: 12px;
        cursor: pointer;
    }

.mx_FilterTabGroup label span {
            display: inline-block;
            line-height: 1.5rem;
        }

.mx_FilterTabGroup input[type="radio"] {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        margin: 0;
        padding: 0;
    }

.mx_FilterTabGroup input[type="radio"]:focus + span, .mx_FilterTabGroup input[type="radio"]:hover + span {
                color: #edf3ff;
            }

.mx_FilterTabGroup input[type="radio"]:checked + span {
            color: #0dbd8b;
            font-weight: var(--cpd-font-weight-semibold);
            /* underline */
            -webkit-box-shadow: 0 1.5px 0 0 currentColor;
                    box-shadow: 0 1.5px 0 0 currentColor;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LearnMore_button {
    margin-left: 4px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EnableLiveShare {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 32px 16px;
    text-align: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_EnableLiveShare_heading {
    padding-top: 24px;
}

.mx_EnableLiveShare_icon {
    height: 58px;
    width: 58px;
}

.mx_EnableLiveShare_description {
    padding: 0 24px;
    margin-bottom: 32px;
    line-height: 1.25rem;
}

.mx_EnableLiveShare_button {
    margin-top: 32px;
    height: 48px;
    width: 100%;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LiveDurationDropdown {
    margin-bottom: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LocationShareMenu {
    width: 375px;
    height: 460px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MapError {
    padding: 100px 32px 0;
    text-align: center;

    --mx-map-error-icon-color: #edf3ff;
    --mx-map-error-icon-size: 58px;
}

.mx_MapError.mx_MapError_isMinimised {
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 24px;
    background-color: rgba(33,38,44, 0.9);
    font-size: 0.75rem;
    line-height: 1rem;

    --mx-map-error-icon-color: #ff5b55;
    --mx-map-error-icon-size: 26px;
}

.mx_MapError.mx_MapError_isMinimised .mx_MapError_message {
        margin: 0;
        max-width: 275px;
    }

.mx_MapError.mx_MapError_isMinimised .mx_MapError_heading {
        padding-top: 8px;
        /* override h3 heading size */
        font-size: inherit !important;
        font-weight: normal !important;
    }

.mx_MapError_message {
    margin: 16px 0 32px;
}

.mx_MapError_heading {
    padding-top: 24px;
}

.mx_MapError_icon {
    height: var(--mx-map-error-icon-size);
    width: var(--mx-map-error-icon-size);
    color: var(--mx-map-error-icon-color);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MapFallback {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    z-index: 0;

    background-color: #21262c;
}

.mx_MapFallback_bg {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    color: #6f7882;
    z-index: -1;

    pointer-events: none;
}

.mx_MapFallback_icon {
    width: 65px;
    margin-bottom: 16px;
    color: #6f7882;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Marker_defaultColor {
    color: #0dbd8b;
}

.mx_Marker_border {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    -webkit-filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2));
            filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2));
    background-color: currentColor;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* caret down */

.mx_Marker_border::before {
        content: "";
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid currentColor;
        position: absolute;
        bottom: -4px;
    }

.mx_Marker_icon {
    color: white;
    height: 20px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ShareDialogButtons {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
}

.mx_ShareDialogButtons_button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: #6f7882;
    opacity: 0.8;
    text-align: center;
    color: #edf3ff;
    position: absolute;
    top: 16px;
}

.mx_ShareDialogButtons_button:hover,
    .mx_ShareDialogButtons_button:focus {
        opacity: 1;
    }

.mx_ShareDialogButtons_button.left {
        left: 16px;
    }

.mx_ShareDialogButtons_button.right {
        right: 16px;
    }

.mx_ShareDialogButtons_button-icon {
    width: 20px;
    height: 20px;
    margin: 2px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ShareType {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 60px 12px 32px;

    color: #edf3ff;
}

.mx_ShareType .mx_ShareType_wrapper_options {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        row-gap: 12px;
        width: 100%;
        margin-top: 12px;
    }

.mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            padding: 8px 20px;
            background: none;

            border: 1px solid #6f7882;
            border-radius: 8px;

            font-size: 0.9375rem;
            font-family: inherit;
            line-height: inherit;
            color: #edf3ff;
        }

.mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:hover,
            .mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:focus {
                border-color: #0dbd8b;
            }

.mx_ShareType_badge {
    height: 60px;
    width: 60px;
    margin-bottom: 20px;
    background-color: #0dbd8b;
    border-radius: 50%;
    border: 14px solid #0dbd8b;
    /* colors icon */
    color: white;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_ShareType_heading {
    padding-bottom: 32px;
    text-align: center;
}

.mx_ShareType_option-icon {
    height: 40px;
    width: 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-right: 12px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40px;
            flex: 0 0 40px;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;

    /* Live is styled by StyledLiveBeaconIcon */
}

.mx_ShareType_option-icon.Own {
        border-color: #0dbd8b;
    }

.mx_ShareType_option-icon.Pin {
        border-color: #0dbd8b;
        background-color: #0dbd8b;
        padding: 7px;
        /* colors icon */
        color: white;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ZoomButtons {
    position: absolute;
    bottom: 32px;
    right: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 8px;
}

.mx_ZoomButtons .mx_ZoomButtons_button {

        border-radius: 4px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 24px;
        width: 24px;
        background: #181b21;
        -webkit-box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25);
                box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25);
    }

.mx_ZoomButtons .mx_ZoomButtons_button .mx_ZoomButtons_icon {

            height: 12px;
            width: 12px;
            color: #edf3ff;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MBeaconBody {
    position: relative;
    height: 220px;
    max-width: 325px;
    width: 100%;

    border-radius: 8px;

    border-radius: var(--MBody-border-radius);
    overflow: hidden;
}

.mx_MBeaconBody.mx_MBeaconBody_withoutMap {
    height: auto;
}

.mx_MBeaconBody.mx_MBeaconBody_withoutMap .mx_MBeaconBody_chin {
        position: relative;
        background-color: transparent;
    }

.mx_MBeaconBody_withoutMapContent {
    background-color: rgba(33,38,44, 0.9);
    border-radius: 4px;
}

.mx_MBeaconBody_withoutMapInfoLastUpdated {
    /* 48px lines up with icon in BeaconStatus */
    margin-top: -8px;
    padding: 0 8px 8px 48px;

    color: #edf3ff;
    font-size: 0.625rem;
}

.mx_MBeaconBody_map {
    height: 100%;
    width: 100%;
    z-index: 0; /* keeps the entire map under the message action bars */

    cursor: pointer;
}

.mx_MBeaconBody_mapFallback,
.mx_MBeaconBody_mapError {
    /* pushes spinner/icon up */
    /* to appear more centered with the footer */
    padding-bottom: 50px !important;
}

.mx_MBeaconBody_mapErrorInteractive {
    cursor: pointer;
}

.mx_MBeaconBody_mapFallback {
    cursor: default;
}

.mx_MBeaconBody_chin {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--cpd-color-bg-canvas-default);
    opacity: 0.85;
}

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MBeaconBody {
    max-width: 100%;
    width: 450px;
}

.mx_ReplyTile .mx_MBeaconBody {
    /* Prevent clicking a beacon within a reply */
    pointer-events: none;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MediaProcessingError_Icon {
    margin-right: 4px;
    vertical-align: text-top;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_WidgetPip {
    width: 320px;
    height: 220px;
}

.mx_WidgetPip_overlay {
    width: 320px;
    height: 220px;
    position: absolute;
    top: 0;
    border-radius: 8px;
    overflow: hidden;
    color: #edf3ff;
    cursor: pointer;
}

.mx_WidgetPip_header,
.mx_WidgetPip_footer {
    position: absolute;
    left: 0;
    height: 60px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: opacity ease 0.15s;
    transition: opacity ease 0.15s;
}

.mx_WidgetPip_overlay:not(:hover) .mx_WidgetPip_header,
    .mx_WidgetPip_overlay:not(:hover) .mx_WidgetPip_footer {
        opacity: 0;
    }

.mx_WidgetPip_header {
    top: 0;
    padding: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 0.75rem;
    font-weight: var(--cpd-font-weight-semibold);
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0, 0.9)), to(rgb(0, 0, 0, 0)));
    background: linear-gradient(rgb(0, 0, 0, 0.9), rgb(0, 0, 0, 0));
}

.mx_WidgetPip_backButton {
    height: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}

.mx_WidgetPip_backButton > .mx_Icon {
        color: #c1c6cd;
        padding: 0;
    }

.mx_WidgetPip_footer {
    bottom: 0;
    padding: 12px 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0, 0)), to(rgb(0, 0, 0, 0.9)));
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.9));
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PollOption {
    border: 1px solid #6f7882;
    border-radius: 8px;
    padding: 6px 12px;
    background-color: #181b21;
}

.mx_PollOption .mx_StyledRadioButton_content,
    .mx_PollOption .mx_PollOption_endedOption {
        padding-top: 2px;
        margin-right: 0px;
    }

.mx_PollOption .mx_StyledRadioButton_spacer {
        display: none;
    }

.mx_PollOption,
/* label has cursor: default in user-agent stylesheet */
/* override */
.mx_PollOption_live-option {
    cursor: pointer;
}

.mx_PollOption_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.mx_PollOption_optionVoteCount {
    color: #edf3ff;
    font-size: 0.75rem;
    white-space: nowrap;
}

.mx_PollOption_winnerIcon {
    height: 12px;
    width: 12px;
    color: var(--cpd-color-icon-accent-tertiary);
    margin-right: 4px;
    vertical-align: middle;
}

.mx_PollOption_checked {
    border-color: var(--cpd-color-border-interactive-hovered);
}

.mx_PollOption_checked .mx_PollOption_popularityBackground .mx_PollOption_popularityAmount {
            background-color: var(--cpd-color-icon-accent-tertiary);
        }

/* override checked radio button styling to show checkmark instead */

.mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"]:checked + div {
            border-width: 2px;
            border-color: var(--cpd-color-icon-accent-tertiary);
            background-color: var(--cpd-color-icon-accent-tertiary);
            background-image: url(../../icons/check.aaad650.svg);
            background-size: 12px;
            background-repeat: no-repeat;
            background-position: center;
        }

.mx_PollOption_checked .mx_StyledRadioButton_checked input[type="radio"]:checked + div div {
                visibility: hidden;
            }

/* options not actionable in these states */

.mx_PollOption_checked,
.mx_PollOption_ended {
    pointer-events: none;
}

.mx_PollOption_popularityBackground {
    width: 100%;
    height: 8px;
    margin-right: 12px;
    border-radius: 8px;
    background-color: #21262c;
    margin-top: 8px;
}

.mx_PollOption_popularityBackground .mx_PollOption_popularityAmount {
        width: 0%;
        height: 8px;
        border-radius: 8px;
        background-color: #6f7882;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * These used to live in General User Settings. These components are horribly duplicative
 * but share the same styles. For now I'm putting them here so I can renamed the general
 * tab sensibly and before I can refactor these components.
 */

.mx_AddRemoveThreepids_existing {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_AddRemoveThreepids_existing_address,
.mx_AddRemoveThreepids_existing_promptText {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-right: 10px;
}

.mx_AddRemoveThreepids_existing_button {
    margin-left: 5px;
}

.mx_EmailAddressesPhoneNumbers_verify {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_EmailAddressesPhoneNumbers_existing_button {
    -webkit-box-pack: right;
        -ms-flex-pack: right;
            justify-content: right;
}

.mx_EmailAddressesPhoneNumbers_verify_instructions {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CurrentDeviceSection_deviceDetails {
    /* align with text of session tile */
    margin-left: 56px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeviceDetailHeading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_DeviceDetailHeading_renameCta {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mx_DeviceDetailHeading_renameForm {
    display: grid;
    grid-gap: 16px;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    grid-template-columns: 100%;
}

.mx_DeviceDetailHeading_renameFormButtons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 8px;
}

.mx_DeviceDetailHeading_renameFormButtons .mx_Spinner {
        width: auto;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
    }

.mx_DeviceDetailHeading_renameFormInput {
    /* override field styles */
    margin: 0 0 4px 0 !important;
}

.mx_DeviceDetailHeading_renameFormHeading {
    margin: 0;
}

.mx_DeviceDetailHeading_renameFormError {
    color: #ff5b55;
    padding-right: 4px;
    display: block;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeviceDetails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    margin-top: 16px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #6f7882;
}

.mx_DeviceDetails_section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #6f7882;

    display: grid;
    grid-gap: 24px;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    grid-template-columns: 100%;
}

.mx_DeviceDetails_section:last-child {
        padding-bottom: 0;
        border-bottom: 0;
        margin-bottom: 0;
    }

.mx_DeviceDetails_sectionHeading {
    margin: 0;
}

.mx_DeviceDetails_sectionHeading .mx_DeviceDetails_sectionSubheading {
        display: block;
        font-size: 0.75rem;
        color: #edf3ff;
        line-height: 0.875rem;
        margin-top: 4px;
    }

.mx_DeviceDetails_metadataTable {
    font: var(--cpd-font-body-sm-regular);
    color: #edf3ff;

    width: 100%;

    border-spacing: 0;
}

.mx_DeviceDetails_metadataTable th {
        text-transform: uppercase;
        font-weight: normal;
        text-align: left;
    }

.mx_DeviceDetails_metadataTable td {
        padding-top: 8px;
    }

.mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel {
        width: 160px;
    }

.mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue {
        color: #edf3ff;
    }

.mx_DeviceDetails_signOutButtonContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
}

.mx_DeviceDetails_pushNotifications {
    display: block;
}

.mx_DeviceDetails_pushNotifications .mx_ToggleSwitch {
        float: right;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeviceExpandDetailsButton {
    height: 32px;
    width: 32px;
    background: transparent;

    border-radius: 4px;
    color: var(--cpd-color-icon-tertiary);

    --icon-transform: rotate(-90deg);
}

.mx_DeviceExpandDetailsButton:hover {
        background: #6f7882;
    }

.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
    --icon-transform: rotate(0deg);

    background: #21262c;
}

.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded:hover {
        background: #6f7882;
    }

.mx_DeviceExpandDetailsButton_icon {
    height: 24px;
    width: 24px;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;
    -webkit-transform: var(--icon-transform);
            transform: var(--icon-transform);
    -webkit-transform-origin: center;
            transform-origin: center;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeviceSecurityCard {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    padding: 16px;

    border: 1px solid #6f7882;
    border-radius: 8px;
}

.mx_DeviceSecurityCard_icon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40px;
            flex: 0 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-right: 16px;
    border-radius: 8px;

    height: 40px;
    width: 40px;

    color: var(--icon-color);
    background-color: var(--background-color);
}

.mx_DeviceSecurityCard_icon.Verified {
        --icon-color: #0dbd8b;
        --background-color: var(--cpd-color-green-300);
    }

.mx_DeviceSecurityCard_icon.Unverified {
        --icon-color: #ff5b55;
        --background-color: var(--cpd-color-red-300);
    }

.mx_DeviceSecurityCard_icon.Inactive {
        --icon-color: #edf3ff;
        --background-color: rgba(33,38,44, 0.9);
    }

.mx_DeviceSecurityCard_content {
    -webkit-box-flex: 1;
        -ms-flex: 1 1;
            flex: 1 1;
}

.mx_DeviceSecurityCard_heading {
    margin: 0 0 4px 0;
}

.mx_DeviceSecurityCard_description {
    margin: 0;
    font: var(--cpd-font-body-sm-regular);
    color: #edf3ff;
}

.mx_DeviceSecurityCard_actions {
    margin-top: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeviceTile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
}

.mx_DeviceTile_interactive {
    cursor: pointer;
}

.mx_DeviceTile_info {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
}

.mx_DeviceTile_metadata {
    margin-top: 4px;
    font: var(--cpd-font-body-sm-regular);
    color: #edf3ff;
}

.mx_DeviceTile_inactiveIcon {
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

.mx_DeviceTile_actions {
    display: grid;
    grid-gap: 8px;
    grid-auto-flow: column;
    margin-left: 8px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeviceTypeIcon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    position: relative;
    margin-right: 8px;
    /* creates space for verification icon to overlap */
    padding: 0 8px 8px 0;
}

.mx_DeviceTypeIcon_deviceIconWrapper {
    --background-color: rgba(33,38,44, 0.9);
    --icon-color: #edf3ff;

    height: 40px;
    width: 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    border: 8px solid rgba(33,38,44, 0.9);

    border: 8px solid var(--background-color);
    border-radius: 50%;
    color: #edf3ff;
    color: var(--icon-color);
    background-color: rgba(33,38,44, 0.9);
    background-color: var(--background-color);
}

.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
    --background-color: #edf3ff;
    --icon-color: #181b21;
}

.mx_DeviceTypeIcon_deviceIcon {
    height: 24px;
    width: 24px;
}

.mx_DeviceTypeIcon_verificationIcon {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 24px;
    width: 24px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 4px;

    border: 1px solid #6f7882;
    border-radius: 50%;
    background-color: #181b21;

    color: var(--v-icon-color);
}

.mx_DeviceTypeIcon_verificationIcon.verified {
        --v-icon-color: #0dbd8b;
    }

.mx_DeviceTypeIcon_verificationIcon.unverified {
        --v-icon-color: #ff5b55;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FilteredDeviceList .mx_Dropdown {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 80px;
                flex: 1 0 80px;
    }

.mx_FilteredDeviceList_list {
    list-style-type: none;
    display: grid;
    grid-gap: 16px;
    margin: 0;
    padding: 0 16px;
}

.mx_FilteredDeviceList_listItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_FilteredDeviceList_securityCard {
    margin-bottom: 32px;
}

.mx_FilteredDeviceList_noResults {
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
}

.mx_FilteredDeviceList_headerButton {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    /* override inline button styling */
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 8px;
}

.mx_FilteredDeviceList_deviceDetails {
    /* align with text of session tile */
    margin-left: 88px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FilteredDeviceListHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    gap: 16px;

    width: 100%;
    height: 48px;
    padding: 0 16px;
    margin-bottom: 32px;

    background-color: rgba(33,38,44, 0.9);
    border-radius: 8px;
    color: #edf3ff;
}

/* Higher specificity selector to override the flex-start value */

.mx_FilteredDeviceListHeader .mx_AccessibleButton.mx_AccessibleButton_hasKind {
        -ms-flex-item-align: center;
            align-self: center;
    }

.mx_FilteredDeviceListHeader_label {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SecurityRecommendations_spacing {
    height: 16px;
}

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SelectableDeviceTile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
}

.mx_SelectableDeviceTile_checkbox {
    -webkit-box-flex: 1;
        -ms-flex: 1 0;
            flex: 1 0;
}

.mx_SelectableDeviceTile_checkbox > div {
        margin-top: auto;
        margin-bottom: auto;
        margin-right: var(--cpd-space-1x);
    }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_KeyStoragePanel_toggleRow {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsSubsection {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_SettingsSubsection.mx_SettingsSubsection_newUi {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-6x);
    }

.mx_SettingsSubsection *[role="separator"] {
        /**
         * The gap between subsections is 32px and inside the subsection is 24px.
         * The separator separates the subsections, so it should have the same gap as the subsections.
         * We add 12px and the separator spacing to the top margin to make the separator visually centered between the subsections.
         */
        margin-top: calc(var(--cpd-space-3x) + var(--cpd-separator-spacing));
    }

.mx_SettingsSubsection_description {
    margin-top: 8px;
}

.mx_SettingsSubsection_text {
    width: 100%;
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
    color: #edf3ff;
}

.mx_SettingsSubsection_content {
    width: 100%;
    display: grid;
    grid-gap: 8px;
    /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
    grid-template-columns: minmax(0, 1fr);
    justify-items: flex-start;
    margin-top: 24px;
}

.mx_SettingsSubsection_content summary {
        color: #0dbd8b;
    }

.mx_SettingsSubsection_content details[open] summary {
            margin-bottom: 8px;
        }

.mx_SettingsSubsection_content.mx_SettingsSubsection_contentStretch {
        justify-items: stretch;
    }

.mx_SettingsSubsection_content.mx_SettingsSubsection_noHeading {
        margin-top: 0;
    }

.mx_SettingsSubsection_content.mx_SettingsSubsection_content_newUi {
        gap: var(--cpd-space-6x);
        margin-top: 0;
    }

.mx_SettingsSubsection_content .mx_SettingsSubsection_dropdown {
        min-width: 360px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsSubsectionHeading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;

    gap: 8px;
}

.mx_SettingsSubsectionHeading_heading {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_QuickThemeSwitcher {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_QuickThemeSwitcher .mx_Dropdown {
        min-width: 100px;
        margin-left: auto;
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
    }

.mx_QuickThemeSwitcher .mx_Dropdown_menu {
        max-height: 70px;
    }

.mx_QuickThemeSwitcher_heading {
    font-weight: var(--cpd-font-weight-semibold);
    font-size: 0.75rem;
    line-height: 0.9375rem;
    color: #edf3ff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Caption {
    font: var(--cpd-font-body-sm-regular);
    color: #edf3ff;
}

.mx_Caption.mx_Caption_error {
        color: #ff5b55;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Box--flex {
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
    -webkit-box-flex: var(--mx-box-flex, unset);
        -ms-flex: var(--mx-box-flex, unset);
            flex: var(--mx-box-flex, unset);
}

.mx_Box--shrink {
    -ms-flex-negative: initial;
        flex-shrink: initial;
    -ms-flex-negative: var(--mx-box-shrink, unset);
        flex-shrink: var(--mx-box-shrink, unset);
}

.mx_Box--grow {
    -webkit-box-flex: initial;
        -ms-flex-positive: initial;
            flex-grow: initial;
    flex-grow: var(--mx-box-grow, unset);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Flex {
    display: inline;
    display: initial;
    display: var(--mx-flex-display, unset);
    -webkit-box-orient: initial;
    -webkit-box-direction: initial;
        -ms-flex-direction: initial;
            flex-direction: initial;
    flex-direction: var(--mx-flex-direction, unset);
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial;
    -webkit-box-align: var(--mx-flex-align, unset);
        -ms-flex-align: var(--mx-flex-align, unset);
            align-items: var(--mx-flex-align, unset);
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
    -webkit-box-pack: var(--mx-flex-justify, unset);
        -ms-flex-pack: var(--mx-flex-justify, unset);
            justify-content: var(--mx-flex-justify, unset);
    gap: initial;
    gap: var(--mx-flex-gap, unset);
    -ms-flex-wrap: initial;
        flex-wrap: initial;
    -ms-flex-wrap: var(--mx-flex-wrap, unset);
        flex-wrap: var(--mx-flex-wrap, unset);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * Compound icon

 * {@link https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed}
 */

.mx_Icon {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_Icon_accent {
    color: #0dbd8b;
}

.mx_Icon_bg-accent-light {
    background-color: var(--cpd-color-green-300);
}

.mx_Icon_alert {
    color: #ff5b55;
}

.mx_Icon_circle-40 {
    border-radius: 20px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40px;
            flex: 0 0 40px;
    height: 40px;
    padding: 0 12px;
    width: 40px;
}

.mx_Icon_8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8px;
            flex: 0 0 8px;
    height: 8px;
    width: 8px;
}

.mx_Icon_10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 10px;
            flex: 0 0 10px;
    height: 10px;
    width: 10px;
}

.mx_Icon_12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 12px;
            flex: 0 0 12px;
    height: 12px;
    width: 12px;
}

.mx_Icon_16 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16px;
            flex: 0 0 16px;
    height: 16px;
    width: 16px;
}

.mx_Icon_24 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 24px;
            flex: 0 0 24px;
    height: 24px;
    width: 24px;
}

.mx_Icon_32 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 32px;
            flex: 0 0 32px;
    height: 32px;
    width: 32px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SuccessDialog {
    text-align: center;
}

.mx_SuccessDialog .mx_Icon {
        margin-bottom: 16px;
    }

.mx_SuccessDialog .mx_Dialog_header {
        margin: 0 0 16px;
        padding: 0;
    }

.mx_SuccessDialog .mx_Dialog_title {
        margin: 0;
    }

.mx_SuccessDialog .mx_Dialog_content {
        color: #edf3ff;
        margin: 0 0 40px;
    }

.mx_SuccessDialog .mx_Dialog_buttons .mx_Dialog_buttons_row {
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

.mx_SuccessDialog .mx_Dialog_buttons .mx_Dialog_buttons_row button.mx_Dialog_primary {
                height: 48px;
                min-width: 328px;
            }

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* make any scrollbar grey and thin */

html {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* scrollbar-width is not inherited (but -color is, why?!), */

/* so declare it on every element */

* {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* make auto-hide scrollbars not transparent again on hover */

.mx_AutoHideScrollbar:hover {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
    }

/* make scrollbars transparent for autohide scrollbars */

.mx_AutoHideScrollbar {
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay; /* where supported */
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.mx_AutoHideScrollbar::-webkit-scrollbar {
        background-color: transparent;
    }

.mx_AutoHideScrollbar::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

.mx_AutoHideScrollbar {

    scrollbar-color: transparent transparent;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AutocompleteInput {
    position: relative;
}

.mx_AutocompleteInput_search_icon {
    margin-left: 8px;
    fill: #edf3ff;
}

.mx_AutocompleteInput_editor {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    -webkit-transition: border-color 0.25s;
    transition: border-color 0.25s;
}

.mx_AutocompleteInput_editor > input {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        min-width: 40%;
        resize: none;
        /* `!important` is required to bypass global input styles. */
        margin: 0 !important;
        padding: 8px 9px;
        border: none !important;
        color: #edf3ff !important;
        font-weight: normal !important;
    }

.mx_AutocompleteInput_editor > input::-webkit-input-placeholder {
            color: #edf3ff !important;
            font-weight: normal !important;
        }

.mx_AutocompleteInput_editor > input::-moz-placeholder {
            color: #edf3ff !important;
            font-weight: normal !important;
        }

.mx_AutocompleteInput_editor > input:-ms-input-placeholder {
            color: #edf3ff !important;
            font-weight: normal !important;
        }

.mx_AutocompleteInput_editor > input::-ms-input-placeholder {
            color: #edf3ff !important;
            font-weight: normal !important;
        }

.mx_AutocompleteInput_editor > input::placeholder {
            color: #edf3ff !important;
            font-weight: normal !important;
        }

.mx_AutocompleteInput_editor--focused {
    border-color: #0086e6;
}

.mx_AutocompleteInput_editor--has-suggestions {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mx_AutocompleteInput_editor_selection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 8px;
}

.mx_AutocompleteInput_editor_selection_pill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 12px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--cpd-color-text-decorative-1);
    color: #ffffff;
    font-size: 0.75rem;
}

.mx_AutocompleteInput_editor_selection_remove_button svg {
    vertical-align: middle;
}

.mx_AutocompleteInput_matches {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #181b21;
    border: 1px solid #0086e6;
    border-top-color: #e7e7e7;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 1000;
}

.mx_AutocompleteInput_suggestion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 8px;
    cursor: pointer;
}

.mx_AutocompleteInput_suggestion > * {
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

.mx_AutocompleteInput_suggestion:hover {
        background-color: #6f7882;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

.mx_AutocompleteInput_suggestion--selected {
    background-color: #6f7882;
}

.mx_AutocompleteInput_suggestion--selected:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

.mx_AutocompleteInput_suggestion_title {
    margin-right: 8px;
}

.mx_AutocompleteInput_suggestion_description {
    color: #edf3ff;
    font-size: 0.75rem;
}

/*
Copyright 2021-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BackdropPanel {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    -webkit-filter: blur(var(--lp-background-blur));
            filter: blur(var(--lp-background-blur));
    /* Force a new layer for the backdropPanel so it's better hardware supported */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.mx_BackdropPanel--image {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.mx_CompatibilityPage {
    width: 100%;
    height: 100%;
    background-color: #e55;
}

.mx_CompatibilityPage_box {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 500px;
    height: 300px;
    border: 1px solid;
    padding: 10px;
    background-color: #fcc;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ContextualMenu_wrapper {
    position: fixed;
    z-index: 5000;
}

.mx_ContextualMenu_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.mx_ContextualMenu {
    border-radius: 12px;
    -webkit-box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
            box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
    background-color: var(--cpd-color-bg-canvas-default);
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
    color: #edf3ff;
    position: absolute;
    z-index: 5001;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.mx_ContextualMenu_right {
    right: 16px;
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
    right: 8px;
}

.mx_ContextualMenu_chevron_right {
    position: absolute;
    right: -8px;
    top: 0px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 8px solid #22262e;
    border-bottom: 8px solid transparent;
}

.mx_ContextualMenu_left {
    left: 0;
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
    left: 8px;
}

.mx_ContextualMenu_chevron_left {
    position: absolute;
    left: -8px;
    top: 0px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid #22262e;
    border-bottom: 8px solid transparent;
}

.mx_ContextualMenu_top {
    top: 0;
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
    top: 8px;
}

.mx_ContextualMenu_chevron_top {
    position: absolute;
    left: 0px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #22262e;
    border-right: 8px solid transparent;
}

.mx_ContextualMenu_bottom {
    bottom: 0;
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
    bottom: 8px;
}

.mx_ContextualMenu_chevron_bottom {
    position: absolute;
    left: 0px;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid #22262e;
    border-right: 8px solid transparent;
}

.mx_ContextualMenu_rightAligned {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
}

.mx_ContextualMenu_bottomAligned {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ErrorMessage {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ff5b55;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 0.75rem;
    gap: 8px;
    line-height: 1.2em;
    min-height: 2.4em;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

@-webkit-keyframes mx_FileDropTarget_animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.95;
    }
}

@keyframes mx_FileDropTarget_animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.95;
    }
}

.mx_FileDropTarget {
    min-width: 0;
    width: 100%;
    height: 100%;

    font-size: 1.125rem;
    text-align: center;

    pointer-events: none;

    background-color: #181b21;
    opacity: 0.95;

    position: absolute;
    z-index: 3000;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-animation: mx_FileDropTarget_animation;

            animation: mx_FileDropTarget_animation;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
}

@-webkit-keyframes mx_FileDropTarget_image_animation {
    from {
        -webkit-transform: scaleX(0);
                transform: scaleX(0);
    }
    to {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
}

@keyframes mx_FileDropTarget_image_animation {
    from {
        -webkit-transform: scaleX(0);
                transform: scaleX(0);
    }
    to {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
}

.mx_FileDropTarget_image {
    width: 32px;
    -webkit-animation: mx_FileDropTarget_image_animation;
            animation: mx_FileDropTarget_image_animation;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    margin-bottom: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FilePanel {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    /* 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_RoomView_messageListWrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_FilePanel .mx_RoomView_MessageList {
        width: 100%;
        gap: var(--cpd-space-6x);
    }

/* Overrides for the attachment body tiles */

.mx_FilePanel .mx_EventTile {
        word-break: break-word;
        padding-top: 0;
    }

.mx_FilePanel .mx_EventTile + .mx_EventTile {
            border-top: 1px solid var(--cpd-color-gray-400);
            padding-top: var(--cpd-space-6x);
        }

.mx_FilePanel .mx_EventTile .mx_EventTile_line {
            -webkit-padding-start: 0;
                    padding-inline-start: 0;
        }

.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
            margin-top: var(--cpd-space-4x);
        }

/* anchor link as wrapper */

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink {
            text-decoration: none;
            margin-bottom: var(--cpd-space-1x);
            display: block;
        }

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                margin-top: -2px;
                gap: var(--cpd-space-2x);
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
            }

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails .mx_DisambiguatedProfile {
                    color: #a1b2d1; /* for ellipsis. Color of displayName and mxid is inherited */
                }

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails .mx_MessageTimestamp {
                    margin-left: auto;
                    font: var(--cpd-font-body-xs-regular);
                    color: var(--cpd-color-text-secondary);
                }

.mx_FilePanel .mx_EventTile_line {
        -webkit-margin-end: 0;
                margin-inline-end: 0;
        -webkit-padding-start: 0;
                padding-inline-start: 0;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_GenericDropdownMenu_button {
    padding: 3px 4px 3px 8px;
    border-radius: 4px;
    line-height: 1.5;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    font-size: 0.75rem;
    color: #edf3ff;
}

.mx_GenericDropdownMenu_button:hover,
.mx_GenericDropdownMenu_button[aria-expanded="true"] {
    background: #6f7882;
}

.mx_GenericDropdownMenu_button::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
            mask-image: url(../../icons/chevron-down.9ea2899.svg);
    -webkit-mask-size: 100%;
            mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    float: right;
}

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu {
        position: static;
        position: initial;

        font-size: 0.75rem;
        color: #edf3ff;
        padding-top: 10px;
        padding-bottom: 10px;

        border: 1px solid #6f7882;
        -webkit-box-shadow: 0 1px 3px rgb(23, 25, 28, 0.05);
                box-shadow: 0 1px 3px rgb(23, 25, 28, 0.05);
    }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu_chevron_top {
        left: auto;
        right: 22px;
        border-bottom-color: #6f7882;
    }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu_chevron_top::after {
            content: "";
            border: inherit;
            border-bottom-color: #22262e;
            position: absolute;
            top: 1px;
            left: -8px;
        }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_divider {
        display: block;
        height: 0;
        margin-left: 4px;
        margin-right: 19px;
        border-top: 1px solid #6f7882;
    }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 10px 20px 10px 30px;
        position: relative;
    }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;

            margin: 0;
        }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label span:first-child {
                color: #edf3ff;
                font-weight: var(--cpd-font-weight-semibold);
            }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--header > .mx_GenericDropdownMenu_Option--label span:first-child {
            font-size: 0.9375rem;
        }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item:hover {
                background-color: #343a46;
            }

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item[aria-checked="true"]::before {
                content: "";
                width: 16px;
                height: 16px;
                margin-left: -22px;
                margin-right: 6px;
                -webkit-mask-image: url(../../icons/check.aaad650.svg);
                        mask-image: url(../../icons/check.aaad650.svg);
                -webkit-mask-size: 100%;
                        mask-size: 100%;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                background-color: #edf3ff;
                display: inline-block;
                vertical-align: middle;
            }

/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd
Copyright 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_HomePage {
    max-width: 960px;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.mx_HomePage_default {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_HomePage_default .mx_HomePage_default_wrapper {
        margin: auto;
    }

.mx_HomePage_default img {
        height: 48px;
    }

.mx_HomePage_default h1 {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 2rem;
        line-height: 1.375;
        margin-bottom: 4px;
    }

.mx_HomePage_default h2 {
        margin-top: 4px;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 1.125rem;
        line-height: 1.5625rem;
        color: #a1b2d1;
    }

.mx_HomePage_default .mx_MiniAvatarUploader {
        margin: 0 auto;
    }

.mx_HomePage_default .mx_HomePage_default_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 60px auto 0;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
            padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */

            width: 160px;
            min-height: 132px;
            margin: 20px;
            position: relative;
            display: inline-block;
            border-radius: 8px;
            vertical-align: top;
            word-break: break-word;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;

            font-weight: var(--cpd-font-weight-semibold);
            font-size: 0.9375rem;
            line-height: 1.25rem;
            color: #fff; /* on all themes */
            background-color: #0dbd8b;
        }

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton::before {
                top: 20px;
                left: 60px; /* (160px-40px)/2 */
                width: 40px;
                height: 40px;

                content: "";
                position: absolute;
                background-color: #fff; /* on all themes */
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                        mask-size: contain;
            }

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm::before {
                -webkit-mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
                        mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
            }

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore::before {
                -webkit-mask-image: url(../../img/element-icons/roomlist/explore.6738ed6.svg);
                        mask-image: url(../../img/element-icons/roomlist/explore.6738ed6.svg);
            }

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup::before {
                -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
                        mask-image: url(../../img/element-icons/group-members.d86d751.svg);
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LargeLoader {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
}

.mx_LargeLoader .mx_Spinner {
        -webkit-box-flex: initial;
            -ms-flex: initial;
                flex: initial;
        height: auto;
        margin-bottom: 32px;
        margin-top: 33vh;
    }

.mx_LargeLoader .mx_LargeLoader_text {
        font-size: 24px;
        font-weight: var(--cpd-font-weight-semibold);
        padding: 0 16px;
        position: relative;
        text-align: center;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MatrixChat--with-avatar .mx_LeftPanel,
    .mx_MatrixChat--with-avatar .mx_LeftPanel .mx_LeftPanel_roomListContainer {
        background-color: transparent;
    }

.mx_LeftPanel_outerWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 50%;
    position: relative;

    /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
    contain: layout paint;
}

.mx_LeftPanel_wrapper,
.mx_LeftPanel {
    --collapsedWidth: 68px;
}

.mx_LeftPanel_newRoomList {
    /* Thew new rooms list is not designed to be collapsed to just icons. */
    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
    --collapsedWidth: 224px;
}

.mx_LeftPanel_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
}

.mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user {
        background-color: rgba(38, 40, 45, 0.9);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        position: relative;
    }

.mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user[data-collapsed] {
            max-width: var(--collapsedWidth);
        }

.mx_LeftPanel {
    background-color: rgba(38, 40, 45, 0.9);

    /* Create a row-based flexbox for the space panel and the room list */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    contain: content;
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    overflow: hidden;

    /* Note: The 'room list' in this context is actually everything that isn't the tag */
}

/* panel, such as the menu options, breadcrumbs, filtering, etc */

.mx_LeftPanel .mx_LeftPanel_roomListContainer {
        background-color: rgba(38, 40, 45, 0.9);
        -webkit-box-flex: 1;
            -ms-flex: 1 0 0px;
                flex: 1 0 0;
        min-width: 0;
        /* Create another flexbox (this time a column) for the room list components */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
            /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
             * for internal whitespace in the breadcrumbs)
             */
            padding: 12px;
            -ms-flex-negative: 0;
                flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */

            /* Create another flexbox column for the rows to stack within */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer {
            overflow-y: hidden;
            overflow-x: scroll;
            margin: 12px 12px 0 12px;
            -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                    flex: 0 0 auto;
            /* Create yet another flexbox, this time within the row, to ensure items stay */
            /* aligned correctly. This is also a row-based flexbox. */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            contain: content;
        }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_leftOverflow {
                -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black));
                -webkit-mask-image: linear-gradient(90deg, transparent, black 5%);
                        mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black));
                        mask-image: linear-gradient(90deg, transparent, black 5%);
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
                -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(black), color-stop(95%, black), to(transparent));
                -webkit-mask-image: linear-gradient(90deg, black, black 95%, transparent);
                        mask-image: -webkit-gradient(linear, left top, right top, from(black), color-stop(95%, black), to(transparent));
                        mask-image: linear-gradient(90deg, black, black 95%, transparent);
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
                -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent));
                -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
                        mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, black), color-stop(95%, black), to(transparent));
                        mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
            margin: 0 12px;
            padding: 12px 0 8px;
            border-bottom: 1px solid #6f7882;

            -ms-flex-negative: 0;

                flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */

            /* Create a flexbox to organize the inputs */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer + .mx_LegacyRoomListHeader {
                margin-top: 12px;
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background-color: #fff;
                position: relative;
                margin-left: 8px;
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton::before {
                    content: "";
                    position: absolute;
                    top: 8px;
                    left: 8px;
                    width: 16px;
                    height: 16px;
                    -webkit-mask-image: url(../../img/element-icons/call/dialpad.b652586.svg);
                            mask-image: url(../../img/element-icons/call/dialpad.b652586.svg);
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    background-color: #edf3ff;
                }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton,
            .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background-color: #fff;
                position: relative;
                margin-left: 8px;
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton::before, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton::before {
                    content: "";
                    position: absolute;
                    top: 8px;
                    left: 8px;
                    width: 16px;
                    height: 16px;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    background-color: #edf3ff;
                }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover {
                    background-color: #edf3ff;
                }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover::before, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover::before {
                        background-color: #181b21;
                    }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton::before {
                -webkit-mask-image: url(../../img/element-icons/roomlist/explore.6738ed6.svg);
                        mask-image: url(../../img/element-icons/roomlist/explore.6738ed6.svg);
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton::before {
                -webkit-mask-image: url(../../icons/time.8c3060c.svg);
                        mask-image: url(../../icons/time.8c3060c.svg);
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LegacyRoomListHeader:first-child {
            margin-top: 12px;
        }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
            /* Make the y-scrollbar more responsive */
            padding-right: 2px;
            overflow: hidden;
            margin-top: 10px; /* so we're not up against the search/filter */
            -webkit-box-flex: 1;
                -ms-flex: 1 0 0px;
                    flex: 1 0 0; /* needed in Safari to properly set flex-basis */
        }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
                padding-bottom: 32px;
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop {
                padding-top: 32px;
            }

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_actualRoomListContainer {
            position: relative; /* for sticky headers */
            height: 100%; /* ensure scrolling still works */
        }

/* These styles override the defaults for the minimized (66px) layout */

.mx_LeftPanel.mx_LeftPanel_minimized {
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
        min-width: 0;
        min-width: initial;
        width: auto !important;
        width: initial !important;
    }

.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer {
            width: var(--collapsedWidth);
        }

.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
            }

.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
                /* Organize the flexbox into a centered column layout */
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
            }

.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton {
                    margin-left: 0;
                    margin-top: 8px;
                    background-color: transparent;
                }

.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton,
                .mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton {
                    margin-left: 0;
                    margin-top: 8px;
                }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MainSplit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_ResizeHandle--horizontal::before {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-150%, -50%);
                transform: translate(-150%, -50%);

        height: 64px; /* to match width of the ones on roomlist */
        width: 4px;
        border-radius: 4px;

        content: "";

        background-color: #edf3ff;
        opacity: 0.8;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MatrixChat_splash {
    position: relative;
    height: 100%;
}

.mx_MatrixChat_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 100%;
}

.mx_MatrixToolbar {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;

    height: 40px;
}

.mx_MatrixChat {
    position: relative;
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-flex: 1;

        -ms-flex: 1;

            flex: 1;
    min-height: 0;
}

/* not the left panel, and not the resize handle, so the roomview and friends */

.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
    background-color: #181b21;

    -webkit-box-flex: 1;

        -ms-flex: 1 1 0px;

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

    /* To fix https://github.com/vector-im/element-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%;
}

.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
    position: relative;
}

.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover::before {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);

        height: 64px; /* to match width of the ones on roomlist */
        width: 4px;
        border-radius: 4px;

        content: " ";

        background-color: #edf3ff;
        opacity: 0.8;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MessagePanel_myReadMarker {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mx_MessagePanel_myReadMarker hr {
        border-top: solid 1px #0dbd8b;
        border-bottom: solid 1px #0dbd8b;
        margin-top: 0;
        position: relative;
        top: -1px;
        z-index: 1;
        will-change: width;
        -webkit-transition:
            width 400ms easeinsine 1s,
            opacity 400ms easeinsine 1s;
        transition:
            width 400ms easeinsine 1s,
            opacity 400ms easeinsine 1s;
        width: 99%;
        opacity: 1;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NonUrgentToastContainer {
    position: absolute;
    bottom: 30px;
    left: 28px;
    z-index: 101; /* same level as other toasts */
}

.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
        padding: 10px 12px;
        border-radius: 8px;
        width: 320px;
        font-size: 0.8125rem;
        margin-top: 8px;

        /* We don't use variables on the colours because we want it to be the same */
        /* in all themes. */
        background-color: #17191c;
        color: #fff;
    }

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_QuickSettingsButton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    border-radius: 8px;
    position: relative;
    margin: 12px auto;
    color: #edf3ff;
    min-width: 32px;
    min-height: 32px;
    line-height: 32px;
}

.mx_QuickSettingsButton.expanded {
        margin-left: 20px;
        padding-left: 44px; /* align with toggle collapse button text */
        padding-right: 8px;
    }

.mx_QuickSettingsButton::before {
        content: "";
        position: absolute;
        width: 32px;
        height: 32px;
        left: 0;
        -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
                mask-image: url(../../icons/settings-solid.94c318a.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 24px;
                mask-size: 24px;
        background: #edf3ff;
    }

.mx_QuickSettingsButton:not(.expanded):hover {
        background-color: #6f7882;
    }

.mx_QuickSettingsButton:not(.expanded):hover::before {
            background-color: #edf3ff;
        }

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
    padding: 16px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    min-width: 200px;
    contain: unset; /* let the dropdown paint beyond the context menu */
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu > div > h2 {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: var(--cpd-color-text-secondary);
        margin: 0 0 16px;
    }

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_AccessibleButton_hasKind {
        display: block;
        margin-top: 4px;
    }

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu > div > h4 {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.75rem;
        line-height: 0.9375rem;
        text-transform: uppercase;
        color: var(--cpd-color-text-secondary);
        margin: 20px 0 12px;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_moreOptionsButton {
        margin-left: var(--cpd-space-7x);
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: var(--cpd-color-text-primary);
        position: relative;
        margin-bottom: 16px;
    }

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_option {
        margin-bottom: var(--cpd-space-3x);
    }

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_option label {
            /* Correctly line up icons and text. */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list .mx_QuickThemeSwitcher {
        margin-top: var(--cpd-space-2x);
    }

.mx_QuickSettingsButton_icon {
    margin-right: var(--cpd-space-1x);
    color: #edf3ff;
    width: 18px;
    height: 18px;
    margin-top: auto;
    margin-bottom: auto;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RightPanel {
    overflow-x: hidden;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-left: 1px solid var(--cpd-color-gray-400);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 100%;
    contain: strict;
    background-color: var(--cpd-color-bg-canvas-default);
}

.mx_RightPanel .mx_RoomView_MessageList {
        padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */
    }

/** Fixme - factor this out with the main header **/

.mx_RightPanel_threadsButton::before {
    -webkit-mask-image: url(../../icons/threads-solid.7fe60f4.svg);
            mask-image: url(../../icons/threads-solid.7fe60f4.svg);
}

.mx_RightPanel_notifsButton::before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
            mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
    -webkit-mask-position: center;
            mask-position: center;
}

.mx_RightPanel_roomSummaryButton::before {
    -webkit-mask-image: url(../../icons/info-solid.ef2d524.svg);
            mask-image: url(../../icons/info-solid.ef2d524.svg);
    -webkit-mask-position: center;
            mask-position: center;
}

.mx_RightPanel_pinnedMessagesButton::before {
        -webkit-mask-image: url(../../img/element-icons/room/pin.c358af7.svg);
                mask-image: url(../../img/element-icons/room/pin.c358af7.svg);
        -webkit-mask-position: center;
                mask-position: center;
    }

.mx_RightPanel_timelineCardButton::before {
        -webkit-mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
                mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
        -webkit-mask-position: center;
                mask-position: center;
    }

.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
}

.mx_RightPanel .mx_RoomView_messagePanelSpinner {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin: auto;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* Note: this component expects to be contained within a flexbox */

.mx_RoomSearch {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    border-radius: 8px;
    background-color: #fff;
    /* keep border thickness consistent to prevent movement */
    border: 1px solid transparent;
    height: 28px;
    padding: 1px;

    /* Create a flexbox for the icons (easier to manage) */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    cursor: pointer;
}

.mx_RoomSearch .mx_RoomSearch_icon {
        width: 20px;
        height: 20px;
        -webkit-mask-image: url(../../icons/search.7258145.svg);
                mask-image: url(../../icons/search.7258145.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        background-color: #edf3ff;
        margin-left: var(--cpd-space-2x);
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

.mx_RoomSearch .mx_RoomSearch_spotlightTriggerText {
        color: var(--cpd-color-text-secondary);
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        min-width: 0;
        /* the following rules are to match that of a real input field */
        overflow: hidden;
        margin: 9px;
        font: var(--cpd-font-body-sm-semibold);
    }

.mx_RoomSearch .mx_RoomSearch_shortcutPrompt {
        border-radius: 6px;
        background-color: #fff;
        padding: 2px 4px;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        font-size: 0.75rem;
        line-height: 0.9375rem;
        font-family: inherit;
        font-weight: var(--cpd-font-weight-semibold);
        color: #c8c8cd;
        margin-right: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.mx_RoomSearch.mx_RoomSearch_minimized {
        height: 32px;
        min-height: 32px;
        width: 32px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
            margin: 0 auto;
            padding: 1px;
            -ms-flex-item-align: center;
                align-self: center;
        }

.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_shortcutPrompt {
            display: none;
        }

.mx_RoomSearch:hover {
        background-color: #edf3ff;
    }

.mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText {
            color: #181b21;
        }

.mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt {
            background-color: #181b21;
            color: #edf3ff;
        }

.mx_RoomSearch:hover .mx_RoomSearch_icon {
            background-color: #181b21;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
    margin-left: 65px;
    min-height: 50px;
}

.mx_RoomStatusBar_typingIndicatorAvatars {
    width: 52px;
    margin-top: -1px;
    text-align: left;
}

.mx_RoomStatusBar_typingIndicatorRemaining {
    display: inline-block;
    color: #acacac;
    background-color: #ddd;
    border: 1px solid #181b21;
    border-radius: 40px;
    width: 24px;
    height: 24px;
    line-height: 1.5rem;
    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: #ff5b55;
    cursor: pointer;
}

.mx_RoomStatusBar_connectionLostBar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-top: 19px;
    min-height: 58px;
}

.mx_RoomStatusBar_unsentMessages > div[role="alert"] {
        /* cheat some basic alignment */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        min-height: 70px;
        margin: 12px;
        padding-left: 16px;
        background-color: #22262e;
        border-radius: 4px;
    }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
        margin-right: 12px;
    }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge {
            /* Override sizing from the default badge */
            width: 24px !important;
            height: 24px !important;
            border-radius: 24px !important;
        }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count {
                font-size: 1rem !important; /* override default */
            }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
        color: #ff5b55;
        font-size: 0.9375rem;
    }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
        font-size: 0.75rem;
    }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        text-align: right;
        margin-right: 22px;
        color: #a1b2d1;
    }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton {
            padding: 5px 10px;
            padding-left: 30px; /* 18px for the icon, 2px margin to text, 10px regular padding */
            display: inline-block;
            position: relative;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2) {
                border-left: 1px solid #a1b2d1;
            }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton::before {
                content: "";
                position: absolute;
                left: 10px; /* inset for regular button padding */
                background-color: #a1b2d1;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
                width: 18px;
                height: 18px;
                top: 50%; /* text sizes are dynamic */
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
            }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn::before {
                -webkit-mask-image: url(../../icons/delete.8165351.svg);
                        mask-image: url(../../icons/delete.8165351.svg);
            }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentRetry {
                padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
            }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentRetry::before {
                    -webkit-mask-image: url(../../icons/restart.514c8f1.svg);
                            mask-image: url(../../icons/restart.514c8f1.svg);
                }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner {
            vertical-align: middle;
            margin-right: 5px;
            top: 1px; /* just to help the vertical alignment be slightly better */
        }

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner + span {
                margin-right: 10px; /* same margin/padding as the rightmost button */
            }

.mx_RoomStatusBar_connectionLostBar svg {
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    float: left;
}

.mx_RoomStatusBar_connectionLostBar_title {
    color: #ff5b55;
}

.mx_RoomStatusBar_connectionLostBar_desc {
    color: #edf3ff;
    font-size: 0.8125rem;
    opacity: 0.5;
    padding-bottom: 20px;
}

.mx_RoomStatusBar_resend_link {
    color: #edf3ff !important;
    text-decoration: underline !important;
    cursor: pointer;
}

.mx_RoomStatusBar_typingBar {
    height: 50px;
    line-height: 50px;

    color: #edf3ff;
    opacity: 0.5;
    overflow-y: hidden;
    display: block;
}

.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
        min-height: 40px;
    }

.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_indicator {
        margin-top: 10px;
    }

.mx_MatrixChat_useCompactLayout .mx_RoomStatusBar_typingBar {
        height: 40px;
        line-height: 40px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

:root {
    --RoomView_MessageList-padding: 18px;
}

.mx_RoomView_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
    contain: strict;
}

.mx_RoomView {
    word-wrap: break-word;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
}

.mx_RoomView .mx_MainSplit {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
    }

.mx_RoomView .mx_MessageComposer {
        width: 100%;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        margin-right: 2px;
        padding-bottom: 1em;
    }

.mx_RoomView_auxPanel_hiddenHighlights {
    border-bottom: 1px solid #000000;
    padding: 10px 26px;
    color: #ff5b55;
    cursor: pointer;
}

.mx_RoomView_messagePanel {
    width: 100%;
    overflow-y: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    overflow-anchor: none;
}

.mx_RoomView_messagePanelSearchSpinner {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    background-image: url(../../img/typing-indicator-2x.e13c259.gif);
    background-position: center 367px;
    background-size: 25px;
    background-repeat: no-repeat;
    position: relative;
}

.mx_RoomView_messagePanelSearchSpinner::before {
        background-color: #888;
        -webkit-mask: url(../../icons/search.7258145.svg);
                mask: url(../../icons/search.7258145.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 50px;
                mask-size: 50px;
        content: "";
        position: absolute;
        top: 286px;
        left: 0;
        right: 0;
        height: 50px;
    }

.mx_RoomView_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
}

.mx_RoomView_body .mx_RoomView_messagePanel,
    .mx_RoomView_body .mx_RoomView_messagePanelSpinner,
    .mx_RoomView_body .mx_RoomView_messagePanelSearchSpinner {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }

.mx_RoomView_body .mx_RoomView_timeline {
        /* offset parent for mx_RoomView_topUnreadMessagesBar  */
        position: relative;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-right: calc(8px / 2);
        margin-right: calc(var(--container-gap-width) / 2);
    }

.mx_RoomView_statusArea {
    width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;

    max-height: 0px;
    background-color: #181b21;
    z-index: 1000;
    overflow: hidden;

    -webkit-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;
}

.mx_RoomView_statusArea_expanded {
    max-height: 100px;
}

.mx_RoomView_statusAreaBox {
    margin: auto;
    min-height: 50px;
}

.mx_RoomView_statusAreaBox_line {
    margin-left: 65px;
    border-top: 1px solid #000000;
    height: 1px;
}

.mx_RoomView_messageListWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    position: relative;
}

.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper > .mx_RoomView_MessageList > li > ol {
            list-style-type: none;
        }

.mx_RoomView_searchResultsPanel a {
        text-decoration: none;
        color: inherit;
    }

.mx_RoomView_empty {
    font-size: 0.8125rem;
    padding: 0 24px;
    margin-right: 30px;
    text-align: center;
    margin-bottom: 80px; /* visually center the content (intentional offset) */
}

.mx_RoomView_MessageList {
    list-style-type: none;
    padding: 18px;
    padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
    margin: 0;
    /* needed as min-height is set to clientHeight in ScrollPanel
    to prevent shrinking when WhoIsTypingTile is hidden */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_RoomView_MessageList li {
        clear: both;
    }

.mx_ScrollPanel .mx_RoomView_MessageList {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;

        content-visibility: auto;
        contain-intrinsic-size: 50px;
    }

.mx_RoomView--local .mx_ScrollPanel .mx_RoomView_MessageList {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.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_MatrixChat_useCompactLayout .mx_RoomView_MessageList {
        margin-bottom: 4px;
    }

.mx_MatrixChat_useCompactLayout .mx_RoomView_MessageList h2 {
            margin-top: 6px;
        }

.mx_MatrixChat_useCompactLayout .mx_RoomView_statusAreaBox {
        min-height: 42px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SearchBox {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
}

.mx_SearchBox.mx_SearchBox_blurred:not(:hover) {
        background-color: transparent;
    }

.mx_SearchBox .mx_SearchBox_closeButton {
        cursor: pointer;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 16px;
                mask-size: 16px;
        width: 16px;
        height: 16px;
        padding: 9px;
        background-color: var(--cpd-color-icon-secondary);
    }

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpaceRoomView_landing .mx_AccessibleButton_kind_link {
        font-size: inherit;
    }

.mx_SpaceRoomView_landing .mx_SearchBox {
        margin: 24px 0 16px;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_noResults {
        text-align: center;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_noResults > div {
            font-size: 0.9375rem;
            line-height: 1.5rem;
            color: #edf3ff;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 12px;
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: #edf3ff;
        margin-bottom: 12px;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_header {
            grid-column-start: 1;
            font-weight: var(--cpd-font-weight-semibold);
            margin: 0;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_buttons {
            grid-column-start: 2;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-flow: wrap;
                flex-flow: wrap;
            gap: 12px;
            min-height: 32px;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_buttons .mx_AccessibleButton {
                padding: 4px 12px;
                font-weight: normal;
            }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_AccessibleButton_kind_danger_outline,
        .mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_AccessibleButton_kind_primary_outline {
            padding: 3px 12px; /* to account for the 1px border */
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_error {
        position: relative;
        font-weight: var(--cpd-font-weight-semibold);
        color: #ff5b55;
        font-size: 0.9375rem;
        line-height: 1.125rem;
        margin: 20px auto 12px;
        padding-left: 24px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_error::before {
            content: "";
            position: absolute;
            height: 16px;
            width: 16px;
            left: 0;
            background-image: url(../../icons/error-solid.7cb2e4d.svg);
            background-size: cover;
            background-repeat: no-repeat;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > h3 {
            display: inline;
            font-weight: var(--cpd-font-weight-semibold);
            font-size: 1.125rem;
            line-height: 1.375rem;
            color: #edf3ff;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > span {
            margin-left: 8px;
            font-size: 0.9375rem;
            line-height: 1.5rem;
            color: #edf3ff;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle {
        position: absolute;
        left: -1px;
        top: 10px;
        height: 16px;
        width: 16px;
        border-radius: 4px;
        background-color: #181b21;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 16px;
            width: 16px;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            background-color: #edf3ff;
            -webkit-mask-size: 16px;
                    mask-size: 16px;
            -webkit-transform: rotate(270deg);
                    transform: rotate(270deg);
            -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                    mask-image: url(../../icons/chevron-down.9ea2899.svg);
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle.mx_SpaceHierarchy_subspace_toggle_shown::before {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_children {
        position: relative;
        padding-left: 12px;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper {
            list-style: none;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile {
                position: relative;
                padding: 8px 16px;
                border-radius: 8px;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;

                display: -webkit-box;

                display: -ms-flexbox;

                display: flex;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                gap: 6px 12px;
            }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item {
                    font-weight: var(--cpd-font-weight-semibold);
                    font-size: 0.9375rem;
                    line-height: 1.125rem;
                    display: grid;
                    grid-template-columns: 20px auto;
                    grid-gap: 6px 8px;
                    gap: 6px 8px;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    -webkit-box-flex: 1;
                        -ms-flex: 1;
                            flex: 1; /* wrap action buttons */
                }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_avatar {
                        grid-row: 1;
                        grid-column: 1;
                    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name {
                        grid-row: 1;
                        grid-column: 2;
                    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip,
                        .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined {
                            margin-left: 12px;
                            color: #edf3ff;
                            font-size: 0.75rem;
                            line-height: 0.9375rem;
                        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined .mx_InfoTooltip_icon {
                                margin-right: 4px;
                                position: relative;
                                vertical-align: text-top;
                            }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip .mx_InfoTooltip_icon::before, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined .mx_InfoTooltip_icon::before {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_InfoTooltip {
                            display: inline-block;
                        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined {
                            display: inline;
                            position: relative;
                            padding-left: 16px;
                        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name .mx_SpaceHierarchy_roomTile_joined::before {
                                content: "";
                                width: 20px;
                                height: 20px;
                                top: -2px;
                                left: -4px;
                                position: absolute;
                                -webkit-mask-position: center;
                                        mask-position: center;
                                -webkit-mask-size: contain;
                                        mask-size: contain;
                                -webkit-mask-repeat: no-repeat;
                                        mask-repeat: no-repeat;
                                background-color: #0dbd8b;
                                -webkit-mask-image: url(../../icons/check.aaad650.svg);
                                        mask-image: url(../../icons/check.aaad650.svg);
                            }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_info {
                        grid-row: 2;
                        grid-column: 2;
                        font: var(--cpd-font-body-md-regular);
                        font-weight: normal;
                        font-weight: initial;
                        line-height: 1.125rem;
                        color: #edf3ff;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    -webkit-column-gap: 12px;
                       -moz-column-gap: 12px;
                            column-gap: 12px;
                    margin-left: auto;
                }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_AccessibleButton {
                        line-height: 1.5rem;
                        padding: 4px 16px;
                        display: inline-block;
                        visibility: hidden;
                    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_AccessibleButton_kind_danger_outline,
                    .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_AccessibleButton_kind_primary_outline {
                        padding: 3px 16px; /* to account for the 1px border */
                    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover,
                .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within {
                    background-color: #15171b;
                }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover .mx_AccessibleButton, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within .mx_AccessibleButton {
                        visibility: visible;
                    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile.mx_SpaceHierarchy_joining .mx_AccessibleButton {
                        visibility: visible;
                        padding: 4px 18px;
                    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomTile::before, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_children::before {
            content: "";
            position: absolute;
            background-color: #15171b;
            width: 1px;
            height: 100%;
            left: 6px;
            top: 0;
        }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_actions .mx_SpaceHierarchy_actionsText {
            font-weight: normal;
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #edf3ff;
        }

.mx_SpaceRoomView_landing > hr {
        border: none;
        height: 1px;
        background-color: rgb(141, 151, 165, 0.2);
        margin: 20px 0;
    }

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_createRoom {
        display: block;
        margin: 16px auto 0;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpacePanel {
    --activeBackground-color: #fff;
    --activeBorder-color: #edf3ff;
    --activeBorder-transparent-gap: 1px;
    --gutterSize: 14px;
    --height-nested: 24px;
    --height-topLevel: 32px;

    background-color: #15171b;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    padding: 0;
    margin: 0;
    position: relative;
    /* Fix for the blurred avatar-background */
    z-index: 1;

    /* Create another flexbox so the Panel fills the container */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_SpacePanel.collapsed {
        width: 68px;
    }

.mx_SpacePanel.newUi {
        background-color: var(--cpd-color-bg-canvas-default);
        border-right: 1px solid var(--cpd-color-bg-subtle-primary);
    }

.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #edf3ff;
        top: 19px; /* v-align with avatar */
        right: -8px;
    }

.mx_SpacePanel .mx_SpacePanel_toggleCollapse::before {
            content: "";
            position: absolute;
            width: inherit;
            height: inherit;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background-color: #181b21;
            -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                    mask-image: url(../../icons/chevron-down.9ea2899.svg);
            -webkit-transform: rotate(270deg);
                    transform: rotate(270deg);
        }

.mx_SpacePanel .mx_SpacePanel_toggleCollapse:not(.expanded) {
            opacity: 0;
        }

.mx_SpacePanel .mx_SpacePanel_toggleCollapse:not(.expanded)::before {
                -webkit-mask-position: center 1px;
                        mask-position: center 1px;
            }

.mx_SpacePanel .mx_SpacePanel_toggleCollapse.expanded::before {
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }

.mx_SpacePanel:hover .mx_SpacePanel_toggleCollapse {
        opacity: 1;
    }

.mx_SpacePanel ul {
        margin: 0;
        list-style: none;
        padding: 0;
    }

.mx_SpacePanel .mx_SpaceButton_toggleCollapse {
        cursor: pointer;
    }

.mx_SpacePanel .mx_SpaceItem_dragging .mx_SpaceButton_toggleCollapse {
            visibility: hidden;
        }

.mx_SpacePanel .mx_SpaceItem {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
    }

.mx_SpacePanel .mx_SpaceItem.mx_SpaceItem_narrow {
            -ms-flex-item-align: baseline;
                align-self: baseline;
        }

.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
            padding: 0 10px;
            margin: 0 -10px;
            -webkit-transform: rotate(-90deg);
                    transform: rotate(-90deg);
        }

.mx_SpacePanel .mx_SpaceItem.collapsed > .mx_SpaceTreeLevel {
            display: none;
        }

.mx_SpacePanel .mx_SpaceItem_new {
        position: relative;
    }

.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
        margin-left: var(--gutterSize);
        min-width: 40px;
    }

.mx_SpacePanel .mx_SpaceButton {
        border-radius: 8px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 4px 4px 4px 0;
        width: 100%;
        cursor: pointer;
    }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
                background-color: var(--activeBackground-color);
            }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
                padding: var(--activeBorder-transparent-gap);
                border: 3px var(--activeBorder-color) solid;
            }

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            border-radius: 12px;
            padding: 4px;
            width: calc(100% - 32px);
            min-width: 0;
        }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
            -webkit-box-flex: initial;
                -ms-flex: initial;
                    flex: initial;
            width: 32px;
        }

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_name {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            margin-left: 8px;
            white-space: nowrap;
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            font: var(--cpd-font-body-md-regular);
        }

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
            width: var(--gutterSize);
            padding: 10px 0;
            min-width: var(--gutterSize);
            height: 20px;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: 20px;
                    mask-size: 20px;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background-color: #edf3ff;
            -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                    mask-image: url(../../icons/chevron-down.9ea2899.svg);
        }

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
            width: var(--height-topLevel);
            min-width: var(--height-topLevel);
            height: var(--height-topLevel);
            border-radius: 8px;
            position: relative;
        }

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon::before {
                position: absolute;
                content: "";
                width: var(--height-topLevel);
                height: var(--height-topLevel);
                top: 0;
                left: 0;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-size: 18px;
                        mask-size: 18px;
            }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_videoRooms .mx_SpaceButton_icon {
                background-color: #fff;
            }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon::before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon::before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon::before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon::before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
                    background-color: #edf3ff;
                }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon::before {
            -webkit-mask-image: url(../../icons/home-solid.88e9e19.svg);
                    mask-image: url(../../icons/home-solid.88e9e19.svg);
        }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
            -webkit-mask-image: url(../../icons/favourite-solid.a1d4606.svg);
                    mask-image: url(../../icons/favourite-solid.a1d4606.svg);
        }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon::before {
            -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
                    mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
        }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
            -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
                    mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
        }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
            -webkit-mask-image: url(../../icons/video-call-solid.d584e19.svg);
                    mask-image: url(../../icons/video-call-solid.d584e19.svg);
        }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon::before {
                background-color: #edf3ff;
                -webkit-mask-image: url(../../icons/plus.95ca4d1.svg);
                        mask-image: url(../../icons/plus.95ca4d1.svg);
                -webkit-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out; /* TODO transition */
            }

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before {
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
        }

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton {
            width: 20px;
            min-width: 20px; /* yay flex */
            height: 20px;
            margin-top: auto;
            margin-bottom: auto;
            display: none;
            position: absolute;
            right: 4px;
        }

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton::before {
                top: 3px;
                left: 2px;
                content: "";
                width: 16px;
                height: 16px;
                position: absolute;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                        mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                background: #edf3ff;
            }

.mx_SpacePanel .mx_SpaceTreeLevel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        max-width: 250px;
        min-width: 0;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }

.mx_SpacePanel .mx_SpaceTreeLevel .mx_SpaceTreeLevel {
            /* Indent subspaces */
            padding-left: 16px;
        }

.mx_SpacePanel .mx_SpaceButton_avatarWrapper {
        position: relative;
        line-height: 0;
    }

.mx_SpacePanel .mx_SpacePanel_badgeContainer {
        /* Create a flexbox to make aligning dot badges easier */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: absolute;
        right: -3px;
        top: -3px;
    }

.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge {
            margin: 0 2px; /* centering */
            background-clip: padding-box;
        }

.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
            /* make the smaller dot occupy the same width for centering */
            margin: 0 -1px 0 0;
            border: 3px solid #15171b;
        }

.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,
        .mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char {
            margin: -5px -5px 0 0;
            border: 2px solid #15171b;
        }

.mx_SpacePanel .mx_SpaceButton:hover:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton, .mx_SpacePanel .mx_SpaceButton:focus-within:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton, .mx_SpacePanel .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
            display: block;
        }

.mx_SpacePanel .mx_SpaceItem:not(.mx_SpaceItem_new) .mx_SpaceButton:hover:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name, .mx_SpacePanel .mx_SpaceItem:not(.mx_SpaceItem_new) .mx_SpaceButton:focus-within:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name, .mx_SpacePanel .mx_SpaceItem:not(.mx_SpaceItem_new) .mx_SpaceButton_hasMenuOpen:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name {
                max-width: calc(100% - 56px);
            }

/* root space buttons are bigger and not indented */

.mx_SpacePanel > .mx_AutoHideScrollbar {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        padding: 0 0 16px 0;
        scrollbar-gutter: stable;
    }

.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton {
            height: var(--height-topLevel);
        }

.mx_SpacePanel > .mx_AutoHideScrollbar > .mx_SpaceButton.mx_SpaceButton_active::before {
                height: var(--height-topLevel);
            }

.mx_SpacePanel > .mx_AutoHideScrollbar > ul {
            padding-left: 0;
        }

.mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_topOverflow {
            -webkit-mask-image: linear-gradient(to bottom, transparent, black 16px);
                    mask-image: linear-gradient(to bottom, transparent, black 16px);
        }

.mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_bottomOverflow {
            -webkit-mask-image: linear-gradient(
                to top,
                transparent,
                rgb(255, 255, 255, 30%) 4px,
                rgb(255, 255, 255, 55%) 8px,
                rgb(255, 255, 255, 75%) 12px,
                black 16px
            );
                    mask-image: linear-gradient(
                to top,
                transparent,
                rgb(255, 255, 255, 30%) 4px,
                rgb(255, 255, 255, 55%) 8px,
                rgb(255, 255, 255, 75%) 12px,
                black 16px
            );
        }

.mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
            /* This stacks two gradients on top of one another, which lets us
               have a fixed pixel offset from both top and bottom for the colour stops.
               Note the top fade is much smaller because the spaces start close to the top,
               so otherwise a large gradient suddenly appears when you scroll down.
             */
            -webkit-mask-image:
                linear-gradient(to bottom, transparent, black 16px),
                linear-gradient(
                    to top,
                    transparent,
                    rgb(255, 255, 255, 30%) 4px,
                    rgb(255, 255, 255, 55%) 8px,
                    rgb(255, 255, 255, 75%) 12px,
                    black 16px
                );
                    mask-image:
                linear-gradient(to bottom, transparent, black 16px),
                linear-gradient(
                    to top,
                    transparent,
                    rgb(255, 255, 255, 30%) 4px,
                    rgb(255, 255, 255, 55%) 8px,
                    rgb(255, 255, 255, 75%) 12px,
                    black 16px
                );
            -webkit-mask-position:
                0% 0%,
                0% 100%;
                    mask-position:
                0% 0%,
                0% 100%;
            -webkit-mask-size:
                calc(100% - 10px) 50%,
                calc(100% - 10px) 50%;
                    mask-size:
                calc(100% - 10px) 50%,
                calc(100% - 10px) 50%;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
        }

.mx_SpacePanel .mx_UserMenu {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--cpd-color-gray-400);
        margin: 12px 14px 4px 18px;
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        max-width: 226px;
    }

/* Display the container and img here as block elements so they don't take
         * up extra vertical space.
         */

.mx_SpacePanel .mx_UserMenu .mx_UserMenu_userAvatar_BaseAvatar {
            display: block;
        }

.mx_SpacePanel.newUi .mx_UserMenu {
        margin-top: var(--cpd-space-4x);
        border-bottom: none;
    }

.mx_SpacePanel_contextMenu {
    max-width: 360px;
}

.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
        margin: 12px 16px 12px;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.9375rem;
        line-height: 1.125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHome::before {
        -webkit-mask-image: url(../../icons/home-solid.88e9e19.svg);
                mask-image: url(../../icons/home-solid.88e9e19.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconInvite::before {
        -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconSettings::before {
        -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
                mask-image: url(../../icons/settings-solid.94c318a.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave::before {
        -webkit-mask-image: url(../../icons/leave.8b03b57.svg);
                mask-image: url(../../icons/leave.8b03b57.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers::before {
        -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
                mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus::before {
        -webkit-mask-image: url(../../icons/plus.95ca4d1.svg);
                mask-image: url(../../icons/plus.95ca4d1.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconExplore::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/hash-search.53e3a04.svg);
                mask-image: url(../../img/element-icons/roomlist/hash-search.53e3a04.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPreferences::before {
        -webkit-mask-image: url(../../img/element-icons/settings/preference.dd3ae3c.svg);
                mask-image: url(../../img/element-icons/settings/preference.dd3ae3c.svg);
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_noIcon {
        display: none;
    }

.mx_SpacePanel_contextMenu .mx_SpacePanel_noIcon + .mx_IconizedContextMenu_label {
            padding-left: 5px !important; /* override default iconized label style to align with header */
        }

.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_separatorLabel {
        color: #edf3ff;
        font-size: 0.625rem;
        line-height: 0.75rem;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_SpacePanel_sharePublicSpace {
    margin: 0;
}

.mx_SpacePanel_Tooltip_KeyboardShortcut kbd {
        font-family: inherit;
        text-transform: capitalize;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpaceRoomView {
    --innerWidth: 428px;

    overflow-y: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.mx_SpaceRoomView .mx_MainSplit > div:first-child {
        padding: 80px 60px;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        max-height: 100%;
        overflow-y: auto;
    }

.mx_SpaceRoomView .mx_MainSplit > div:first-child h1 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: var(--cpd-font-weight-semibold);
            color: #edf3ff;
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
        }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_description {
            font-size: 0.9375rem;
            color: #edf3ff;
            margin-top: 12px;
            margin-bottom: 24px;
            max-width: var(--innerWidth);
        }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace {
            max-width: var(--innerWidth);
        }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AddExistingToSpace .mx_AddExistingToSpace_content {
                height: calc(100vh - 360px);
                max-height: 400px;
            }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons {
            display: block;
            margin-top: 44px;
            width: var(--innerWidth);
            text-align: right; /* button alignment right */
        }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind {
                padding: 8px 22px;
                margin-left: 16px;
            }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton {
                border: none; /* override default styles */
            }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field {
            max-width: var(--innerWidth);
        }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_Field + .mx_Field {
                margin-top: 28px;
            }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_errorText {
            font-weight: var(--cpd-font-weight-semibold);
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #ff5b55;
            margin-bottom: 28px;
        }

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_AccessibleButton_disabled {
            cursor: not-allowed;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_landing {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        min-width: 0;
    }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_header .mx_BaseAvatar {
                width: 80px;
            }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name {
            margin: 24px 0 16px;
            font-size: 0.9375rem;
            color: #edf3ff;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name > span {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-flow: column;
                        flex-flow: column;
                gap: 12px 0;
            }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name > span h1 {
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 100%;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_name .mx_SpaceRoomView_landing_inviter .mx_BaseAvatar {
                    margin-right: 4px;
                    vertical-align: middle;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            gap: 12px;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            line-height: 1.5rem;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                gap: 12px 12px;
            }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_FacePile {
                    display: inline-block;
                    cursor: pointer;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton,
                .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton {
                    position: relative;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton::before, .mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton::before {
                        position: absolute;
                        content: "";
                        -webkit-mask-position: center;
                                mask-position: center;
                        -webkit-mask-repeat: no-repeat;
                                mask-repeat: no-repeat;
                    }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton {
                    padding: 4px 18px 4px 40px;
                    height: -webkit-min-content;
                    height: -moz-min-content;
                    height: min-content;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton::before {
                        left: 8px;
                        height: 16px;
                        width: 16px;
                        background: var(--cpd-color-icon-on-solid-primary);
                        -webkit-mask-size: 16px;
                                mask-size: 16px;
                        -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                                mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                    }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton {
                    width: 24px;
                    height: 24px;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton::before {
                        left: 0;
                        top: 0;
                        height: 24px;
                        width: 24px;
                        background: #edf3ff;
                        -webkit-mask-size: contain;
                                mask-size: contain;
                        -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
                                mask-image: url(../../icons/settings-solid.94c318a.svg);
                    }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
            font-size: 0.9375rem;
            margin-top: 12px;
            margin-bottom: 16px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SearchBox {
            margin: 0 0 20px;
            -webkit-box-flex: 0;
                -ms-flex: 0;
                    flex: 0;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton {
            position: relative;
            padding: 16px 32px 16px 72px;
            width: 432px;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            border-radius: 8px;
            border: 1px solid #e7e7e7;
            font-size: 1.0625rem;
            font-weight: var(--cpd-font-weight-semibold);
            margin: 20px 0;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > div {
        margin-top: 4px;
        font-weight: normal;
        font-size: 0.9375rem;
        color: #edf3ff;
    }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton::before {
        position: absolute;
        content: "";
        width: 28px;
        height: 28px;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: 22px;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: 28px;
                mask-size: 28px;
        background-color: #edf3ff;
    }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
        border-color: var(--cpd-color-bg-action-primary-rest);
    }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover::before {
            background-color: var(--cpd-color-icon-primary);
        }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover > span {
            color: #edf3ff;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton::before {
            -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
                    mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
        }

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
            -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
                    mask-image: url(../../img/element-icons/group-members.d86d751.svg);
        }

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons {
            color: #edf3ff;
            margin-top: 28px;
        }

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton {
                position: relative;
                display: inline-block;
                padding-left: 32px;
                line-height: 24px; /* to center icons */
            }

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton::before {
                    content: "";
                    position: absolute;
                    height: 24px;
                    width: 24px;
                    top: 0;
                    left: 0;
                    background-color: #edf3ff;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton + .mx_AccessibleButton {
                    margin-left: 32px;
                }

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
                color: var(--cpd-color-text-primary);
                font-weight: var(--cpd-font-weight-semibold);
                text-decoration: underline;
            }

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_SpaceRoomView_inviteTeammates_inviteDialogButton::before {
                    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                            mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                    background-color: var(--cpd-color-icon-primary);
                }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SplashPage {
    position: relative;
    height: 100%;
}

.mx_SplashPage::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        opacity: 0.6;
        background-image:
            radial-gradient(
                53.85% 66.75% at 87.55% 0%,
                hsl(250deg, 76%, 71%, 0.261) 0%,
                hsl(250deg, 100%, 88%, 0) 100%
            ),
            radial-gradient(41.93% 41.93% at 0% 0%, hsl(222deg, 29%, 20%, 0.28) 0%, hsl(250deg, 100%, 88%, 0) 100%),
            radial-gradient(100% 100% at 0% 0%, hsl(250deg, 100%, 88%, 0.174) 0%, hsl(0deg, 100%, 86%, 0) 100%),
            radial-gradient(106.35% 96.26% at 100% 0%, hsl(250deg, 100%, 88%, 0.4) 0%, hsl(167deg, 76%, 82%, 0) 100%);
        /* blur to reduce color banding issues due to alpha-blending multiple gradients */
        -webkit-filter: blur(8px);
                filter: blur(8px);
        inset: -9px;
        -webkit-mask:
            /* mask to dither resulting combined gradient */
            url(../../img/noise.8322d5a.png),
            
                -webkit-gradient(
                    linear,
                     left top, left bottom,
                     color-stop(20%, rgb(0, 0, 0, 0.9)),
                     to(rgb(0, 0, 0, 0.2))
                );
        -webkit-mask:
            /* mask to dither resulting combined gradient */
            url(../../img/noise.8322d5a.png),
            
                linear-gradient(
                    to bottom,
                     rgb(0, 0, 0, 0.9) 20%,
                     rgb(0, 0, 0, 0.2) 100%
                );
                mask:
            /* mask to dither resulting combined gradient */
            url(../../img/noise.8322d5a.png),
            
                -webkit-gradient(
                    linear,
                     left top, left bottom,
                     color-stop(20%, rgb(0, 0, 0, 0.9)),
                     to(rgb(0, 0, 0, 0.2))
                );
                mask:
            /* mask to dither resulting combined gradient */
            url(../../img/noise.8322d5a.png),
            
                linear-gradient(
                    to bottom,
                     rgb(0, 0, 0, 0.9) 20%,
                     rgb(0, 0, 0, 0.2) 100%
                );
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd
Copyright 2017 Travis Ralston

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_TabbedView {
    margin: 0;
    padding: 0 0 0 var(--cpd-space-8x);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    inset: 0;
    margin-top: 8px;
}

.mx_TabbedView_tabsOnLeft {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: absolute;
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
        width: 220px;
        max-width: 220px;
        position: fixed;
        margin: 0; /* Remove the default value */
        padding: 0; /* Remove the default value */
    }

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
        margin-left: 280px; /* 220px sidebar + 60px padding */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel:hover,
    .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
        color: #edf3ff;
    }

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel:hover .mx_TabbedView_maskedIcon::before, .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
            background-color: var(--cpd-color-icon-primary);
        }

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
        background-color: var(--cpd-color-bg-subtle-secondary);
    }

.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon {
        width: 20px;
        height: 20px;
        margin-right: var(--cpd-space-3x);
    }

.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon::before {
        -webkit-mask-size: 20px;
                mask-size: 20px;
        width: 20px;
        height: 20px;
        -webkit-transition: background-color 0.1s;
        transition: background-color 0.1s;
    }

.mx_TabbedView_tabsOnTop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabels {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 8px;
    }

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel {
        padding-left: 0px;
        padding-right: 52px;
    }

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
            font-size: 15px;
            color: #edf3ff;
        }

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabPanel {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active {
        color: #0dbd8b;
    }

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text {
            color: #0dbd8b;
        }

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
        background-color: #0dbd8b;
    }

.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon {
        width: 22px;
        height: 22px;
        margin-left: 0px;
        margin-right: 8px;
    }

.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon::before {
        -webkit-mask-size: 22px;
                mask-size: 22px;
        width: inherit;
        height: inherit;
    }

.mx_TabbedView_tabLabels {
    color: #edf3ff;
}

.mx_TabbedView_tabLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    vertical-align: text-top;
    cursor: pointer;
    padding-block: var(--cpd-space-2x);
    padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-block-size: 40px;
    min-inline-size: 40px;
    border-radius: 24px;
    font: var(--cpd-font-body-md-medium);
    position: relative;
    -webkit-transition:
        color 0.1s,
        background-color 0.1s;
    transition:
        color 0.1s,
        background-color 0.1s;
}

.mx_TabbedView_tabLabel svg {
        width: 20px;
        height: 20px;
        margin-right: var(--cpd-space-3x);
    }

.mx_TabbedView_maskedIcon {
    display: inline-block;
}

.mx_TabbedView_maskedIcon::before {
    display: inline-block;
    background-color: var(--cpd-color-icon-secondary);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    content: "";
}

.mx_TabbedView_tabLabel_text {
    vertical-align: middle;
}

.mx_TabbedView_tabPanel {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 0; /* firefox */
}

.mx_TabbedView_tabPanelContent {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    overflow: auto;
    min-height: 0; /* firefox */
}

/* Hide the labels on tabs, showing only the icons, on narrow viewports. */

@media (max-width: 1024px) {
        .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel_text {
            display: none;
        }
        .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabPanel {
            margin-left: 72px; /* 40px sidebar + 32px padding */
        }
        .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_maskedIcon {
            margin-right: auto;
            margin-left: auto;
        }
        .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabels {
            width: auto;
        }
        .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel {
            padding-inline: 0 0;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }
            .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive .mx_TabbedView_tabLabel svg {
                margin-right: 0;
            }
}

/*
 * Copyright 2024 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_ThreadsActivityCentre_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_ThreadsActivityCentreButton {
    border-radius: 8px;
    margin: 18px auto auto auto;
}

.mx_ThreadsActivityCentreButton.expanded {
        /**
         * override compound default background color when hovered
         * should disappear when the space panel will be migrated to compound
         */
        background-color: transparent !important;

        /* align with settings icon */
        margin-left: 21px;
    }

/**
         * modify internal css of the compound component
         * dirty but we need to add the `Threads` label into the indicator icon button
         **/

.mx_ThreadsActivityCentreButton.expanded > div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_ThreadsActivityCentreButton.expanded .mx_ThreadsActivityCentreButton_Icon {
            /* align with settings label */
            margin-right: 14px;
            /* required to set the icon width when into a flex container */
            min-width: 24px;
        }

.mx_ThreadsActivityCentreButton.expanded .mx_ThreadsActivityCentreButton_Text {
            color: #edf3ff;
        }

.mx_ThreadsActivityCentreButton:not(.expanded):hover,
        .mx_ThreadsActivityCentreButton:not(.expanded):hover .mx_ThreadsActivityCentreButton_Icon {
            background-color: #6f7882;
            fill: #edf3ff;
        }

.mx_ThreadsActivityCentreButton .mx_ThreadsActivityCentreButton_Icon {
        fill: #edf3ff;
    }

.mx_ThreadsActivityCentre_rows {
    overflow-y: scroll;
    /* Let some space at the top and the bottom of the pop-up */
    max-height: calc(100vh - 200px);
}

.mx_ThreadsActivityCentre_rows .mx_ThreadsActivityCentreRow {
        height: 48px;
    }

/* Make the label of the MenuItem stay on one line and truncate with ellipsis if needed */

.mx_ThreadsActivityCentre_rows .mx_ThreadsActivityCentreRow > span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* Arbitrary size, keep the TAC as the wanted width */
            width: 202px;
        }

.mx_ThreadsActivityCentre_emptyCaption {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 13px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ToastContainer {
    position: absolute;
    top: 0;
    left: 70px;
    z-index: 101;
    padding: 4px;
    display: grid;
    grid-template-rows: 1fr 14px 6px;
}

.mx_ToastContainer.mx_ToastContainer_stacked::before {
        content: "";
        margin: 0 4px;
        grid-row: 2 / 4;
        grid-column: 1;
        background-color: #21262c;
        -webkit-box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
                box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
        border-radius: 8px;
    }

.mx_ToastContainer .mx_Toast_toast {
        grid-row: 1 / 3;
        grid-column: 1;
        background-color: var(--cpd-color-bg-canvas-default);
        color: #edf3ff;
        -webkit-box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
                box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
        border-radius: 12px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 22px 1fr;
        grid-column-gap: 8px;
        -webkit-column-gap: 8px;
           -moz-column-gap: 8px;
                column-gap: 8px;
        grid-row-gap: 4px;
        row-gap: 4px;
        padding: var(--cpd-space-3x);
    }

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon::before,
            .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon::after {
                content: "";
                width: 22px;
                height: 22px;
                grid-column: 1;
                grid-row: 1;
                -webkit-mask-size: 100%;
                        mask-size: 100%;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                background-size: 100%;
                background-repeat: no-repeat;
            }

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification::after {
                -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
                        mask-image: url(../../img/e2e/normal.ab42a7b.svg);
                background-color: #edf3ff;
            }

/* white infill for the hollow svg mask */

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning::before {
                    background-color: #ffffff;
                    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
                            mask-image: url(../../img/e2e/normal.ab42a7b.svg);
                    -webkit-mask-size: 80%;
                            mask-size: 80%;
                }

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning::after {
                    -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
                            mask-image: url(../../img/e2e/warning.71ffc83.svg);
                    background-color: #ff5b55;
                }

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup::after {
                -webkit-mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
                        mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
                background-color: #edf3ff;
            }

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_key_storage::after {
                -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
                        mask-image: url(../../icons/settings-solid.94c318a.svg);
                background-color: #edf3ff;
            }

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_labs::after {
                -webkit-mask-image: url(../../img/element-icons/flask.6aca159.svg);
                        mask-image: url(../../img/element-icons/flask.6aca159.svg);
                background-color: #edf3ff;
            }

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title,
            .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body {
                grid-column: 2;
            }

.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) {
            padding-left: 12px;
        }

.mx_ToastContainer .mx_Toast_toast:not(.mx_Toast_hasIcon) .mx_Toast_title {
                grid-column: 1 / -1;
            }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_title,
        .mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
            padding-right: 8px;
        }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-column-gap: 8px;
               -moz-column-gap: 8px;
                    column-gap: 8px;
            width: 100%;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
        }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
                margin: 0;
                font: var(--cpd-font-body-lg-semibold);
                display: inline;
                width: auto;
            }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_title .mx_Toast_title_countIndicator {
                font-size: 0.75rem;
                line-height: 1.375rem;
                color: #edf3ff;
                -webkit-margin-start: auto;
                        margin-inline-start: auto; /* on the end side of the div */
            }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_body {
            grid-column: 1 / 3;
            grid-row: 2;
        }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            -webkit-column-gap: 5px;
               -moz-column-gap: 5px;
                    column-gap: 5px;
        }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_AccessibleButton {
                min-width: 96px;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
            }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
            max-width: 272px;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 4px 0 11px 0;
            color: #edf3ff;
            font: var(--cpd-font-body-sm-regular);
        }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
                text-decoration: none;
            }

.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
            font-size: 0.625rem;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 , 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UploadBar {
    padding-left: 65px; /* line up with the shield area in the composer */
    padding-top: 5px;
    position: relative;
}

.mx_UploadBar .mx_ProgressBar {
        width: calc(100% - 40px); /* cheating at a right margin */
    }

.mx_ThreadView .mx_UploadBar {
        padding-left: 0;
    }

.mx_UploadBar_filename {
    color: #a1b2d1;
    position: relative;
    padding-right: 38px; /* 32px for cancel icon, 6px for padding */
    padding-left: 22px; /* 18px for icon, 4px for padding */
    font-size: 0.9375rem;
    vertical-align: middle;
}

.mx_UploadBar_filename::before {
        content: "";
        height: 18px;
        width: 18px;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        background-color: #a1b2d1;
        -webkit-mask-image: url(../../img/element-icons/upload.1018a2f.svg);
                mask-image: url(../../img/element-icons/upload.1018a2f.svg);
    }

.mx_UploadBar_cancel {
    position: absolute;
    top: 0;
    right: 0;
    height: 16px;
    width: 16px;
    margin-right: 16px; /* align over rightmost button in composer */
    margin-top: 5px;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    background-color: #a1b2d1;
    -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
            mask-image: url(../../icons/close.5ef7caf.svg);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UserMenu {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_UserMenu .mx_AccessibleButton {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_UserMenu .mx_AccessibleButton .mx_UserMenu_userAvatar {
            position: relative;
        }

.mx_UserMenu .mx_AccessibleButton .mx_UserMenu_userAvatar .mx_BaseAvatar {
                pointer-events: none; /* makes the avatar non-draggable */
            }

.mx_UserMenu .mx_UserMenu_contextMenuButton {
        width: 100%;
    }

.mx_UserMenu .mx_UserMenu_name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.9375rem;
        line-height: 1.5rem;
        margin-left: 10px;
    }

.mx_IconizedContextMenu.mx_UserMenu_contextMenu {
        width: 258px;
    }

.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton {
            padding-top: 16px;
            padding-bottom: 16px;
        }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
        padding: 20px;

        /* Create a flexbox to organize the header a bit easier */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name {
            /* Create another flexbox of columns to handle large user IDs */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            width: calc(100% - 40px); /* 40px = 32px theme button + 8px margin to theme button */
        }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName,
            .mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_userId {
                font: var(--cpd-font-body-lg-regular);

                /* Automatically grow subelements to fit the container */
                -webkit-box-flex: 1;
                    -ms-flex: 1;
                        flex: 1;
                width: 100%;

                /* Ellipsize text overflow */
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name .mx_UserMenu_contextMenu_displayName {
                font-weight: var(--cpd-font-weight-semibold);
            }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton {
            min-width: 32px;
            max-width: 32px;
            width: 32px;
            height: 32px;
            margin-left: 8px;
            border-radius: 32px;
            background-color: #e3e8f0;
            cursor: pointer;

            /* to make alignment easier, create flexbox for the image */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts {
            padding-top: 0;
            display: inline-block;
        }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts > span {
                font-weight: var(--cpd-font-weight-semibold);
                display: block;
            }

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts > span + span {
                    margin-top: 8px;
                }

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
        width: 16px;
        height: 16px;
        display: block;
    }

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon::before {
            content: "";
            width: 16px;
            height: 16px;
            display: block;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background: var(--cpd-color-icon-tertiary);
        }

.mx_UserMenu_contextMenu .mx_UserMenu_iconHome::before {
        -webkit-mask-image: url(../../icons/home-solid.88e9e19.svg);
                mask-image: url(../../icons/home-solid.88e9e19.svg);
    }

.mx_UserMenu_contextMenu .mx_UserMenu_iconBell::before {
        -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
                mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
    }

.mx_UserMenu_contextMenu .mx_UserMenu_iconLock::before {
        -webkit-mask-image: url(../../icons/lock-solid.6847293.svg);
                mask-image: url(../../icons/lock-solid.6847293.svg);
    }

.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings::before {
        -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
                mask-image: url(../../icons/settings-solid.94c318a.svg);
    }

.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage::before {
        -webkit-mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
                mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
    }

.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut::before {
        -webkit-mask-image: url(../../icons/leave.8b03b57.svg);
                mask-image: url(../../icons/leave.8b03b57.svg);
    }

.mx_UserMenu_contextMenu .mx_UserMenu_iconQr::before {
        -webkit-mask-image: url(../../icons/qr-code.b517d20.svg);
                mask-image: url(../../icons/qr-code.b517d20.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ViewSource pre {
        font-size: 0.75rem;
        padding: 0.5em 1em;
        word-wrap: break-word;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

.mx_ViewSource .mx_ViewSource_header {
        border-bottom: 1px solid #6f7882;
        padding-bottom: 12px;
        margin-bottom: 12px;
        font-family: monospace;
    }

.mx_ViewSource .mx_ViewSource_header .mx_CopyableText {
            word-break: break-all;
        }

.mx_ViewSource .mx_ViewSource_heading {
        font-size: 1.0625rem;
        font-weight: 400;
        color: #edf3ff;
        margin-top: 12px;
    }

.mx_ViewSource .mx_ViewSource_details {
        margin-top: 12px;
    }

.mx_ViewSource .mx_CopyableText_border {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 100%;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CompleteSecurity_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_CompleteSecurity_headerIcon {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    position: relative;
}

.mx_CompleteSecurity_heroIcon {
    width: 128px;
    height: 128px;
    position: relative;
    margin: 0 auto;
}

.mx_CompleteSecurity_skip {
    cursor: pointer;
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--cpd-color-bg-subtle-secondary);
}

.mx_CompleteSecurity_skip:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_CompleteSecurity_skip::before {
        content: "";
        width: 28px;
        height: 28px;
        left: 0;
        top: 0;
        position: absolute;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_CompleteSecurity_skip {
    position: absolute;
    right: 24px;
}

.mx_CompleteSecurity_body {
    font-size: 0.9375rem;
}

.mx_CompleteSecurity_waiting {
    color: #edf3ff;
}

.mx_CompleteSecurity_actionRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-top: 1.75rem;
}

.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
        -webkit-margin-start: 18px;
                margin-inline-start: 18px;
    }

.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
            color: #ff5b55;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ConfirmSessionLockTheftView {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_ConfirmSessionLockTheftView_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 400px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Login_submit {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 24px;
    font: var(--cpd-font-body-md-regular);
    color: white;
    background-color: var(--cpd-color-bg-action-primary-rest);
    width: auto;
    padding: 7px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    cursor: pointer;
    display: inline-block;
}

.mx_Login_submit:not(:focus-visible) {
        outline: none;
    }

.mx_Login_submit {
    font-size: 15px;
    font-weight: var(--cpd-font-weight-semibold);
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
}

.mx_Login_submit:disabled {
    opacity: 0.3;
    cursor: default;
}

.mx_Login_loader {
    display: inline;
    position: relative;
    top: 2px;
    left: 8px;
}

.mx_Login_loader .mx_Spinner {
    display: inline;
}

.mx_Login_loader .mx_Spinner img {
    width: 16px;
    height: 16px;
}

.mx_Login_error {
    color: #ff5b55;
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 12px;
}

.mx_Login_error.mx_Login_serverError {
    text-align: left;
    font-weight: normal;
}

.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
    color: #ff8d13; /* Only used here */
}

.mx_Login_type_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #2e2f32;
}

.mx_Login_type_container .mx_Field {
        margin: 0;
    }

.mx_Login_type_label {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.mx_Login_underlinedServerName {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border-bottom: 1px dashed #0dbd8b;
}

div.mx_AccessibleButton_kind_link.mx_Login_forgot {
    display: block;
    margin-top: 24px;
}

div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
        cursor: not-allowed;
    }

.mx_Login_spinner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 14px;
}

.mx_Login_fullWidthButton {
    width: 100%;
    margin-bottom: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LoginSplashView_migrationProgress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
}

.mx_LoginSplashView_migrationProgress .mx_ProgressBar {
        height: 8px;
        width: 600px;

        border-radius: 8px;
    }

.mx_LoginSplashView_migrationProgress .mx_ProgressBar::-moz-progress-bar {
        border-radius: 8px;
    }

.mx_LoginSplashView_migrationProgress .mx_ProgressBar::-webkit-progress-bar,
    .mx_LoginSplashView_migrationProgress .mx_ProgressBar::-webkit-progress-value {
        border-radius: 8px;
    }

.mx_LoginSplashView_splashButtons {
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 30px;
}

.mx_LoginSplashView_syncError {
    color: #ffffff;
    background-color: #df2a8b; /* Only used here */
    border-radius: 5px;
    display: table;
    padding: 30px;
    position: absolute;
    top: 100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MobileRegister_body {
    padding: 32px;
    height: 100vh;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Register_mainContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-height: 270px;
}

.mx_Register_mainContent p {
        font: var(--cpd-font-body-md-regular);
        color: #2e2f32;
    }

.mx_Register_mainContent p.secondary {
            color: #2e2f32;
        }

.mx_Register_mainContent > img:first-child {
        margin-bottom: 16px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

.mx_Register_mainContent .mx_Login_submit {
        margin-bottom: 0;
    }

.mx_Register_footerActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgb(141, 151, 165, 0.2);
}

.mx_Register_footerActions > * {
        -ms-flex-preferred-size: content;
            flex-basis: content;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SessionLockStolenView h1 {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 2rem;
        text-align: center;
    }

.mx_SessionLockStolenView h2 {
        margin: 0;
        font-weight: 500;
        font-size: 1.5rem;
        text-align: center;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SetupEncryptionBody_reset {
    color: #c8c8cd;
    margin-top: 0.875rem;
}

.mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link.mx_AccessibleButton_kind_link_inline {
            color: #ff5b55;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MediaBody.mx_AudioPlayer_container {
    padding: 16px 12px 12px 12px;
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_PlayPauseButton {
            margin-right: 8px;
        }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            overflow: hidden; /* makes the ellipsis on the file name work */
        }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo > * {
                display: block;
            }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo .mx_AudioPlayer_mediaName {
                color: #edf3ff;
                font-size: 0.9375rem;
                line-height: 0.9375rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding-bottom: 4px; /* mimics the line-height differences in the Figma */
            }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo .mx_AudioPlayer_byline {
                font-size: 0.75rem;
                line-height: 0.75rem;
            }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_SeekBar {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        }

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
            min-width: 2.625rem; /* for flexbox */
            padding-left: 4px; /* isolate from seek bar */
            text-align: justify;
            white-space: nowrap;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PlayPauseButton {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px; /* for when the button is used in a flexbox */
    min-height: 32px; /* for when the button is used in a flexbox */
    border-radius: 32px;
    background-color: #21262c;
}

.mx_PlayPauseButton::before {
        content: "";
        position: absolute; /* sizing varies by icon */
        background-color: #edf3ff;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        top: 6px; /* center */
        left: 6px; /* center */
        width: 20px;
        height: 20px;
    }

.mx_PlayPauseButton.mx_PlayPauseButton_disabled::before {
        opacity: 0.5;
    }

.mx_PlayPauseButton.mx_PlayPauseButton_play::before {
        -webkit-mask-image: url(../../icons/play-solid.05663a6.svg);
                mask-image: url(../../icons/play-solid.05663a6.svg);
    }

.mx_PlayPauseButton.mx_PlayPauseButton_pause::before {
        -webkit-mask-image: url(../../icons/pause-solid.a64b426.svg);
                mask-image: url(../../icons/pause-solid.a64b426.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* Dev note: there's no actual component called <PlaybackContainer />. These classes */

/* are shared amongst multiple voice message components. */

/* Container for live recording and playback controls */

.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
    /* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
    /* inherit from mx_MediaBody */
    padding-right: 11px;

    /* Cheat at alignment a bit */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    contain: content;
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform,
    .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle {
        min-width: 0; /* Prevent a blowout */
    }

/* Waveforms are present in live recording only */

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform {
        /* default, overridden in JS */
        --barHeight: 1;
    }

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
            background-color: #6f7882;
            height: 100%;
            -webkit-transform: scaleY(max(0.05, var(--barHeight)));
                    transform: scaleY(max(0.05, var(--barHeight)));
        }

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct {
                /* Small animation to remove the mechanical feel of progress */
                -webkit-transition: background-color 250ms ease;
                transition: background-color 250ms ease;
                background-color: #edf3ff;
            }

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Clock {
        width: 2.625rem; /* we're not using a monospace font, so fake it */
        min-width: 2.625rem; /* force sensible layouts in awkward flexboxes (file panel, for example) */
        padding-right: 6px; /* with the fixed width this ends up as a visual 8px most of the time, as intended. */
        padding-left: 8px; /* isolate from recording circle / play control */
    }

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle {
        margin-left: 8px;
        margin-right: 6px;
        position: relative;
        display: inline-block;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        height: 30px;
    }

/* same height as mx_Waveform, needed for automatic vertical centering */

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_Waveform {
            left: 0;
            top: 0;
        }

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar {
            position: absolute;
            left: 0;
            height: 30px;
            top: -2px; /* visually vertically centered */

            /* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */
            /* because CSS is weird. */
            background: none;

            /* Make the thumb easier to see. Like the SeekBar original styles, these need to be */
            /* distinct. We make it transparent so it doesn't show up on the UI, but also larger */
        }

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::before {
                background: none;
            }

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-progress {
                background: none;
            }

/* move and drag the thumb regardless of hitting the thumb, however. */

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-webkit-slider-thumb {
                width: 10px;
                height: 10px;
                background-color: transparent;
            }

/* so it's easier to grab by mouse users in some browsers. Most browsers let the user */

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-thumb {
                width: 10px;
                height: 10px;
                background-color: transparent;
            }

/* For timeline-rendered playback, the clock is on the other side of the waveform. */

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle + .mx_Clock {
            text-align: right;

            /* Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle` */
            padding: 0;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* CSS inspiration from: */

/* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */

/* * https://stackoverflow.com/a/28283806 */

/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

.mx_SeekBar {
    /* default, overridden in JS */
    --fillTo: 1;

    /* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
    /* need to support IE. */

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none; /* default style override */

    width: 100%;
    height: 1px;
    background: #6f7882;
    outline: none; /* remove blue selection border */
    position: relative; /* for before+after pseudo elements later on */

    cursor: pointer;

    /* This is for webkit support, but we can't limit the functionality of it to just webkit */
    /* browsers. Firefox responds to webkit-prefixed values now, which means we can't use media */

    /* Increase clickable area for the slider (approximately same size as browser default) */
    /* We do it this way to keep the same padding and margins of the element, avoiding margin math. */
}

.mx_SeekBar::-webkit-slider-thumb {
        -webkit-appearance: none;
                appearance: none; /* default style override */

        /* Dev note: This needs to be duplicated with the -moz-range-thumb selector */
        /* because otherwise Edge (webkit) will fail to see the styles and just refuse */
        /* to apply them. */
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #edf3ff;
        cursor: pointer;
    }

.mx_SeekBar::-moz-range-thumb {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #edf3ff;
        cursor: pointer;

        /* Firefox adds a border on the thumb */
        border: none;
    }

/* in firefox, so it's just wasted CPU/GPU time. */

.mx_SeekBar::before {
        /* ::before to ensure it ends up under the thumb */
        content: "";
        background-color: #edf3ff;

        /* Absolute positioning to ensure it overlaps with the existing bar */
        position: absolute;
        top: 0;
        left: 0;

        /* Sizing to match the bar */
        width: 100%;
        height: 1px;

        /* And finally dynamic width without overly hurting the rendering engine. */
        -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
        -webkit-transform: scaleX(var(--fillTo));
                transform: scaleX(var(--fillTo));
    }

/* This is firefox's built-in support for the above, with 100% less hacks. */

.mx_SeekBar::-moz-range-progress {
        background-color: #edf3ff;
        height: 1px;
    }

/* or support queries to selectively apply the rule. An upside is that this CSS doesn't work */

.mx_SeekBar:disabled {
        opacity: 0.5;
    }

/* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */

.mx_SeekBar::after {
        content: "";
        position: absolute;
        top: -6px;
        bottom: -6px;
        left: 0;
        right: 0;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Waveform {
    position: relative;
    height: 30px; /* tallest bar can only be 30px */
    top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* so the bars grow from the middle */

    overflow: hidden; /* this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS. */

    /* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */
}

/* with rounded caps. */

.mx_Waveform .mx_Waveform_bar {
        width: 0; /* 0px width means we'll end up using the border as our width */
        border: 1px solid transparent; /* transparent means we'll use the background colour */
        border-radius: 2px; /* rounded end caps, based on the border */
        min-height: 0; /* like the width, we'll rely on the border to give us height */
        max-height: 100%; /* this makes the `height: 42%` work on the element */
        margin-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */
        margin-right: 1px;

        /* background color is handled by the parent components */
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AuthBody {
    width: 500px;
    font-size: 0.75rem;
    color: #2e2f32;
    background-color: #181b21;
    border-radius: 0 4px 4px 0;
    padding: 25px 60px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_AuthBody strong {
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_AuthBody.mx_AuthBody_flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_AuthBody h1 {
        font-size: 1.5rem;
        font-weight: var(--cpd-font-weight-semibold);
        margin-top: 8px;
        color: #2e2f32;
    }

.mx_AuthBody h2 {
        font: var(--cpd-font-body-md-semibold);
        color: #2e2f32;
    }

.mx_AuthBody h2.mx_AuthBody_centered {
        text-align: center;
    }

.mx_AuthBody a:link,
    .mx_AuthBody a:hover,
    .mx_AuthBody a:visited {
        color: #0dbd8b;
        text-decoration: none;
    }

.mx_AuthBody fieldset {
        display: block;
    }

.mx_AuthBody .mx_AuthBody_icon {
        width: 44px;
        height: 44px;
    }

.mx_AuthBody .mx_AuthBody_lockIcon {
        color: #edf3ff;
        height: 32px;
        width: 32px;
    }

.mx_AuthBody .mx_AuthBody_text {
        margin-bottom: 48px;
        margin-top: 0;
    }

.mx_AuthBody input[type="text"],
    .mx_AuthBody input[type="password"] {
        color: #2e2f32;
    }

.mx_AuthBody .mx_Field label {
        color: #2e2f32;
    }

.mx_AuthBody .mx_Field input,
    .mx_AuthBody .mx_Field select {
        color: #2e2f32;
        background-color: #181b21;
    }

.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label, .mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
        background-color: #181b21;
    }

.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label, .mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
        background-color: #181b21;
    }

.mx_AuthBody .mx_Field_labelAlwaysTopLeft label,
    .mx_AuthBody .mx_Field select + label,
    .mx_AuthBody .mx_Field input:focus + label,
    .mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
    .mx_AuthBody .mx_Field textarea:focus + label,
    .mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label {
        background-color: #181b21;
    }

.mx_AuthBody input.error {
        color: #ff5b55;
    }

.mx_AuthBody .mx_Login_submit {
        height: 32px;
        margin-top: 16px;
    }

.mx_AuthBody .mx_ErrorMessage {
        margin-bottom: 12px;
        margin-top: 2px;
    }

.mx_AuthBody .mx_Field input {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

.mx_AuthBody .mx_Field_select::before {
        background-color: #2e2f32;
    }

.mx_AuthBody .mx_Dropdown {
        color: #2e2f32;
    }

.mx_AuthBody .mx_Dropdown_arrow {
        background: #2e2f32;
    }

.mx_AuthBody .mx_Dropdown_menu {
        background-color: #181b21;
    }

.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
            background-color: #dddddd;
        }

/* specialisation for password reset views */

.mx_AuthBody.mx_AuthBody_forgot-password {
    font: var(--cpd-font-body-md-regular);
    color: #edf3ff;
    padding: 50px 32px;
    min-height: 600px;
}

.mx_AuthBody.mx_AuthBody_forgot-password h1 {
        margin: 24px 0;
    }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_button-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_Login_submit {
        font-weight: var(--cpd-font-weight-semibold);
        margin: 0 0 16px;
    }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_text {
        margin-bottom: 32px;
    }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_text p {
            margin: 0 0 8px;
        }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_sign-in-instead-button {
        font-weight: var(--cpd-font-weight-semibold);
        padding: 4px;
    }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_fieldRow {
        margin-bottom: 24px;
    }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AccessibleButton.mx_AccessibleButton_hasKind {
        background: none;
    }

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AccessibleButton.mx_AccessibleButton_hasKind:disabled {
            cursor: default;
            opacity: 0.4;
        }

.mx_AuthBody_did-not-receive {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #edf3ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
}

.mx_AuthBody_resend-button {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 8px;
    color: #0dbd8b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    padding: 4px;
}

.mx_AuthBody_resend-button:hover {
        background-color: #21262c;
    }

.mx_AuthBody_emailPromptIcon {
    width: 57px;
}

.mx_AuthBody_emailPromptIcon--shifted {
    margin-bottom: -17px; /* Prevent layout jump by relative positioning. */
    position: relative;
    top: -17px; /* This icon is higher than the other icons. Shift up to prevent icon jumping. */
    width: 57px;
}

.mx_AuthBody_fieldRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
}

.mx_AuthBody_fieldRow > .mx_Field {
    margin: 0 5px;
}

.mx_AuthBody_fieldRow > .mx_Field:first-child {
    margin-left: 0;
}

.mx_AuthBody_fieldRow > .mx_Field:last-child {
    margin-right: 0;
}

.mx_AuthBody_paddedFooter {
    height: 80px; /* height of the submit button + register link */
    padding-top: 28px;
    text-align: center;
}

.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
        margin-top: 16px;
        font-size: 0.9375rem;
        line-height: 1.5rem;
    }

.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img {
            vertical-align: sub;
            margin-right: 5px;
        }

.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
        margin-top: 8px;
        font-size: 0.625rem;
        line-height: 0.875rem;
    }

.mx_AuthBody_changeFlow {
    display: block;
    text-align: center;
}

.mx_AuthBody_changeFlow > a {
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_SSOButtons + .mx_AuthBody_changeFlow {
    margin-top: 24px;
}

.mx_AuthBody_spinner {
    margin: 1em 0;
}

@media only screen and (max-width: 480px) {
    .mx_AuthBody {
        border-radius: 4px;
        width: auto;
        max-width: 500px;
        padding: 10px;
    }
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AuthFooter {
    text-align: center;
    width: 100%;
    font: var(--cpd-font-body-md-regular);
    opacity: 0.72;
    padding: 20px 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0, 0)), to(rgb(0, 0, 0, 0.8)));
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
}

.mx_AuthFooter a:link,
.mx_AuthFooter a:hover,
.mx_AuthFooter a:visited {
    color: #ffffff;
    margin: 0 22px;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AuthHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 206px;
    padding: 25px 25px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

@media only screen and (max-width: 480px) {
    .mx_AuthHeader {
        display: none;
    }
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AuthHeaderLogo {
    margin-top: 15px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 0 25px;
}

.mx_AuthHeaderLogo img {
    width: 100%;
}

@media only screen and (max-width: 480px) {
    .mx_AuthHeaderLogo {
        display: none;
    }
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AuthPage {
    width: 100%;
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #2e3649;
    height: 100vh;
    overflow: auto;
}

.mx_AuthPage_modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 100px auto auto;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
            box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
    background-color: rgba(255, 255, 255, 0.59);
}

@media only screen and (max-height: 768px) {

.mx_AuthPage_modal {
        margin-top: 50px
}
    }

@media only screen and (max-width: 480px) {

.mx_AuthPage_modal {
        margin-top: 0
}
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CompleteSecurityBody {
    width: 600px;
    color: #2e2f32;
    background-color: #181b21;
    border-radius: 4px;
    padding: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_CompleteSecurityBody h2 {
        font-size: 1.5rem;
        font-weight: var(--cpd-font-weight-semibold);
        margin-top: 0;
    }

.mx_CompleteSecurityBody h3 {
        font: var(--cpd-font-body-md-semibold);
    }

.mx_CompleteSecurityBody a:link,
    .mx_CompleteSecurityBody a:hover,
    .mx_CompleteSecurityBody a:visited {
        color: #0dbd8b;
        text-decoration: none;
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
    padding: 0 3px;
}

.mx_CountryDropdown .mx_Dropdown_arrow {
    padding-right: 3px;
}

.mx_CountryDropdown_shortOption {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
}

.mx_CountryDropdown_option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2017 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InteractiveAuthEntryComponents .mx_InteractiveAuthEntryComponents_termsSubmit {
        margin-top: 20px;
        margin-bottom: 5px;
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box; /* prevent overflowing */
    }

.mx_InteractiveAuthEntryComponents_msisdnWrapper {
    text-align: center;
}

.mx_InteractiveAuthEntryComponents_msisdnEntry {
    font-size: 200%;
    font-weight: bold;
    border: 1px solid #c7c7c7;
    border-radius: 3px;
    width: 6em;
}

.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
    border: 1px solid #0dbd8b;
}

.mx_InteractiveAuthEntryComponents_msisdnSubmit {
    margin-top: 4px;
    margin-bottom: 5px;
}

/* XXX: This should be a common button class */

.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
    background-color: #c8c8cd;
    cursor: default;
}

.mx_InteractiveAuthEntryComponents_termsPolicy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_InteractiveAuthEntryComponents_passwordSection {
    width: 300px;
}

.mx_InteractiveAuthEntryComponents_sso_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-top: 20px;
}

.mx_InteractiveAuthEntryComponents_sso_buttons .mx_AccessibleButton {
        margin-left: 5px;
    }

/* "Resend" button/link */

.mx_InteractiveAuthEntryComponents_emailWrapper .mx_AccessibleButton_kind_link_inline {
        /* We need this to be an inline-block so positioning works correctly */
        display: inline-block !important;
    }

/* Spinner as end adornment of the "resend" button/link */

.mx_InteractiveAuthEntryComponents_emailWrapper .mx_AccessibleButton_kind_link_inline .mx_Spinner {
            /* Spinners are usually block elements, but we need it as inline element */
            display: -webkit-inline-box !important;
            display: -ms-inline-flexbox !important;
            display: inline-flex !important;
            /* Spinners by default fill all available width, but we don't want that */
            width: auto !important;
            /* We need to center the spinner relative to the button/link */
            vertical-align: middle !important;
        }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AuthBody_language {
    width: 100%;
}

.mx_AuthBody_language .mx_Dropdown_input {
    border: none;
    font: var(--cpd-font-body-md-semibold);
    color: #2e2f32;
    width: auto;
}

.mx_AuthBody_language .mx_Dropdown_arrow {
    background: #2e2f32;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LoginWithQRSection p {
    margin-top: 0;
    margin-bottom: 16px;
}

.mx_LoginWithQRSection .mx_AccessibleButton_kind_primary + p {
        color: var(--cpd-color-text-secondary);
        margin-top: var(--cpd-space-2x);
    }

.mx_LoginWithQRSection .mx_AccessibleButton svg {
    margin-right: 12px;
}

.mx_AuthPage .mx_LoginWithQR .mx_AccessibleButton {
        display: block !important;
    }

.mx_AuthPage .mx_LoginWithQR .mx_AccessibleButton + .mx_AccessibleButton {
        margin-top: 8px;
    }

.mx_AuthPage .mx_LoginWithQR {

    font-size: 0.9375rem;
}

.mx_UserSettingsDialog .mx_LoginWithQR {
    font: var(--cpd-font-body-md-regular);
}

.mx_UserSettingsDialog .mx_LoginWithQR h1 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

.mx_UserSettingsDialog .mx_LoginWithQR h2 {
        margin-top: 24px;
    }

.mx_UserSettingsDialog .mx_LoginWithQR .mx_QRCode {
        margin: 28px 0;
    }

.mx_UserSettingsDialog .mx_LoginWithQR .mx_LoginWithQR_qrWrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_LoginWithQR {
    min-height: 350px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_LoginWithQR h1 > svg.normal {
            color: #edf3ff;
        }

.mx_LoginWithQR h1 > svg.error {
            color: #ff5b55;
        }

.mx_LoginWithQR h1 > svg.success {
            color: #0dbd8b;
        }

.mx_LoginWithQR h1 > svg {
        height: 1.3em;
        margin-right: 8px;
        vertical-align: middle;
}

.mx_LoginWithQR .mx_LoginWithQR_confirmationDigits {
        text-align: center;
        margin: 48px auto;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 1.5rem;
        color: #edf3ff;
    }

.mx_LoginWithQR .mx_LoginWithQR_confirmationAlert {
        border: 1px solid #6f7882;
        border-radius: 8px;
        padding: 8px;
        line-height: 1.5em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_LoginWithQR .mx_LoginWithQR_confirmationAlert svg {
            height: 30px;
        }

.mx_LoginWithQR .mx_LoginWithQR_separator {
        margin: 1em 0;
    }

.mx_LoginWithQR ol {
        -webkit-padding-start: 0;
                padding-inline-start: 0;
        list-style: none;
    }

/* list markers do not support the outlined number styling we need */

.mx_LoginWithQR ol li {
            position: relative;
            padding-left: var(--cpd-space-7x);
            color: 1px solid var(--cpd-color-text-secondary);
            margin-bottom: var(--cpd-space-4x);
            line-height: 20px;
            text-align: left;
            text-align: initial;
        }

/* Circled number list item marker */

.mx_LoginWithQR ol li::before {
            content: counter(list-item);
            position: absolute;
            left: 0;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50%;
            border: 1px solid var(--cpd-color-text-secondary);
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            text-align: center;
        }

.mx_LoginWithQR label[for="mx_LoginWithQR_checkCode"] {
        margin-top: var(--cpd-space-6x);
        color: var(--cpd-color-text-primary);
        margin-bottom: var(--cpd-space-1x);
    }

.mx_LoginWithQR .mx_LoginWithQR_icon {
        width: 56px;
        height: 56px;
        border-radius: 8px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: var(--cpd-space-3x);
        gap: 10px;

        background-color: var(--cpd-color-bg-subtle-secondary);
    }

.mx_LoginWithQR .mx_LoginWithQR_icon svg {
            color: var(--cpd-color-icon-secondary);
        }

.mx_LoginWithQR .mx_LoginWithQR_icon.mx_LoginWithQR_icon--success {
            background-color: var(--cpd-color-bg-success-subtle);
        }

.mx_LoginWithQR .mx_LoginWithQR_icon.mx_LoginWithQR_icon--success svg {
                color: var(--cpd-color-icon-success-primary);
            }

.mx_LoginWithQR .mx_LoginWithQR_icon.mx_LoginWithQR_icon--critical {
            background-color: var(--cpd-color-bg-critical-subtle);
        }

.mx_LoginWithQR .mx_LoginWithQR_icon.mx_LoginWithQR_icon--critical svg {
                color: var(--cpd-color-icon-critical-primary);
            }

.mx_LoginWithQR .mx_LoginWithQR_checkCode_input {
        margin-bottom: var(--cpd-space-1x);
        text-align: left;
        text-align: initial;
    }

.mx_LoginWithQR .mx_LoginWithQR_checkCode_input input {
            /* Workaround for one of the input rules in _common.pcss being not specific enough */
            padding: 0;
            -webkit-padding-start: calc(40px / 2 - (1ch / 2));
                    padding-inline-start: calc(40px / 2 - (1ch / 2));
        }

.mx_LoginWithQR .mx_LoginWithQR_heading {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 12px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_LoginWithQR .mx_LoginWithQR_BackButton {
        height: 28px;
        border-radius: 28px;
        padding: 4px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-color: var(--cpd-color-bg-subtle-secondary);
    }

.mx_LoginWithQR .mx_LoginWithQR_BackButton svg {
            height: 100%;
        }

.mx_LoginWithQR .mx_LoginWithQR_breadcrumbs {
        font-size: 0.8125rem;
        color: #edf3ff;
    }

.mx_LoginWithQR .mx_LoginWithQR_main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        color: #edf3ff;
        text-align: center;
    }

.mx_LoginWithQR .mx_LoginWithQR_main p {
            color: #edf3ff;
        }

.mx_LoginWithQR.mx_LoginWithQR_error .mx_LoginWithQR_main {
        max-width: 400px;
        margin: 0 auto;
    }

.mx_LoginWithQR .mx_LoginWithQR_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 16px;
        margin-top: var(--cpd-space-6x);
    }

.mx_LoginWithQR .mx_LoginWithQR_buttons .mx_AccessibleButton {
            width: 300px;
            height: 48px;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
        }

.mx_LoginWithQR .mx_QRCode {
        border-radius: 8px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_LoginWithQR .mx_LoginWithQR_spinner {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 100%;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

progress.mx_PassphraseField_progress {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    border: 0;
    height: 4px;
    position: absolute;
    top: -10px;
    left: 0;

    border-radius: "2px";
}

progress.mx_PassphraseField_progress::-moz-progress-bar {
        border-radius: "2px";
    }

progress.mx_PassphraseField_progress::-webkit-progress-bar,
    progress.mx_PassphraseField_progress::-webkit-progress-value {
        border-radius: "2px";
    }

progress.mx_PassphraseField_progress {
    color: #ff5b55;
}

progress.mx_PassphraseField_progress::-moz-progress-bar {
        background-color: #ff5b55;
    }

progress.mx_PassphraseField_progress::-webkit-progress-value {
        background-color: #ff5b55;
    }

progress.mx_PassphraseField_progress[value="2"],
    progress.mx_PassphraseField_progress[value="3"] {
        color: var(--cpd-color-text-decorative-5);
    }

progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar, progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
        background-color: var(--cpd-color-text-decorative-5);
    }

progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value, progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
        background-color: var(--cpd-color-text-decorative-5);
    }

progress.mx_PassphraseField_progress[value="4"] {
        color: #0dbd8b;
    }

progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
        background-color: #0dbd8b;
    }

progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
        background-color: #0dbd8b;
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Welcome {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_Welcome.mx_WelcomePage_registrationDisabled .mx_ButtonCreateAccount {
            display: none;
        }

.mx_Welcome .mx_AuthBody_language {
    width: 160px;
    margin-bottom: 10px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

button.mx_BaseAvatar {
    /* <button> is a form element and by default it uses the user agent (browser) styling.
       We want it to inherit the font-family and line-height from its parent.
     */
    font-family: inherit;
    line-height: inherit;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DecoratedRoomAvatar,
.mx_ExtraTile {
    position: relative;
    contain: content;
    line-height: 0;
}

.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar, .mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
        -webkit-mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.376375b.svg);
                mask-image: url(../../img/element-icons/roomlist/decorated-avatar-mask.376375b.svg);
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
    }

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
        position: absolute;
        /* the following percentage based sizings are to match the scalable svg mask for the cutout */
        bottom: 6.25%; /* 2px for a 32x32 avatar */
        right: 6.25%;
        width: 25%; /* 8px for a 32x32 avatar */
        height: 25%;
        border-radius: 50%;
    }

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon::before {
        content: "";
        width: 100%;
        height: 100%;
        right: 0;
        position: absolute;
        border-radius: 8px;
    }

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe::before {
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background: #edf3ff;
        -webkit-mask-image: url(../../icons/public.0e971dd.svg);
                mask-image: url(../../icons/public.0e971dd.svg);
    }

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline::before {
        background-color: #e3e8f0;
    }

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online::before {
        background-color: #0dbd8b;
    }

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away::before {
        background-color: #d9b072;
    }

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_busy::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_busy::before {
        background-color: #ff5b55;
    }

.mx_DecoratedRoomAvatar .mx_NotificationBadge,
    .mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
    .mx_ExtraTile .mx_NotificationBadge,
    .mx_ExtraTile .mx_RoomTile_badgeContainer {
        position: absolute;
        top: 0;
        right: 0;
        height: 18px;
        width: 18px;
    }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomAvatarView {
    --room-avatar-size: 32px;

    position: relative;

    /* Keep the container to the same size than the avatar */
    inline-size: 32px;
    inline-size: var(--room-avatar-size);
    block-size: 32px;
    block-size: var(--room-avatar-size);
}

.mx_RoomAvatarView .mx_RoomAvatarView_RoomAvatar {
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
    }

.mx_RoomAvatarView .mx_RoomAvatarView_RoomAvatar_icon {
        -webkit-mask-image: url(../../img/element-icons/roomlist/room-avatar-view-icon-mask.dfdc337.svg);
                mask-image: url(../../img/element-icons/roomlist/room-avatar-view-icon-mask.dfdc337.svg);
    }

.mx_RoomAvatarView .mx_RoomAvatarView_RoomAvatar_presence {
        -webkit-mask-image: url(../../img/element-icons/roomlist/room-avatar-view-presence-mask.e2f8b62.svg);
                mask-image: url(../../img/element-icons/roomlist/room-avatar-view-presence-mask.e2f8b62.svg);
    }

.mx_RoomAvatarView .mx_RoomAvatarView_icon {
        position: absolute;

        /* Place half the icon inside the avatar */
        /* Avatar size - (icon size (16px) / 2) */
        left: calc((var(--room-avatar-size) - 8px));
        bottom: var(--cpd-space-0-5x);
    }

.mx_RoomAvatarView .mx_RoomAvatarView_PresenceDecoration {
        position: absolute;

        /* Place half the icon inside the avatar */
        /* Avatar size - (icon size (8px) / 2) */
        left: calc((var(--room-avatar-size) - 4px));
        bottom: var(--cpd-space-0-5x);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_WidgetAvatar {
    border-radius: 4px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_WithPresenceIndicator {
    position: relative;
    contain: content;
    line-height: 0;
}

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon {
        position: absolute;
        right: -2px;
        bottom: -2px;
    }

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon::before {
        content: "";
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;
        position: absolute;
        border: 2px solid var(--cpd-color-bg-canvas-default);
        border-radius: 50%;
    }

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon_offline::before {
        background-color: #e3e8f0;
    }

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon_online::before {
        background-color: #0dbd8b;
    }

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon_away::before {
        background-color: #d9b072;
    }

.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon_busy::before {
        background-color: #ff5b55;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BetaCard {
    padding: 24px;
    background-color: rgba(33,38,44, 0.9);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #edf3ff;
}

.mx_BetaCard .mx_BetaCard_columns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
        gap: 20px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_title {
                font-weight: var(--cpd-font-weight-semibold);
                font-size: 1.125rem;
                line-height: 1.375rem;
                color: #edf3ff;
                margin: 4px 0 14px;

                display: -webkit-box;

                display: -ms-flexbox;

                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -webkit-column-gap: 12px;
                   -moz-column-gap: 12px;
                        column-gap: 12px;
            }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_caption {
                font-size: 0.9375rem;
                line-height: 1.25rem;
            }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_buttons {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap-reverse;
                    flex-wrap: wrap-reverse;
                gap: 12px;
                margin: 20px auto 0;
            }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_buttons .mx_AccessibleButton {
                    padding: 7px 40px;
                    width: auto;
                    -webkit-box-flex: 1;
                        -ms-flex: 1;
                            flex: 1;
                    white-space: nowrap; /* text might overflow */
                }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_buttons .mx_AccessibleButton:nth-child(1) {
                        -webkit-box-ordinal-group: 3;
                            -ms-flex-order: 2;
                                order: 2; /* Place feedback button top and right */
                    }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_refreshWarning {
                margin-top: 8px;
                font-size: 0.625rem;
                text-align: center;
            }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_faq {
                margin-top: 20px;
                font: var(--cpd-font-body-xs-regular);
            }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_faq > h4 {
                    margin: 12px 0 0;
                }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_faq > p {
                    margin: 0;
                }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_image_wrapper {
            margin: auto 0;
        }

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_image_wrapper .mx_BetaCard_columns_image {
                width: 100%;
                max-width: 300px;
                -o-object-fit: contain;
                   object-fit: contain;
                height: 100%;
                border-radius: 4px;
            }

.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag {
            margin: 16px 0 0;
            font-size: 0.9375rem;
            line-height: 1.5rem;
            color: #edf3ff;
        }

.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag .mx_SettingsFlag_microcopy {
                margin-top: 4px;
                font: var(--cpd-font-body-sm-regular);
            }

.mx_BetaCard_betaPill {
    background-color: #238cf5;
    padding: 4px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 15px;
    color: #ffffff;
    display: inline-block;
    vertical-align: text-bottom;
    word-break: keep-all; /* avoid multiple lines on CJK language */
}

.mx_BetaCard_betaPill.mx_AccessibleButton {
        cursor: pointer;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeviceContextMenu {
    max-width: 252px;
}

.mx_DeviceContextMenu .mx_DeviceContextMenu_device_icon {
        display: none;
    }

.mx_DeviceContextMenu .mx_IconizedContextMenu_label {
        padding-left: 0 !important;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020-2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* A context menu that largely fits the | [icon]    [label] | format. */

.mx_IconizedContextMenu {
    min-width: 146px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    /* override default ul styles */
    margin: 0;
    padding: 0;
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
            padding-left: 20px;
            padding-right: 20px;
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_label {
            font-size: 0.9375rem;
            font-weight: var(--cpd-font-weight-semibold);
        }

/* the notFirst class is for cases where the optionList might be under a header of sorts. */

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n + 2),
        .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst {
            border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
        }

/* round the top corners of the top button for the hover effect to be bounded */

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_IconizedContextMenu_item:first-child {
            border-radius: 8px 8px 0 0; /* radius matches .mx_ContextualMenu */
        }

/* round the bottom corners of the bottom button for the hover effect to be bounded */

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_IconizedContextMenu_item:last-child {
            border-radius: 0 0 8px 8px; /* radius matches .mx_ContextualMenu */
        }

/* round all corners of the only button for the hover effect to be bounded */

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child {
            border-radius: 8px; /* radius matches .mx_ContextualMenu */
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item {
            /* pad the inside of the button so that the hover background is padded too */
            padding-top: 12px;
            padding-bottom: 12px;
            text-decoration: none;
            color: #edf3ff;
            font: var(--cpd-font-body-md-regular);

            /* Create a flexbox to more easily define the list items */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item:hover,
            .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item:focus-visible {
                background-color: var(--cpd-color-bg-action-secondary-hovered);
            }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item.mx_AccessibleButton_disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item img,
            .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon {
                /* icons */
                width: 16px;
                min-width: 16px;
                max-width: 16px;
            }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item span.mx_IconizedContextMenu_label {
                /* labels */
                width: 100%;
                -webkit-box-flex: 1;
                    -ms-flex: 1;
                        flex: 1;

                /* Ellipsize any text overflow */
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
                padding-left: 14px;
            }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item .mx_BetaCard_betaPill {
                margin-left: 16px;
            }

.mx_IconizedContextMenu .mx_IconizedContextMenu_icon {
        position: relative;
        width: 16px;
        height: 16px;
    }

.mx_IconizedContextMenu .mx_IconizedContextMenu_icon::before {
            content: "";
            width: inherit;
            height: inherit;
            position: absolute;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background-color: var(--cpd-color-icon-primary);
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_item {
            color: #ff5b55 !important;
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon::before {
            background-color: var(--cpd-color-icon-critical-primary);
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red {
        color: #ff5b55 !important;
    }

.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon::before {
            background-color: #ff5b55;
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_IconizedContextMenu_item,
        .mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_item {
            color: #0dbd8b !important;
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon::before {
            background-color: #0dbd8b;
        }

.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList > * {
            padding: 8px 16px 8px 12px;
        }

.mx_IconizedContextMenu .mx_IconizedContextMenu_checked,
    .mx_IconizedContextMenu .mx_IconizedContextMenu_unchecked {
        margin-left: 16px;
        margin-right: -5px;
    }

.mx_IconizedContextMenu .mx_IconizedContextMenu_developerTools::before {
        -webkit-mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg);
                mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg);
    }

.mx_IconizedContextMenu .mx_IconizedContextMenu_checked::before {
        -webkit-mask-image: url(../../icons/check.aaad650.svg);
                mask-image: url(../../icons/check.aaad650.svg);
    }

.mx_IconizedContextMenu .mx_IconizedContextMenu_unchecked::before {
        content: normal;
        content: initial;
    }

.mx_IconizedContextMenu .mx_IconizedContextMenu_sublabel {
        margin-left: 20px;
        color: #edf3ff;
    }

.mx_IconizedContextMenu_item.mx_IconizedContextMenu_itemDestructive {
    color: #ff5b55 !important;
}

/*
Copyright 2020-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyCallContextMenu_item {
    width: 205px;
    height: 40px;
    padding-left: 16px;
    line-height: 40px;
    vertical-align: center;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MessageContextMenu .mx_IconizedContextMenu_icon {
        width: 16px;
        height: 16px;
        display: block;
    }

.mx_MessageContextMenu .mx_IconizedContextMenu_icon::before {
            content: "";
            width: 16px;
            height: 16px;
            display: block;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
        }

.mx_MessageContextMenu .mx_MessageContextMenu_iconCollapse::before {
        -webkit-mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
                mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconReport::before {
        -webkit-mask-image: url(../../icons/error-solid.7cb2e4d.svg);
                mask-image: url(../../icons/error-solid.7cb2e4d.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconLink::before {
        -webkit-mask-image: url(../../icons/link.d0734d2.svg);
                mask-image: url(../../icons/link.d0734d2.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconPermalink::before {
        -webkit-mask-image: url(../../img/element-icons/room/share.6a6396f.svg);
                mask-image: url(../../img/element-icons/room/share.6a6396f.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconUnhidePreview::before {
        -webkit-mask-image: url(../../img/element-icons/settings/appearance.90cad21.svg);
                mask-image: url(../../img/element-icons/settings/appearance.90cad21.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconOpenInMapSite::before {
        -webkit-mask-image: url(../../img/external-link.8197a77.svg);
                mask-image: url(../../img/external-link.8197a77.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconEndPoll::before {
        -webkit-mask-image: url(../../icons/check.aaad650.svg);
                mask-image: url(../../icons/check.aaad650.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconForward::before {
        -webkit-mask-image: url(../../icons/forward.7d44a5b.svg);
                mask-image: url(../../icons/forward.7d44a5b.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconRedact::before {
        -webkit-mask-image: url(../../icons/delete.8165351.svg);
                mask-image: url(../../icons/delete.8165351.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconResend::before {
        -webkit-mask-image: url(../../icons/restart.514c8f1.svg);
                mask-image: url(../../icons/restart.514c8f1.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconSource::before {
        -webkit-mask-image: url(../../icons/inline-code.f51200e.svg);
                mask-image: url(../../icons/inline-code.f51200e.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconQuote::before {
        -webkit-mask-image: url(../../icons/quote.60f93d6.svg);
                mask-image: url(../../icons/quote.60f93d6.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconPin::before {
        -webkit-mask-image: url(../../icons/pin.7c59c5e.svg);
                mask-image: url(../../icons/pin.7c59c5e.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconUnpin::before {
        -webkit-mask-image: url(../../icons/unpin.bb6290d.svg);
                mask-image: url(../../icons/unpin.bb6290d.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconCopy::before {
        height: 16px;
        -webkit-mask-image: url(../../icons/copy.95010ef.svg);
                mask-image: url(../../icons/copy.95010ef.svg);
        position: relative;
        width: 16px;
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconEdit::before {
        -webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.940a38c.svg);
                mask-image: url(../../img/element-icons/room/message-bar/edit.940a38c.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconReply::before {
        -webkit-mask-image: url(../../icons/reply.d3e6417.svg);
                mask-image: url(../../icons/reply.d3e6417.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconReplyInThread::before {
        -webkit-mask-image: url(../../icons/threads.52e135e.svg);
                mask-image: url(../../icons/threads.52e135e.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconReact::before {
        -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.27bdbc0.svg);
                mask-image: url(../../img/element-icons/room/message-bar/emoji.27bdbc0.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_iconViewInRoom::before {
        -webkit-mask-image: url(../../img/element-icons/view-in-room.afeddb7.svg);
                mask-image: url(../../img/element-icons/view-in-room.afeddb7.svg);
    }

.mx_MessageContextMenu .mx_MessageContextMenu_jumpToEvent::before {
        -webkit-mask-image: url(../../img/element-icons/child-relationship.f8cfd49.svg);
                mask-image: url(../../img/element-icons/child-relationship.f8cfd49.svg);
    }

.mx_RoomGeneralContextMenu_iconStar::before {
    -webkit-mask-image: url(../../icons/favourite-solid.a1d4606.svg);
            mask-image: url(../../icons/favourite-solid.a1d4606.svg);
}

.mx_RoomGeneralContextMenu_iconArrowDown::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.d46a05a.svg);
            mask-image: url(../../img/element-icons/roomlist/low-priority.d46a05a.svg);
}

.mx_RoomGeneralContextMenu_iconMarkAsRead::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/mark-as-read.273067d.svg);
            mask-image: url(../../img/element-icons/roomlist/mark-as-read.273067d.svg);
}

.mx_RoomGeneralContextMenu_iconMarkAsUnread::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/mark-as-unread.f1a2c4d.svg);
            mask-image: url(../../img/element-icons/roomlist/mark-as-unread.f1a2c4d.svg);
}

.mx_RoomGeneralContextMenu_iconNotificationsDefault::before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
            mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
}

.mx_RoomGeneralContextMenu_iconNotificationsAllMessages::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
}

.mx_RoomGeneralContextMenu_iconNotificationsMentionsKeywords::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
}

.mx_RoomGeneralContextMenu_iconNotificationsNone::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
}

.mx_RoomGeneralContextMenu_iconPeople::before {
    -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
            mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
}

.mx_RoomGeneralContextMenu_iconFiles::before {
    -webkit-mask-image: url(../../icons/files.453e84c.svg);
            mask-image: url(../../icons/files.453e84c.svg);
}

.mx_RoomGeneralContextMenu_iconPins::before {
    -webkit-mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
            mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
}

.mx_RoomGeneralContextMenu_iconWidgets::before {
    -webkit-mask-image: url(../../icons/extensions-solid.4aa63de.svg);
            mask-image: url(../../icons/extensions-solid.4aa63de.svg);
}

.mx_RoomGeneralContextMenu_iconSettings::before {
    -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
            mask-image: url(../../icons/settings-solid.94c318a.svg);
}

.mx_RoomGeneralContextMenu_iconExport::before {
    -webkit-mask-image: url(../../icons/export-archive.f43ec04.svg);
            mask-image: url(../../icons/export-archive.f43ec04.svg);
}

.mx_RoomGeneralContextMenu_iconDeveloperTools::before {
    -webkit-mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg);
            mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg);
}

.mx_RoomGeneralContextMenu_iconCopyLink::before {
    -webkit-mask-image: url(../../icons/link.d0734d2.svg);
            mask-image: url(../../icons/link.d0734d2.svg);
}

.mx_RoomGeneralContextMenu_iconInvite::before {
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
            mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
}

.mx_RoomGeneralContextMenu_iconSignOut::before {
    -webkit-mask-image: url(../../icons/leave.8b03b57.svg);
            mask-image: url(../../icons/leave.8b03b57.svg);
}

.mx_RoomNotificationContextMenu_iconBell::before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
            mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
}

.mx_RoomNotificationContextMenu_iconBellDot::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
}

.mx_RoomNotificationContextMenu_iconBellMentions::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
}

.mx_RoomNotificationContextMenu_iconBellCrossed::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
}

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AddExistingToSpaceDialog_wrapper .mx_Dialog {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_AddExistingToSpace .mx_SearchBox {
        /* To match the space around the title */
        margin: 0 0 15px 0;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
    }

.mx_AddExistingToSpace .mx_AddExistingToSpace_content {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }

.mx_AddExistingToSpace .mx_AddExistingToSpace_noResults {
        display: block;
        margin-top: 24px;
    }

.mx_AddExistingToSpace .mx_AddExistingToSpace_section {
        margin-right: 12px;

        /* provides space for scrollbar so that checkbox and scrollbar do not collide*/
    }

.mx_AddExistingToSpace .mx_AddExistingToSpace_section ul {
            list-style: none;
            padding-left: 0;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
            margin-top: 24px;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
            margin: 0;
            color: #edf3ff;
            font-size: 0.75rem;
            font-weight: var(--cpd-font-weight-semibold);
            line-height: 0.9375rem;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AccessibleButton_kind_link {
            font-size: 0.75rem;
            line-height: 0.9375rem;
            margin-top: 8px;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 20px;
    }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #edf3ff;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
                height: 8px;
                width: 100%;

                border-radius: 8px;
            }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar::-moz-progress-bar {
        border-radius: 8px;
    }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar::-webkit-progress-bar,
    .mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar::-webkit-progress-value {
        border-radius: 8px;
    }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_AddExistingToSpaceDialog_progressText {
                margin-top: 8px;
                font-size: 0.9375rem;
                line-height: 1.5rem;
                color: #edf3ff;
            }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span > * {
                vertical-align: middle;
            }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error {
            padding-left: 12px;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error > img {
                -ms-flex-item-align: center;
                    align-self: center;
            }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorHeading {
                font-weight: var(--cpd-font-weight-semibold);
                font-size: 0.9375rem;
                line-height: 1.125rem;
                color: #ff5b55;
            }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption {
                margin-top: 4px;
                font-size: 0.75rem;
                line-height: 0.9375rem;
                color: #edf3ff;
            }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton {
            display: inline-block;
            -ms-flex-item-align: center;
                align-self: center;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AccessibleButton_kind_primary {
            padding: 8px 36px;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton {
            margin-left: 12px;
            padding-left: 24px;
            position: relative;
        }

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_retryButton::before {
                content: "";
                position: absolute;
                background-color: #edf3ff;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
                -webkit-mask-image: url(../../icons/restart.514c8f1.svg);
                        mask-image: url(../../icons/restart.514c8f1.svg);
                width: 18px;
                height: 18px;
                left: 0;
            }

.mx_AddExistingToSpaceDialog {
    width: 480px;
    color: #edf3ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    min-height: 0;
    height: 80vh;
}

.mx_AddExistingToSpaceDialog .mx_AddExistingToSpace {
        display: contents;
    }

.mx_SubspaceSelector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_SubspaceSelector .mx_BaseAvatar {
        margin: auto 16px auto 5px;
    }

.mx_SubspaceSelector > div > h1 {
            font-weight: var(--cpd-font-weight-semibold);
            font-size: 1.125rem;
            line-height: 1.375rem;
            margin: 0;
        }

.mx_SubspaceSelector .mx_Dropdown_input {
        border: none;
    }

.mx_SubspaceSelector .mx_Dropdown_input > .mx_Dropdown_option {
            padding-left: 0;
            -webkit-box-flex: initial;
                -ms-flex: initial;
                    flex: initial;
            height: auto;
            height: initial;
            color: #edf3ff;
            font-size: 0.9375rem;
            line-height: 1.5rem;
        }

.mx_SubspaceSelector .mx_Dropdown_input > .mx_Dropdown_option .mx_BaseAvatar {
                display: none;
            }

.mx_SubspaceSelector .mx_Dropdown_input .mx_Dropdown_menu .mx_SubspaceSelector_dropdownOptionActive {
                color: #0dbd8b;
                padding-right: 32px;
                position: relative;
            }

.mx_SubspaceSelector .mx_Dropdown_input .mx_Dropdown_menu .mx_SubspaceSelector_dropdownOptionActive::before {
                    content: "";
                    width: 20px;
                    height: 20px;
                    top: 8px;
                    right: 0;
                    position: absolute;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    background-color: #0dbd8b;
                    -webkit-mask-image: url(../../icons/check.aaad650.svg);
                            mask-image: url(../../icons/check.aaad650.svg);
                }

.mx_SubspaceSelector .mx_SubspaceSelector_onlySpace {
        color: #edf3ff;
        font-size: 0.9375rem;
        line-height: 1.5rem;
    }

.mx_AddExistingToSpace_entry {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
}

.mx_AddExistingToSpace_entry form {
        /* Align checkboxes. */
        margin-top: auto;
        margin-bottom: auto;
    }

.mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
        margin-right: 12px;
    }

.mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name {
        font-size: 0.9375rem;
        line-height: 30px;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 12px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AnalyticsLearnMoreDialog {
    max-width: 500px;
}

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_image_holder {
        background-image: url(../../img/element-shiny.f5a5e6e.svg);
        background-repeat: no-repeat;
        background-position: center top;
        height: 112px;
        padding: 20px 0px;
    }

.mx_AnalyticsLearnMoreDialog .mx_Dialog_content {
        margin-bottom: 0px;
    }

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_copy {
        border-bottom: 1px solid #000000;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

.mx_AnalyticsLearnMoreDialog a {
        color: #0dbd8b;
        text-decoration: none;
    }

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_bullets {
        padding-left: 0px;
    }

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_bullets li {
        list-style-type: none;
        padding: 2px 0 0 32px;
        margin-bottom: 20px;
        vertical-align: middle;
        position: relative;
    }

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_bullets li::before {
            content: "";
            position: absolute;
            width: 26px;
            height: 26px;
            left: 0;
            top: 0;
            background-color: #0dbd8b;
            -webkit-mask-image: url(../../icons/check-circle.99c21d7.svg);
                    mask-image: url(../../icons/check-circle.99c21d7.svg);
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link {
            margin-right: 18px; /* Space between "Downloading logs..." */
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2016 Aviral Dasgupta

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ChangelogDialog_content {
    max-height: 300px;
    overflow: auto;
}

.mx_ChangelogDialog_li {
    padding: 0.2em;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* -------------------------------------------------------------------------------- */

/* DEV NOTE: This stylesheet covers dialogs listed by the compound, including */

/* over multiple React components. The actual inner contents of the dialog should */

/* be in their respective stylesheets. */

/* -------------------------------------------------------------------------------- */

/* Override legacy/default styles for dialogs */

.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
    padding: 0; /* we'll manage it ourselves */
    color: #edf3ff;
}

.mx_CompoundDialog .mx_Dialog {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_CompoundDialog .mx_CompoundDialog_header {
        padding: 32px 32px 16px 32px;
    }

.mx_CompoundDialog .mx_CompoundDialog_header h1 {
            display: inline-block;
            font-weight: var(--cpd-font-weight-semibold);
            font-size: 1.5rem;
            margin: 0; /* managed by header class */
        }

.mx_CompoundDialog .mx_CompoundDialog_cancelButton {
        cursor: pointer;
        position: relative;
        width: 28px;
        height: 28px;
        border-radius: 14px;
        background-color: var(--cpd-color-bg-subtle-secondary);
        /* Align with corner radius of dialog */
    }

.mx_CompoundDialog .mx_CompoundDialog_cancelButton:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_CompoundDialog .mx_CompoundDialog_cancelButton::before {
        content: "";
        width: 28px;
        height: 28px;
        left: 0;
        top: 0;
        position: absolute;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_CompoundDialog .mx_CompoundDialog_cancelButton {
        position: absolute;
        top: var(--cpd-space-4x);
        right: var(--cpd-space-4x);
}

.mx_CompoundDialog .mx_CompoundDialog_form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        min-height: 0;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_CompoundDialog .mx_CompoundDialog_content {
        overflow: auto;
        padding: 8px 32px;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_CompoundDialog .mx_CompoundDialog_footer {
        padding: 20px 32px;
        text-align: right;
    }

.mx_CompoundDialog .mx_CompoundDialog_footer .mx_AccessibleButton {
            margin-left: 24px;
        }

.mx_ScrollableBaseDialog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    width: 544px; /* fixed */
    height: 516px; /* fixed */
    max-width: 100%;
    min-height: 0;
    max-height: 80%;
}

.mx_ScrollableBaseDialog .mx_CompoundDialog_footer {
        -webkit-box-shadow: 0px -4px 4px rgb(0, 0, 0, 0.05);
                box-shadow: 0px -4px 4px rgb(0, 0, 0, 0.05); /* hardcoded colour for both themes */
        z-index: 1; /* needed to make footer & shadow appear above dialog content */
    }

/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ConfirmKeyStorageOffDialog .mx_Dialog_border {
        width: 600px;
    }

.mx_ConfirmKeyStorageOffDialog .mx_EncryptionCard {
        text-align: center;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ConfirmSpaceUserActionDialog_wrapper .mx_Dialog {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 24px 32px;
    }

.mx_ConfirmSpaceUserActionDialog {
    width: 440px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    height: 520px;
}

.mx_ConfirmSpaceUserActionDialog .mx_Dialog_content {
        margin: 12px 0;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        overflow-y: auto;
    }

.mx_ConfirmSpaceUserActionDialog .mx_ConfirmUserActionDialog_reasonField {
        margin-bottom: 12px;
    }

.mx_ConfirmSpaceUserActionDialog .mx_ConfirmSpaceUserActionDialog_warning {
        position: relative;
        border-radius: 8px;
        padding: 12px 8px 12px 42px;
        background-color: #22262e;

        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: #edf3ff;
    }

.mx_ConfirmSpaceUserActionDialog .mx_ConfirmSpaceUserActionDialog_warning::before {
            content: "";
            position: absolute;
            left: 10px;
            top: calc(50% - 8px); /* vertical centering */
            height: 16px;
            width: 16px;
            background-color: #edf3ff;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-image: url(../../icons/info-solid.ef2d524.svg);
                    mask-image: url(../../icons/info-solid.ef2d524.svg);
            -webkit-mask-position: center;
                    mask-position: center;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ConfirmUserActionDialog .mx_Dialog_content .mx_ConfirmUserActionDialog_user {
    min-height: 48px;
    margin-bottom: 24px;
}

.mx_ConfirmUserActionDialog_avatar {
    float: left;
    margin-right: 20px;
}

.mx_ConfirmUserActionDialog_name {
    padding-top: 2px;
    font-size: 1.125rem;
}

.mx_ConfirmUserActionDialog_userId {
    font-size: 0.8125rem;
}

.mx_ConfirmUserActionDialog_reasonField {
    font: var(--cpd-font-body-md-regular);
    color: #edf3ff;
    background-color: #181b21;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CreateRoomDialog_details {
    margin-top: 15px;
}

.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
        list-style: none;
        font-weight: var(--cpd-font-weight-semibold);
        cursor: pointer;
        color: var(--cpd-color-text-primary);
        text-decoration: underline;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

/* list-style doesn't do it for webkit */

.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary::-webkit-details-marker {
            display: none;
        }

.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary:not(:focus-visible) {
            outline: none;
        }

.mx_CreateRoomDialog_details > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        margin: 5px 0;
    }

.mx_CreateRoomDialog_details > div input[type="checkbox"] {
            margin-right: 10px;
        }

.mx_CreateRoomDialog_label {
    text-align: left;
    padding-bottom: 12px;
}

.mx_CreateRoomDialog_input_container {
    padding-right: 20px;
}

.mx_CreateRoomDialog_input {
    font-size: 0.9375rem;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: #edf3ff;
    background-color: #181b21;
    width: 100%;
}

/* needed to make the alias field only grow as wide as needed */

/* as opposed to full width */

.mx_CreateRoomDialog_aliasContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* put margin on container so it can collapse with siblings */
    margin: 24px 0 10px;
}

.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
        margin: 0;
    }

.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
        width: 450px;
    }

.mx_CreateRoomDialog .mx_Dialog_content {
        margin-bottom: 40px;
    }

.mx_CreateRoomDialog p,
    .mx_CreateRoomDialog .mx_Field_input label {
        color: #a1b2d1;
    }

.mx_CreateRoomDialog .mx_SettingsFlag {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_CreateRoomDialog .mx_SettingsFlag_label {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
        min-width: 0;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_CreateRoomDialog .mx_ToggleSwitch {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        margin-left: 30px;
    }

.mx_CreateRoomDialog .mx_Dialog_content > .mx_SettingsFlag {
        margin-top: 24px;
    }

.mx_CreateRoomDialog p {
        margin: 0 85px 0 0;
        font-size: 0.75rem;
    }

.mx_CreateRoomDialog_labelledCheckbox {
    color: #a1b2d1;
    margin-top: var(--cpd-space-6x);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CreateSubspaceDialog_wrapper .mx_Dialog {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_CreateSubspaceDialog {
    width: 480px;
    color: #edf3ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    min-height: 0;
}

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_CreateSubspaceDialog_betaNotice {
            padding: 12px 16px;
            border-radius: 8px;
            background-color: #22262e;
        }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_CreateSubspaceDialog_betaNotice .mx_BetaCard_betaPill {
                margin-right: 8px;
                vertical-align: middle;
            }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_JoinRuleDropdown + p {
            color: #a1b2d1;
            font-size: 0.75rem;
        }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 20px;
    }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_CreateSubspaceDialog_footer_prompt {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #edf3ff;
        }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_CreateSubspaceDialog_footer_prompt > * {
                vertical-align: middle;
            }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_AccessibleButton {
            display: inline-block;
            -ms-flex-item-align: center;
                align-self: center;
        }

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_footer .mx_AccessibleButton_kind_primary {
            margin-left: 16px;
            padding: 8px 36px;
        }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_Crypto table {
        margin: var(--cpd-space-4x) 0;
        text-align: left;
        border-spacing: var(--cpd-space-2x) 0;
    }

.mx_Crypto table thead {
            font: var(--cpd-font-heading-sm-semibold);
        }

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DeactivateAccountDialog .mx_Dialog_content {
    margin-bottom: 30px;
}

.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
    width: 300px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DevtoolsDialog_wrapper .mx_Dialog {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_DevtoolsDialog_wrapper .mx_Dialog_fixedWidth {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        min-height: 0;
        max-height: 100%;
    }

.mx_DevtoolsDialog_wrapper .mx_Dialog_fixedWidth .mx_Dialog_buttons button {
            margin-bottom: 0;
        }

.mx_DevTools_content {
    overflow-y: auto;
}

.mx_DevTools_RoomStateExplorer_query {
    margin-bottom: 10px;
}

.mx_DevTools_button {
    font-family: monospace !important;
    margin-bottom: 8px !important;
}

.mx_DevTools_RoomStateExplorer_button_hasSpaces {
    text-decoration: underline;
}

.mx_DevTools_button.mx_DevTools_RoomStateExplorer_button_emptyString {
    font-style: italic;
}

.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_textarea {
    font-size: 0.75rem;
    max-width: 684px;
    min-height: 250px;
    padding: 10px;
}

.mx_DevTools_eventTypeStateKeyGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.mx_DevTools_content .mx_Field_input:first-of-type {
    margin-right: 42px;
}

.mx_DevTools_VerificationRequest {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 1px 5px;
    margin-bottom: 6px;
    font-family: "Inconsolata", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji";
    font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji";
}

.mx_DevTools_VerificationRequest dl {
        display: grid;
        grid-template-columns: -webkit-max-content auto;
        grid-template-columns: max-content auto;
        margin: 0;
    }

.mx_DevTools_VerificationRequest dd {
        grid-column-start: 2;
    }

.mx_DevTools_VerificationRequest dd:empty {
        color: #666666;
    }

.mx_DevTools_VerificationRequest dd:empty::after {
            content: "(empty)";
        }

.mx_DevTools_VerificationRequest dt {
        font-weight: bold;
        grid-column-start: 1;
    }

.mx_DevTools_VerificationRequest dt::after {
        content: ":";
    }

.mx_DevTools_SettingsExplorer table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

.mx_DevTools_SettingsExplorer table th {
            /* Colour choice: first one autocomplete gave me. */
            border-bottom: 1px solid #0dbd8b;
            text-align: left;
        }

.mx_DevTools_SettingsExplorer table td,
        .mx_DevTools_SettingsExplorer table th {
            width: 360px; /* "feels right" number */

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

.mx_DevTools_SettingsExplorer table td + td,
        .mx_DevTools_SettingsExplorer table th + th {
            width: auto;
        }

.mx_DevTools_SettingsExplorer table tr:hover {
            /* Colour choice: first one autocomplete gave me. */
            background-color: #0dbd8b;
        }

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
        background-color: #0dbd8b;
    }

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
        background-color: #ff5b55;
    }

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
        float: right;
        margin-right: 16px;
    }

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
        border: 2px solid #ff5b55;
        border-radius: 4px;
        padding: 4px;
        margin-bottom: 8px;
    }

.mx_DevTools_SettingsExplorer_setting {
    /* override default link button color */
    /* as it is the same as the background highlight */
    /* used on focus */
    color: #0086e6 !important;
}

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ExportDialog .mx_ExportDialog_subheading {
        font-size: 1rem;
        display: block;
        font-family: "Nunito", "", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
    "Noto Color Emoji";
        font-family: "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
    "Noto Color Emoji";
        font-weight: var(--cpd-font-weight-semibold);
        color: #edf3ff;
        margin-top: 18px;
        margin-bottom: 12px;
    }

.mx_ExportDialog.mx_ExportDialog_Exporting .mx_ExportDialog_options {
            pointer-events: none;
        }

.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_select::before {
            display: none;
        }

.mx_ExportDialog.mx_ExportDialog_Exporting .mx_StyledRadioButton input[type="radio"]:checked + div > div {
            background: #888;
        }

.mx_ExportDialog.mx_ExportDialog_Exporting .mx_StyledRadioButton input[type="radio"]:checked + div {
            border-color: currentcolor;
            border-color: initial;
        }

.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field label,
        .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field:focus-within label {
            color: inherit;
        }

.mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field,
        .mx_ExportDialog.mx_ExportDialog_Exporting .mx_Field_valid.mx_Field:focus-within {
            border-color: #e7e7e7;
        }

.mx_ExportDialog .mx_ExportDialog_progress .mx_Dialog_buttons {
            margin-top: 0;
            margin-top: initial;
            margin-left: 18px;
        }

.mx_ExportDialog .mx_ExportDialog_progress .mx_Spinner {
            width: auto;
            width: initial;
            height: auto;
            height: initial;
            -webkit-box-flex: initial;
                -ms-flex: initial;
                    flex: initial;
            margin-right: 10px;
        }

.mx_ExportDialog .mx_ExportDialog_progress {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
}

.mx_ExportDialog .mx_StyledRadioButton > .mx_StyledRadioButton_content {
        margin-top: 5px;
        margin-bottom: 5px;
    }

.mx_ExportDialog .mx_Field {
        width: 256px;
    }

.mx_ExportDialog .mx_Field_postfix {
        padding: 9px 10px;
    }

.mx_ExportDialog_attachments-checkbox {
    margin-top: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FeedbackDialog hr {
        margin: 24px 0;
        border-color: #e7e7e7;
    }

.mx_FeedbackDialog .mx_Dialog_content {
        margin-bottom: 24px;
    }

.mx_FeedbackDialog .mx_Dialog_content > h2 {
            margin-bottom: 32px;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section {
        position: relative;
        padding: 12px 52px 12px 68px;
        border-radius: 8px;
        border: 1px solid #6f7882;
    }

.mx_FeedbackDialog .mx_FeedbackDialog_section + .mx_FeedbackDialog_section {
            margin-top: 16px;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section > h3 {
            margin-top: 0;
            margin-bottom: 8px;
            font-weight: var(--cpd-font-weight-semibold);
            font-size: 1.125rem;
            line-height: 1.375rem;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
            color: #edf3ff;
            font-size: 0.9375rem;
            line-height: 1.5rem;
            margin: 8px 0 0;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_FeedbackDialog_section_microcopy {
            font-size: 0.75rem;
            line-height: 0.9375rem;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section a,
        .mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link {
            text-decoration: underline;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section::before,
        .mx_FeedbackDialog .mx_FeedbackDialog_section::after {
            content: "";
            position: absolute;
            width: 40px;
            height: 40px;
            left: 16px;
            top: 12px;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section::before {
            background-color: var(--cpd-color-icon-tertiary);
            border-radius: 8px;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_section::after {
            background: #ffffff; /* TODO */
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: 24px;
                    mask-size: 24px;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_reportBug::after {
            -webkit-mask-image: url(../../img/feather-customised/bug.4551a84.svg);
                    mask-image: url(../../img/feather-customised/bug.4551a84.svg);
        }

.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            font-size: 20px;
            -webkit-transition:
                font-size 1s,
                border 0.5s;
            transition:
                font-size 1s,
                border 0.5s;
            border-radius: 50%;
            border: 2px solid transparent;
            margin-top: 12px;
            margin-bottom: 24px;
            vertical-align: top;
            cursor: pointer;
        }

.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton input[type="radio"] + div {
                display: none;
            }

.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton .mx_StyledRadioButton_content {
                background: var(--cpd-color-icon-tertiary);
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-radius: 20px;
                margin: 5px;
            }

.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton .mx_StyledRadioButton_spacer {
                display: none;
            }

.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton + .mx_StyledRadioButton {
                margin-left: 16px;
            }

.mx_FeedbackDialog .mx_FeedbackDialog_rateApp .mx_StyledRadioButton_checked {
            font-size: 24px;
            border-color: var(--cpd-color-bg-action-primary-rest);
        }

.mx_FeedbackDialog .mx_FeedbackDialog_rateApp::after {
            -webkit-mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
                    mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Robin Townsend <robin@robin.town>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ForwardDialog {
    width: 520px;
    color: #edf3ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    min-height: 0;
    height: 80vh;
}

.mx_ForwardDialog > h3 {
        margin: 0 0 6px;
        color: #edf3ff;
        font-size: 0.75rem;
        font-weight: var(--cpd-font-weight-semibold);
        line-height: 0.9375rem;
    }

.mx_ForwardDialog > .mx_ForwardDialog_preview {
        max-height: 30%;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        overflow-y: auto;

        /* When forwarding messages from encrypted rooms, EventTile will complain */
        /* that our preview is unencrypted, which doesn't actually matter */
        /* We also hide download links to not encourage users to try interacting */
    }

.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile[data-layout="bubble"] {
            margin-top: 20px;
        }

.mx_ForwardDialog > .mx_ForwardDialog_preview div {
            pointer-events: none;
        }

.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_msgOption,
        .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_unencrypted,
        .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_warning,
        .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_MFileBody_download {
            display: none;
        }

.mx_ForwardDialog > hr {
        width: 100%;
        border: none;
        border-top: 1px solid #e7e7e7;
        margin: 12px 0;
    }

.mx_ForwardDialog > .mx_ForwardList {
        display: contents;
    }

.mx_ForwardDialog > .mx_ForwardList .mx_SearchBox {
            /* To match the space around the title */
            margin: 0 0 15px 0;
            -webkit-box-flex: 0;
                -ms-flex-positive: 0;
                    flex-grow: 0;
        }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_content {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
        }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_noResults {
            display: block;
            margin-top: 24px;
        }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results:not(:first-child) {
                margin-top: 24px;
            }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_resultsList {
                padding-right: 8px;
            }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
                height: 32px;
                padding: 6px;
                border-radius: 8px;
            }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry:hover,
                .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry.mx_ForwardList_entry_active {
                    background-color: #15171b;
                }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    margin-right: 12px;
                    min-width: 0;
                }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_DecoratedRoomAvatar {
                        margin-right: 12px;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_name,
                    .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_detail {
                        line-height: 30px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_name {
                        font-size: 0.9375rem;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_detail {
                        font-size: 0.75rem;
                        margin-left: 8px;
                        color: #edf3ff;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton {
                    position: relative;
                    margin-left: 12px;
                }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
                        /* Hide the "Send" label while preserving button size */
                        visibility: hidden;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_ForwardList_sendIcon,
                    .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_NotificationBadge {
                        position: absolute;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_NotificationBadge {
                        /* Match the failed to send indicator's color with the disabled button */
                        background-color: #ffffff;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sending .mx_ForwardList_sendIcon {
                        background-color: #0dbd8b;
                        -webkit-mask-image: url(../../img/element-icons/circle-sending.394023e.svg);
                                mask-image: url(../../img/element-icons/circle-sending.394023e.svg);
                        -webkit-mask-position: center;
                                mask-position: center;
                        -webkit-mask-repeat: no-repeat;
                                mask-repeat: no-repeat;
                        -webkit-mask-size: 14px;
                                mask-size: 14px;
                        width: 14px;
                        height: 14px;
                    }

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sent .mx_ForwardList_sendIcon {
                        background-color: #0dbd8b;
                        -webkit-mask-image: url(../../img/element-icons/circle-sent.4ba3d6b.svg);
                                mask-image: url(../../img/element-icons/circle-sent.4ba3d6b.svg);
                        -webkit-mask-position: center;
                                mask-position: center;
                        -webkit-mask-repeat: no-repeat;
                                mask-repeat: no-repeat;
                        -webkit-mask-size: 14px;
                                mask-size: 14px;
                        width: 14px;
                        height: 14px;
                    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_GenericFeatureFeedbackDialog .mx_GenericFeatureFeedbackDialog_subheading {
        color: #edf3ff;
        font: var(--cpd-font-body-md-regular);
        line-height: 1.25rem;
        margin-bottom: 24px;
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_IncomingSasDialog_opponentProfile_image {
    position: relative;
}

.mx_IncomingSasDialog_opponentProfile h2 {
    display: inline-block;
    margin-left: 10px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InviteDialog_flexWrapper .mx_Dialog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_InviteDialog_transferWrapper .mx_Dialog {
    padding-bottom: 16px;
}

.mx_InviteDialog_addressBar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
    /* for the user section gets weird. */
    margin: 8px 45px 0 0;
}

.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        width: 100%; /* Needed to make the Field inside grow */
        background-color: #22262e;
        border-radius: 4px;
        min-height: 25px;
        -webkit-padding-start: 8px;
                padding-inline-start: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
            margin: 6px 6px 0 0;
            display: inline-block;
            min-width: -webkit-max-content;
            min-width: -moz-max-content;
            min-width: max-content; /* prevent manipulation by flexbox */
        }

/* overrides bunch of our default text input styles */

.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"] {
            margin: 6px 0 !important;
            height: 24px;
            font: var(--cpd-font-body-md-regular);
            line-height: 1.5rem;
            -webkit-padding-start: 12px;
                    padding-inline-start: 12px;
            border: 0 !important;
            outline: 0 !important;
            resize: none;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            min-width: 40%;
            -webkit-box-flex: 1 !important;
                -ms-flex: 1 !important;
                    flex: 1 !important;
            color: #edf3ff !important;
        }

.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
        min-width: 48px;
        -webkit-margin-start: 10px;
                margin-inline-start: 10px;
        height: 25px;
        line-height: 1.5625rem;
    }

.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
            /* Width and height are required to trick the layout engine. */
            width: 20px;
            height: 20px;
            -webkit-margin-start: 5px;
                    margin-inline-start: 5px;
            display: inline-block;
            vertical-align: middle;
        }

.mx_InviteDialog_section {
    padding-bottom: 4px;
}

.mx_InviteDialog_section h3 {
        font-size: 0.75rem;
        color: #a1b2d1;
        font-weight: bold;
        text-transform: uppercase;
    }

.mx_InviteDialog_section > p {
        margin: 0;
    }

.mx_InviteDialog_section > span {
        color: #edf3ff;
    }

.mx_InviteDialog_section .mx_InviteDialog_section_showMore {
        margin: 7px 18px;
        display: block;
    }

.mx_InviteDialog_section_hidden_suggestions_disclaimer {
    padding: 8px 0 16px 0;
    font: var(--cpd-font-body-md-regular);
}

.mx_InviteDialog_section_hidden_suggestions_disclaimer > span {
        color: #edf3ff;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_InviteDialog_section_hidden_suggestions_disclaimer > p {
        margin: 0;
    }

.mx_InviteDialog_footer {
    border-top: 1px solid #e7e7e7;
}

.mx_InviteDialog_footer > h3 {
        margin: 12px 0;
        font-size: 0.75rem;
        color: #a1b2d1;
        font-weight: bold;
        text-transform: uppercase;
    }

.mx_InviteDialog_footer .mx_CopyableText.mx_CopyableText_border {
        width: auto;
        width: initial; /* full width */
        margin-bottom: 0;
    }

.mx_InviteDialog_footer .mx_CopyableText.mx_CopyableText_border > a {
            text-decoration: none;
            -ms-flex-negative: 1;
                flex-shrink: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }

/* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */

.mx_InviteDialog_userTile {
    -webkit-margin-end: 8px;
            margin-inline-end: 8px;
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
        background-color: var(--cpd-color-bg-canvas-default);
        border: 1px solid var(--cpd-color-gray-400);
        border-radius: 99px;
        display: inline-block;
        height: 24px;
        line-height: 1.5rem;
        padding-inline: 8px;
        vertical-align: middle;
        color: var(--cpd-color-gray-1100);
    }

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_SearchResultAvatar {
            border-radius: 20px;
            position: relative;
            left: -5px;
            top: 2px;
        }

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_SearchResultAvatar {
            vertical-align: top;
        }

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name {
            vertical-align: top;
        }

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_SearchResultAvatar_threepidAvatar {
            background-color: #ffffff; /* this is fine without a var because it's for both themes */
        }

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
        display: inline-block;
        vertical-align: middle;
    }

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove svg {
            vertical-align: middle;
        }

.mx_InviteDialog_other {
    /* Prevent the dialog from jumping around randomly when elements change. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 600px;
    overflow: hidden;
}

.mx_InviteDialog_other h2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: pre-wrap;
        overflow: hidden;
    }

.mx_InviteDialog_other .mx_InviteDialog_addressBar {
        -webkit-margin-end: 0;
                margin-inline-end: 0;
    }

.mx_InviteDialog_other .mx_InviteDialog_userSections {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-padding-end: 0;
                padding-inline-end: 0;
    }

.mx_InviteDialog_other .mx_InviteDialog_userSections .mx_InviteDialog_section {
            padding-bottom: 0;
            margin-top: 12px;
        }

.mx_InviteDialog_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    overflow: hidden;
}

.mx_InviteDialog_transfer {
    width: auto;
}

.mx_InviteDialog_transfer .mx_InviteDialog_content {
        width: 496px;
        height: 430px;
        overflow: visible;
    }

.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -ms-flex-negative: 1;
                flex-shrink: 1;
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            min-height: 0;
        }

.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView .mx_TabbedView_tabPanel {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
            }

.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView .mx_TabbedView_tabPanel .mx_TabbedView_tabPanelContent {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;
                }

.mx_InviteDialog_transfer .mx_InviteDialog_addressBar {
        margin-top: 8px;
    }

.mx_InviteDialog_transfer input[type="checkbox"] {
        -webkit-margin-end: 8px;
                margin-inline-end: 8px;
    }

.mx_InviteDialog_userSections {
    margin-top: 4px;
    overflow-y: auto;
    padding: 0 45px 4px 0;
}

.mx_InviteDialog_helpText {
    margin: 0;
}

.mx_InviteDialog_dialPad {
    width: 224px;
    margin-top: 16px;
    margin-inline: auto;
}

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
        border-top: 0;
        border-inline: 0;
        border-radius: 0;
        margin-top: 0;
        border-color: #6f7882;
    }

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
            border-color: #0dbd8b;
        }

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField input {
            font-size: 18px;
            font-weight: var(--cpd-font-weight-semibold);
            padding-top: 0;
        }

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField .mx_Field_postfix {
            /* Remove border separator between postfix and field content */
            border-left: none;
        }

.mx_InviteDialog_dialPad .mx_DialPad {
        row-gap: 16px;
        -webkit-column-gap: 48px;
           -moz-column-gap: 48px;
                column-gap: 48px;
        margin-inline: auto;
    }

.mx_InviteDialog_transferConsultConnect {
    padding-top: 16px;
    /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
     * then compensate with padding
     */
    padding-inline: 24px;
    margin-inline: calc(-1 * 24px);
    border-top: 1px solid #6f7882;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_InviteDialog_transferConsultConnect_pushRight {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
}

.mx_InviteDialog_userDirectoryIcon::before {
    -webkit-mask-image: url(../../img/voip/tab-userdirectory.6dac23d.svg);
            mask-image: url(../../img/voip/tab-userdirectory.6dac23d.svg);
}

.mx_InviteDialog_dialPadIcon::before {
    -webkit-mask-image: url(../../img/voip/tab-dialpad.5fb10f3.svg);
            mask-image: url(../../img/voip/tab-dialpad.5fb10f3.svg);
}

.mx_InviteDialog_tile {
    cursor: pointer;
    display: grid;
    grid-gap: 8px 12px;
    gap: 8px 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_InviteDialog_tile.mx_InviteDialog_tile--room {
        /* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
        grid-template-columns: -webkit-min-content auto auto;
        grid-template-columns: min-content auto auto;
        padding: 4px 8px;
    }

.mx_InviteDialog_tile.mx_InviteDialog_tile--room:hover {
            background-color: #22262e;
            border-radius: 4px;
        }

.mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_selected {
            border-radius: 36px;
            background-color: var(--cpd-color-bg-success-subtle);
        }

.mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_selected::before {
                content: "";
                width: 24px;
                height: 24px;
                grid-column: 1;
                grid-row: 1;
                -webkit-mask-image: url(../../icons/check.aaad650.svg);
                        mask-image: url(../../icons/check.aaad650.svg);
                -webkit-mask-size: 100%;
                        mask-size: 100%;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                position: absolute;
                top: 6px; /* 50% */
                left: 6px; /* 50% */
                background-color: #edf3ff;
            }

.mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_time {
            -webkit-margin-start: auto;
                    margin-inline-start: auto;
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
            font-size: 0.75rem;
            color: #a1b2d1;
        }

.mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_highlight {
            font-weight: 900;
        }

.mx_InviteDialog_tile.mx_InviteDialog_tile--inviterError {
        grid-template-columns: -webkit-max-content auto;
        grid-template-columns: max-content auto; /* max-content = avatar width */
        margin-bottom: 24px;
    }

.mx_InviteDialog_tile.mx_InviteDialog_tile--inviterError:last-child {
            margin-bottom: 0;
        }

.mx_InviteDialog_tile.mx_InviteDialog_tile--inviterError .mx_InviteDialog_tile--inviterError_errorText {
            grid-row-start: 2;
            grid-column-start: 2;

            font-size: 0.9375rem;
            color: #ff5b55;
        }

.mx_InviteDialog_tile * {
        vertical-align: middle;
    }

.mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack,
    .mx_InviteDialog_tile .mx_InviteDialog_tile--room_selected {
        width: 36px;
        height: 36px;
        display: inline-block;
        position: relative;
    }

.mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack {
        grid-row-start: 1;
        grid-column-start: 1;
    }

.mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack > * {
            position: absolute;
            top: 0;
            left: 0;
        }

.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack {
        grid-row-start: 1;
        grid-column-start: 2;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
        align-self: center;
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline;
        gap: 2px 0;
        overflow: hidden;
    }

.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_name,
        .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_name {
            font-size: 0.9375rem;
            font-weight: var(--cpd-font-weight-semibold);
            color: #edf3ff;
        }

.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId {
            font-size: 0.75rem;
            color: #a1b2d1;
        }

.mx_InviteDialog_multiInviterError > h4 {
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: #edf3ff;
        font-weight: normal;
    }

.mx_InviteDialog_identityServer {
    margin-top: 1em;
}

.mx_InviteDialog_oneThreepid {
    font-size: 0.75rem;
    margin: 8px 0;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_JoinRuleDropdown {
    margin-bottom: 8px;
    font: var(--cpd-font-body-md-regular);
    color: #edf3ff;
}

.mx_JoinRuleDropdown .mx_Dropdown_option {
        font: var(--cpd-font-body-md-regular);
        line-height: 2rem;
        height: 32px;
        min-height: 32px;
    }

.mx_JoinRuleDropdown .mx_Dropdown_option > div {
            padding-left: 30px;
            position: relative;
        }

.mx_JoinRuleDropdown .mx_Dropdown_option > div::before {
                content: "";
                position: absolute;
                height: 16px;
                width: 16px;
                left: 6px;
                top: 8px;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                background-color: #edf3ff;
            }

.mx_JoinRuleDropdown .mx_Dropdown_option > div.mx_JoinRuleDropdown_knock::before {
                content: normal;
            }

.mx_JoinRuleDropdown .mx_JoinRuleDropdown_invite::before {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-mask-image: url(../../icons/lock-solid.6847293.svg);
                mask-image: url(../../icons/lock-solid.6847293.svg);
        -webkit-mask-size: contain;
                mask-size: contain;
        padding: 1px;
    }

.mx_JoinRuleDropdown .mx_JoinRuleDropdown_public::before {
        -webkit-mask-image: url(../../icons/public.0e971dd.svg);
                mask-image: url(../../icons/public.0e971dd.svg);
    }

.mx_JoinRuleDropdown .mx_JoinRuleDropdown_restricted::before {
        -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
                mask-image: url(../../img/element-icons/group-members.d86d751.svg);
        -webkit-mask-size: contain;
                mask-size: contain;
    }

.mx_JoinRuleDropdown .mx_JoinRuleDropdown_icon {
        color: #edf3ff;
        position: absolute;
        left: 6px;
        top: 8px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LeaveSpaceDialog_wrapper .mx_Dialog {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 24px 32px;
    }

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog {
            width: 440px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            height: 520px;
        }

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content {
                -webkit-box-flex: 1;
                    -ms-flex-positive: 1;
                        flex-grow: 1;
                margin: 0;
                overflow-y: auto;
            }

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content .mx_LeaveSpaceDialog_section_warning {
                    position: relative;
                    border-radius: 8px;
                    margin: 12px 0 0;
                    padding: 12px 8px 12px 42px;
                    background-color: #22262e;

                    font-size: 0.75rem;
                    line-height: 0.9375rem;
                    color: #edf3ff;
                }

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content .mx_LeaveSpaceDialog_section_warning::before {
                        content: "";
                        position: absolute;
                        left: 10px;
                        top: calc(50% - 8px); /* vertical centering */
                        height: 16px;
                        width: 16px;
                        background-color: #edf3ff;
                        -webkit-mask-repeat: no-repeat;
                                mask-repeat: no-repeat;
                        -webkit-mask-size: contain;
                                mask-size: contain;
                        -webkit-mask-image: url(../../icons/info-solid.ef2d524.svg);
                                mask-image: url(../../icons/info-solid.ef2d524.svg);
                        -webkit-mask-position: center;
                                mask-position: center;
                    }

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content > p {
                    color: #edf3ff;
                }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LocationViewDialog_wrapper .mx_Dialog {
    padding: 0px;
}

.mx_LocationViewDialog {
    /* subtract 0.5px to prevent single-pixel margin due to rounding */
    width: calc(80vw - 0.5px);
    height: calc(80vh - 0.5px);
    overflow: hidden;
}

.mx_LocationViewDialog .mx_Dialog_header {
        margin: 0px;
        padding: 0px;
        position: static;
        position: initial;
    }

.mx_LocationViewDialog .mx_Dialog_header .mx_Dialog_title {
            display: none;
        }

.mx_LocationViewDialog .mx_Dialog_cancelButton {
        z-index: 4010;
        position: absolute;
        left: var(--cpd-space-4x);
        top: var(--cpd-space-4x);
    }

.mx_LocationViewDialog_map {
    width: 80vw;
    height: 80vh;
    border-radius: 8px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Manan Sadana <manancodes.dev@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LogoutDialog_ExportKeyAdvanced {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ManageRestrictedJoinRuleDialog_wrapper .mx_Dialog {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_ManageRestrictedJoinRuleDialog {
    width: 480px;
    color: #edf3ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    min-height: 0;
    height: 60vh;
}

.mx_ManageRestrictedJoinRuleDialog .mx_SearchBox {
        /* To match the space around the title */
        margin: 0 0 15px 0;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
    }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_content {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_noResults {
        display: block;
        margin-top: 24px;
    }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section:not(:first-child) {
            margin-top: 24px;
        }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section > h3 {
            margin: 0;
            color: #edf3ff;
            font-size: 0.75rem;
            font-weight: var(--cpd-font-weight-semibold);
            line-height: 0.9375rem;
        }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-top: 12px;
        }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry > div {
                -webkit-box-flex: 1;
                    -ms-flex-positive: 1;
                        flex-grow: 1;
            }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_ManageRestrictedJoinRuleDialog_entry_name {
                margin: 0 8px;
                font-size: 0.9375rem;
                line-height: 30px;
                -webkit-box-flex: 1;
                    -ms-flex-positive: 1;
                        flex-grow: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_ManageRestrictedJoinRuleDialog_entry_description {
                margin-top: 8px;
                font-size: 0.75rem;
                line-height: 0.9375rem;
                color: #edf3ff;
            }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_spaces .mx_BaseAvatar {
            margin-right: 12px;
        }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_info {
        position: relative;
        border-radius: 8px;
        margin: 12px 0;
        padding: 8px 8px 8px 42px;
        background-color: #22262e;

        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: #edf3ff;
    }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_info::before {
            content: "";
            position: absolute;
            left: 10px;
            top: calc(50% - 8px); /* vertical centering */
            height: 16px;
            width: 16px;
            background-color: #edf3ff;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-image: url(../../icons/info-solid.ef2d524.svg);
                    mask-image: url(../../icons/info-solid.ef2d524.svg);
            -webkit-mask-position: center;
                    mask-position: center;
        }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer {
        margin-top: 20px;
    }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer .mx_ManageRestrictedJoinRuleDialog_footer_buttons {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
            margin-left: auto;
        }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer .mx_ManageRestrictedJoinRuleDialog_footer_buttons .mx_AccessibleButton {
                display: inline-block;
            }

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_footer .mx_ManageRestrictedJoinRuleDialog_footer_buttons .mx_AccessibleButton + .mx_AccessibleButton {
                    margin-left: 24px;
                }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MessageEditHistoryDialog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-height: 60vh;
}

.mx_MessageEditHistoryDialog_scrollPanel {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}

.mx_MessageEditHistoryDialog_error {
    color: #ff5b55;
    text-align: center;
}

.mx_MessageEditHistoryDialog_edits {
    list-style-type: none;
    font: var(--cpd-font-body-md-regular);
    padding: 0;
    color: #edf3ff;
}

.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion,
    .mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
        padding: 0px 2px;
    }

.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
        color: rgb(255, 76, 85);
        background-color: rgb(255, 76, 85, 0.1);
        text-decoration: line-through;
    }

.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
        color: rgb(26, 169, 123);
        background-color: rgb(26, 169, 123, 0.1);
        text-decoration: underline;
    }

/* Emulate mx_EventTile[data-layout="group"] */

.mx_MessageEditHistoryDialog_edits .mx_EventTile {
        padding-top: 0;
    }

.mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_MessageTimestamp {
            position: absolute;
            left: 0;
            text-align: center;
        }

.mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_EventTile_line {
            padding-top: var(--EventTile_group_line-spacing-block-start);
            padding-bottom: var(--EventTile_group_line-spacing-block-end);
            padding-left: var(--EventTile_group_line-spacing-inline-start);
            line-height: var(--EventTile_group_line-line-height);
        }

.mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_EventTile_line .mx_EventTile_content {
                margin-right: 0px;
            }

.mx_MessageEditHistoryDialog_edits .mx_EventTile::before {
            content: "";
            position: absolute;
            top: -1px;
            bottom: -1px;
            left: -10px;
            right: -10px;
            z-index: -1;
            border-radius: 4px;
        }

.mx_MessageEditHistoryDialog_edits .mx_EventTile:hover::before {
                background: #1c2026;
            }

.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        -webkit-padding-start: 8px;

                padding-inline-start: 8px;
        -webkit-padding-end: 8px;
                padding-inline-end: 8px;

        font-size: 0.9375rem;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
        margin-bottom: 24px;
    }

.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
            vertical-align: middle;
            margin-right: 8px;
        }

.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
        float: right;
        margin-top: 24px;
    }

.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton + .mx_AccessibleButton {
            margin-left: 8px;
        }

.mx_ModalWidgetDialog iframe {
        width: 100%;
        height: 450px;
        border: 0;
        border-radius: 8px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PollCreateDialog .mx_PollCreateDialog_busy {
        position: absolute;
        inset: 0;
        background-color: rgba(24,27,33, 0.85);
        z-index: 1;
    }

.mx_PollCreateDialog h2 {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.9375rem;
        line-height: 1.5rem;
        margin-top: 0;
        margin-bottom: 8px;
    }

.mx_PollCreateDialog h2:nth-child(n + 2) {
            margin-top: 20px;
        }

.mx_PollCreateDialog p {
        color: #edf3ff;
    }

.mx_PollCreateDialog .mx_PollCreateDialog_option {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-top: 11px;
        margin-bottom: 16px; /* 11px from the top will collapse, so this creates a 16px gap between options */
    }

.mx_PollCreateDialog .mx_PollCreateDialog_option .mx_Field {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            margin: 0;
        }

.mx_PollCreateDialog .mx_PollCreateDialog_option .mx_PollCreateDialog_removeOption {
            margin-left: 12px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #6f7882;
            cursor: pointer;
            position: relative;
        }

.mx_PollCreateDialog .mx_PollCreateDialog_option .mx_PollCreateDialog_removeOption::before {
                content: "";
                -webkit-mask: url(../../icons/close.5ef7caf.svg);
                        mask: url(../../icons/close.5ef7caf.svg);
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: 16px;
                        mask-size: 16px;
                width: inherit;
                height: inherit;
                position: absolute;
                background-color: #edf3ff;
            }

.mx_PollCreateDialog .mx_PollCreateDialog_addOption {
        padding: 0;
        margin-bottom: 40px; /* arbitrary to create scrollable area under the poll */
    }

.mx_PollCreateDialog .mx_AccessibleButton_disabled {
        opacity: 0.4;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RegistrationEmailPromptDialog {
    width: 417px;
}

.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
        margin-bottom: 24px;
        color: #edf3ff;
    }

.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
        width: 100%;
    }

/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ReportRoomDialog textarea, .mx_DeclineAndBlockInviteDialog textarea {
        font: var(--cpd-font-body-md-regular);
        border: 1px solid var(--cpd-color-border-interactive-primary);
        background: var(--cpd-color-bg-canvas-default);
        border-radius: 0.5rem;
        padding: var(--cpd-space-3x) var(--cpd-space-4x);
    }

/*
      Workaround to fix labels appearing with the wrong color.

      .mx_Dialog (in res/css/_common.pcss) redefines the body color
      as $light-fg-color rather than the standard primary color.

      This forces the colour to match the Compound style, but
      in the future the Dialogs should not force a color.
    */

.mx_ReportRoomDialog form label, .mx_DeclineAndBlockInviteDialog form label {
        color: var(--cpd-color-text-primary);
    }

.mx_DeclineAndBlockInviteDialog div[aria-disabled="true"] > label {
        color: var(--cpd-color-text-secondary);
    }

.mx_DeclineAndBlockInviteDialog .mx_SettingsFlag_label {
        color: var(--cpd-color-text-primary);
        font-weight: var(--cpd-font-weight-semibold);
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* ICONS */

/* ========================================================== */

.mx_RoomSettingsDialog_settingsIcon::before {
    -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
            mask-image: url(../../icons/settings-solid.94c318a.svg);
}

.mx_RoomSettingsDialog_voiceIcon::before {
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
            mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
}

.mx_RoomSettingsDialog_securityIcon::before {
    -webkit-mask-image: url(../../icons/lock-solid.6847293.svg);
            mask-image: url(../../icons/lock-solid.6847293.svg);
}

.mx_RoomSettingsDialog_rolesIcon::before {
    -webkit-mask-image: url(../../img/element-icons/room/settings/roles.ace4f24.svg);
            mask-image: url(../../img/element-icons/room/settings/roles.ace4f24.svg);
}

.mx_RoomSettingsDialog_notificationsIcon::before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
            mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
}

.mx_RoomSettingsDialog_bridgesIcon::before {
    /* This icon is pants, please improve :) */
    -webkit-mask-image: url(../../img/feather-customised/bridge.8ca4493.svg);
            mask-image: url(../../img/feather-customised/bridge.8ca4493.svg);
}

.mx_RoomSettingsDialog_pollsIcon::before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
            mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
}

.mx_RoomSettingsDialog_warningIcon::before {
    -webkit-mask-image: url(../../img/element-icons/room/settings/advanced.5744e03.svg);
            mask-image: url(../../img/element-icons/room/settings/advanced.5744e03.svg);
}

.mx_RoomSettingsDialog_peopleIcon::before {
    -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
            mask-image: url(../../img/element-icons/group-members.d86d751.svg);
}

.mx_RoomSettingsDialog .mx_Dialog_title {
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto;
    padding-right: 80px;
}

/* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */

.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
    -webkit-mask: url(../../icons/image.9142b42.svg);
            mask: url(../../icons/image.9142b42.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 36px;
            mask-size: 36px;
    -webkit-mask-position: center;
            mask-position: center;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomSettingsDialog_BridgeList {
    padding: 0;
}

.mx_RoomSettingsDialog_BridgeList li {
        list-style-type: none;
    }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            gap: 8px;
            padding: 5px;
            margin-bottom: 8px;

            /* border-style around each bridge list item */
            border-width: 1px 1px;
            border-color: #000000;
            border-style: solid;
            border-radius: 5px;
        }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon,
                .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon span,
                .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_noProtocolIcon {
                    -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                    border-radius: 5px;
                    border: 1px solid #181b21;
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_noProtocolIcon,
                .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon img {
                    border-radius: 5px;
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_noProtocolIcon {
                    width: 48px;
                    height: 48px;
                    background: #181b21;
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon img {
                        border-width: 1px 1px;
                        border-color: #000000;
                    }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon span {
                        /* Correct letter placement */
                        left: auto;
                    }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data {
                display: inline-block;
                width: 85%;
            }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_details,
                .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata,
                .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata li,
                .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_protocolName {
                    margin-bottom: 0;
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_details,
                .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata {
                    margin-top: 4px;
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_metadata li {
                    margin-top: 8px;
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_column_data_protocolName {
                    margin-top: 0;
                    font-size: 16pt;
                    color: #edf3ff;
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_workspace_channel_details {
                    color: #edf3ff;
                    font-weight: var(--cpd-font-weight-semibold);
                }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_workspace_channel_details .mx_RoomSettingsDialog_channel {
                        -webkit-margin-start: 5px;
                                margin-inline-start: 5px;
                    }

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_metadata {
                    color: #a1b2d1;
                    margin-bottom: 0;
                    overflow-y: visible;
                    text-overflow: ellipsis;
                    white-space: normal;
                    padding: 0;
                }

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomUpgradeDialog {
    padding-right: 70px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomUpgradeWarningDialog {
    max-width: 38vw;
    width: 38vw;
}

.mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar {
            height: 8px;
            width: 100%;

            border-radius: 8px;
        }

.mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar::-moz-progress-bar {
        border-radius: 8px;
    }

.mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar::-webkit-progress-bar,
    .mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar::-webkit-progress-value {
        border-radius: 8px;
    }

.mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_RoomUpgradeWarningDialog_progressText {
            margin-top: 8px;
            font-size: 0.9375rem;
            line-height: 1.5rem;
            color: #edf3ff;
        }

.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
    font-weight: 700;
}

.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
        float: right;
    }

.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
        display: inline-block;
        vertical-align: middle;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
        padding-right: 85px;
        color: #edf3ff;
    }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
            border-color: #edf3ff;
            opacity: 0.1;
            border-bottom: none;
        }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
            padding: 16px;
        }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
                margin-top: 16px;
            }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp {
                display: inline-block;
                width: 115px;
                color: #a1b2d1;
                line-height: 24px; /* same as avatar */
                vertical-align: top;
            }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline {
                display: inline-block;
                width: calc(100% - 155px); /* 115px timestamp width + 40px right margin */
            }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_timeline_header span {
                        margin-left: 8px;
                        vertical-align: middle;
                    }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn {
                    position: relative;
                    margin-top: 8px;
                }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_ServerOfflineDialog_content_context_txn_desc {
                        width: calc(100% - 100px); /* 100px is an arbitrary margin for the button */
                    }

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline .mx_ServerOfflineDialog_content_context_txn .mx_AccessibleButton {
                        float: right;
                    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ServerPickerDialog {
    width: 468px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_ServerPickerDialog .mx_Dialog_content {
        margin-bottom: 0;
    }

.mx_ServerPickerDialog .mx_Dialog_content > p {
            color: #edf3ff;
            font: var(--cpd-font-body-md-regular);

            margin: 16px 0;
        }

.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
                margin-bottom: 40px;
            }

.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
                margin: 0 24px 24px;
            }

.mx_ServerPickerDialog .mx_Dialog_content > h2 {
            font-size: 0.9375rem;
            font-weight: var(--cpd-font-weight-semibold);
            color: #edf3ff;
            margin: 16px 0 16px 8px;
        }

.mx_ServerPickerDialog .mx_Dialog_content > a {
            color: #0dbd8b;
            margin-left: 8px;
        }

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type="radio"] + div {
            margin-top: auto;
            margin-bottom: auto;
        }

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
        border-top: none;
        border-left: none;
        border-right: none;
        border-radius: 0;
        border-radius: initial;
    }

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
            padding-left: 0;
        }

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
            margin-left: 0;
        }

.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
        width: calc(100% - 64px);
        margin: 0 8px;
        padding: 15px 18px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SetEmailDialog_email_input {
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: rgba(74, 74, 74, 0.9);
    background-color: #181b21;
    font-size: 0.9375rem;
    width: 100%;
    max-width: 280px;
    margin-bottom: 10px;
}

.mx_SetEmailDialog_email_input:focus {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    border: 1px solid #0dbd8b;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* Not actually a component but things shared by settings components */

.mx_UserSettingsDialog,
.mx_RoomSettingsDialog,
.mx_SpaceSettingsDialog,
.mx_SpacePreferencesDialog {
    width: 90vw;
    max-width: 980px;
    /* set the height too since tabbed view scrolls itself. */
    height: 80vh;
}

.mx_UserSettingsDialog .mx_TabbedView, .mx_RoomSettingsDialog .mx_TabbedView, .mx_SpaceSettingsDialog .mx_TabbedView, .mx_SpacePreferencesDialog .mx_TabbedView {
        top: 90px;
    }

.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        min-width: 580px;
        padding-right: 100px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        /* Put some padding on the bottom to avoid the settings tab from */
        /* colliding harshly with the dialog when scrolled down. */
        padding-bottom: 100px;
    }

.mx_UserSettingsDialog .mx_SettingsDialog_tabLabelsAlert::after, .mx_RoomSettingsDialog .mx_SettingsDialog_tabLabelsAlert::after, .mx_SpaceSettingsDialog .mx_SettingsDialog_tabLabelsAlert::after, .mx_SpacePreferencesDialog .mx_SettingsDialog_tabLabelsAlert::after {
        display: inline-block;
        content: "";
        width: 8px;
        height: 8px;
        background-color: var(--cpd-color-icon-critical-primary);
        clip-path: circle(4px);
        position: absolute;
        right: var(--cpd-space-4x);
    }

/* On narrow viewports, the tab labels are hidden, so we need to shift the indicator so it isn't over the tab icon. */

@media (max-width: 1024px) {
        .mx_UserSettingsDialog .mx_SettingsDialog_tabLabelsAlert::after, .mx_RoomSettingsDialog .mx_SettingsDialog_tabLabelsAlert::after, .mx_SpaceSettingsDialog .mx_SettingsDialog_tabLabelsAlert::after, .mx_SpacePreferencesDialog .mx_SettingsDialog_tabLabelsAlert::after {
            right: var(--cpd-space-1x);
            top: var(--cpd-space-1x);
        }
}

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ShareDialog {
    /* Value from figma design */
    width: 416px;
}

.mx_ShareDialog .mx_Dialog_header {
        text-align: center;
        margin-bottom: var(--cpd-space-6x);
        /* Override dialog header padding to able to center it */
        -webkit-padding-end: 0;
                padding-inline-end: 0;
    }

.mx_ShareDialog .mx_ShareDialog_content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-6x);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_ShareDialog .mx_ShareDialog_content .mx_ShareDialog_top {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: var(--cpd-space-4x);
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 100%;
        }

.mx_ShareDialog .mx_ShareDialog_content .mx_ShareDialog_top span {
                text-align: center;
                font: var(--cpd-font-body-sm-semibold);
                color: var(--cpd-color-text-secondary);
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
            }

.mx_ShareDialog .mx_ShareDialog_content label {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            gap: var(--cpd-space-3x);
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            font: var(--cpd-font-body-md-medium);
        }

.mx_ShareDialog .mx_ShareDialog_content button {
            width: 100%;
        }

.mx_ShareDialog .mx_ShareDialog_content .mx_ShareDialog_social {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: var(--cpd-space-3x);
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

.mx_ShareDialog .mx_ShareDialog_content .mx_ShareDialog_social a {
                width: 48px;
                height: 48px;
                border-radius: 99px;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                border: 1px solid var(--cpd-color-border-interactive-secondary);
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
            }

.mx_ShareDialog .mx_ShareDialog_content .mx_ShareDialog_social a img {
                    width: 24px;
                    height: 24px;
                }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
    margin-bottom: 2px;
}

.mx_SlashCommandHelpDialog .mx_Dialog_content {
    margin-top: 12px;
    margin-bottom: 34px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpacePreferencesDialog {
    width: 700px;
    height: 400px;
}

.mx_SpacePreferencesDialog > h4 {
        margin: -12px 0 0;
        font-weight: normal;
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: #edf3ff;
    }

.mx_SpacePreferencesDialog .mx_TabbedView {
        top: 80px;
    }

.mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab {
            min-width: 0;
            min-width: initial;
        }

.mx_SpacePreferencesDialog_appearanceIcon::before {
    -webkit-mask-image: url(../../img/element-icons/settings/appearance.90cad21.svg);
            mask-image: url(../../img/element-icons/settings/appearance.90cad21.svg);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpaceSettingsDialog {
    color: #edf3ff;
}

.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: #ff5b55;
        margin-bottom: 28px;
    }

.mx_SpaceSettingsDialog .mx_ToggleSwitch {
        display: inline-block;
        vertical-align: middle;
        margin-left: 16px;
    }

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsTab_section_caption {
            margin-top: 12px;
            margin-bottom: 20px;
        }

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton {
            margin-top: 8px;
            margin-bottom: 4px;
        }

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton .mx_StyledRadioButton_content {
                font-weight: var(--cpd-font-weight-semibold);
                line-height: 1.125rem;
                color: #edf3ff;
            }

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton + span {
                font-size: 0.9375rem;
                line-height: 1.125rem;
                color: #edf3ff;
                margin-left: 26px;
            }

.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 64px;
    }

.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton {
            display: inline-block;
        }

.mx_SpaceSettingsDialog .mx_SpaceSettingsDialog_buttons .mx_AccessibleButton_kind_link {
            margin-left: auto;
        }

.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link {
            font: var(--cpd-font-body-md-semibold);
            margin: 7px 18px;
        }

.mx_SpaceSettingsDialog .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link.mx_SettingsTab_showAdvanced {
                margin: 18px 0;
            }

.mx_SpaceSettingsDialog .mx_TabbedView_tabLabel .mx_SpaceSettingsDialog_generalIcon::before {
            -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
                    mask-image: url(../../icons/settings-solid.94c318a.svg);
        }

.mx_SpaceSettingsDialog .mx_TabbedView_tabLabel .mx_SpaceSettingsDialog_visibilityIcon::before {
            -webkit-mask-image: url(../../img/element-icons/eye.e715558.svg);
                    mask-image: url(../../img/element-icons/eye.e715558.svg);
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpotlightDialog_wrapper .mx_Dialog_border {
        /* Disable the glass border as this dialog wasn't designed with it in mind */
        display: contents;
    }

.mx_SpotlightDialog_wrapper .mx_Dialog {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        border-radius: 8px;
        overflow-y: visible;
        overflow-y: initial;
        position: relative;
        height: 60%;
        padding: 0;
        contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
    }

.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt {
            position: absolute;
            padding: 8px;
            border-radius: 8px;
            background-color: #181b21;
            top: -60px; /* relative to the top of the modal */
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #edf3ff;
        }

.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt kbd {
                display: inline-block;
                padding: 2px 4px;
                margin: 0 4px;
                border-radius: 6px;
                background-color: #6f7882;
                vertical-align: middle;
                color: #edf3ff;
                /* To avoid any styling inherent with <kbd> elements */
                font-family: inherit;
                font-weight: inherit;
                font-size: inherit;
            }

.mx_SpotlightDialog {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_SpotlightDialog .mx_Dialog_header {
        display: none;
    }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox {
        margin: 0;
        border: none;
        border-radius: 8px 8px 0 0;
        padding: 12px 16px;
        border-bottom: 1px solid #21262c;
    }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-line-pack: center;
                align-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            border-radius: 8px;
            margin-right: 8px;
            background-color: #6f7882;
            vertical-align: middle;
            color: #edf3ff;
            position: relative;
            padding: 4px 8px 4px 37px;
        }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter::before {
                background-color: #edf3ff;
                content: "";
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
                width: 18px;
                height: 18px;
                position: absolute;
                left: 8px;
                top: 50%;
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
            }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter.mx_SpotlightDialog_filterPeople::before {
                -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
                        mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
            }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter.mx_SpotlightDialog_filterPublicRooms::before {
                -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
                        mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
            }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter.mx_SpotlightDialog_filterPublicSpaces::before {
                -webkit-mask-image: url(../../img/element-icons/spaces.8a53f25.svg);
                        mask-image: url(../../img/element-icons/spaces.8a53f25.svg);
            }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close {
                position: relative;
                display: inline-block;
                width: 16px;
                height: 16px;
                background: #21262c;
                border-radius: 8px;
                margin-left: 8px;
                text-align: center;
                line-height: 16px;
                color: #edf3ff;
            }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close::before {
                    background-color: #edf3ff;
                    content: "";
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: 14px;
                            mask-size: 14px;
                    width: inherit;
                    height: inherit;
                    position: absolute;
                    left: 0;
                    -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                            mask-image: url(../../icons/close.5ef7caf.svg);
                }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > input {
            display: block;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            background-color: transparent;
            width: 100%;
            height: 32px;
            padding: 0;
            color: #edf3ff;
            font-weight: normal;
            font-size: 0.9375rem;
            line-height: 1.5rem;
        }

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_Spinner {
            -webkit-box-flex: 0;
                -ms-flex-positive: 0;
                    flex-grow: 0;
            width: auto;
            width: initial;
            height: auto;
            height: initial;
            margin-left: 16px;
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content {
        height: 100%;
        overflow-y: auto;
        padding: 16px;
    }

.mx_SpotlightDialog #mx_SpotlightDialog_content ul {
            padding: 0;
            margin: 0;
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4,
            .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > .mx_SpotlightDialog_sectionHeader > h4 {
                font-weight: var(--cpd-font-weight-semibold);
                font-size: 0.75rem;
                line-height: 0.9375rem;
                color: #edf3ff;
                margin: 0;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4 {
                margin-bottom: 8px;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section .mx_SpotlightDialog_sectionHeader {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                margin-bottom: 8px;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section .mx_SpotlightDialog_sectionHeader .mx_SpotlightDialog_options {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    gap: 4px;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section {
                margin-top: 24px;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed > div {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                white-space: nowrap;
                overflow-x: hidden;
                margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option {
                border-radius: 8px;
                padding: 4px;
                color: #edf3ff;
                font-size: 0.75rem;
                line-height: 0.9375rem;
                display: inline-block;
                width: 58px;
                height: 58px;
                min-width: 58px;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option .mx_DecoratedRoomAvatar {
                    margin: 0 9px 4px; /* maintain centering */
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option + .mx_SpotlightDialog_option {
                    margin-left: 16px;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"] {
                    background-color: #6f7882;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option {
                padding: 6px 4px;
                border-radius: 8px;
                font-size: 0.9375rem;
                line-height: 1.5rem;
                color: #edf3ff;
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment {
                    display: -webkit-inline-box;
                    display: -ms-inline-flexbox;
                    display: inline-flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: row;
                            flex-direction: row;
                    margin-left: auto;
                    -webkit-box-align: start;
                        -ms-flex-align: start;
                            align-items: flex-start;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline {
                    -webkit-box-align: start;
                        -ms-flex-align: start;
                            align-items: flex-start;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton {
                        padding: 4px 20px;
                        margin: 2px 4px;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt {
                        margin-top: 9px;
                        margin-right: 8px;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_BaseAvatar,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_BaseAvatar,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_BaseAvatar,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_BaseAvatar {
                    margin-right: 8px;
                    width: 24px;
                    height: 24px;
                    -ms-flex-negative: 0;
                        flex-shrink: 0;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_BaseAvatar .mx_BaseAvatar {
                        width: inherit;
                        height: inherit;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;
                    -webkit-box-flex: 1;
                        -ms-flex-positive: 1;
                            flex-grow: 1;
                    min-width: 0;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-orient: horizontal;
                        -webkit-box-direction: normal;
                            -ms-flex-direction: row;
                                flex-direction: row;
                        line-height: 1.5rem;
                        margin-right: 8px;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName {
                            color: #edf3ff;
                            font-size: 0.9375rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias {
                            color: #edf3ff;
                            font-size: 0.75rem;
                            margin-left: 8px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription {
                        color: #edf3ff;
                        font-size: 0.75rem;
                        white-space: normal;
                        word-wrap: break-word;
                        line-height: 1.25rem;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_NotificationBadge, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_NotificationBadge, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_NotificationBadge, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_NotificationBadge {
                    margin-left: 8px;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications {
                    width: 20px;
                    min-width: 20px;
                    height: 20px;
                    margin-top: auto;
                    margin-bottom: auto;
                    position: relative;
                    display: none;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications::before {
                        top: 2px;
                        left: 2px;
                        content: "";
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        -webkit-mask-position: center;
                                mask-position: center;
                        -webkit-mask-size: contain;
                                mask-size: contain;
                        -webkit-mask-repeat: no-repeat;
                                mask-repeat: no-repeat;
                        background: #edf3ff;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu[aria-selected="true"]::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications:hover::before,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications[aria-selected="true"]::before {
                        background-color: #edf3ff;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu::before {
                    -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                            mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"],
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"],
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"],
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover,
                .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] {
                    background-color: #21262c;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover .mx_SpotlightDialog_option--notifications,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_option--notifications {
                        display: block;
                    }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
                    display: inline-block;
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink,
        .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom {
            margin-top: 8px;
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton {
                position: relative;
                margin: 0;
                padding: 3px 8px 3px 28px;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
                    content: "";
                    display: block;
                    position: absolute;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                    left: 8px;
                    width: 16px;
                    height: 16px;
                    background: var(--cpd-color-icon-primary);
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
            -webkit-mask-image: url(../../icons/link.d0734d2.svg);
                    mask-image: url(../../icons/link.d0734d2.svg);
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
            -webkit-mask-image: url(../../img/element-icons/roomlist/hash.9de9cf7.svg);
                    mask-image: url(../../img/element-icons/roomlist/hash.9de9cf7.svg);
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat,
            .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias,
            .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms,
            .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicSpaces,
            .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat,
            .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_searchMessages {
                padding-left: 32px;
                position: relative;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicSpaces::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat::before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_searchMessages::before {
                    background-color: #edf3ff;
                    content: "";
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    left: 4px;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                            transform: translateY(-50%);
                }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat::before {
                -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
                        mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias::before {
                -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
                        mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms::before {
                -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
                        mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicSpaces::before {
                -webkit-mask-image: url(../../img/element-icons/spaces.8a53f25.svg);
                        mask-image: url(../../img/element-icons/spaces.8a53f25.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat::before {
                -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
                        mask-image: url(../../img/element-icons/group-members.d86d751.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_searchMessages::before {
                -webkit-mask-image: url(../../img/element-icons/room/search-inset.7a9a2eb.svg);
                        mask-image: url(../../img/element-icons/room/search-inset.7a9a2eb.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_otherSearches_messageSearchText {
                font-size: 0.9375rem;
                line-height: 1.5rem;
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details {
            margin-left: 8px;
            margin-right: 8px;
            color: #edf3ff;
            font-size: 0.75rem;
            line-height: 0.9375rem;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
            float: right;
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #edf3ff;
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt {
            padding: 2px 4px;
            /* To avoid any styling inherent with <kbd> elements */
            font-family: inherit;
            font-weight: inherit;
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #edf3ff;
            border-radius: 6px;
            background-color: #6f7882;
            margin-right: 4px;
            display: none;
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult {
            background-color: #edf3ff;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
        }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_home-space {
                -webkit-mask-image: url(../../icons/home-solid.88e9e19.svg);
                        mask-image: url(../../icons/home-solid.88e9e19.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_favourites-space {
                -webkit-mask-image: url(../../icons/favourite-solid.a1d4606.svg);
                        mask-image: url(../../icons/favourite-solid.a1d4606.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_people-space {
                -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
                        mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
            }

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_orphans-space {
                -webkit-mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
                        mask-image: url(../../img/element-icons/roomlist/hash-circle.221168c.svg);
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * To avoid visual glitching of two modals stacking briefly, we customise the
 * terms dialog sizing when it will appear for the integration manager so that
 * it gets the same basic size as the IM's own modal.
 */

.mx_TermsDialog_forIntegrationManager .mx_Dialog_border {
    width: 60%;
    height: 70%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.mx_TermsDialog_termsTableHeader {
    font-weight: bold;
    text-align: left;
}

.mx_TermsDialog_termsTable {
    font-size: 0.75rem;
    width: 100%;
}

.mx_TermsDialog_service,
.mx_TermsDialog_summary {
    padding-right: 10px;
}

/*
 * Copyright 2024 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_UnpinAllDialog {
    /* 396 is coming from figma and we remove the left and right paddings of the dialog */
    width: calc(396px - (var(--cpd-space-10x) * 2));
    padding-bottom: var(--cpd-space-2x);
}

.mx_UnpinAllDialog .mx_UnpinAllDialog_title {
        /* Override the default heading style */
        font: var(--cpd-font-heading-sm-semibold) !important;
        margin-bottom: var(--cpd-space-3x);
    }

.mx_UnpinAllDialog .mx_UnpinAllDialog_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-4x);
        margin: var(--cpd-space-8x) var(--cpd-space-2x) 0 var(--cpd-space-2x);
    }

.mx_UnpinAllDialog .mx_UnpinAllDialog_buttons button {
            width: 100%;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UntrustedDeviceDialog .mx_Dialog_title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_UntrustedDeviceDialog .mx_Dialog_title .mx_E2EIcon {
            margin-left: 0;
        }

.mx_UntrustedDeviceDialog .mx_Dialog_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        gap: 8px;
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UploadConfirmDialog_fileIcon {
    margin-right: 5px;
}

.mx_UploadConfirmDialog_previewOuter {
    text-align: center;
}

.mx_UploadConfirmDialog_previewInner {
    display: inline-block;
    text-align: left;
}

.mx_UploadConfirmDialog_imagePreview {
    max-height: 300px;
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid var(--cpd-color-icon-tertiary);
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsDialog_toastContainer {
    position: absolute;
    bottom: var(--cpd-space-10x);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_UserSettingsDialog_title {
    /* Override default dialog font style */
    font: var(--cpd-font-heading-md-regular) !important;
}

.mx_UserSettingsDialog_title .mx_UserSettingsDialog_title_strong {
        font: var(--cpd-font-heading-md-semibold);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_VerifyEMailDialog {
    height: auto;
    top: 300px;
}

.mx_VerifyEMailDialog .mx_Dialog {
        color: #edf3ff;
        font: var(--cpd-font-body-md-regular);
        padding: 24px 24px 16px;
        text-align: center;
        width: 485px;
    }

.mx_VerifyEMailDialog .mx_Dialog h1 {
            font-size: 1.5rem;
            font-weight: var(--cpd-font-weight-semibold);
        }

.mx_VerifyEMailDialog .mx_Dialog .mx_VerifyEMailDialog_text-light {
            color: #edf3ff;
            line-height: 20px;
        }

.mx_VerifyEMailDialog .mx_Dialog .mx_AuthBody_did-not-receive {
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            margin-bottom: 8px;
        }

.mx_VerifyEMailDialog .mx_Dialog .mx_Dialog_cancelButton {
            right: 10px;
        }

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_WidgetCapabilitiesPromptDialog .text-muted {
        font-size: 0.75rem;
    }

.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
        margin-bottom: 16px;
    }

.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
        margin-top: 20px;
        font-size: 0.9375rem;
        line-height: 0.9375rem;
    }

.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
        margin-top: 40px; /* double normal */
    }

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
        line-height: calc(0.875rem + 7px + 7px); /* 7px top & bottom padding */
        color: #a1b2d1;
        font-size: 0.75rem;
    }

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
            /* downsize the switch + ball */
            width: 2rem;
            height: 0.9375rem;
        }

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
                left: calc(100% - 0.9375rem);
            }

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball {
                width: 0.9375rem;
                height: 0.9375rem;
                border-radius: 0.9375rem;
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2018, 2019 , 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AccessSecretStorageDialog.mx_EncryptionCard {
        /* override some styles that we don't need */
        border: 0px none;
        -webkit-box-shadow: none;
                box-shadow: none;
        padding: 0px;
    }

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback::before {
                content: "";
                display: inline-block;
                vertical-align: bottom;
                width: 20px;
                height: 20px;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: 20px;
                        mask-size: 20px;
                -webkit-margin-end: 5px;
                        margin-inline-end: 5px;
            }

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
                color: #ff5b55;
            }

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid::before {
                    -webkit-mask-image: url(../../icons/error-solid.7cb2e4d.svg);
                            mask-image: url(../../icons/error-solid.7cb2e4d.svg);
                    background-color: #ff5b55;
                }

.mx_AccessSecretStorageDialog .mx_EncryptionCard_buttons {
        margin-top: var(--cpd-space-20x);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CreateCrossSigningDialog {
    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
    /* we end up when in there, but when in our own dialog we set our own width */
    /* so need to fix it to something sensible as otherwise we'd end up either */
    /* really wide or really narrow depending on the phase. I bet you wish you */
    /* never asked. */
    width: 560px;
}

.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
    }

.mx_CreateCrossSigningDialog .mx_Dialog_title {
    /* TODO: Consider setting this for all dialog titles. */
    margin-bottom: 1em;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Copyright 2018 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CreateSecretStorageDialog {
    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
    /* we end up when in there, but when in our own dialog we set our own width */
    /* so need to fix it to something sensible as otherwise we'd end up either */
    /* really wide or really narrow depending on the phase. I bet you wish you */
    /* never asked. */
    width: 560px;
}

.mx_CreateSecretStorageDialog.mx_SuccessDialog {
        padding: 56px; /* 80px from design - 24px wrapper padding */
    }

.mx_CreateSecretStorageDialog.mx_SuccessDialog .mx_Dialog_title {
            margin-bottom: 16px;
        }

.mx_CreateSecretStorageDialog .mx_SettingsFlag {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_CreateSecretStorageDialog .mx_SettingsFlag_label {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
        min-width: 0;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_CreateSecretStorageDialog .mx_ToggleSwitch {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        margin-left: 30px;
    }

.mx_CreateSecretStorageDialog details .mx_AccessibleButton {
        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
    }

.mx_CreateSecretStorageDialog .mx_Dialog_title {
    /* TODO: Consider setting this for all dialog titles. */
    margin-bottom: 1em;
}

.mx_CreateSecretStorageDialog_titleWithIcon::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    position: relative;
    top: 5px;
    background-color: #edf3ff;
}

.mx_CreateSecretStorageDialog_secureBackupTitle::before {
    -webkit-mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
            mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
}

.mx_CreateSecretStorageDialog_securePhraseTitle::before {
    -webkit-mask-image: url(../../img/feather-customised/secure-phrase.73fa1c2.svg);
            mask-image: url(../../img/feather-customised/secure-phrase.73fa1c2.svg);
}

.mx_CreateSecretStorageDialog_centeredTitle,
.mx_CreateSecretStorageDialog_centeredBody {
    text-align: center;
}

.mx_CreateSecretStorageDialog_primaryContainer {
    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
    padding-top: 20px;
}

.mx_CreateSecretStorageDialog_primaryContainer.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_CreateSecretStorageDialog_primaryContainer::after {
    content: "";
    clear: both;
    display: block;
}

.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
    margin-bottom: 16px;
    padding: 11px;
}

.mx_CreateSecretStorageDialog_optionTitle {
    color: #edf3ff;
    font-weight: var(--cpd-font-weight-semibold);
    font-size: 1.125rem;
    padding-bottom: 10px;
}

.mx_CreateSecretStorageDialog_optionIcon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    position: relative;
    top: 5px;
    background-color: #edf3ff;
}

.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
    -webkit-mask-image: url(../../img/feather-customised/secure-phrase.73fa1c2.svg);
            mask-image: url(../../img/feather-customised/secure-phrase.73fa1c2.svg);
}

.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
    -webkit-mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
            mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
}

.mx_CreateSecretStorageDialog_passPhraseContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
    margin-top: 0px;
}

.mx_CreateSecretStorageDialog_passPhraseMatch {
    width: 200px;
    margin-left: 20px;
}

.mx_CreateSecretStorageDialog_recoveryKeyContainer {
    display: inline-block;
}

.mx_CreateSecretStorageDialog_recoveryKey {
    font-weight: bold;
    text-align: center;
    padding: 20px;
    color: #888;
    background-color: #22262e;
    border-radius: 6px;
    word-spacing: 1em;
    margin-bottom: 20px;
}

.mx_CreateSecretStorageDialog_recoveryKey code {
        display: inline-block;
        width: 30rem;
    }

.mx_CreateSecretStorageDialog_recoveryKeyButtons {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
}

.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    white-space: nowrap;
}

.mx_CreateSecretStorageDialog_continueSpinner {
    margin-top: 33px;
    text-align: right;
}

.mx_CreateSecretStorageDialog_continueSpinner img {
    width: 20px;
    height: 20px;
}

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.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.655a613.svg);
                mask: url(../../img/e2e/lock-warning-filled.655a613.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background-color: #edf3ff;
        content: "";
        position: absolute;
        top: -6px;
        right: 0;
        bottom: 0;
        left: 0;
    }

.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
    margin-top: 36px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2018 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RestoreKeyBackupDialog_keyStatus {
    height: 30px;
}

.mx_RestoreKeyBackupDialog_primaryContainer {
    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
    padding: 20px;
}

.mx_RestoreKeyBackupDialog_passPhraseInput,
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
    width: 300px;
    border: 1px solid #0dbd8b;
    border-radius: 5px;
    padding: 10px;
}

.mx_RestoreKeyBackupDialog_content > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    min-height: 110px; /* Empirically measured */
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--header {
            padding-top: 12px;
            padding-bottom: 4px;
            min-width: 160px;
        }

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item {
            padding-top: 4px;
            padding-bottom: 4px;
        }

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item > .mx_GenericDropdownMenu_Option--label span:first-child {
                font-weight: normal;
            }

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-align: baseline;
                -ms-flex-align: baseline;
                    align-items: baseline;
            -ms-flex-line-pack: baseline;
                align-content: baseline;
            color: #edf3ff;
        }

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label span:not(:first-child) {
                margin-left: 4px;
                color: #edf3ff;
            }

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_divider {
        margin-top: 4px;
        margin-bottom: 4px;
    }

.mx_NetworkDropdown_addServer {
    font-weight: normal;
    font-size: 0.9375rem;
}

.mx_NetworkDropdown_removeServer {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #6f7882;
    border-radius: 8px;
    text-align: center;
    line-height: 16px;
    color: #edf3ff;
    margin-left: auto;
}

.mx_NetworkDropdown_removeServer::before {
        background-color: #edf3ff;
        content: "";
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 14px;
                mask-size: 14px;
        width: inherit;
        height: inherit;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
    }

.mx_NetworkDropdown_dialog .mx_Dialog {
    width: 45vw;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AccessibleButton {
    cursor: pointer;
}

.mx_AccessibleButton.mx_AccessibleButton_disabled {
        cursor: not-allowed;
    }

.mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_icon_primary,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_icon_primary_outline,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_primary,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_primary_outline,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_primary_sm,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link_accent,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link_inline,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_danger_inline,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_content_inline,
        .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_link_sm {
            opacity: 0.4;
        }

.mx_AccessibleButton.mx_AccessibleButton_hasKind {
        padding: 7px 18px;
        text-align: center;
        border-radius: 24px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        font: var(--cpd-font-body-md-semibold);
        border: none; /* override default <button /> styles */
        word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
    }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm,
        .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm,
        .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
            padding: 5px 12px;
        }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
            color: var(--cpd-color-text-on-solid-primary);
            background-color: var(--cpd-color-bg-action-primary-rest);
        }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
            color: var(--cpd-color-text-on-solid-primary);
            background-color: var(--cpd-color-bg-critical-primary);
        }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
            color: var(--cpd-color-text-primary);
            text-decoration: underline;
            font-weight: var(--cpd-font-weight-semibold);
        }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm {
            background-color: var(--cpd-color-bg-action-primary-rest);
        }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm::before {
                -webkit-mask-image: url(../../icons/check.aaad650.svg);
                        mask-image: url(../../icons/check.aaad650.svg);
            }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm {
            background-color: var(--cpd-color-bg-critical-primary);
        }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm::before {
                -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                        mask-image: url(../../icons/close.5ef7caf.svg);
            }

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_icon,
        .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_icon_primary,
        .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_icon_primary_outline {
            padding: 0;
            height: 32px;
            width: 32px;
        }

.mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary,
    .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
    .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_secondary {
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary,
    .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
        border: 1px solid var(--cpd-color-bg-action-primary-rest);
        color: var(--cpd-color-text-on-solid-primary);
        background-color: var(--cpd-color-bg-action-primary-rest);
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline {
        border: 1px solid var(--cpd-color-border-interactive-secondary);
        color: var(--cpd-color-text-primary);
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_secondary {
        color: var(--cpd-color-text-primary);
        text-decoration: underline;
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_secondary_content {
        color: #edf3ff;
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_danger {
        color: var(--cpd-color-text-on-solid-primary);
        background-color: var(--cpd-color-bg-critical-primary);
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
            color: var(--cpd-color-text-on-solid-primary);
            background-color: var(--cpd-color-bg-critical-primary);
        }

.mx_AccessibleButton.mx_AccessibleButton_kind_danger_outline {
        color: var(--cpd-color-text-critical-primary);
        background-color: transparent;
        border: 1px solid var(--cpd-color-border-critical-subtle);
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
            color: var(--cpd-color-text-disabled);
            border-color: var(--cpd-color-border-disabled);
        }

.mx_AccessibleButton.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
            color: var(--cpd-color-text-disabled);
            background-color: var(--cpd-color-bg-subtle-primary);
        }

.mx_AccessibleButton.mx_AccessibleButton_kind_link,
    .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_danger_inline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_content_inline {
        font-size: inherit;
        font-weight: var(--cpd-font-weight-semibold);
        line-height: inherit;
        padding: 0;
        text-decoration: underline;
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_link,
    .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline {
        color: var(--cpd-color-text-primary);
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_danger_inline {
        color: var(--cpd-color-text-critical-primary);
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_content_inline {
        color: #edf3ff;
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_link_inline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_danger_inline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_content_inline {
        display: inline;
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_confirm_sm,
    .mx_AccessibleButton.mx_AccessibleButton_kind_cancel_sm {
        padding: 0px;
        width: 16px;
        height: 16px;
        border-radius: 100%;
        position: relative;
        display: block;
    }

.mx_AccessibleButton.mx_AccessibleButton_kind_confirm_sm::before, .mx_AccessibleButton.mx_AccessibleButton_kind_cancel_sm::before {
            content: "";
            display: block;
            position: absolute;
            inset: 0;
            background-color: #ffffff;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: 80%;
                    mask-size: 80%;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2019 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CopyableText {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
}

.mx_CopyableText.mx_CopyableText_border {
        overflow: auto;
        border-radius: 5px;
        border: solid 1px #c8c8cd;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px 0 10px 10px;
    }

.mx_CopyableText .mx_CopyableText_copyButton {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        /* using em here to adapt to the local font size */
        width: 1em;
        height: 1em;
        cursor: pointer;
        padding-left: 12px;
        padding-right: 10px;
        display: block;
        /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
        position: sticky;
        right: 0;
        /* center to first line */
        top: 0.15em;
        background-color: #181b21;
    }

.mx_CopyableText .mx_CopyableText_copyButton::before {
            content: "";
            -webkit-mask-image: url(../../icons/copy.95010ef.svg);
                    mask-image: url(../../icons/copy.95010ef.svg);
            -webkit-mask-position: center center;
                    mask-position: center center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            background-color: #a1b2d1;
            width: 1em;
            height: 1em;
            display: block;
            background-repeat: no-repeat;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_desktopCapturerSourcePicker {
    overflow: hidden;
}

.mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        height: 500px;
        overflow: overlay;
    }

.mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source {
            width: 50%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

.mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_thumbnail {
                margin: 4px;
                padding: 4px;
                border-width: 2px;
                border-radius: 8px;
                border-style: solid;
                border-color: transparent;
            }

.mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_thumbnail.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
                .mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_thumbnail:hover,
                .mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_thumbnail:focus {
                    border-color: #0dbd8b;
                }

.mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_name {
                margin: 0 4px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DialPadBackspaceButton {
    position: relative;
    height: 28px;
    width: 28px;
}

.mx_DialPadBackspaceButton::before {
        /* force this element to appear on the DOM */
        content: "";

        background-color: #8d97a5;
        width: inherit;
        height: inherit;
        top: 0px;
        left: 0px;
        position: absolute;
        display: inline-block;
        vertical-align: middle;

        -webkit-mask-image: url(../../img/element-icons/call/delete.1f69b87.svg);

                mask-image: url(../../img/element-icons/call/delete.1f69b87.svg);
        -webkit-mask-position: 8px;
                mask-position: 8px;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Dropdown {
    position: relative;
    color: #edf3ff;
}

.mx_Dropdown_disabled {
    opacity: 0.3;
}

.mx_Dropdown_input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    font: var(--cpd-font-body-sm-regular);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.mx_Dropdown_input.mx_AccessibleButton_disabled {
    cursor: not-allowed;
}

.mx_Dropdown_input:focus {
    border-color: #238cf5;
}

/* Disable dropdown highlight on focus */

.mx_Dropdown_input.mx_AccessibleButton:focus {
    -webkit-filter: none;
            filter: none;
}

.mx_Dropdown_arrow {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    -webkit-mask: url(../../icons/chevron-down.9ea2899.svg);
            mask: url(../../icons/chevron-down.9ea2899.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 18px;
            mask-size: 18px;
    background: #edf3ff;
}

.mx_Dropdown_option {
    height: 35px;
    line-height: 2.1875rem;
    /* Overwrites the default padding for any li elements */
    padding: 0 8px;
}

.mx_Dropdown_input > .mx_Dropdown_option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_Dropdown_option div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx_Dropdown_option img,
.mx_Dropdown_option .mx_Dropdown_option_emoji {
    margin: 5px;
    width: 16px;
    vertical-align: middle;
}

.mx_Dropdown_option_emoji {
    font-size: 1rem;
    line-height: 1rem;
}

input.mx_Dropdown_option,
input.mx_Dropdown_option:focus {
    font-weight: normal;
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
    /* XXX: hack to prevent text box being too big and pushing */
    /* its parent out / overlapping the dropdown arrow. Only really */
    /* works in the Country dropdown. */
    width: 60%;
}

.mx_Dropdown_menu {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 100%;
    z-index: 2;
    margin: 0;
    padding: 0px;
    border-radius: 4px;
    border: 1px solid #238cf5;
    background-color: #181b21;
    max-height: 200px;
    overflow-y: auto;
}

.mx_Dropdown_menu .mx_Dropdown_option {
    height: auto;
    min-height: 35px;
}

ul.mx_Dropdown_menu li.mx_Dropdown_option {
    list-style: none;
}

.mx_Dropdown_menu .mx_Dropdown_option_highlight {
    background-color: #343a46;
}

.mx_Dropdown_searchPrompt {
    font-weight: normal;
    margin-left: 5px;
    margin-bottom: 5px;
}

/*
Copyright 2017-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EditableItemList {
    margin-top: 12px;
    margin-bottom: 10px;
}

.mx_EditableItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

.mx_EditableItem_delete {
    cursor: pointer;
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--cpd-color-bg-subtle-secondary);
}

.mx_EditableItem_delete:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_EditableItem_delete::before {
        content: "";
        width: 28px;
        height: 28px;
        left: 0;
        top: 0;
        position: absolute;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_EditableItem_delete {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    background-color: #ff5b55;
    -webkit-mask-size: 100%;
            mask-size: 100%;
}

.mx_EditableItem_email {
    vertical-align: middle;
}

.mx_EditableItem_promptText {
    margin-right: 10px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}

.mx_EditableItem_confirmBtn {
    margin-right: 5px;
}

.mx_EditableItem_item {
    -webkit-box-flex: 1;
        -ms-flex: auto 1 0px;
            flex: auto 1 0;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: calc(100% - 28px); /* leave space for the remove button */
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.mx_EditableItemList_label {
    margin-bottom: 5px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ErrorBoundary {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_ErrorBoundary_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 400px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_ErrorBoundary_body .mx_AccessibleButton {
        margin-top: 5px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ExternalLink {
    color: #0086e6;
}

.mx_ExternalLink_icon {
    display: inline-block;
    -webkit-mask-image: url(../../img/external-link.8197a77.svg);
            mask-image: url(../../img/external-link.8197a77.svg);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    width: 0.6875rem;
    height: 0.6875rem;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FacePile_more {
    /* Needed to calculate the offset on the face pile */
    --cpd-avatar-size: 28px;
    position: relative;
    border-radius: 100%;
    width: 28px;
    height: 28px;
    background-color: rgba(33,38,44, 0.9);
    display: inline-block;
}

.mx_FacePile_more::before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        height: inherit;
        width: inherit;
        background: #edf3ff;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
    }

.mx_FacePile_summary {
    margin-left: 12px;
    font: var(--cpd-font-body-md-regular);
    line-height: 1.5rem;
    color: #edf3ff;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* TODO: Consider unifying with general input styles in _light.pcss */

.mx_Field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    position: relative;
    margin: 1em 0;
    border-radius: 8px;
    -webkit-transition: border-color 0.25s;
    transition: border-color 0.25s;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
}

.mx_Field_prefix {
    border-right: 1px solid var(--cpd-color-border-interactive-secondary);
}

.mx_Field_postfix {
    border-left: 1px solid var(--cpd-color-border-interactive-secondary);
}

.mx_Field input,
.mx_Field select,
.mx_Field textarea {
    font: var(--cpd-font-body-md-regular);
    border: none;
    /* Even without a border here, we still need this avoid overlapping the rounded */
    /* corners on the field above. */
    border-radius: 8px;
    padding: 8px 9px;
    color: #edf3ff;
    background-color: #181b21;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
}

.mx_Field select {
    -moz-appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
}

/* Can't add pseudo-elements to a select directly, so we use its parent. */

.mx_Field_select::before {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 4px;
    width: 18px;
    height: 18px;
    -webkit-mask: url(../../icons/chevron-down.9ea2899.svg);
            mask: url(../../icons/chevron-down.9ea2899.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: #edf3ff;
    z-index: 1;
    pointer-events: none;
}

.mx_Field:focus-within {
    border-color: #238cf5;
}

.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
    outline: 0;
}

.mx_Field input::-webkit-input-placeholder, .mx_Field textarea::-webkit-input-placeholder {
    -webkit-transition: color 0.25s ease-in 0s;
    transition: color 0.25s ease-in 0s;
    color: transparent;
}

.mx_Field input::-moz-placeholder, .mx_Field textarea::-moz-placeholder {
    -moz-transition: color 0.25s ease-in 0s;
    transition: color 0.25s ease-in 0s;
    color: transparent;
}

.mx_Field input:-ms-input-placeholder, .mx_Field textarea:-ms-input-placeholder {
    -ms-transition: color 0.25s ease-in 0s;
    transition: color 0.25s ease-in 0s;
    color: transparent;
}

.mx_Field input::-ms-input-placeholder, .mx_Field textarea::-ms-input-placeholder {
    -ms-transition: color 0.25s ease-in 0s;
    transition: color 0.25s ease-in 0s;
    color: transparent;
}

.mx_Field input::placeholder,
.mx_Field textarea::placeholder {
    -webkit-transition: color 0.25s ease-in 0s;
    transition: color 0.25s ease-in 0s;
    color: transparent;
}

.mx_Field input:placeholder-shown:focus::-webkit-input-placeholder, .mx_Field textarea:placeholder-shown:focus::-webkit-input-placeholder, .mx_Field.mx_Field_placeholderIsHint input::-webkit-input-placeholder {
    -webkit-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}

.mx_Field input:placeholder-shown:focus::-moz-placeholder, .mx_Field textarea:placeholder-shown:focus::-moz-placeholder, .mx_Field.mx_Field_placeholderIsHint input::-moz-placeholder {
    -moz-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}

.mx_Field input:placeholder-shown:focus:-ms-input-placeholder, .mx_Field textarea:placeholder-shown:focus:-ms-input-placeholder, .mx_Field.mx_Field_placeholderIsHint input:-ms-input-placeholder {
    -ms-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}

.mx_Field input:placeholder-shown:focus::-ms-input-placeholder, .mx_Field textarea:placeholder-shown:focus::-ms-input-placeholder, .mx_Field.mx_Field_placeholderIsHint input::-ms-input-placeholder {
    -ms-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}

.mx_Field input:-moz-placeholder-shown:focus::placeholder, .mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
    -moz-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}

.mx_Field input:-ms-input-placeholder:focus::placeholder, .mx_Field textarea:-ms-input-placeholder:focus::placeholder {
    -ms-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}

.mx_Field input:placeholder-shown:focus::placeholder,
.mx_Field textarea:placeholder-shown:focus::placeholder,
.mx_Field.mx_Field_placeholderIsHint input::placeholder {
    -webkit-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: #888;
}

.mx_Field label {
    -webkit-transition:
        font-size 0.25s ease-out 0.1s,
        color 0.25s ease-out 0.1s,
        background-color 0.25s ease-out 0.1s,
        -webkit-transform 0.25s ease-out 0.1s;
    transition:
        font-size 0.25s ease-out 0.1s,
        color 0.25s ease-out 0.1s,
        background-color 0.25s ease-out 0.1s,
        -webkit-transform 0.25s ease-out 0.1s;
    transition:
        font-size 0.25s ease-out 0.1s,
        color 0.25s ease-out 0.1s,
        transform 0.25s ease-out 0.1s,
        background-color 0.25s ease-out 0.1s;
    transition:
        font-size 0.25s ease-out 0.1s,
        color 0.25s ease-out 0.1s,
        transform 0.25s ease-out 0.1s,
        background-color 0.25s ease-out 0.1s,
        -webkit-transform 0.25s ease-out 0.1s;
    background-color: transparent;
    font: var(--cpd-font-body-md-regular);
    color: var(--cpd-color-text-secondary);
    -webkit-transform: translateY(0);
            transform: translateY(0);
    position: absolute;
    left: 0px;
    margin: 7px 8px;
    padding: 2px;
    pointer-events: none; /* Allow clicks to fall through to the input */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); /* 100% of parent minus margin and padding */
}

.mx_Field input:not(:-moz-placeholder-shown) + label, .mx_Field textarea:not(:-moz-placeholder-shown) + label {
    -moz-transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        transform 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s;
    transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        transform 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s;
    font-size: 0.625rem;
    transform: translateY(-13px);
    padding: 0 2px;
    background-color: #181b21;
    pointer-events: initial;
}

.mx_Field input:not(:-ms-input-placeholder) + label, .mx_Field textarea:not(:-ms-input-placeholder) + label {
    -ms-transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        transform 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s;
    transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        transform 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s;
    font-size: 0.625rem;
    transform: translateY(-13px);
    padding: 0 2px;
    background-color: #181b21;
    pointer-events: initial;
}

.mx_Field_labelAlwaysTopLeft label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + label {
    -webkit-transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s,
        -webkit-transform 0.25s ease-out 0s;
    transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s,
        -webkit-transform 0.25s ease-out 0s;
    transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        transform 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s;
    transition:
        font-size 0.25s ease-out 0s,
        color 0.25s ease-out 0s,
        transform 0.25s ease-out 0s,
        background-color 0.25s ease-out 0s,
        -webkit-transform 0.25s ease-out 0s;
    font-size: 0.625rem;
    -webkit-transform: translateY(-13px);
            transform: translateY(-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: #238cf5;
}

.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: #0dbd8b;
    }

.mx_Field_valid.mx_Field label,
    .mx_Field_valid.mx_Field:focus-within label {
        color: #0dbd8b;
    }

.mx_Field_invalid.mx_Field,
    .mx_Field_invalid.mx_Field:focus-within {
        border-color: #ff5b55;
    }

.mx_Field_invalid.mx_Field label,
    .mx_Field_invalid.mx_Field:focus-within label {
        color: #ff5b55;
    }

/* Customise other components when placed inside a Field */

.mx_Field .mx_Dropdown_input {
    border: medium none currentcolor;
    border: initial;
    border-radius: 0;
    border-radius: initial;
}

.mx_Field .mx_CountryDropdown {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_GenericEventListSummary {
    position: relative;
}

.mx_GenericEventListSummary .mx_GenericEventListSummary_avatars {
        margin-right: 8px;
    }

.mx_GenericEventListSummary .mx_GenericEventListSummary_spacer {
        border-bottom: 1px solid #000000;
        margin-left: 63px;
        line-height: 1.875rem; /* TODO: Use a variable */
    }

.mx_IRCLayout .mx_GenericEventListSummary .mx_GenericEventListSummary_spacer {
            line-height: var(--line-height);
        }

.mx_GenericEventListSummary .mx_GenericEventListSummary_toggle {
        /* We reuse a title cased translation */
        text-transform: lowercase;
    }

.mx_GenericEventListSummary[data-layout="irc"] .mx_GenericEventListSummary_toggle, .mx_GenericEventListSummary[data-layout="group"] .mx_GenericEventListSummary_toggle {
            float: right;
            margin-inline: 0 10px;
        }

.mx_GenericEventListSummary[data-layout="group"] {
        margin-top: 8px;
    }

.mx_GenericEventListSummary[data-layout="bubble"] {
        --maxWidth: 70%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-left: calc(var(--avatarSize) + var(--gutterSize));

        /* ideally we'd use display=contents here for the layout to all work regardless of the *ELS but */
    }

.mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle {
            margin-block: 0;
        }

.mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle[aria-expanded="false"] {
                -webkit-box-ordinal-group: 10;
                    -ms-flex-order: 9;
                        order: 9; /* TODO: Remove */
            }

.mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle[aria-expanded="true"] {
                -webkit-margin-start: auto;
                        margin-inline-start: auto; /* reduce clickable area */
                -webkit-margin-end: var(--EventTile_bubble-margin-inline-end);
                        margin-inline-end: var(--EventTile_bubble-margin-inline-end); /* as the parent has zero margin */
            }

.mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_spacer {
            display: none;
        }

.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-column-gap: 5px;
               -moz-column-gap: 5px;
                    column-gap: 5px;
        }

/* that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. */

.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            margin: 0;
        }

.mx_GenericEventListSummary[data-layout="bubble"]::after {
            content: "";
            clear: both;
        }

.mx_GenericEventListSummary[data-layout="bubble"]:hover::before {
                background: transparent;
            }

.mx_MatrixChat_useCompactLayout .mx_GenericEventListSummary {
        font-size: 0.8125rem;
        margin-top: 4px;
    }

.mx_MatrixChat_useCompactLayout .mx_GenericEventListSummary .mx_EventTile_line {
            line-height: 1.25;
        }

.mx_MatrixChat_useCompactLayout .mx_GenericEventListSummary .mx_GenericEventListSummary_spacer {
            line-height: 1.375;
        }

.mx_MatrixChat_useCompactLayout .mx_GenericEventListSummary .mx_TextualEvent.mx_GenericEventListSummary_summary {
            font: var(--cpd-font-body-sm-regular);
        }

/* Make all state events one order smaller than the other events */

.mx_GenericEventListSummary .mx_EventTile {
        font: var(--cpd-font-body-sm-regular);
        color: #edf3ff;
    }

.mx_GenericEventListSummary_unstyledList {
    list-style: none;
    padding: 0;
}

.mx_TextualEvent.mx_GenericEventListSummary_summary {
    font: var(--cpd-font-body-sm-regular);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    color: #edf3ff;
}

.mx_GenericEventListSummary_avatars {
    display: inline-block;
    line-height: 0.75rem;
}

.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
        margin-right: -4px;
        cursor: pointer;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

:root {
    --image-view-panel-height: 68px;
}

.mx_ImageView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_ImageView_image_wrapper {
    pointer-events: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
    overflow: hidden;
}

.mx_ImageView_image {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mx_ImageView_image.mx_ImageView_image_animating {
        -webkit-transition: -webkit-transform 200ms ease 0s;
        transition: -webkit-transform 200ms ease 0s;
        transition: transform 200ms ease 0s;
        transition: transform 200ms ease 0s, -webkit-transform 200ms ease 0s;
    }

.mx_ImageView_image.mx_ImageView_image_animatingLoading {
        -webkit-transition: -webkit-transform 300ms ease 0s;
        transition: -webkit-transform 300ms ease 0s;
        transition: transform 300ms ease 0s;
        transition: transform 300ms ease 0s, -webkit-transform 300ms ease 0s;
    }

.mx_ImageView_panel {
    width: 100%;
    height: 68px;
    height: var(--image-view-panel-height);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-animation-name: mx_ImageView_panel_keyframes;
            animation-name: mx_ImageView_panel_keyframes;
    -webkit-animation-duration: 300ms;
            animation-duration: 300ms;
}

.mx_ImageView_info_wrapper {
    pointer-events: initial;
    padding-left: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ffffff;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
}

.mx_ImageView_info {
    padding-left: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_ImageView_info_sender {
    font-weight: bold;
}

.mx_ImageView_title {
    color: #ffffff;
    font-size: 0.75rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    text-align: center;
}

.mx_ImageView_toolbar {
    padding-right: 16px;
    pointer-events: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: calc(24px - (32px - 22px));
}

.mx_ImageView_button {
    padding: calc((32px - 22px) / 2);
    display: block;
}

.mx_ImageView_button::before {
        content: "";
        height: 22px;
        width: 22px;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        display: block;
        background-color: var(--cpd-color-icon-tertiary);
    }

.mx_ImageView_button_rotateCW::before {
    -webkit-mask-image: url(../../img/image-view/rotate-cw.22a8e66.svg);
            mask-image: url(../../img/image-view/rotate-cw.22a8e66.svg);
}

.mx_ImageView_button_rotateCCW::before {
    -webkit-mask-image: url(../../img/image-view/rotate-ccw.bc1b65b.svg);
            mask-image: url(../../img/image-view/rotate-ccw.bc1b65b.svg);
}

.mx_ImageView_button_zoomOut::before {
    -webkit-mask-image: url(../../img/image-view/zoom-out.4a741a1.svg);
            mask-image: url(../../img/image-view/zoom-out.4a741a1.svg);
}

.mx_ImageView_button_zoomIn::before {
    -webkit-mask-image: url(../../img/image-view/zoom-in.714cc54.svg);
            mask-image: url(../../img/image-view/zoom-in.714cc54.svg);
}

.mx_ImageView_button_download::before {
    -webkit-mask-image: url(../../icons/download.364c774.svg);
            mask-image: url(../../icons/download.364c774.svg);
}

.mx_ImageView_button_more::before {
    -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
            mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
    -webkit-mask-size: 28px;
            mask-size: 28px;
}

.mx_ImageView_button_close {
    padding: calc(32px - 32px);
    border-radius: 100%;
    background: #21262c;
}

/* same on all themes */

.mx_ImageView_button_close::before {
        width: 32px;
        height: 32px;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-size: 24px;
                mask-size: 24px;
    }

@media (prefers-reduced-motion) {
    .mx_ImageView_image_animating {
        -webkit-transition: none !important;
        transition: none !important;
    }

    .mx_ImageView_image_animatingLoading {
        -webkit-transition: none !important;
        transition: none !important;
    }
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InfoTooltip_icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.mx_InfoTooltip_icon::before {
    display: inline-block;
    background-color: #a1b2d1;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
            mask-size: 16px;
    width: 16px;
    height: 16px;
    -webkit-mask-position: center;
            mask-position: center;
    content: "";
    vertical-align: middle;
}

.mx_InfoTooltip_icon_info::before {
    -webkit-mask-image: url(../../icons/info.d42d785.svg);
            mask-image: url(../../icons/info.d42d785.svg);
}

.mx_InfoTooltip_icon_warning::before {
    -webkit-mask-image: url(../../icons/error-solid.7cb2e4d.svg);
            mask-image: url(../../icons/error-solid.7cb2e4d.svg);
}

/*
Copyright 2017-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InlineSpinner {
    display: inline;
}

.mx_InlineSpinner img,
.mx_InlineSpinner_icon {
    margin: 0px 6px;
    vertical-align: -3px;
}

.mx_InlineSpinner_icon {
    display: inline-block !important; /* Override regular mx_Spinner_icon */
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InteractiveTooltip_wrapper {
    position: fixed;
    z-index: 3999;
}

.mx_InteractiveTooltip {
    border-radius: 8px;
    background-color: #181b21;
    color: #edf3ff;
    position: absolute;
    z-index: 5001;
    -webkit-box-shadow:
        0 24px 8px rgb(17 17 26 / 4%),
        0 8px 32px rgb(17 17 26 / 4%);
            box-shadow:
        0 24px 8px rgb(17 17 26 / 4%),
        0 8px 32px rgb(17 17 26 / 4%);
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
    top: 10px; /* 8px chevron + 2px spacing */
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
    left: 10px; /* 8px chevron + 2px spacing */
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
    right: 10px; /* 8px chevron + 2px spacing */
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
    bottom: 10px; /* 8px chevron + 2px spacing */
}

.mx_InteractiveTooltip_chevron_top {
    position: absolute;
    left: calc(50% - 8px);
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #181b21;
    border-right: 8px solid transparent;
}

/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */

/* by Sebastiano Guerriero (@guerriero_se) */

@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
    .mx_InteractiveTooltip_chevron_top {
        height: 16px;
        width: 16px;
        background-color: inherit;
        border: none;
        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
        border-radius: 0 0 0 3px;
        top: calc(-8px / 1.414); /* sqrt(2) because of rotation */
    }
}

.mx_InteractiveTooltip_chevron_bottom {
    position: absolute;
    left: calc(50% - 8px);
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid #181b21;
    border-right: 8px solid transparent;
}

/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */

/* by Sebastiano Guerriero (@guerriero_se) */

@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
    .mx_InteractiveTooltip_chevron_bottom {
        height: 16px;
        width: 16px;
        background-color: inherit;
        border: none;
        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        border-radius: 0 0 0 3px;
        bottom: calc(-8px / 1.414); /* sqrt(2) because of rotation */
    }
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InviteReason {
    position: relative;
    margin-bottom: 1em;
}

.mx_InviteReason .mx_InviteReason_reason {
        visibility: visible;
    }

.mx_InviteReason .mx_InviteReason_view {
        display: none;
        position: absolute;
        inset: 0;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        cursor: pointer;
        color: #edf3ff;
    }

.mx_InviteReason .mx_InviteReason_view::before {
            content: "";
            margin-right: 8px;
            background-color: #edf3ff;
            -webkit-mask-image: url(../../img/element-icons/eye.e715558.svg);
                    mask-image: url(../../img/element-icons/eye.e715558.svg);
            display: inline-block;
            width: 18px;
            height: 14px;
        }

.mx_InviteReason_hidden .mx_InviteReason_reason {
        visibility: hidden;
    }

.mx_InviteReason_hidden .mx_InviteReason_view {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LabelledCheckbox {
    margin-top: var(--cpd-space-2x);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LanguageDropdown .mx_Dropdown_option > div {
        text-transform: capitalize;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MiniAvatarUploader {
    position: relative;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}

.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator {
        position: absolute;

        height: 26px;
        width: 26px;

        right: -6px;
        bottom: -6px;

        background-color: #181b21;
        border-radius: 50%;
        z-index: 1;

        line-height: 0;
    }

.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator .mx_MiniAvatarUploader_cameraIcon {
            height: 100%;
            width: 100%;

            background-color: #edf3ff;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-image: url(../../icons/take-photo-solid.f40d394.svg);
                    mask-image: url(../../icons/take-photo-solid.f40d394.svg);
            -webkit-mask-size: 16px;
                    mask-size: 16px;
            z-index: 2;
        }

.mx_MiniAvatarUploader_input {
    display: none;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Pill {
    padding: 0.0625rem 0.4em 0.0625rem 0.4em;
    line-height: 1.0625rem;
    border-radius: 1rem;
    vertical-align: text-top;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;

    color: var(--cpd-color-text-on-solid-primary) !important; /* To override .markdown-body */
    background-color: var(--cpd-color-bg-action-primary-rest) !important; /* To override .markdown-body */

    /* We don't want to indicate clickability */
}

.mx_Pill > * {
        pointer-events: none;
    }

.mx_Pill.mx_UserPill_me,
    .mx_Pill.mx_AtRoomPill,
    .mx_Pill.mx_KeywordPill {
        background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
    }

.mx_Pill:hover {
        background-color: var(--cpd-color-bg-action-primary-hovered) !important; /* To override .markdown-body */
    }

.mx_Pill:active {
        background-color: var(--cpd-color-bg-action-primary-pressed) !important; /* To override .markdown-body */
    }

.mx_Pill.mx_UserPill_me:hover {
        background-color: var(
            --cpd-color-bg-critical-hovered
        ) !important; /* To override .markdown-body | same on both themes */
    }

.mx_Pill.mx_AtRoomPill:hover,
    .mx_Pill.mx_KeywordPill:hover {
        background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
        cursor: inherit;
    }

.mx_Pill::before,
    .mx_Pill .mx_BaseAvatar {
        -webkit-margin-start: -0.3em;
                margin-inline-start: -0.3em; /* Otherwise the gap is too large */
        -webkit-margin-end: 0.2em;
                margin-inline-end: 0.2em;
        min-width: 1rem; /* ensure the avatar is not compressed */
    }

.mx_Pill .mx_Pill_text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

a.mx_Pill {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-decoration: none !important; /* To override .markdown-body */
    }

.mx_Pill .mx_Pill_LinkIcon {
        background-color: #0467dd;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        color: #181b21;
        height: 16px;
        padding: 1px;
        width: 16px;
        border-radius: 50%;
    }

.mx_Pill .mx_Pill_UserIcon {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        color: #edf3ff;
        height: 16px;
        width: 16px;
    }

.mx_Pill.mx_SpacePill {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        padding-left: 4px;
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PowerSelector {
    width: 100%;
}

.mx_PowerSelector .mx_Field select,
.mx_PowerSelector .mx_Field input {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

progress.mx_ProgressBar {
    height: 6px;
    width: 60px;
    overflow: hidden;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);

    border-radius: 6px;
}

progress.mx_ProgressBar::-moz-progress-bar {
        border-radius: 6px;
    }

progress.mx_ProgressBar::-webkit-progress-bar,
    progress.mx_ProgressBar::-webkit-progress-value {
        border-radius: 6px;
    }

progress.mx_ProgressBar {
    color: var(--cpd-color-icon-accent-tertiary);
}

progress.mx_ProgressBar::-moz-progress-bar {
        background-color: var(--cpd-color-icon-accent-tertiary);
    }

progress.mx_ProgressBar::-webkit-progress-value {
        background-color: var(--cpd-color-icon-accent-tertiary);
    }

progress.mx_ProgressBar {
    background-color: #21262c;
}

progress.mx_ProgressBar::-webkit-progress-bar {
        background-color: #21262c;
    }

progress.mx_ProgressBar::-webkit-progress-value {
        -webkit-transition: width 1s;
        transition: width 1s;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_QRCode img {
        border-radius: 8px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2018 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ReplyChain {
    margin: 0; /* Reset default blockquote margin */
    padding-left: 10px;
    border-left: 2px solid var(--username-color);
    border-radius: 2px;
}

.mx_ReplyChain .mx_ReplyChain_show.mx_AccessibleButton_kind_link_inline {
            white-space: nowrap; /* Enforce 'In reply to' to be a single line */
            color: #edf3ff;
            -webkit-transition: color ease 0.15s;
            transition: color ease 0.15s;
            font-weight: var(--cpd-font-weight-regular);
            text-decoration: inherit;
        }

.mx_ReplyChain .mx_ReplyChain_show.mx_AccessibleButton_kind_link_inline:hover {
                color: #edf3ff;
            }

.mx_ReplyChain.mx_ReplyChain_color1 {
        --username-color: var(--cpd-color-text-decorative-1);
    }

.mx_ReplyChain.mx_ReplyChain_color2 {
        --username-color: var(--cpd-color-text-decorative-2);
    }

.mx_ReplyChain.mx_ReplyChain_color3 {
        --username-color: var(--cpd-color-text-decorative-3);
    }

.mx_ReplyChain.mx_ReplyChain_color4 {
        --username-color: var(--cpd-color-text-decorative-4);
    }

.mx_ReplyChain.mx_ReplyChain_color5 {
        --username-color: var(--cpd-color-text-decorative-5);
    }

.mx_ReplyChain.mx_ReplyChain_color6 {
        --username-color: var(--cpd-color-text-decorative-6);
    }

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ResizeHandle {
    cursor: row-resize;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    z-index: 100;
}

.mx_ResizeHandle.mx_ResizeHandle--horizontal {
        margin: 0 -5px;
        padding: 0 5px;
        cursor: col-resize;
    }

.mx_ResizeHandle.mx_ResizeHandle--horizontal > div {
            width: 1px;
            height: 100%;
        }

.mx_ResizeHandle.mx_ResizeHandle--vertical {
        margin: -5px 0;
        padding: 5px 0;
    }

.mx_ResizeHandle.mx_ResizeHandle--vertical > div {
            height: 1px;
        }

/* XXX: bleurgh, what is this? These classes totally break the component */

/* naming scheme; it's completely unclear where or how they're being used */

/* --Matthew */

.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/172
    transform: skewX(-14deg);
    display: inline-block;
    */
}

.mx_Markdown_CODE {
    padding: 0.2em 0;
    margin: 0;
    font-size: 85%;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 3px;
}

.mx_Markdown_HR {
    display: block;
    background: #e9e9e9;
}

.mx_Markdown_STRIKETHROUGH {
    text-decoration: line-through;
}

.mx_Emoji {
    /* Should be 1.8rem for our default message bodies, and scale with the */
    /* surrounding text */
    font-size: max(1.125rem, 1em);
    vertical-align: bottom;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomAliasField {
    /* if parent is a flex container, this allows the */
    /* width to be as wide as needed, and not 100% */
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    min-width: 0;
    max-width: 100%;
}

.mx_RoomAliasField input {
        width: 150px;
        padding-left: 0;
        padding-right: 0;
    }

.mx_RoomAliasField input::-webkit-input-placeholder {
        color: #888;
        font-weight: normal;
    }

.mx_RoomAliasField input::-moz-placeholder {
        color: #888;
        font-weight: normal;
    }

.mx_RoomAliasField input:-ms-input-placeholder {
        color: #888;
        font-weight: normal;
    }

.mx_RoomAliasField input::-ms-input-placeholder {
        color: #888;
        font-weight: normal;
    }

.mx_RoomAliasField input::placeholder {
        color: #888;
        font-weight: normal;
    }

.mx_RoomAliasField .mx_Field_prefix,
    .mx_RoomAliasField .mx_Field_postfix {
        color: #888;
        border-left: none;
        border-right: none;
        font-weight: var(--cpd-font-weight-semibold);
        padding: 9px 10px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }

.mx_RoomAliasField .mx_Field_postfix {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        /* this allows the domain name to show */
        /* as long as it doesn't make the input shrink */
        /* if it's too big, it shows an ellipsis */
        /* 180: 28 for prefix, 152 for input */
        max-width: calc(100% - 180px);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SSOButtons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_SSOButtons .mx_SSOButtons_row + .mx_SSOButtons_row {
            margin-top: 16px;
        }

.mx_SSOButtons .mx_SSOButton {
        position: relative;
        width: 100%;
        padding: 7px 32px;
        text-align: center;
        border-radius: 8px;
        display: inline-block;
        font: var(--cpd-font-body-md-semibold);
        border: 1px solid #e7e7e7;
        color: #edf3ff;
    }

.mx_SSOButtons .mx_SSOButton > img {
            -o-object-fit: contain;
               object-fit: contain;
            position: absolute;
            left: 8px;
            top: 4px;
        }

.mx_SSOButtons .mx_SSOButton:hover {
        background-color: #fff;
    }

.mx_SSOButtons .mx_SSOButton_default {
        color: #0dbd8b;
        background-color: transparent;
        border-color: #0dbd8b;
    }

.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
        color: #ffffff;
        background-color: #0dbd8b;
    }

.mx_SSOButtons .mx_SSOButton_mini {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 50px; /* 48px + 1px border on all sides */
        height: 50px; /* 48px + 1px border on all sides */
        min-width: 50px; /* prevent crushing by the flexbox */
        padding: 12px;
    }

.mx_SSOButtons .mx_SSOButton_mini > img {
            left: 12px;
            top: 12px;
        }

.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
            margin-left: 16px;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SearchWarning {
    text-align: center;
    padding: 0 16px;
}

.mx_SearchWarning > * {
        vertical-align: middle;
    }

.mx_SearchWarning > img {
        margin-right: 8px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ServerPicker {
    margin-bottom: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(141, 151, 165, 0.2);
    display: grid;
    grid-template-columns: auto -webkit-min-content;
    grid-template-columns: auto min-content;
    grid-template-rows: auto auto auto;
    font: var(--cpd-font-body-md-regular);
}

.mx_ServerPicker > h2 {
        font-weight: var(--cpd-font-weight-semibold);
        margin: 0 0 20px;
        grid-column: 1;
        grid-row: 1;
    }

.mx_ServerPicker .mx_ServerPicker_help {
        width: 20px;
        height: 20px;
        background-color: var(--cpd-color-icon-tertiary);
        border-radius: 10px;
        grid-column: 2;
        grid-row: 1;
        margin-left: auto;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        position: relative;
    }

.mx_ServerPicker .mx_ServerPicker_help::before {
            content: "";
            width: 24px;
            height: 24px;
            position: absolute;
            top: -2px;
            left: -2px;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-image: url(../../img/element-icons/i.cf33278.svg);
                    mask-image: url(../../img/element-icons/i.cf33278.svg);
            background: #ffffff;
        }

.mx_ServerPicker .mx_ServerPicker_server {
        color: #2e2f32;
        grid-column: 1;
        grid-row: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 8px;
    }

.mx_ServerPicker .mx_ServerPicker_change {
        grid-column: 2;
        grid-row: 2;
    }

.mx_ServerPicker .mx_ServerPicker_desc {
        margin-top: 4px;
        color: #edf3ff;
        grid-column: 1 / 2;
        grid-row: 3;
    }

.mx_ServerPicker_helpDialog .mx_Dialog_content {
        width: 456px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsFlag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 4px;
    width: 100%;
}

.mx_SettingsFlag .mx_ToggleSwitch {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }

.mx_SettingsFlag.mx_SettingsFlag_toggleInFront .mx_ToggleSwitch {
            display: inline-block;
            vertical-align: middle;
            margin-right: 8px;
        }

.mx_SettingsFlag.mx_SettingsFlag_toggleInFront .mx_SettingsFlag_label {
            display: inline-block;
            vertical-align: middle;
        }

.mx_SettingsFlag_label {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: #edf3ff;
    padding-right: 10px;
    padding-top: 4px;
}

.mx_SettingsFlag_microcopy {
    margin-top: 4px;
    font: var(--cpd-font-body-sm-regular);
    color: #edf3ff;

    /* Support code/pre elements in settings flag descriptions */
}

.mx_SettingsFlag_microcopy pre,
    .mx_SettingsFlag_microcopy code {
        font-family: "Inconsolata", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
        font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
        background-color: rgba(0, 0, 0, 0.04);
    }

.mx_SettingsFlag_microcopy .mx_SettingsTab_microcopy_warning::before {
        content: "⚠️ ";
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Spinner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.mx_MatrixChat_middlePanel .mx_Spinner {
    height: auto;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
    }
    to {
        -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
    }
    to {
        -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
    }
}

.mx_Spinner_icon {
    background-color: #6f7882;
    -webkit-mask: url(../../img/spinner/spinner-background.0fe37e1.svg);
            mask: url(../../img/spinner/spinner-background.0fe37e1.svg);
    -webkit-mask-size: 100%;
            mask-size: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    width: 100%;
    height: 100%;
}

.mx_Spinner_icon::before {
        background-color: #edf3ff;
        -webkit-mask: url(../../img/spinner/spinner-foreground.9b87205.svg);
                mask: url(../../img/spinner/spinner-foreground.9b87205.svg);
        -webkit-mask-size: 100%;
                mask-size: 100%;

        width: 100%;
        height: 100%;

        content: "";
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-animation: 1s linear spin infinite;

                animation: 1s linear spin infinite;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/**
* This component expects the parent to specify a positive padding and
* width
*/

.mx_StyledRadioButton {
    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.mx_StyledRadioButton > .mx_StyledRadioButton_content {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        margin-left: 8px;
        margin-right: 8px;
    }

.mx_StyledRadioButton .mx_StyledRadioButton_spacer {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;

        height: 1rem;
        width: 1rem;
    }

.mx_StyledRadioButton input[type="radio"] {
        /* Remove the OS's representation */
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }

.mx_StyledRadioButton input[type="radio"] + div {
            -ms-flex-negative: 0;
                flex-shrink: 0;
            -webkit-box-flex: 0;
                -ms-flex-positive: 0;
                    flex-grow: 0;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;

            -webkit-box-sizing: border-box;

                    box-sizing: border-box;
            height: 1rem;
            width: 1rem;
            margin-left: 2px; /* For the highlight on focus */

            border: 1px solid var(--cpd-color-border-interactive-primary);
            border-radius: 1rem;
        }

.mx_StyledRadioButton input[type="radio"] + div > div {
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;

                height: 0.5rem;
                width: 0.5rem;

                border-radius: 0.5rem;
            }

.mx_StyledRadioButton input[type="radio"]:focus-visible + div {
                outline-width: 2px;
                outline-style: solid;
                outline-color: Highlight;
            }

/* WebKit gets its native focus styles. */

@media (-webkit-min-device-pixel-ratio: 0) {

.mx_StyledRadioButton input[type="radio"]:focus-visible + div {
        outline-color: -webkit-focus-ring-color;
        outline-style: auto;
            }
    }

.mx_StyledRadioButton input[type="radio"]:checked + div {
                border-color: var(--cpd-color-bg-accent-rest);
            }

.mx_StyledRadioButton input[type="radio"]:checked + div > div {
                    background: var(--cpd-color-bg-accent-rest);
                }

.mx_StyledRadioButton input[type="radio"]:disabled + div,
            .mx_StyledRadioButton input[type="radio"]:disabled + div + span {
                opacity: 0.5;
                cursor: not-allowed;
            }

.mx_StyledRadioButton input[type="radio"]:disabled + div {
                border-color: var(--cpd-color-border-interactive-primary);
            }

.mx_StyledRadioButton input[type="radio"]:checked:disabled + div > div {
                background-color: var(--cpd-color-border-interactive-primary);
            }

.mx_StyledRadioButton .mx_StyledRadioButton_innerLabel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        top: 4px;
    }

.mx_StyledRadioButton_outlined {
    border: 1px solid #181b21;
    border-radius: 8px;
}

.mx_StyledRadioButton_checked {
    border-color: var(--cpd-color-bg-accent-rest);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SyntaxHighlight {
    /* inhibit hljs styling */
    background: none !important;
    color: #c8c8cd !important;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_TagComposer .mx_TagComposer_input {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton {
            min-width: 70px;
            padding: 0 8px; /* override from button styles */
            -ms-flex-item-align: stretch;
                align-self: stretch; /* override default settingstab style */
        }

.mx_TagComposer .mx_TagComposer_input .mx_Field,
        .mx_TagComposer .mx_TagComposer_input .mx_Field input,
        .mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton {
            /* So they look related to each other by feeling the same */
            border-radius: 8px;
        }

.mx_TagComposer .mx_TagComposer_tags {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin-top: 12px; /* this plus 12px from the tags makes 24px from the input */
    }

.mx_TagComposer .mx_Tag {
        margin-right: 12px;
        margin-top: 12px;
    }

.mx_Tag {
    font-size: 0.9375rem;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    gap: 8px;
    padding: 8px;
    border-radius: 8px;

    color: #edf3ff;
    background: #6f7882;
}

.mx_Tag > svg:first-child {
        width: 1em;
        color: #edf3ff;
        -webkit-transform: scale(1.25);
                transform: scale(1.25);
        -webkit-transform-origin: center;
                transform-origin: center;
    }

.mx_Tag .mx_Tag_delete {
        border-radius: 50%;
        text-align: center;
        width: 1.066666em; /* 16px; */
        height: 1.066666em;
        line-height: 1em;
        color: #edf3ff;
        background: #21262c;
        position: relative;
    }

.mx_Tag .mx_Tag_delete svg {
            width: 16px;
            height: 16px;
        }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_TextWithTooltip_target {
    display: inline;
}

.mx_TextWithTooltip_tooltip {
    display: none;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ToggleSwitch {
    --ToggleSwitch-min-width: 2.75rem;

    -webkit-transition:
        background-color 0.2s ease-out 0.1s,
        border-color 0.2s ease-out 0.1s;

    transition:
        background-color 0.2s ease-out 0.1s,
        border-color 0.2s ease-out 0.1s;

    width: 2.75rem;
    height: 1.25rem;
    border-radius: 1.5rem;
    padding: 2px;

    background-color: var(--cpd-color-bg-canvas-disabled);
    border: 1px solid var(--cpd-color-border-disabled);
    cursor: not-allowed;
}

.mx_ToggleSwitch.mx_ToggleSwitch_enabled {
        cursor: pointer;
        background-color: var(--cpd-color-bg-canvas-default);
        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
    }

.mx_ToggleSwitch.mx_ToggleSwitch_enabled.mx_ToggleSwitch_on {
            background-color: var(--cpd-color-bg-accent-rest);
            border-color: var(--cpd-color-bg-accent-rest);
        }

.mx_ToggleSwitch.mx_ToggleSwitch_enabled > .mx_ToggleSwitch_ball {
            background-color: var(--cpd-color-icon-secondary);
        }

.mx_ToggleSwitch.mx_ToggleSwitch_on {
        background-color: var(--cpd-color-bg-action-primary-disabled);
        border-color: var(--cpd-color-bg-action-primary-disabled);
    }

.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
            left: calc(100% - 1.25rem);
            background-color: var(--cpd-color-icon-on-solid-primary);
        }

.mx_ToggleSwitch_ball {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 1.25rem;
    background-color: var(--cpd-color-bg-action-primary-disabled);
    -webkit-transition:
        left 0.15s ease-out 0.1s,
        background-color 0.15s ease-out 0.1s;
    transition:
        left 0.15s ease-out 0.1s,
        background-color 0.15s ease-out 0.1s;
    left: 0;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Validation {
    position: relative;
    max-width: 200px;
}

.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: #0dbd8b;
    }

.mx_Validation_detail.mx_Validation_valid::before {
            -webkit-mask-image: url(../../icons/check.aaad650.svg);
                    mask-image: url(../../icons/check.aaad650.svg);
            background-color: #0dbd8b;
        }

.mx_Validation_detail.mx_Validation_invalid {
        color: #ff5b55;
    }

.mx_Validation_detail.mx_Validation_invalid::before {
            -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                    mask-image: url(../../icons/close.5ef7caf.svg);
            background-color: #ff5b55;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 Tulir Asokan <tulir@maunium.net>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EmojiPicker {
    width: 340px;
    height: 450px;

    border-radius: 4px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_EmojiPicker_body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: rgb(0, 0, 0, 0.2) transparent;
}

.mx_EmojiPicker_header {
    padding: 4px 8px 0;
    border-bottom: 1px solid #616b7f;
}

.mx_EmojiPicker_anchor {
    border: none;
    padding: 8px 8px 6px;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    border-radius: 4px 4px 0 0;

    width: 36px;
    height: 38px;
}

.mx_EmojiPicker_anchor:not(:disabled) {
        cursor: pointer;
    }

.mx_EmojiPicker_anchor:not(:disabled):hover {
        background-color: #343a46;
        border-bottom: 2px solid #0dbd8b;
    }

.mx_EmojiPicker_anchor::before {
    background-color: #edf3ff;
    content: "";
    display: inline-block;
    -webkit-mask-size: 100%;
            mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.mx_EmojiPicker_anchor:disabled::before {
    background-color: #343a46;
}

.mx_EmojiPicker_anchor_activity::before {
    -webkit-mask-image: url(../../img/emojipicker/activity.b1bd2e6.svg);
            mask-image: url(../../img/emojipicker/activity.b1bd2e6.svg);
}

.mx_EmojiPicker_anchor_custom::before {
    -webkit-mask-image: url(../../img/emojipicker/custom.0b41026.svg);
            mask-image: url(../../img/emojipicker/custom.0b41026.svg);
}

.mx_EmojiPicker_anchor_flags::before {
    -webkit-mask-image: url(../../img/emojipicker/flags.90f18b0.svg);
            mask-image: url(../../img/emojipicker/flags.90f18b0.svg);
}

.mx_EmojiPicker_anchor_foods::before {
    -webkit-mask-image: url(../../img/emojipicker/foods.7be3b5f.svg);
            mask-image: url(../../img/emojipicker/foods.7be3b5f.svg);
}

.mx_EmojiPicker_anchor_nature::before {
    -webkit-mask-image: url(../../img/emojipicker/nature.8a9bfce.svg);
            mask-image: url(../../img/emojipicker/nature.8a9bfce.svg);
}

.mx_EmojiPicker_anchor_objects::before {
    -webkit-mask-image: url(../../img/emojipicker/objects.31b5fc3.svg);
            mask-image: url(../../img/emojipicker/objects.31b5fc3.svg);
}

.mx_EmojiPicker_anchor_people::before {
    -webkit-mask-image: url(../../img/emojipicker/people.0fb0422.svg);
            mask-image: url(../../img/emojipicker/people.0fb0422.svg);
}

.mx_EmojiPicker_anchor_places::before {
    -webkit-mask-image: url(../../img/emojipicker/places.87f4f91.svg);
            mask-image: url(../../img/emojipicker/places.87f4f91.svg);
}

.mx_EmojiPicker_anchor_recent::before {
    -webkit-mask-image: url(../../img/emojipicker/recent.ac61335.svg);
            mask-image: url(../../img/emojipicker/recent.ac61335.svg);
}

.mx_EmojiPicker_anchor_symbols::before {
    -webkit-mask-image: url(../../img/emojipicker/symbols.9e36ce6.svg);
            mask-image: url(../../img/emojipicker/symbols.9e36ce6.svg);
}

.mx_EmojiPicker_anchor_visible {
    border-bottom: 2px solid #0dbd8b;
}

.mx_EmojiPicker_search {
    margin: 8px;
    border-radius: 4px;
    border: 1px solid #e7e7e7;
    background-color: #181b21;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_EmojiPicker_search input {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        border: none;
        padding: 8px 12px;
        border-radius: 4px 0;
    }

.mx_EmojiPicker_search input::-webkit-input-placeholder {
            color: var(--cpd-color-text-secondary);
        }

.mx_EmojiPicker_search input::-moz-placeholder {
            color: var(--cpd-color-text-secondary);
        }

.mx_EmojiPicker_search input:-ms-input-placeholder {
            color: var(--cpd-color-text-secondary);
        }

.mx_EmojiPicker_search input::-ms-input-placeholder {
            color: var(--cpd-color-text-secondary);
        }

.mx_EmojiPicker_search input::placeholder {
            color: var(--cpd-color-text-secondary);
        }

.mx_EmojiPicker_search button {
        border: none;
        background-color: inherit;
        margin: 0;
        padding: 8px;
        -ms-flex-item-align: center;
            align-self: center;
        width: 32px;
        height: 32px;
    }

.mx_EmojiPicker_search_clear {
    cursor: pointer;
}

.mx_EmojiPicker_search_icon {
    width: 16px;
    margin: 8px;
}

.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
    pointer-events: none;
}

.mx_EmojiPicker_search_icon::after {
    -webkit-mask: url(../../img/emojipicker/search.fc4e297.svg) no-repeat;
            mask: url(../../img/emojipicker/search.fc4e297.svg) no-repeat;
    -webkit-mask-size: 100%;
            mask-size: 100%;
    background-color: #edf3ff;
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
}

.mx_EmojiPicker_search_clear::after {
    -webkit-mask-image: url(../../img/emojipicker/delete.bef70a7.svg);
            mask-image: url(../../img/emojipicker/delete.bef70a7.svg);
}

.mx_EmojiPicker_category {
    padding: 0 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_EmojiPicker_category_label {
    width: 304px;
}

.mx_EmojiPicker_list {
    width: 304px;
    padding: 0;
    margin: 0;
}

.mx_EmojiPicker_item_wrapper {
    display: inline-block;
    list-style: none;
    width: 38px;
    cursor: pointer;
}

.mx_EmojiPicker_item_wrapper:focus-within {
        background-color: #343a46;
    }

.mx_EmojiPicker_body .mx_EmojiPicker_item_wrapper[tabindex="0"] .mx_EmojiPicker_item {
    background-color: #343a46;
}

.mx_EmojiPicker_item {
    display: inline-block;
    font-size: 1.25rem;
    padding: 5px;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    border-radius: 4px;
}

.mx_EmojiPicker_item:hover {
        background-color: #343a46;
    }

.mx_EmojiPicker_item_selected {
    color: rgb(0, 0, 0, 0.5);
    border: 1px solid #0dbd8b;
    padding: 4px;
}

.mx_EmojiPicker_category_label,
.mx_EmojiPicker_preview_name {
    font-size: 1rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 0;
}

.mx_EmojiPicker_footer {
    border-top: 1px solid #616b7f;
    min-height: 72px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_EmojiPicker_preview_emoji {
    font-size: 2rem;
    padding: 8px 16px;
}

.mx_EmojiPicker_preview_text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: hidden;
    padding-top: 1rem;
    padding-bottom: 1rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_EmojiPicker_name {
    text-transform: capitalize;
}

.mx_EmojiPicker_shortcode {
    color: #c8c8cd;
    overflow-wrap: break-word;
    font: var(--cpd-font-body-md-regular);
}

.mx_EmojiPicker_shortcode::before,
    .mx_EmojiPicker_shortcode::after {
        content: ":";
    }

.mx_EmojiPicker_quick {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
    margin-right: 4px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LocationPicker {
    border-radius: 8px;

    height: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    /* when there are errors loading the map */
    /* the canvas is still inserted */
    /* and can overlap error message/close buttons */
}

/* hide it */

.mx_LocationPicker.mx_LocationPicker_hasError .maplibregl-canvas-container,
        .mx_LocationPicker.mx_LocationPicker_hasError .maplibregl-control-container {
            display: none;
        }

.mx_LocationPicker #mx_LocationPicker_map {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_LocationPicker #mx_LocationPicker_map .maplibregl-ctrl.maplibregl-ctrl-group,
        .mx_LocationPicker #mx_LocationPicker_map .maplibregl-ctrl.maplibregl-ctrl-attrib {
            margin-right: 16px;
        }

.mx_LocationPicker #mx_LocationPicker_map .maplibregl-ctrl.maplibregl-ctrl-group {
            /* place below the close button */
            /* padding-16 + 24px close button + padding-10 */
            margin-top: 50px;
        }

.mx_LocationPicker #mx_LocationPicker_map .maplibregl-user-location-accuracy-circle {
            display: none;
        }

.mx_LocationPicker #mx_LocationPicker_map .maplibregl-user-location-dot {
            display: none;
        }

.mx_LocationPicker .mx_LocationPicker_footer {
        -webkit-box-flex: 0;
            -ms-flex: 0;
                flex: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: stretch;
            -ms-flex-pack: stretch;
                justify-content: stretch;

        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;

        background-color: #22262e;
    }

.mx_LocationPicker_pinText {
    position: absolute;
    top: 16px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    height: 0;
    pointer-events: none;
}

.mx_LocationPicker_pinText span {
        -webkit-box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
                box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
        border-radius: 8px;
        padding: 8px;
        background-color: #181b21;
        color: #edf3ff;

        font-size: 0.75rem;
    }

.mx_LocationPicker_submitButton {
    width: 100%;
    height: 48px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CallEvent_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.mx_CallEvent {
    padding: 12px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-height: 60px;
    max-width: 600px;
    width: 100%;
    background-color: #21262c;
    border-radius: 8px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    gap: 8px;
}

.mx_CallEvent > .mx_BaseAvatar,
    .mx_CallEvent > .mx_Icon {
        -ms-flex-item-align: start;
            align-self: flex-start;
    }

.mx_CallEvent > .mx_Icon {
        padding: 0;
        margin: 4px 0;
        color: #edf3ff;
    }

.mx_CallEvent .mx_LiveContentSummary {
        font-size: 0.75rem;
    }

.mx_CallEvent {

    --facepile-background: #21262c;
}

.mx_CallEvent_title {
    font-size: 0.9375rem;
    line-height: 24px; /* in px to match the avatar */
}

.mx_CallEvent_inactive .mx_CallEvent_title::before {
    display: inline-block;
    vertical-align: middle;
    content: "";
    background-color: #edf3ff;
    -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
            mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
    -webkit-mask-size: 16px;
            mask-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.mx_CallEvent_active .mx_CallEvent_title {
    font-weight: var(--cpd-font-weight-semibold);
}

.mx_CallEvent_columns {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.mx_TimelineCard .mx_CallEvent_columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 8px;
}

.mx_CallEvent_details {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6px;
}

.mx_CallEvent_button {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-width: 120px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2018-2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EventTileBubble.mx_CreateEvent {
    margin: var(--EventTileBubble_margin-block) auto;
}

.mx_EventTileBubble.mx_CreateEvent::before {
        background-color: #a1b2d1;
        -webkit-mask-image: url(../../img/element-icons/chat-bubbles.7946de9.svg);
                mask-image: url(../../img/element-icons/chat-bubbles.7946de9.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DateSeparator_dateContent {
    padding: 0 25px;
}

.mx_DateSeparator_dateHeading {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-transform: capitalize;
}

.mx_DateSeparator_jumpToDateMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_DateSeparator_chevron {
    -ms-flex-item-align: center;
        align-self: center;
    width: 16px;
    height: 16px;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
            mask-image: url(../../icons/chevron-down.9ea2899.svg);
    background-color: var(--cpd-color-icon-secondary);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DecryptionFailureBody {
    color: #edf3ff;
    font-style: italic;
}

/* Formatting for errors due to sender trust requirement failures */

.mx_DecryptionFailureSenderTrustRequirement > span {
    /* some space between the (/) icon and text */
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: var(--cpd-space-1x);

    /* Center vertically */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DisambiguatedProfile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
        font: var(--cpd-font-body-md-semibold);
        -webkit-margin-end: 0;
                margin-inline-end: 0;
        /* keeps the height in check, important for the bubble apperance */
        line-height: 1;
    }

.mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
        color: #edf3ff;
        font-size: var(--cpd-font-size-body-sm);
        -webkit-margin-start: 5px;
                margin-inline-start: 5px;
    }

/** Disambiguated profile needs to have a different layout in the member tile */

.mx_MemberTileView .mx_DisambiguatedProfile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_MemberTileView .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
        -webkit-margin-start: 0;
                margin-inline-start: 0;
        font: var(--cpd-font-body-sm-regular);
        text-overflow: ellipsis;
        overflow: hidden;
    }

.mx_MemberTileView .mx_DisambiguatedProfile span:not(.mx_DisambiguatedProfile_mxid) {
        /**
        In a member tile, this span element is a flex child and so
        we need the following for text overflow to work.
        **/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EventTileBubble {
    --EventTileBubble_margin-block: 10px;

    background-color: var(--cpd-color-bg-subtle-secondary);
    padding: 10px;
    border-radius: 8px;
    /* Reserve space for external timestamps, but also cap the width */
    max-width: min(calc(100% - 2 * 46px), 600px);
    max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) -webkit-min-content -webkit-min-content;
    grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
}

.mx_EventTileBubble::before,
    .mx_EventTileBubble::after {
        position: relative;
        grid-column: 1;
        grid-row: 1 / 3;
        width: 16px;
        height: 16px;
        content: "";
        inset: 0;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        margin-top: 4px;
    }

.mx_EventTileBubble .mx_EventTileBubble_title,
    .mx_EventTileBubble .mx_EventTileBubble_subtitle {
        grid-column: 2;
        overflow-wrap: break-word;
        min-inline-size: 50px;
    }

.mx_EventTileBubble .mx_EventTileBubble_title {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.9375rem;
        grid-row: 1;
    }

.mx_EventTileBubble .mx_EventTileBubble_subtitle {
        font-size: 0.75rem;
        grid-row: 2;
    }

.mx_EventTileBubble .mx_MessageTimestamp {
        grid-column: 4;
        grid-row: 1 / 3;
        align-self: center;
        margin-left: 16px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_HiddenBody {
    white-space: pre-wrap;
    color: #a1b2d1;
    vertical-align: middle;

    padding-left: 20px;
    position: relative;
}

.mx_HiddenBody::before {
        height: 14px;
        width: 14px;
        background-color: #a1b2d1;
        -webkit-mask-image: url(../../img/element-icons/hide.72c451b.svg);
                mask-image: url(../../img/element-icons/hide.72c451b.svg);

        -webkit-mask-repeat: no-repeat;

                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        content: "";
        position: absolute;
        top: 1px;
        left: 0;
    }

.mx_HiddenMediaPlaceholder {
    border: none;
    width: 100%;
    height: 100%;
    inset: 0;

    /* To center the text in the middle of the frame */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;

    cursor: pointer;
    background-color: #22262e;
}

.mx_HiddenMediaPlaceholder > div {
        color: #0dbd8b;
        /* Icon alignment */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_HiddenMediaPlaceholder > div > svg {
            margin-top: auto;
            margin-bottom: auto;
        }

.mx_EventTile:hover .mx_HiddenMediaPlaceholder {
    background-color: #181b21;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_JumpToDatePicker_form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* This matches the default padding of IconizedContextMenuOption */
    /* (see context_menus/_IconizedContextMenu.pcss) */
    padding-top: 12px;
    padding-bottom: 12px;
}

.mx_JumpToDatePicker_label {
    -ms-flex-item-align: center;
        align-self: center;
    font-size: 0.9375rem;
}

.mx_JumpToDatePicker_datePicker {
    margin: 0;
    margin-left: 8px;
}

.mx_JumpToDatePicker_datePicker,
    .mx_JumpToDatePicker_datePicker > input {
        border-radius: 8px;
    }

.mx_JumpToDatePicker_submitButton {
    margin-left: 8px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyCallEvent_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        gap: 4px 0;

        position: relative;
        margin: 4px 0;
        padding: 12px 24px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-color: var(--cpd-color-bg-subtle-secondary);
        border-radius: 8px;
        width: 65%;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_iconButton {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_iconButton::before {
                content: "";

                height: 16px;
                width: 16px;
                background-color: #edf3ff;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                        mask-size: contain;
                -webkit-mask-position: center;
                        mask-position: center;
            }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_silence::before {
            -webkit-mask-image: url(../../img/voip/silence.fff021d.svg);
                    mask-image: url(../../img/voip/silence.fff021d.svg);
        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_unSilence::before {
            -webkit-mask-image: url(../../img/voip/un-silence.fd94a16.svg);
                    mask-image: url(../../img/voip/un-silence.fd94a16.svg);
        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_voice .mx_LegacyCallEvent_type_icon::before,
            .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_voice .mx_LegacyCallEvent_content_button_callBack span::before,
            .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_voice .mx_LegacyCallEvent_content_button_answer span::before {
                -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
                        mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
            }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_voice.mx_LegacyCallEvent_rejected .mx_LegacyCallEvent_type_icon::before, .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_voice.mx_LegacyCallEvent_noAnswer .mx_LegacyCallEvent_type_icon::before {
                    -webkit-mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                            mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_video .mx_LegacyCallEvent_type_icon::before,
            .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_video .mx_LegacyCallEvent_content_button_callBack span::before,
            .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_video .mx_LegacyCallEvent_content_button_answer span::before {
                -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                        mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
            }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_video.mx_LegacyCallEvent_rejected .mx_LegacyCallEvent_type_icon::before, .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_video.mx_LegacyCallEvent_noAnswer .mx_LegacyCallEvent_type_icon::before {
                    -webkit-mask-image: url(../../icons/video-call-declined-solid.0d66d74.svg);
                            mask-image: url(../../icons/video-call-declined-solid.0d66d74.svg);
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_missed.mx_LegacyCallEvent_voice .mx_LegacyCallEvent_type_icon::before {
                    -webkit-mask-image: url(../../img/voip/missed-voice.8a2b762.svg);
                            mask-image: url(../../img/voip/missed-voice.8a2b762.svg);
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_missed.mx_LegacyCallEvent_video .mx_LegacyCallEvent_type_icon::before {
                    -webkit-mask-image: url(../../icons/video-call-missed-solid.f54bda6.svg);
                            mask-image: url(../../icons/video-call-missed-solid.f54bda6.svg);
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            max-width: 100%;
        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info .mx_LegacyCallEvent_info_basic {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                gap: 4px;
                margin-left: 10px; /* To match mx_LegacyCallEvent */
                margin-right: 10px;
                min-width: 0;
            }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_sender {
                    font-weight: var(--cpd-font-weight-semibold);
                    margin-bottom: 4px;

                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_type {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    font-weight: 400;
                    color: #edf3ff;
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon {
                        height: 13px;
                        width: 13px;
                        margin-right: 5px;
                    }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before {
                            content: "";
                            position: absolute;
                            height: 13px;
                            width: 13px;
                            background-color: #edf3ff;
                            -webkit-mask-repeat: no-repeat;
                                    mask-repeat: no-repeat;
                            -webkit-mask-size: contain;
                                    mask-size: contain;
                        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: #edf3ff;
            font-size: 0.75rem;
            gap: 12px; /* See mx_IncomingLegacyCallToast_buttons */
            -webkit-margin-start: 42px;
                    margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
            word-break: break-word;
            max-width: -webkit-fit-content;
            max-width: -moz-fit-content;
            max-width: fit-content;
        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button {
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                font-weight: var(--cpd-font-weight-semibold);
                height: 1.5rem;
                line-height: 1.5rem;
                margin-right: 0;
            }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button span::before {
            content: "";
            display: inline-block;
            background-color: white;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            margin-right: 8px;
        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button {
                padding: 0 12px;
                font-size: inherit;
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button span::before {
                    -webkit-mask-size: 16px;
                            mask-size: 16px;
                    width: 16px;
                    height: 16px;
                    -ms-flex-negative: 0;
                        flex-shrink: 0;
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button_reject span::before {
                    -webkit-mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                            mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_tooltip {
                margin-right: 5px;
            }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: initial;
                -ms-flex-align: initial;
                    align-items: initial;
            gap: 4px 16px;
            height: auto;
            height: initial;
            min-width: 290px;
        }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow .mx_LegacyCallEvent_iconButton {
                position: absolute;
                margin-right: 0;
                top: 12px;
                right: 12px;
                height: 16px;
                width: 16px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow .mx_LegacyCallEvent_info {
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
            }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
            position: relative;

            /* 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon) */
            right: calc(5px + 14px + 9px);
        }

.mx_EventTile_leftAlignedBubble .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow {
                gap: 8px 4px;
            }

.mx_IRCLayout .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
            -webkit-margin-start: 4px;
                    margin-inline-start: 4px; /* display green line */
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MEmoteBody {
    white-space: pre-wrap;
    text-align: start;
}

.mx_MEmoteBody_sender {
    cursor: pointer;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MFileBody_download {
    color: #0dbd8b;
    height: var(--cpd-space-9x);
}

.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%;
}

.mx_MFileBody_info {
    cursor: pointer;
}

.mx_MFileBody_info .mx_MFileBody_info_icon {
        background-color: #21262c;
        border-radius: 20px;
        display: inline-block;
        width: 32px;
        height: 32px;
        position: relative;
        vertical-align: middle;
        margin-right: 12px;
    }

.mx_MFileBody_info .mx_MFileBody_info_icon::before {
            content: "";
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: cover;
                    mask-size: cover;
            -webkit-mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg);
                    mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg);
            background-color: #edf3ff;
            width: 15px;
            height: 15px;

            position: absolute;
            top: 8px;
            left: 8px;
        }

.mx_MFileBody_info .mx_MFileBody_info_filename {
        font: var(--cpd-font-body-md-regular);
        color: var(--cpd-color-text-primary);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        width: calc(100% - 32px - 12px); /* 32px icon, 12px margin on the icon */
        vertical-align: middle;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MImageBody_banner {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 4px;
    border-radius: 8px;
    border-radius: var(--MBody-border-radius);
    font-size: 0.9375rem;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; /* prevent banner text from being selected */
    pointer-events: none; /* let the cursor go through to the media underneath */

    /* Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early. */
    max-width: min(100%, 350px);

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    /* Hardcoded colours because it's the same on all themes */
    background-color: rgb(0, 0, 0, 0.6);
    color: #ffffff;
}

.mx_MImageBody_placeholder {
    /* Position the placeholder on top of the thumbnail, so that the reveal animation can work */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;

    background-color: #181b21;
}

.mx_MImageBody_placeholder .mx_Blurhash > canvas {
        -webkit-animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
                animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
    }

.mx_MImageBody_thumbnail_container {
    border-radius: 8px;
    border-radius: var(--MBody-border-radius);

    /* Necessary for the border radius to apply correctly to the placeholder */
    overflow: hidden;
    contain: paint;
}

.mx_MImageBody_thumbnail {
    display: block;

    /* Force the image to be the full size of the container, even if the */
    /* pixel size is smaller. The problem here is that we don't know what */
    /* thumbnail size the HS is going to give us, but we have to commit to */
    /* a container size immediately and not change it when the image loads */
    /* or we'll get a scroll jump (or have to leave blank space). */
    /* This will obviously result in an upscaled image which will be a bit */
    /* blurry. The best fix would be for the HS to advertise what size thumbnails */
    /* it guarantees to produce. */
    height: 100%;
    width: 100%;
}

.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 2024 New Vector Ltd.
Copyright 2020 Tulir Asokan <tulir@maunium.net>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MImageReplyBody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 4px;
       -moz-column-gap: 4px;
            column-gap: 4px;
}

.mx_MImageReplyBody .mx_MImageBody_thumbnail_container {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        min-width: 0; /* Prevent a blowout */
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EventTileBubble.mx_MJitsiWidgetEvent::before {
        background-color: #a1b2d1; /* XXX: Variable abuse */
        -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MLocationBody {
    max-width: 100%;
}

.mx_MLocationBody .mx_MLocationBody_map {
        max-width: 100%;
        width: 450px;
        height: 300px;
        z-index: 0; /* keeps the entire map under the message action bar */

        border-radius: 8px;

        border-radius: var(--MBody-border-radius);
        cursor: pointer;
    }

/* In the timeline, we fit the width of the container */

.mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
    max-width: 450px;
    width: 100%;
}

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
    max-width: 100%;
    width: 450px;
}

.mx_DisambiguatedProfile ~ .mx_MLocationBody {
    margin-top: 6px; /* See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 */
}

.mx_ReplyTile .mx_MLocationBody {
    /* Prevent clicking a location within a reply */
    pointer-events: none;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MNoticeBody {
    white-space: pre-wrap;
    color: #edf3ff;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MPollBody {
    margin-top: 8px;
}

.mx_MPollBody h2 {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.9375rem;
        line-height: 1.5rem;
        margin-top: 0;
        margin-bottom: 8px;
    }

.mx_MPollBody h2 .mx_MPollBody_edited {
            color: #a1b2d1;
            font-size: 0.75rem;
            opacity: 0.6;
        }

.mx_MPollBody h2::before {
        content: "";
        position: relative;
        display: inline-block;
        margin-right: 12px;
        top: 3px;
        left: 3px;
        height: 20px;
        width: 20px;
        background-color: #edf3ff;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
                mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
    }

.mx_MPollBody .mx_MPollBody_totalVotes {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: inline;
                flex-direction: inline;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
        color: #edf3ff;
        font-size: 0.75rem;
    }

.mx_MPollBody .mx_MPollBody_totalVotes .mx_Spinner {
            -webkit-box-flex: 0;
                -ms-flex: 0;
                    flex: 0;
            margin-left: 8px;
        }

/* Prevent clicking a poll within a reply */

.mx_ReplyTile .mx_MPollBody {
    pointer-events: none;
}

.mx_MPollBody_allOptions {
    display: grid;
    grid-gap: 16px;
    margin-bottom: 8px;
    max-width: 550px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MPollEndBody_icon {
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
    color: #edf3ff;
}

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MStickerBody_wrapper {
    padding: 12px 0px;
}

.mx_MStickerBody_hidden {
    max-width: 220px;
    text-decoration: none;
    text-align: center;

    /* To center the text in the middle of the frame */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_MStickerBody_placeholder {
    /* centering */
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MTextBody {
    white-space: pre-wrap;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

span.mx_MVideoBody {
    overflow: hidden;
}

span.mx_MVideoBody .mx_MVideoBody_container {
        border-radius: 8px;
        border-radius: var(--MBody-border-radius);
        overflow: hidden;
    }

span.mx_MVideoBody .mx_MVideoBody_container video {
            height: 100%;
            width: 100%;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* A "media body" is any file upload looking thing, apart from images and videos (they */

/* have unique styles). */

.mx_MediaBody {
    background-color: rgba(33,38,44, 0.9);
    border-radius: 12px;
    max-width: 243px; /* use max-width instead of width so it fits within right panels */

    color: #edf3ff;
    font: var(--cpd-font-body-md-regular);
    line-height: 1.5rem;

    padding: 6px 12px;
}

/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MessageActionBar {
    --MessageActionBar-size-button: 28px;
    --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
    --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
    --MessageActionBar-item-hover-borderRadius: 6px;
    --MessageActionBar-item-hover-zIndex: 1;

    position: absolute;
    visibility: hidden;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    height: var(--MessageActionBar-size-box);
    line-height: 1.5rem;
    border-radius: 8px;
    background: #181b21;
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
    top: -32px;
    right: 8px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    /* Ensure the action bar appears above other things like the read marker */
    /* and sender avatar (for small screens) */
    z-index: 10;

    /* Adds a previous event safe area so that you can't accidentally hover the */
    /* previous event while trying to mouse into the action bar or from the */
}

/* react button to its tooltip. */

.mx_MessageActionBar::before {
        content: "";
        position: absolute;
        /* tooltip safe mousing area + tooltip overhang + */
        /* action bar + action bar offset from event */
        width: calc(10px + 48px + 100% + 8px);
        /* safe area + action bar */
        height: calc(20px + 100%);
        top: -12px;
        left: -58px;
        z-index: -1;
        cursor: auto;
        cursor: initial;

        /* stylelint-disable-next-line max-line-length */
    }

.mx_GenericEventListSummary[data-layout="bubble"]
            .mx_GenericEventListSummary_toggle
            ~ .mx_GenericEventListSummary_unstyledList
            .mx_EventTile_info:first-of-type
            .mx_MessageActionBar::before {
            /* improve clickability of "collapse" link button on bubble layout by reducing width and height values */
            /* mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available */
            /* mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button */
            /* TODO: use a new class name instead */
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

.mx_EventTile_info .mx_ViewSourceEvent ~ .mx_MessageActionBar::before {
            /* improve clickability of view source event toggle button by removing vertical safe area */
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

.mx_MessageActionBar > * {
        white-space: nowrap;
        display: inline-block;
        position: relative;
        margin: 2px;
    }

.mx_MessageActionBar > *:hover {
            background: var(--MessageActionBar-item-hover-background);
            border-radius: var(--MessageActionBar-item-hover-borderRadius);
            z-index: var(--MessageActionBar-item-hover-zIndex);
        }

.mx_MessageActionBar .mx_MessageActionBar_iconButton {
        --MessageActionBar-icon-size: 18px;
        width: var(--MessageActionBar-size-button);
        height: var(--MessageActionBar-size-button);
        color: var(--cpd-color-icon-secondary);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_MessageActionBar .mx_MessageActionBar_iconButton svg {
            height: var(--MessageActionBar-icon-size);
            width: var(--MessageActionBar-icon-size);
            -webkit-box-flex: 0;
                -ms-flex: 0 0 var(--MessageActionBar-icon-size);
                    flex: 0 0 var(--MessageActionBar-icon-size);
        }

.mx_MessageActionBar .mx_MessageActionBar_iconButton:disabled,
        .mx_MessageActionBar .mx_MessageActionBar_iconButton[disabled] {
            cursor: not-allowed;
            opacity: 0.75;
        }

.mx_MessageActionBar .mx_MessageActionBar_iconButton:hover {
            color: var(--cpd-color-icon-primary);
        }

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_threadButton {
            --MessageActionBar-icon-size: 20px;
        }

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_retryButton {
            --MessageActionBar-icon-size: 16px;
        }

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_downloadButton {
            --MessageActionBar-icon-size: 20px;
        }

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton svg {
                    display: none; /* hide the download icon */
                }

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_expandCollapseMessageButton {
            --MessageActionBar-icon-size: 12px;
        }

.mx_MessageActionBar .mx_MessageActionBar_optionsButton {
        --MessageActionBar-icon-size: 22px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

:root {
    --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
    --MessageTimestamp-max-width: 80px;
    --MessageTimestamp-color: #a1b2d1;
}

.mx_MessageTimestamp {
    color: #a1b2d1;
    color: var(--MessageTimestamp-color);
    font-size: 0.625rem;
    -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    display: block; /* enable the width setting below */
    width: 46px;
    width: var(--MessageTimestamp-width);
    white-space: nowrap;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.mx_MessageTimestamp_lateIcon {
    position: absolute;
    right: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: inherit;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MjolnirBody {
    opacity: 0.4;
}

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_PinnedMessageBadge {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--cpd-space-1x);

    padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
    font: var(--cpd-font-body-xs-medium);
    background-color: var(--cpd-color-alpha-gray-200);
    color: var(--cpd-color-text-secondary);

    border-radius: 99px;
    border: 1px solid var(--cpd-color-alpha-gray-400);
}

.mx_PinnedMessageBadge svg {
        fill: var(--cpd-color-icon-secondary);
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ReactionsRow {
    color: var(--cpd-color-text-primary);
}

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
        position: relative;
        display: inline-block;
        visibility: hidden; /* show on hover of the .mx_EventTile */
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin-left: 4px;
        margin-right: 4px;
    }

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            -webkit-mask-size: 16px;
                    mask-size: 16px;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            background-color: #edf3ff;
            -webkit-mask-image: url(../../img/element-icons/room/message-bar/emoji.27bdbc0.svg);
                    mask-image: url(../../img/element-icons/room/message-bar/emoji.27bdbc0.svg);
        }

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
            visibility: visible; /* keep showing whilst the context menu is shown */
        }

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover::before, .mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active::before {
                background-color: #edf3ff;
            }

.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
    visibility: visible;
}

.mx_ReactionsRow_showAll {
    color: #edf3ff;
}

.mx_ReactionsRow_showAll.mx_AccessibleButton_kind_link_inline {
        font-size: 0.75rem;
        line-height: 1.25rem;
        -webkit-margin-start: 4px;
                margin-inline-start: 4px;
        vertical-align: middle;
    }

.mx_ReactionsRow_showAll.mx_AccessibleButton_kind_link_inline:hover {
            color: #edf3ff;
        }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ReactionsRowButton {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    line-height: 1.25rem;
    padding: 1px 6px;
    border: 1px solid var(--cpd-color-gray-400);
    border-radius: 10px;
    background-color: var(--cpd-color-gray-200);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
        background-color: var(--cpd-color-green-300);
        border-color: var(--cpd-color-green-800);
    }

.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
        cursor: not-allowed;
    }

.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 4px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RedactedBody {
    white-space: pre-wrap;
    color: #edf3ff;
    vertical-align: middle;

    padding-left: 20px;
    position: relative;
}

.mx_RedactedBody::before {
        height: 14px;
        width: 14px;
        background-color: var(--cpd-color-icon-tertiary);
        -webkit-mask-image: url(../../icons/delete.8165351.svg);
                mask-image: url(../../icons/delete.8165351.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        content: "";
        position: absolute;
        top: 1px;
        left: 0;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomAvatarEvent_avatar {
    display: inline;
    position: relative;
    top: 3px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_TextualEvent {
    overflow-y: hidden;
    line-height: normal;
}

.mx_TextualEvent a {
        color: #0dbd8b;
        cursor: pointer;
    }

.mx_RoomView_searchResultsPanel .mx_TextualEvent {
        opacity: 1;
        opacity: initial; /* Unset the opacity value specified above on the search results panel */
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_TimelineSeparator {
    clear: both;
    margin: 4px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font: var(--cpd-font-body-md-regular);
    color: var(--cpd-color-text-primary);
}

.mx_TimelineSeparator > hr {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    height: 0;
    border: none;
    border-bottom: 1px solid var(--cpd-color-gray-400);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UnknownBody {
    white-space: pre-wrap;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EventTile_content.mx_ViewSourceEvent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 0.6;
    font-size: 0.75rem;
    width: 100%;
    overflow-x: auto; /* Cancel overflow setting of .mx_EventTile_content */
    line-height: normal; /* Align with avatar and E2E icon */
}

.mx_EventTile_content.mx_ViewSourceEvent pre,
    .mx_EventTile_content.mx_ViewSourceEvent code {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_EventTile_content.mx_ViewSourceEvent pre {
        line-height: 1.2;
        margin: 3.5px 0;
    }

.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
        --ViewSourceEvent_toggle-size: 16px;

        visibility: hidden;
        /* icon */
        width: 16px;
        width: var(--ViewSourceEvent_toggle-size);
        min-width: 16px;
        min-width: var(--ViewSourceEvent_toggle-size);
    }

.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle svg {
            color: #0dbd8b;
            width: var(--ViewSourceEvent_toggle-size);
            height: var(--ViewSourceEvent_toggle-size);
        }

.mx_EventTile:hover .mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
            visibility: visible;
        }

.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
        -ms-flex-item-align: end;
            align-self: flex-end;
        height: var(--ViewSourceEvent_toggle-size);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EventTileBubble.mx_cryptoEvent {
    margin: var(--EventTileBubble_margin-block) auto;
}

/* white infill for the transparency */

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon::before {
        background-color: #ffffff;
        -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
                mask-image: url(../../img/e2e/normal.ab42a7b.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 80%;
                mask-size: 80%;
    }

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon::after {
        -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
                mask-image: url(../../img/e2e/normal.ab42a7b.svg);
        background-color: #a1b2d1;
    }

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon_verified::after {
        -webkit-mask-image: url(../../img/e2e/verified.2ccf64e.svg);
                mask-image: url(../../img/e2e/verified.2ccf64e.svg);
        background-color: #0dbd8b;
    }

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon_warning::after {
        -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
                mask-image: url(../../img/e2e/warning.71ffc83.svg);
        background-color: #ff5b55;
    }

.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_state,
    .mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_buttons {
        grid-column: 3;
        grid-row: 1 / 3;
    }

.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_buttons {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 5px;
    }

.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_state {
        width: 130px;
        padding: 10px 20px;
        margin: auto 0;
        text-align: center;
        color: #edf3ff;
        overflow-wrap: break-word;
        font-size: 0.75rem;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PollHistory_content {
    height: 600px;
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_PollHistory_header.mx_Heading_h2 {
    margin-bottom: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PollHistoryList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-height: 100%;
}

.mx_PollHistoryList_list {
    overflow: auto;
    list-style: none;
    margin-block: 0;
    padding-inline: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    display: grid;
    grid-gap: 20px;
    padding-right: 64px;
    margin: 32px 0;
}

.mx_PollHistoryList_list.mx_PollHistoryList_list_ENDED {
        grid-gap: 32px;
    }

.mx_PollHistoryList_noResults {
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;

    line-height: 1.5rem;
    color: #edf3ff;
}

.mx_PollHistoryList_noResults .mx_PollHistoryList_loadMorePolls {
        margin-top: 16px;
    }

.mx_PollHistoryList_loading {
    color: #edf3ff;
    text-align: center;

    /* center in all free space*/
}

/* when there are no results*/

.mx_PollHistoryList_loading.mx_PollHistoryList_noResultsYet {
        margin: auto auto;
    }

.mx_PollHistoryList_loadMorePolls {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BaseCard {
    --BaseCard_EventTile_line-padding-block: 2px;
    --BaseCard_EventTile-spacing-inline: 36px;
    --BaseCard_header-button-size: 28px;

    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-size: var(--cpd-font-size-body-md);
}

.mx_BaseCard .mx_BaseCard_header {
        height: 64px;
        padding: var(--cpd-space-4x);
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        /* changing the color from $separator to transparent as it is
           the best visual output during the transition period. This will be
           reintroduced at a later stage. */
        border-bottom: 1px solid transparent;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        gap: var(--cpd-space-3x);
        -ms-flex-negative: 0;
            flex-shrink: 0;
        -webkit-border-after: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
                border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
    }

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_spacer {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        }

.mx_BaseCard .mx_BaseCard_header > h2 {
            margin: 0 44px;
            font: var(--cpd-font-body-sm-semibold);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            height: 24px;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        }

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_heading {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font: var(--cpd-font-body-md-medium);
                color: var(--cpd-color-text-secondary);
            }

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option {
                position: relative;
                width: var(--BaseCard_header-button-size);
                height: var(--BaseCard_header-button-size);
            }

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option::after {
                    content: "";
                    position: absolute;
                    inset-block-start: 0;
                    inset-inline-start: 0;
                    height: 100%;
                    width: 100%;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                            mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                    background-color: #edf3ff;
                }

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option:hover::after {
                    background-color: #edf3ff;
                }

.mx_BaseCard .mx_AutoHideScrollbar {
        min-height: 0;
        width: 100%;
        height: 100%;
        scrollbar-gutter: stable;
    }

.mx_BaseCard .mx_BaseCard_footer {
        padding-top: 4px;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    }

.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
            color: #edf3ff;
            background-color: rgb(141, 151, 165, 0.2);
            font: var(--cpd-font-body-md-semibold);
        }

.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
            cursor: not-allowed;
        }

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu {
        position: static;
        position: initial;
    }

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu span:first-of-type {
            font-weight: var(--cpd-font-weight-semibold);
            font-size: inherit;
            color: #edf3ff;
        }

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu {

        font: var(--cpd-font-body-sm-regular);
        color: #edf3ff;
        padding-top: 10px;
        padding-bottom: 10px;

        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
        -webkit-box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
                box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
}

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top {
        left: auto;
        right: 22px;
        border-bottom-color: var(--cpd-color-border-interactive-secondary);
    }

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top::after {
            content: "";
            border: inherit;
            border-bottom-color: var(--cpd-color-bg-canvas-default);
            position: absolute;
            top: 1px;
            left: -8px;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EmptyState {
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: var(--cpd-space-4x);
    text-align: center;
}

.mx_EmptyState svg {
        width: 56px;
        height: 56px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border-radius: 8px;
        padding: var(--cpd-space-3x);
        background-color: #fff;
    }

.mx_EmptyState::before {
        /* Bloom using magic numbers directly out of Figma */
        content: "";
        position: absolute;
        z-index: -1;
        width: 642px;
        height: 775px;
        right: -253.77px;
        top: 0;
        background: radial-gradient(49.95% 49.95% at 50% 50%, rgb(13, 189, 139, 0.12) 0%, rgb(18, 115, 235, 0) 100%);
        -webkit-transform: rotate(-89.69deg);
                transform: rotate(-89.69deg);
        overflow: hidden;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EncryptionInfo_spinner .mx_Spinner {
        margin-top: 25px;
        margin-bottom: 15px;
    }

.mx_EncryptionInfo_spinner {

    text-align: center;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ExtensionsCard {
    --cpd-separator-spacing: var(--cpd-space-6x);
    --AddExtension-overlap: -76px;
}

.mx_ExtensionsCard .mx_AutoHideScrollbar {
        padding: 0 var(--cpd-space-4x);
        margin-top: var(--cpd-space-6x);
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

/* Styling for the "Add extensions" button */

.mx_ExtensionsCard .mx_AutoHideScrollbar > button {
            width: 100%;
        }

.mx_ExtensionsCard .mx_ExtensionsCard_container {
        text-align: center;
        margin: 20px var(--cpd-space-4x) 0;
    }

.mx_ExtensionsCard .mx_ExtensionsCard_Button {
        /* this button is special so we have to override some of the original styling */
        /* as we will be applying it in its children */
        padding: 0;
        height: auto;
        color: #edf3ff;
        position: relative;
    }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_WidgetAvatar {
            -ms-flex-negative: 0;
                flex-shrink: 0;
        }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_icon_app {
            padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_icon_app p {
                margin: 0 var(--cpd-space-3x);
                color: #edf3ff;
            }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle,
        .mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options {
            position: absolute;
            top: 0;
            height: 100%; /* to give bigger interactive zone */
            width: 24px;
            padding: var(--cpd-space-3x) var(--cpd-space-1x);
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            min-width: 24px; /* prevent flexbox crushing */
        }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle:hover::after, .mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options:hover::after {
                    content: "";
                    position: absolute;
                    height: 24px;
                    width: 24px;
                    top: var(--cpd-space-2x); /* equal to padding-top of parent */
                    left: 0;
                    border-radius: 12px;
                    background-color: rgb(141, 151, 165, 0.1);
                }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle::before, .mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options::before {
                content: "";
                position: absolute;
                height: 16px;
                width: 16px;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: 16px;
                        mask-size: 16px;
                background-color: var(--cpd-color-icon-tertiary);
            }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle {
            right: 8px;
        }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle::before {
                -webkit-mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
                        mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
            }

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options {
            right: 32px;
        }

/* 24 + 8 */

.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options::before {
                -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                        mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
            }

.mx_ExtensionsCard .mx_ExtensionsCard_Button.mx_ExtensionsCard_Button_pinned::after {
                opacity: 0.2;
            }

.mx_ExtensionsCard .mx_ExtensionsCard_Button.mx_ExtensionsCard_Button_pinned .mx_ExtensionsCard_app_pinToggle::before {
                background-color: #0dbd8b;
            }

.mx_ExtensionsCard .mx_ExtensionsCard_Button::before {
            content: normal;
            content: initial;
        }

.mx_ExtensionsCard .mx_ExtensionsCard_Button::after {
            top: var(--cpd-space-2x); /* re-align based on the height change */
            pointer-events: none; /* pass through to the real button */
        }

/* Set layout for everyone button */

.mx_ExtensionsCard a[data-kind="primary"] {
        margin-top: var(--cpd-space-10x);
    }

.mx_ExtensionsCard .mx_EmptyState::before {
        /* Overlap the Add extensions button */
        top: var(--AddExtension-overlap);
    }

.mx_ExtensionsCard .mx_EmptyState {
        /* Stop empty state scrolling */
        height: calc(100% + var(--AddExtension-overlap));
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PinnedMessagesCard {
    --unpin-height: 76px;
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: var(--cpd-space-4x);
        gap: var(--cpd-space-6x);
        overflow-y: auto;
    }

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_wrapper .mx_PinnedMessagesCard_Separator {
            min-height: 1px;
            /* Override default compound value */
            margin-block: 0;
        }

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_wrapper_unpin_all {
        /* Remove the unpin all button height and the top and bottom padding  */
        height: calc(100% - var(--unpin-height) - calc(var(--cpd-space-4x) * 2));
    }

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_unpin {
        /* Make it float at the bottom of the unpin panel */
        position: absolute;
        bottom: 0;
        width: 100%;
        height: var(--unpin-height);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-shadow: 0 4px 24px 0 rgb(27, 29, 34, 0.1);
                box-shadow: 0 4px 24px 0 rgb(27, 29, 34, 0.1);
        background: var(--cpd-color-bg-canvas-default);
    }

.mx_PinnedMessagesCard .mx_EventTile_body {
        word-break: break-word;
    }

/*
Copyright 2024, 2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomSummaryCard {
    --cpd-separator-inset: var(--cpd-space-4x);
    --cpd-separator-spacing: var(--cpd-space-4x);
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_container {
        text-align: center;
        margin: 20px var(--cpd-space-4x) 0;
    }

.mx_RoomSummaryCard .mx_RoomSummaryCard_roomName,
    .mx_RoomSummaryCard .mx_RoomSummaryCard_alias {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: pre-wrap;
        overflow: hidden;
    }

.mx_RoomSummaryCard .mx_RoomSummaryCard_alias {
        text-overflow: ellipsis;
    }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic {
        padding: 0 12px;
        color: var(--cpd-color-text-secondary);
    }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_Box {
            width: 100%;
        }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_container {
            text-align: start;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_edit {
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
        }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic p {
            white-space: pre-wrap;
            width: 100%;
            min-width: 0;
            margin: 0;
        }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic a {
            cursor: pointer;
        }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_chevron {
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
        }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic.mx_RoomSummaryCard_topic_collapsed p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

.mx_RoomSummaryCard .mx_RoomSummaryCard_topic.mx_RoomSummaryCard_topic_collapsed .mx_RoomSummaryCard_topic_chevron {
                -webkit-transform: rotate(-90deg);
                        transform: rotate(-90deg);
            }

.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
        margin-top: 12px;
        margin-bottom: 12px;
        font-size: 0.8125rem;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_RoomSummaryCard_badges {
    margin: var(--cpd-space-4x) 0;
}

.mx_RoomSummaryCard_search {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-width: 0;
}

.mx_RoomSummaryCard_search input[type="search"]::-webkit-search-cancel-button {
        display: inline;
        display: initial; /* override _common.pcss which inhibits this */
    }

.mx_RoomSummaryCard_roomName {
    margin: 12px 0 4px;
}

.mx_RoomSummaryCard_bottomOptions {
    margin: 0 0 var(--cpd-space-8x);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021-2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ThreadPanel {
    height: 100px;
    overflow: visible;
}

/* Unset flex on the thread list, but not the thread view */

.mx_ThreadPanel:not(.mx_ThreadView) .mx_BaseCard_header .mx_BaseCard_header_title {
        -webkit-box-flex: initial;
            -ms-flex: initial;
                flex: initial;
    }

.mx_ThreadPanel .mx_ThreadPanelHeader {
        height: 60px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 16px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        border-bottom: 1px solid var(--cpd-color-gray-400);
    }

.mx_ThreadPanel .mx_ThreadPanelHeader .mx_AccessibleButton {
            font-size: 12px;
            color: #edf3ff;
        }

.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_vertical_separator {
            height: 28px;
            margin-left: var(--cpd-space-3x);
            margin-right: var(--cpd-space-2x);
            border-left: 1px solid var(--cpd-color-gray-400);
        }

.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown {
            font: var(--cpd-font-body-sm-regular);
            padding: 3px 4px 3px 8px;
            border-radius: 4px;
            line-height: 1.5;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }

.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown:hover,
            .mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown[aria-expanded="true"] {
                background: #6f7882;
            }

.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown::before {
                margin-left: 2px;
                content: "";
                width: 20px;
                height: 20px;
                background: currentColor;
                -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                        mask-image: url(../../icons/chevron-down.9ea2899.svg);
                -webkit-mask-size: 100%;
                        mask-size: 100%;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                float: right;
            }

.mx_ThreadPanel .mx_AutoHideScrollbar,
    .mx_ThreadPanel .mx_RoomView_messagePanelSpinner {
        background-color: #181b21;
        border-radius: 8px;
        -webkit-padding-end: 0;
                padding-inline-end: 0;
        overflow-y: scroll; /* set gap between the thread tile and the right border */
        height: 100%;
    }

.mx_ThreadPanel .mx_EventTile[data-layout="group"] .mx_MessageActionBar {
            right: 0;
            top: -36px; /* 2px above EventTile */
            z-index: 10; /* See _EventTile.pcss */
        }

/* For style rules of EventTile in a thread, see _EventTile.pcss */

.mx_ThreadPanel.mx_ThreadView {
        max-height: 100%;
    }

.mx_ThreadPanel.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
            position: relative;
            min-height: 0; /* don't displace the composer */
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
        }

.mx_ThreadPanel.mx_ThreadView .mx_ThreadView_timelinePanelWrapper .mx_FileDropTarget {
                border-radius: 8px;
            }

.mx_ThreadPanel.mx_ThreadView .mx_MessageComposer_sendMessage {
            margin-right: 0;
        }

/* Make use of the space above the composer buttons too*/

.mx_ThreadPanel.mx_ThreadView .mx_Autocomplete {
            width: calc(100% + 140px);
        }

.mx_ThreadPanel.mx_ThreadView.mx_ThreadView_narrow .mx_Autocomplete {
            width: calc(100% + 108px);
        }

.mx_ThreadPanel .mx_RoomView_messagePanel.mx_RoomView_messageListWrapper {
            position: static;
            position: initial;
        }

.mx_ThreadPanel .mx_RoomView_messagePanel .mx_RoomView_messageListWrapper {
            width: calc(100% + 6px); /* 8px - 2px */
        }

.mx_ThreadPanel .mx_RoomView_messagePanel .mx_RoomView_empty {
            display: contents;
        }

.mx_ThreadPanel .mx_RoomView_MessageList {
        -webkit-padding-start: 8px;
                padding-inline-start: 8px;
        -webkit-padding-end: 8px;
                padding-inline-end: 8px;
        content-visibility: visible;
    }

.mx_ThreadPanel .mx_EventTile,
    .mx_ThreadPanel .mx_GenericEventListSummary {
        /* Account for scrollbar when hovering */
        padding-top: 0;
    }

.mx_ThreadPanel .mx_EventTile .mx_TimelineSeparator, .mx_ThreadPanel .mx_GenericEventListSummary .mx_TimelineSeparator {
            display: none;
        }

.mx_ThreadPanel .mx_EventTile.mx_EventTile_clamp:hover, .mx_ThreadPanel .mx_GenericEventListSummary.mx_EventTile_clamp:hover {
            cursor: pointer;
        }

.mx_ThreadPanel .mx_MessageComposer {
        background-color: #181b21;
        border-radius: 8px;
        margin-top: 8px;
        padding: 0 8px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

.mx_ThreadPanel .mx_MessageTimestamp {
        color: #edf3ff;
    }

.mx_ThreadPanel .mx_BaseCard_footer {
        text-align: left;
        font-size: 0.75rem;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        gap: 4px;
        position: relative;
        top: 2px;
        padding-right: 8px;
    }

.mx_ThreadPanel .mx_BaseCard_footer .mx_AccessibleButton_kind_link_inline {
            color: #edf3ff;
        }

.mx_ThreadPanel_viewInRoom::before {
    -webkit-mask-image: url(../../img/element-icons/view-in-room.afeddb7.svg);
            mask-image: url(../../img/element-icons/view-in-room.afeddb7.svg);
}

.mx_ThreadPanel_copyLinkToThread::before {
    -webkit-mask-image: url(../../icons/link.d0734d2.svg);
            mask-image: url(../../icons/link.d0734d2.svg);
}

.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 10px 20px 10px 30px;
        position: relative;
    }

.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem:hover {
            background-color: #22262e;
        }

.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem[aria-checked="true"] :first-child {
                margin-left: -20px;
            }

.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem[aria-checked="true"] :first-child::before {
                content: "";
                width: 12px;
                height: 12px;
                margin-right: 8px;
                -webkit-mask-image: url(../../icons/check.aaad650.svg);
                        mask-image: url(../../icons/check.aaad650.svg);
                -webkit-mask-size: 100%;
                        mask-size: 100%;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                background-color: #edf3ff;
                display: inline-block;
                vertical-align: middle;
            }

.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem :last-child {
            color: #edf3ff;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_TimelineCard .mx_TimelineCard_timeline {
        overflow: hidden;
        position: relative; /* offset parent for jump to bottom button */
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        border-radius: 8px;
    }

.mx_TimelineCard .mx_NewRoomIntro {
        -webkit-margin-start: var(--BaseCard_EventTile-spacing-inline);
                margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
        -webkit-margin-end: var(--BaseCard_EventTile-spacing-inline);
                margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
    }

.mx_TimelineCard .mx_EventTile_content {
        margin-right: 0;
    }

.mx_TimelineCard .mx_EventTile .mx_ThreadSummary {
            position: relative;
            padding-right: 11px;
        }

.mx_TimelineCard .mx_EventTile .mx_ThreadSummary::after {
                content: "";
                display: block;
                position: absolute;
                left: 0;
                bottom: -16px;
                height: 1px;
                width: 100%;
                border-bottom: 1px solid #616b7f;
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"],
        .mx_TimelineCard .mx_EventTile[data-layout="group"] {
            --TimelineCard_ReadReceiptGroup-inset-block-start: -6px;
        }

.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_line,
            .mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_line,
            .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line,
            .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_line {
                padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
                -webkit-padding-end: 46px;
                        padding-inline-end: 46px;
                -webkit-padding-end: var(--MessageTimestamp-width);
                        padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_line .mx_EventTile_e2eIcon {
                    inset-inline-start: 8px;
                }

.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info {

                /* Info events should have the same size as state events, those
                 * are usually wrapped in a generic event list summary */
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_avatar, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar {
                    inset-inline-start: 18px;
                }

.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info {
                font: var(--cpd-font-body-sm-regular);
}

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_avatar, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_avatar {
                inset-inline-start: -3px;
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
                -webkit-margin-end: 0;
                        margin-inline-end: 0;
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption .mx_ReadReceiptGroup, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
                    top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
                }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile,
            .mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ReactionsRow,
            .mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ThreadSummary,
            .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile,
            .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ReactionsRow,
            .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ThreadSummary {
                -webkit-margin-start: var(--BaseCard_EventTile-spacing-inline);
                        margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile {
                max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline)); /* instead of $left-gutter */
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ReplyTile .mx_DisambiguatedProfile, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ReplyTile .mx_DisambiguatedProfile {
                -webkit-margin-start: 0;
                        margin-inline-start: 0;
                max-width: none;
                max-width: initial;
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_MessageTimestamp, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_MessageTimestamp {
                inset-inline: auto 0;
                font-size: 0.75rem;
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ReactionsRow, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ReactionsRow {
                /* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
                -webkit-margin-end: 8px;
                        margin-inline-end: 8px;
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ThreadSummary, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ThreadSummary {
                -webkit-margin-end: 0;
                        margin-inline-end: 0;
                max-width: min(calc(100% - 36px), 600px);
            }

.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_avatar,
            .mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_MessageTimestamp {
                position: absolute;
            }

.mx_TimelineCard .mx_EventTile[data-layout="group"] {
            /* Read receipt group on compact modern layout */
            /* This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout, */
        }

/* which specifies the default position of mx_ReadReceiptGroup on compact modern layout. */

.mx_MatrixChat_useCompactLayout .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ReadReceiptGroup {
                top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
            }

.mx_TimelineCard .mx_EventTile[data-layout="bubble"]::before {
                z-index: auto; /* enable background color on hover */
            }

.mx_TimelineCard .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_MessageActionBar {
                /* 1px: border width */
                inset-inline-end: calc(8px + 1px);
                inset-inline-end: calc(var(--container-gap-width) + 1px);
            }

.mx_TimelineCard .mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
                position: relative; /* display on hover */
            }

.mx_TimelineCard .mx_LegacyCallEvent_wrapper {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin: auto 5px;
    }

.mx_TimelineCard .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
            margin: 4px;
        }

.mx_TimelineCard .mx_GenericEventListSummary[data-layout="irc"] .mx_EventTile_line,
            .mx_TimelineCard .mx_GenericEventListSummary[data-layout="irc"] .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line,
            .mx_TimelineCard .mx_GenericEventListSummary[data-layout="group"] .mx_EventTile_line,
            .mx_TimelineCard .mx_GenericEventListSummary[data-layout="group"] .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
                -webkit-padding-start: var(--BaseCard_EventTile-spacing-inline);
                        padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
                -webkit-padding-end: 46px;
                        padding-inline-end: 46px;
                -webkit-padding-end: var(--MessageTimestamp-width);
                        padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
            }

.mx_TimelineCard .mx_WhoIsTypingTile {
        margin-left: -12px; /* undo padding on the message list */
    }

.mx_TimelineCard .mx_WhoIsTypingTile_avatars {
        -ms-flex-preferred-size: 48px;
            flex-basis: 48px; /* 12 (padding on message list) + 36 (padding on event lines) */
    }

/* RR next to a message on the messsge list */

.mx_TimelineCard .mx_GenericEventListSummary_unstyledList .mx_EventTile[data-layout="bubble"] .mx_ReadReceiptGroup, .mx_TimelineCard .mx_RoomView_MessageList .mx_EventTile[data-layout="bubble"] .mx_ReadReceiptGroup {
                /* 6px: scroll bar width (magic number) */
                /* stylelint-disable-next-line declaration-colon-space-after */
                inset-inline-end: calc(
                    -1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 8px + 6px
                );
                inset-inline-end: calc(
                    -1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + var(--container-gap-width) + 6px
                );
            }

.mx_TimelineCard .mx_GenericEventListSummary_unstyledList .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_ReadReceiptGroup, .mx_TimelineCard .mx_RoomView_MessageList .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_ReadReceiptGroup {
                    inset-inline-end: -4px; /* align with RR outside of info tile */
                }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UserInfo.mx_BaseCard {
    /* UserInfo has a circular image at the top so it fits between the back & close buttons */
    padding-top: 0;
    overflow-y: auto;
    font-size: var(--cpd-font-size-body-sm);
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
        cursor: pointer;
        position: absolute;
        top: 0;
        border-radius: 4px;
        background-color: var(--cpd-color-bg-subtle-secondary);
        margin: 9px;
        z-index: 1; /* render on top of the right panel */
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
            height: 16px;
            width: 16px;
            padding: 4px;
            -webkit-mask-image: url(../../icons/chevron-left.18c22d7.svg);
                    mask-image: url(../../icons/chevron-left.18c22d7.svg);
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            background-color: #a1b2d1;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
        padding: var(--cpd-space-2x) 0 var(--cpd-space-4x);
        margin: 0 var(--cpd-space-4x);
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container + .mx_UserInfo_container {
            border-top: 1px solid var(--cpd-color-gray-400);
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 8px;
    }

.mx_UserInfo.mx_BaseCard .mx_RoomTile_titleContainer {
        width: 154px;
    }

.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
        display: none;
    }

.mx_UserInfo.mx_BaseCard .mx_RoomTile_title {
        width: 160px;
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
        margin: var(--cpd-space-12x) var(--cpd-space-4x) 0 var(--cpd-space-4x);
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition {
            max-width: 120px;
            aspect-ratio: 1 / 1;
            margin: 0 auto;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition .mx_BaseAvatar {
                /* Override the calculated font-size so that the letter isn't tiny */
                font-size: 4rem;
            }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition .mx_BaseAvatar,
            .mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition .mx_BaseAvatar img {
                width: 100%;
                height: 100%;
            }

.mx_UserInfo.mx_BaseCard h2 {
        text-transform: uppercase;
        color: #edf3ff;
        font: var(--cpd-font-body-md-semibold);
        font-weight: var(--cpd-font-weight-semibold);
        margin: 4px 0;
    }

.mx_UserInfo.mx_BaseCard p {
        margin: 5px 0;
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_header {
        margin-bottom: var(--cpd-space-8x);
        padding-bottom: 0;
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-1x);
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h1 {
            margin: 0;
            font-size: 1.25rem;
            line-height: 1.5625rem;
        }

/* E2E icon wrapper */

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h1 .mx_Flex > span {
                display: inline-block;
            }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profile_name {
            min-height: 30px;

            /* limit to 2 lines, show an ellipsis if it overflows */
            /* this looks webkit specific but is supported by Firefox 68+ */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profile_mxid {
            color: var(--cpd-color-text-secondary);
            height: 28px;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
            height: 20px;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_timezone {
            height: 20px;
            margin: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

/** Overrides for the copy to clipboard button **/

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText_copyButton {
            width: 28px;
            height: 28px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            position: static;
            position: initial;
            padding-left: var(--cpd-space-2x);
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText_copyButton::before {
            width: 20px;
            height: 20px;
            background-color: var(--cpd-color-icon-secondary-alpha);
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_timezone {
        margin: var(--cpd-space-1x) 0;
    }

.mx_UserInfo.mx_BaseCard .mx_PresenceLabel {
        font: var(--cpd-font-body-sm-regular);
        opacity: 1;
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification {
        margin-top: var(--cpd-space-4x);
        height: 36px;
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verified_badge {
            min-width: 68px;
            height: 20px;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verified_badge .mx_UserInfo_verified_icon {
                -ms-flex-negative: 0;
                    flex-shrink: 0;
            }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verified_badge .mx_UserInfo_verified_label {
                margin: 0;
            }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verification_unavailable {
            color: var(--cpd-color-text-secondary);
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;

            margin: 6px 0;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                /* try to make it the same height as the dropdown */
                margin: 11px 0 12px 0;
            }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field {
                margin: 0;
            }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
        line-height: 1rem;
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {

        font: var(--cpd-font-body-sm-regular);
        font-size: 0.6875rem;
        line-height: 1rem;
        opacity: 0.5;
        overflow: hidden;
        word-break: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        max-height: calc(1rem * 3);
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
    }

.mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_UserInfo_avatar_transition {
                max-width: 72px;
                margin: 0 auto;
            }

.mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar {
                /* Override the calculated font-size so that the letter isn't tiny */
                font-size: 2rem;
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* center the big shield icon */

.mx_VerificationPanel_verified_section .mx_E2EIcon, .mx_VerificationPanel_reciprocate_section .mx_E2EIcon {
        /* Override general user info margin */
        margin: 20px auto !important;
    }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) > div > p {
            margin-top: 0;
            margin-bottom: 0;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationPanel_verifyByEmojiButton,
        .mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_UserInfo_wideButton {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_EncryptionInfo_spinner,
        .mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationShowSas {
            -webkit-margin-start: auto;
                    margin-inline-start: auto;
            -webkit-margin-end: auto;
                    margin-inline-end: auto;
        }

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_Spinner,
        .mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationShowSas {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_UserInfo.mx_BaseCard .mx_EncryptionPanel_cancel {
        cursor: pointer;
        position: relative;
        width: 28px;
        height: 28px;
        border-radius: 14px;
        background-color: var(--cpd-color-bg-subtle-secondary);
    }

.mx_UserInfo.mx_BaseCard .mx_EncryptionPanel_cancel:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_UserInfo.mx_BaseCard .mx_EncryptionPanel_cancel::before {
        content: "";
        width: 28px;
        height: 28px;
        left: 0;
        top: 0;
        position: absolute;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_UserInfo.mx_BaseCard .mx_EncryptionPanel_cancel {
        position: absolute;
        z-index: 100;
        top: 14px;
        right: 14px;
}

.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode {
        padding: 4px 4px 0 4px;
        background: white;
        border-radius: 4px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        /* Override general user info margin */
        margin: 0 auto !important;
    }

.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode canvas {
            /* override height and width which are set on the element directly */
            height: auto !important;
            width: 100% !important;
            max-width: 240px;
        }

.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
            width: 100%;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            padding: 10px;
            display: block;
            margin: 10px 0;
        }

/* Special case styling for EncryptionPanel in a Modal dialog */

.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 10px;
        margin-bottom: 10px;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText {
            width: 50px;
            vertical-align: middle;
            text-align: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption {
            background-color: #22262e;
            border-radius: 10px;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 20px;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            position: relative;
            max-width: 310px;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
        }

.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,
            .mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,
            .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,
            .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR {
                width: 220px !important;
                height: 220px !important;
                background-color: #fff;
                border-radius: 4px;
                vertical-align: middle;
                text-align: center;
                padding: 10px;
            }

.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p {
                margin-top: 0;
                font-weight: 700;
            }

.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText {
                font: var(--cpd-font-body-md-regular);
                margin: 30px 0;
                text-align: center;
            }

/* EncryptionPanel when verification is done */

/* right align the "Got it" button */

.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton, .mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton {
            float: right;
        }

.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton, .mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
            margin-left: 10px;
            padding: 7px 40px;
        }

.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons, .mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_WidgetCard .mx_AppTileFullWidth {
        max-width: none;
        max-width: initial;
        width: auto !important;
        height: 100%;
        border: 0;
    }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AliasSettings_localAddresses {
    cursor: pointer;
    color: var(--cpd-color-text-primary);
    font-weight: var(--cpd-font-weight-semibold);
    text-decoration: underline;
    list-style: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

/* list-style doesn't do it for webkit */

.mx_AliasSettings_localAddresses::-webkit-details-marker {
        display: none;
    }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_EmptyRoomList_GenericPlaceholder {
    -ms-flex-item-align: center;
        align-self: center;
    /** It should take 2/3 of the width **/
    width: 66%;
    /** It should be positioned at 1/3 of the height **/
    padding-top: 33%;
}

.mx_EmptyRoomList_GenericPlaceholder .mx_EmptyRoomList_GenericPlaceholder_title {
        font: var(--cpd-font-body-lg-semibold);
        text-align: center;
    }

.mx_EmptyRoomList_GenericPlaceholder .mx_EmptyRoomList_GenericPlaceholder_description {
        font: var(--cpd-font-body-sm-regular);
        color: var(--cpd-color-text-secondary);
        text-align: center;
    }

.mx_EmptyRoomList_GenericPlaceholder .mx_EmptyRoomList_DefaultPlaceholder {
        margin-top: var(--cpd-space-4x);
    }

.mx_EmptyRoomList_GenericPlaceholder button {
        width: 100%;
    }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomList {
    height: 100%;
}

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomListHeaderView {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 60px;
            flex: 0 0 60px;
    padding: 0 var(--cpd-space-3x);
}

.mx_RoomListHeaderView .mx_RoomListHeaderView_title {
        min-width: 0;
    }

.mx_RoomListHeaderView .mx_RoomListHeaderView_title h1 {
            all: unset;
            font: var(--cpd-font-heading-sm-semibold);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

.mx_RoomListHeaderView .mx_SpaceMenu_button svg {
            -webkit-transition: -webkit-transform 0.1s linear;
            transition: -webkit-transform 0.1s linear;
            transition: transform 0.1s linear;
            transition: transform 0.1s linear, -webkit-transform 0.1s linear;
        }

.mx_RoomListHeaderView .mx_SpaceMenu_button[aria-expanded="true"] svg {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomListItemMenuView svg {
        fill: var(--cpd-color-icon-primary);
    }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

/**
 * The RoomListItemView has the following structure:
 * button--------------------------------------------------|
 * | <-12px-> container------------------------------------|
 * |          | room avatar <-8px-> content----------------|
 * |          |                      | room_name <- 20px ->|
 * |          |                      | --------------------| <-- border
 * |-------------------------------------------------------|
 */

.mx_RoomListItemView {
    all: unset;
    cursor: pointer;
}

.mx_RoomListItemView .mx_RoomListItemView_container {
        padding-left: var(--cpd-space-3x);
        font: var(--cpd-font-body-md-regular);
        height: 100%;
    }

.mx_RoomListItemView .mx_RoomListItemView_container .mx_RoomListItemView_content {
            height: 100%;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            /* The border is only under the room name and the future hover menu  */
            border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            min-width: 0;
            padding-right: var(--cpd-space-5x);
        }

.mx_RoomListItemView .mx_RoomListItemView_container .mx_RoomListItemView_content .mx_RoomListItemView_text {
                min-width: 0;
            }

.mx_RoomListItemView .mx_RoomListItemView_container .mx_RoomListItemView_content .mx_RoomListItemView_roomName {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

.mx_RoomListItemView .mx_RoomListItemView_container .mx_RoomListItemView_content .mx_RoomListItemView_messagePreview {
                font: var(--cpd-font-body-sm-regular);
                color: var(--cpd-color-text-secondary);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

.mx_RoomListItemView_hover {
    background-color: var(--cpd-color-bg-action-secondary-hovered);
}

.mx_RoomListItemView_menu_open .mx_RoomListItemView_container .mx_RoomListItemView_content {
    /**
     * The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
     * the icon size of the menu is 18px instead of 20px with a different internal padding
     * We need to use 18px to align the icon with the others icons
     * 18px is not available in compound spacing
     */
    padding-right: 18px;
}

.mx_RoomListItemView_selected {
    background-color: var(--cpd-color-bg-action-secondary-pressed);
}

.mx_RoomListItemView_bold .mx_RoomListItemView_roomName {
    font: var(--cpd-font-body-md-semibold);
}

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomListPanel {
    background-color: var(--cpd-color-bg-canvas-default);
    height: 100%;
    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
}

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomListPrimaryFilters {
    padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-2x) var(--cpd-space-3x);
}

.mx_RoomListPrimaryFilters .mx_RoomListPrimaryFilters_wrapping {
        display: none;
    }

.mx_RoomListPrimaryFilters ul {
        margin: 0;
        margin: initial;
        padding: 0;
        padding: initial;
        list-style-type: none;
        /**
         * The InteractionObserver needs the height to be set to work properly.
         */
        height: 100%;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_RoomListPrimaryFilters .mx_RoomListPrimaryFilters_IconButton svg {
            -webkit-transition: -webkit-transform 0.1s linear;
            transition: -webkit-transform 0.1s linear;
            transition: transform 0.1s linear;
            transition: transform 0.1s linear, -webkit-transform 0.1s linear;
        }

.mx_RoomListPrimaryFilters .mx_RoomListPrimaryFilters_IconButton[aria-expanded="true"] svg {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomListSearch {
    /* From figma, this should be aligned with the room header */
    -webkit-box-flex: 0;
        -ms-flex: 0 0 64px;
            flex: 0 0 64px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
    padding: 0 var(--cpd-space-3x);
}

.mx_RoomListSearch svg {
        fill: var(--cpd-color-icon-secondary);
    }

.mx_RoomListSearch .mx_RoomListSearch_search {
        /* The search button should take all the remaining space */
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        font: var(--cpd-font-body-md-regular);
        color: var(--cpd-color-text-secondary);
        min-width: 0;
    }

.mx_RoomListSearch .mx_RoomListSearch_search span {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        }

.mx_RoomListSearch .mx_RoomListSearch_search span kbd {
                font-family: inherit;
            }

.mx_RoomListSearch .mx_RoomListSearch_search span {
            white-space: nowrap;
            overflow: hidden;
}

/* Shrink and truncate the search text */

.mx_RoomListSearch .mx_RoomListSearch_search span .mx_RoomListSearch_search_text {
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: start;
            }

.mx_RoomListSearch .mx_RoomListSearch_button:hover svg {
            fill: var(--cpd-color-icon-primary);
        }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomListSecondaryFilters {
    font: var(--cpd-font-body-md-medium);
    margin: var(--cpd-space-2x);
    margin-left: var(--cpd-space-1x);
}

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RoomListSkeleton {
    position: relative;
    margin-left: 4px;
    height: 100%;
}

.mx_RoomListSkeleton::before {
        background-color: var(--cpd-color-bg-subtle-secondary);
        width: 100%;
        height: 100%;

        content: "";
        position: absolute;
        -webkit-mask-repeat: repeat-y;
                mask-repeat: repeat-y;
        -webkit-mask-size: auto 96px;
                mask-size: auto 96px;
        -webkit-mask-image: url(../../img/element-icons/roomlist/room-list-item-skeleton.b543c8a.svg);
                mask-image: url(../../img/element-icons/roomlist/room-list-item-skeleton.b543c8a.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

:root {
    --AppTile_mini-height: 220px;
}

.mx_AppsDrawer {
    --minWidth: 240px; /* TODO this should be 300px but that's too large */

    margin: 8px;

    margin: var(--container-gap-width);
    /* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
    margin-right: calc(8px / 2);
    margin-right: calc(var(--container-gap-width) / 2);
    margin-bottom: 0; /* No bottom margin for the correct gap to the CallView below. */
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.mx_AppsDrawer .mx_AppsDrawer_resizer {
        margin-bottom: 8px;
        margin-bottom: var(--container-gap-width);
    }

.mx_AppsDrawer .mx_AppsDrawer_resizer_container {
        width: 100%;
        height: 10px;
        display: block;
        position: relative;
    }

.mx_AppsDrawer .mx_AppsDrawer_resizer_container .mx_AppsDrawer_resizer_container_handle {
            cursor: ns-resize;

            /* Override styles from library, making the whole area the target area */
            width: 100% !important;
            height: 100% !important;

            /* This is positioned directly below frame */
            position: absolute;
            bottom: 50% !important; /* override from library */

            /* We then render the pill handle in an ::after to keep it in the handle's */
        }

/* area without being a massive line across the screen */

.mx_AppsDrawer .mx_AppsDrawer_resizer_container .mx_AppsDrawer_resizer_container_handle::after {
                content: "";
                position: absolute;
                border-radius: 3px;

                height: 4px;
                bottom: 0;

                /* Together, these make the bar 64px wide */
                /* These are also overridden from the library */
                left: calc(50% - 32px);
                right: calc(50% - 32px);
            }

.mx_AppsDrawer:hover .mx_AppsDrawer_resizer_container_handle::after {
            opacity: 0.8;
            background: #edf3ff;
        }

.mx_AppsDrawer:hover .mx_ResizeHandle--horizontal::before {
            position: absolute;
            left: 3px;
            top: 50%;
            -webkit-transform: translate(0, -50%);
                    transform: translate(0, -50%);

            height: 64px; /* to match width of the ones on roomlist */
            width: 4px;
            border-radius: 4px;

            content: "";

            background-color: #edf3ff;
            opacity: 0.8;
        }

.mx_AppsDrawer .mx_AppTile {
        width: 50%;
        min-width: var(--minWidth);
    }

.mx_AppsDrawer.mx_AppsDrawer--maximised {
        margin-bottom: 8px;
        margin-bottom: var(--container-gap-width);
    }

.mx_AppsDrawer.mx_AppsDrawer--resizing .mx_AppTile_persistedWrapper {
        z-index: 1;
    }

.mx_AppsDrawer.mx_AppsDrawer--2apps .mx_AppTile {
        width: 50%;
    }

.mx_AppsDrawer.mx_AppsDrawer--2apps .mx_AppTile:nth-child(3) {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            width: 0 !important;
            min-width: var(--minWidth) !important;
        }

.mx_AppsDrawer.mx_AppsDrawer--3apps .mx_AppTile {
        width: 33%;
    }

.mx_AppsDrawer.mx_AppsDrawer--3apps .mx_AppTile:nth-child(3) {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            width: 0 !important;
            min-width: var(--minWidth) !important;
        }

.mx_AppsContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    width: 100%;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-height: 0;
}

.mx_AppsContainer .mx_AppTile:first-of-type {
        border-left-width: 8px;
        border-left-width: var(--container-border-width);
        border-radius: 10px 0 0 10px;
    }

.mx_AppsContainer .mx_AppTile:last-of-type {
        border-right-width: 8px;
        border-right-width: var(--container-border-width);
        border-radius: 0 10px 10px 0;
    }

.mx_AppsContainer .mx_ResizeHandle--horizontal {
        position: relative;
    }

.mx_AppsContainer .mx_ResizeHandle--horizontal > div {
            width: 0;
        }

.mx_AppTile {
    border: 8px solid #22262e;
    border: var(--container-border-width) solid #22262e;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #22262e;
}

.mx_AppTileFullWidth {
    width: 100% !important; /* to override the inline style set by the resizer */
    margin: 0;
    padding: 0;
    border: 8px solid #22262e;
    border: var(--container-border-width) solid #22262e;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #22262e;
}

.mx_AppTile_mini {
    width: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 220px;
    height: var(--AppTile_mini-height);
}

.mx_AppTile .mx_AppTile_persistedWrapper,
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.mx_AppTile_persistedWrapper div {
    width: 100%;
    height: 100%;
}

.mx_AppTileMenuBar {
    margin: 0;
    font-size: 0.75rem;
    background-color: #22262e;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 6px;
}

.mx_AppTileMenuBar .mx_AppTileMenuBar_title {
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.mx_AppTileMenuBar .mx_AppTileMenuBar_title .mx_WidgetAvatar {
            margin-right: 12px;
        }

.mx_AppTileMenuBar .mx_AppTileMenuBar_title h3 {
            font-size: inherit;
            margin: 0;
        }

.mx_AppTileMenuBar .mx_AppTileMenuBar_title > :last-child {
            margin-left: 9px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button {
            --size: 24px; /* Size of the button. Its height and width values should be same */

            margin: 0 4px;
            position: relative;
            height: 24px;
            height: var(--size);
            width: 24px;
            width: var(--size);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button:hover::after {
                content: "";
                position: absolute;
                height: var(--size);
                width: var(--size);
                background-color: #fff;
                border-radius: 50%;
                left: 0;
                top: 0;
            }

.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button .mx_Icon {
                color: #a1b2d1;
            }

/* Rules added to this selector style appTileBody generally */

.mx_AppTileBody {
    /* Apply to every variant of appTileBody */
    border-radius: 8px;
}

/* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */

.mx_AppTileBody .mx_AppTileBody_fadeInSpinner {
        /* place spinner and the message at the center of mx_AppTileBody */
        height: 100%;
        width: 100%;

        font-weight: bold; /* message next to the spinner */
        -webkit-animation-fill-mode: backwards;
                animation-fill-mode: backwards;
        -webkit-animation-duration: 200ms;
                animation-duration: 200ms;
        -webkit-animation-delay: 500ms;
                animation-delay: 500ms;
        -webkit-animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
                animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
    }

.mx_AppTileBody.mx_AppTileBody--large,
    .mx_AppTileBody.mx_AppTileBody--mini {
        width: 100%;
        overflow: hidden;
        height: var(--AppTileBody-height);
    }

.mx_AppTileBody.mx_AppTileBody--large iframe, .mx_AppTileBody.mx_AppTileBody--mini iframe {
            border: none;
            width: 100%;
            height: 100%;
        }

.mx_AppTileBody.mx_AppTileBody--large {
        --AppTileBody-height: 100%;

        background-color: #1a1d23;
    }

.mx_AppTileBody.mx_AppTileBody--large iframe {
            overflow: hidden;
            padding: 0;
            margin: 0;
            display: block;
        }

.mx_AppTileBody.mx_AppTileBody--mini {
        --AppTileBody-height: var(--AppTile_mini-height);
    }

.mx_AppTileBody.mx_AppTileBody--loading {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: relative;
        height: 100%;

        /* match bg of border so that the cut corners have the right fill */
        background-color: #1a1d23 !important;
    }

.mx_AppTileBody.mx_AppTileBody--loading iframe {
            display: none;
        }

.mx_AppTileBody.mx_AppTileBody--call {
        border-radius: 0px;
    }

/* const loadingElement */

.mx_AppTileBody.mx_AppTileBody--call.mx_AppTileBody--mini {
        border-radius: 8px;
    }

/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
   so rules to style appTileBody generally should not be included here. */

.mx_AppTile .mx_AppTileBody--large,
.mx_AppTileFullWidth .mx_AppTileBody--large,
.mx_AppTile_mini .mx_AppTileBody--mini {
    height: inherit;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

@-webkit-keyframes mx_AppTileBody_fadeInSpinnerAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.mx_Autocomplete {
    position: absolute;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    border: 1px solid #000000;
    background: #181b21;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: clip;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-shadow: 0px -16px 32px tranparent;
            box-shadow: 0px -16px 32px tranparent;
}

.mx_Autocomplete_ProviderSection {
    border-bottom: 1px solid #000000;
    width: 100%;
}

/* a "block" completion takes up a whole line */

.mx_Autocomplete_Completion_block {
    min-height: 34px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0 12px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #edf3ff;
}

.mx_Autocomplete_Completion_block * {
    margin: 0 3px;
}

.mx_Autocomplete_Completion_pill {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 2rem;
    height: 2.125rem;
    padding: 0.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #edf3ff;
}

.mx_Autocomplete_Completion_pill > * {
    margin-right: 0.3rem;
}

/* styling for common completion elements */

.mx_Autocomplete_Completion_subtitle {
    font-style: italic;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.mx_Autocomplete_Completion_description {
    color: gray;
    min-width: 150px;
}

.mx_Autocomplete_Completion_container_pill {
    margin: 12px;
    height: 100%;
    overflow-y: scroll;
    max-height: 35vh;
}

.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 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.mx_Autocomplete_Completion.selected,
.mx_Autocomplete_Completion:hover {
    background: #343a46;
    outline: none;
}

.mx_Autocomplete_provider_name {
    margin: 12px;
    color: #edf3ff;
    font-weight: 400;
    opacity: 0.4;
}

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AuxPanel {
    min-width: 0px;
    width: 100%;
    margin: 0px auto;

    overflow: auto;
}

/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_BasicMessageComposer {
    /* These are set in Javascript */
    --avatar-letter: "";
    --avatar-background: unset;
    --placeholder: "";

    position: relative;
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
        content: var(--placeholder);
        color: var(--cpd-color-text-secondary);
        width: 0;
        height: 0;
        overflow: visible;
        display: inline-block;
        pointer-events: none;
        white-space: nowrap;
    }

@-webkit-keyframes visualbell {
        from {
            background-color: #800;
        }
        to {
            background-color: #181b21;
        }
    }

@keyframes visualbell {
        from {
            background-color: #800;
        }
        to {
            background-color: #181b21;
        }
    }

.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
        -webkit-animation: 0.2s visualbell;
                animation: 0.2s visualbell;
    }

.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
        white-space: pre-wrap;
        word-wrap: break-word;
        outline: none;
        overflow-x: hidden;
    }

/* navigated through in a single keypress */

.mx_BasicMessageComposer .mx_BasicMessageComposer_input .caretNode {
            -webkit-user-select: all;
               -moz-user-select: all;
                    user-select: all;
        }

/* Force caret nodes to be selected in full so that they can be */

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill,
            .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,
            .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill {
                -webkit-user-select: all;
                   -moz-user-select: all;
                        user-select: all;
                position: relative;
                cursor: inherit; /* We don't want indicate clickability */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill:hover {
                    /* We don't want indicate clickability | To override the overriding of .markdown-body */
                    background-color: var(--cpd-color-bg-action-primary-rest) !important;
                }

/* avatar psuedo element */

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill::before {
                    display: inline-block;
                    content: var(--avatar-letter);
                    width: 1rem;
                    min-width: 1rem; /* ensure the avatar is not compressed */
                    height: 1rem;
                    -webkit-margin-end: 0.24rem;
                            margin-inline-end: 0.24rem;
                    background: var(--avatar-background), #181b21;
                    color: #ffffff;
                    color: var(--avatar-color, #ffffff);
                    background-repeat: no-repeat;
                    background-size: 1rem;
                    border-radius: 1rem;
                    text-align: center;
                    font-weight: normal;
                    line-height: 1rem;
                    font-size: 0.6275rem;
                }

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
            /* Ignore all user input to avoid accidentally triggering the composer */
            pointer-events: none;
        }

.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
        position: relative;
        height: 0;
    }

.mx_JoinRuleDialog .mx_JoinRuleDialogButtons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-column-gap: 5px;
           -moz-column-gap: 5px;
                column-gap: 5px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DecryptionFailureBar {
    --gap-row: 8px;
    --gap-column: 12px;
    --gap: var(--gap-row) var(--gap-column);
    --size-icon: 24px;

    background-color: #21262c;
    padding: 12px;
    margin-inline: 16px;
    border-radius: 4px;
}

.mx_DecryptionFailureBar.mx_DecryptionFailureBar--withEnd {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        row-gap: calc(var(--gap-row) + 4px); /* Increase spacing between the message and the buttons */
    }

.mx_DecryptionFailureBar.mx_DecryptionFailureBar--withEnd .mx_DecryptionFailureBar_end {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */
            gap: 8px 8px;
            gap: var(--buttons-dialog-gap-row) var(--buttons-dialog-gap-column);
            -webkit-margin-start: calc(var(--size-icon) + var(--gap-column));
                    margin-inline-start: calc(var(--size-icon) + var(--gap-column)); /* Align the button(s) and the message */
        }

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start {
        display: grid;
        grid-gap: var(--gap);
        gap: var(--gap);
        grid-template-areas:
            "status headline"
            ".      message";
        grid-template-columns: var(--size-icon) auto;
    }

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_status {
            grid-area: status;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            gap: var(--gap);
        }

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_status .mx_Spinner {
                height: auto;
                height: initial; /* Unset height: 100% */
            }

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_status .mx_DecryptionFailureBar_start_status_icon {
                min-width: var(--size-icon);
                height: var(--size-icon);
                -webkit-mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg);
                        mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg);
                background-color: #ff5b55;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
            }

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_headline {
            grid-area: headline;

            font-weight: var(--cpd-font-weight-semibold);
            font-size: 1rem;
            align-self: center;
        }

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_message {
            grid-area: message;

            color: #edf3ff;
        }

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_E2EIcon {
    width: 16px;
    height: 16px;
    margin: 0 9px;
    position: relative;
    display: block;
}

.mx_E2EIcon_warning::before,
    .mx_E2EIcon_warning::after,
    .mx_E2EIcon_normal::before,
    .mx_E2EIcon_normal::after,
    .mx_E2EIcon_verified::before,
    .mx_E2EIcon_verified::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
    }

/* transparent-looking border surrounding the shield for when overlain over avatars */

.mx_E2EIcon_bordered {
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
            mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    background-color: #22262e;
    -webkit-mask-size: 100%;
            mask-size: 100%;
}

/* shrink the actual badge */

.mx_E2EIcon_bordered::after {
        -webkit-mask-size: 75%;
                mask-size: 75%;
    }

/* shrink the infill of the badge */

.mx_E2EIcon_bordered::before {
        -webkit-mask-size: 60%;
                mask-size: 60%;
        background: var(--cpd-color-bg-canvas-default);
    }

.mx_E2EIcon_warning::after {
    -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
            mask-image: url(../../img/e2e/warning.71ffc83.svg);
    background-color: #ff5b55;
}

.mx_E2EIcon_normal::after {
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
            mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    background-color: white;
}

.mx_E2EIcon_verified::after {
    -webkit-mask-image: url(../../img/e2e/verified.2ccf64e.svg);
            mask-image: url(../../img/e2e/verified.2ccf64e.svg);
    background-color: #0dbd8b;
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_E2EIconView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_E2EIconView_warning {
    color: var(--cpd-color-icon-critical-primary);
}

.mx_E2EIconView_verified {
    color: var(--cpd-color-icon-success-primary);
}

/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EditMessageComposer {
    --EditMessageComposer-padding-inline: 3px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100%; /* disable overflow */
    width: auto;
    gap: 5px;
    padding: 3px 3px;
    padding: 3px var(--EditMessageComposer-padding-inline);
}

.mx_EditMessageComposer .mx_BasicMessageComposer_input {
        border-radius: 4px;
        border: solid 1px #000000;
        background-color: #181b21;
        max-height: 200px;
        padding: 3px 6px;
    }

.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
            border-color: var(--cpd-color-border-interactive-primary);
        }

.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap-reverse;
                flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        gap: 5px;
        -webkit-margin-start: auto;
                margin-inline-start: auto;
    }

.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            min-width: 100px; /* magic number to align the edge of the button with the input area */
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EmojiButton {
    --size: 26px;
    position: relative;
    cursor: pointer;
    height: 26px;
    height: var(--size);
    line-height: 26px;
    line-height: var(--size);
    width: auto;
    padding-left: 26px;
    padding-left: var(--size);
    border-radius: 50%;
}

.mx_EmojiButton::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        height: 20px;
        width: 20px;
        background-color: var(--cpd-color-icon-tertiary);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        z-index: 2;
    }

.mx_EmojiButton::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
    }

.mx_EmojiButton:hover::after {
            background: var(--cpd-color-bg-subtle-secondary);
        }

.mx_EmojiButton:hover::before {
            background-color: var(--cpd-color-icon-secondary);
        }

.mx_EmojiButton_highlight {
    background: var(--cpd-color-bg-subtle-primary);
}

.mx_EmojiButton_highlight::before {
        background-color: var(--cpd-color-icon-primary) !important;
    }

.mx_EmojiButton_icon::before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.d7b1970.svg);
            mask-image: url(../../img/element-icons/room/composer/emoji.d7b1970.svg);
}

.mx_MessageComposer_wysiwyg .mx_EmojiButton {
        --size: 26px;
        position: relative;
        cursor: pointer;
        height: 26px;
        height: var(--size);
        line-height: 26px;
        line-height: var(--size);
        width: auto;
        padding-left: 26px;
        padding-left: var(--size);
        border-radius: 5px;
    }

.mx_MessageComposer_wysiwyg .mx_EmojiButton::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        height: 20px;
        width: 20px;
        background-color: var(--cpd-color-icon-tertiary);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        z-index: 2;
    }

.mx_MessageComposer_wysiwyg .mx_EmojiButton::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: var(--size);
        height: var(--size);
        border-radius: 5px;
    }

.mx_MessageComposer_wysiwyg .mx_EmojiButton:hover::after {
            background: rgba(33,38,44, 0.9);
        }

.mx_MessageComposer_wysiwyg .mx_EmojiButton:hover::before {
            background-color: #edf3ff;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomView_body[data-layout="bubble"] .mx_RoomView_timeline,
    .mx_RoomView_body[data-layout="bubble"] .mx_RoomView_statusArea,
    .mx_RoomView_body[data-layout="bubble"] .mx_MessageComposer {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

.mx_EventTile[data-layout="bubble"],
.mx_GenericEventListSummary[data-layout="bubble"] {
    --avatarSize: 32px;
    --gutterSize: 11px;
    --cornerRadius: 12px;
    --maxWidth: 70%;

    /* For both event tile and event list summary */
    --EventTile_bubble-margin-inline-start: 49px;
    --EventTile_bubble-margin-inline-end: 60px;

    -webkit-margin-start: 49px;

            margin-inline-start: 49px;

    -webkit-margin-start: var(--EventTile_bubble-margin-inline-start);

            margin-inline-start: var(--EventTile_bubble-margin-inline-start);
    -webkit-margin-end: 60px;
            margin-inline-end: 60px;
    -webkit-margin-end: var(--EventTile_bubble-margin-inline-end);
            margin-inline-end: var(--EventTile_bubble-margin-inline-end);
}

.mx_EventTile[data-layout="bubble"] {
    --EventTile_bubble_line-margin-inline-start: -9px;
    --EventTile_bubble_line-margin-inline-end: -12px;
    --EventTile_bubble_gap-inline: 5px;
}

.mx_EventTile[data-layout="bubble"] .mx_MessageTimestamp {
        width: auto;
        width: initial; /* Cancel the default width */
        max-width: 80px;
        max-width: var(--MessageTimestamp-max-width);
    }

.mx_EventTile[data-layout="bubble"] .mx_ThreadSummary {
        clear: both;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_content {
        margin-right: 0;
    }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar {
        line-height: 0;
        border: 4px solid #181b21;
        border-radius: 50%;
        position: absolute;
        top: 6px;
        z-index: 9;
    }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_avatar img {
            -webkit-box-shadow: 0 0 0 3px #181b21;
                    box-shadow: 0 0 0 3px #181b21;
            border-radius: 50%;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_highlight .mx_EventTile_avatar {
            border-color: #25271f;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_highlight::before {
            background-color: #25271f;
        }

.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar {
            border-color: #1c2026;
        }

/* For replies */

.mx_EventTile[data-layout="bubble"] .mx_EventTile {
        padding-top: 0;
    }

.mx_EventTile[data-layout="bubble"]::before {
        content: "";
        position: absolute;
        top: -1px;
        bottom: -1px;
        left: calc(-1 * var(--EventTile_bubble-margin-inline-start));
        right: calc(-1 * var(--EventTile_bubble-margin-inline-end));
        z-index: -1;
        border-radius: 4px;
    }

.mx_EventTile[data-layout="bubble"]:hover::before, .mx_EventTile[data-layout="bubble"].mx_EventTile_selected::before {
            background: #1c2026;
        }

.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar img, .mx_EventTile[data-layout="bubble"].mx_EventTile_selected .mx_EventTile_avatar img {
                -webkit-box-shadow: 0 0 0 3px #1c2026;
                        box-shadow: 0 0 0 3px #1c2026;
            }

.mx_EventTile[data-layout="bubble"] .mx_DisambiguatedProfile,
    .mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
        --EventBubbleTile_line-max-width: 70%;

        width: -webkit-fit-content;

        width: -moz-fit-content;

        width: fit-content;
        max-width: 70%;
        max-width: var(--EventBubbleTile_line-max-width); /* Align message bubble and displayName */
        line-height: 1.125rem; /* fixed line height to prevent emoji from being taller than text */
    }

/* other users profile on bubble layout */

.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile {
        white-space: normal; /* display mxid */
    }

.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
            white-space: nowrap; /* truncate long display names */
            -webkit-margin-end: 5px;
                    margin-inline-end: 5px;

            /* For RTL displayName */
            unicode-bidi: embed;
            direction: ltr;
        }

.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
            -webkit-margin-start: 0;
                    margin-inline-start: 0; /* Align mxid with truncated displayName
                inside mx_EventTile[data-layout="bubble"] */
        }

/* (on the main panel and the chat panel with a maximized widget) */

.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile,
    
    .mx_EventTile[data-layout="bubble"] .mx_EventTile_senderDetails > .mx_DisambiguatedProfile {
        position: relative;
        top: -2px;
        left: 2px;
        font-size: 0.9375rem;
    }

/* inside mx_RoomView_MessageList, outside of mx_ReplyTile */

.mx_EventTile[data-layout="bubble"] .mx_MessageActionBar {
        top: -28px;
        z-index: 9; /* above the avatar */
    }

.mx_EventTile[data-layout="bubble"] .mx_MediaBody {
        /* leave space for the timestamp */
        padding-right: 48px;
    }

.mx_EventTile[data-layout="bubble"] .mx_MImageBody .mx_MImageBody_thumbnail_container {
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
            min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
        }

.mx_EventTile[data-layout="bubble"] .mx_LegacyCallEvent {
        background-color: transparent;
        background-color: initial;

        border-style: solid;
        border-width: 1px;
        border-color: #6f7882;
    }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_footer {
        margin: var(--cpd-space-1-5x) 0;
        margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
    }

.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
            border-bottom-right-radius: var(--cornerRadius);
        }

.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
            .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MImageBody::before,
            .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
            .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MediaBody,
            .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MLocationBody_map,
            .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MBeaconBody {
                border-bottom-right-radius: var(--cornerRadius) !important;
            }

.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_avatar {
            left: -36px;
        }

.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar {
            inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
            right: auto;
            right: initial; /* Reset the default value */
        }

.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_ThreadSummary {
            -webkit-margin-start: calc(-1 * var(--gutterSize));
                    margin-inline-start: calc(-1 * var(--gutterSize));
            -webkit-margin-end: auto;
                    margin-inline-end: auto;
        }

.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_ReactionsRow,
        .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_footer {
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
        }

.mx_EventTile[data-layout="bubble"][data-self="false"] {

        --backgroundColor: #22262e;
}

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
            -webkit-margin-start: auto;
                    margin-inline-start: auto;
            border-bottom-left-radius: var(--cornerRadius);
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
            .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MImageBody::before,
            .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
            .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MediaBody,
            .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MLocationBody_map,
            .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MBeaconBody {
                border-bottom-left-radius: var(--cornerRadius) !important;
            }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_sticker {
            /* align timestamp with those inside bubbles */
            margin-right: 32px;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ThreadSummary {
            -webkit-margin-start: auto;
                    margin-inline-start: auto;
            -webkit-margin-end: calc(-1 * var(--gutterSize));
                    margin-inline-end: calc(-1 * var(--gutterSize));
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_DisambiguatedProfile {
            display: none;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReplyTile .mx_DisambiguatedProfile {
            display: block;
            max-width: 100%;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_footer {
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow {
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow > :last-child {
                -webkit-box-ordinal-group: 0;
                    -ms-flex-order: -1;
                        order: -1; /* Moving the "add reaction button" before the reactions */
            }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_avatar {
            top: -19px; /* height of the sender block */
            right: -38px;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MediaBody {
            background: #14322e;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MessageActionBar {
            inset-inline-end: 0;
        }

.mx_EventTile[data-layout="bubble"][data-self="true"] {

        --backgroundColor: #14322e;
}

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 5px var(--EventTile_bubble_gap-inline);
        margin-block: 0;
        margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
        border-top-left-radius: var(--cornerRadius);
        border-top-right-radius: var(--cornerRadius);

        /* noinspection CssReplaceWithShorthandSafely */
    }

/* in the DOM depending on the specific rendering context */

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line > a, 
        .mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp {
            position: absolute;
            padding: 4px 8px;
            bottom: 0;
            right: 0;
            z-index: 3; /* above media and location share maps */
        }

/* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */

/* TODO: Use a common class name instead */

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MFileBody,
            .mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MAudioBody {
                max-width: 100%; /* avoid overflow */
            }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MVoiceMessageBody {
                /* allow the event to be collapsed, this causes the waveform to get cropped */
                min-width: 0;
            }

/* we put the timestamps for media (other than stickers) atop the media */

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine.mx_EventTile_image .mx_MessageTimestamp {
                    border-radius: 8px;
                    border-radius: var(--MBody-border-radius);
                    /* Hardcoded colours because it's the same on all themes */
                    background-color: rgb(0, 0, 0, 0.6);
                    color: #ffffff;
                    padding: 0px 4px 0px 4px;
                }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_sticker > a, 
            .mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_sticker .mx_MessageActionBar + .mx_MessageTimestamp {
                /* position timestamps for stickers to the right of the un-bubbled sticker */
                right: auto;
                right: initial;
                left: 100%;
            }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_sticker .mx_MStickerBody_wrapper {
                padding: 0;
            }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MImageBody {
            width: 100%;
        }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
                position: static;
                position: initial;
            }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
        .mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
        .mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MediaBody {
            border-radius: 0;
            border-radius: initial;
            border-top-left-radius: var(--cornerRadius);
            border-top-right-radius: var(--cornerRadius);
        }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_EventTile_e2eIcon {
            -ms-flex-negative: 0;
                flex-shrink: 0; /* keep it at full size */

            /* Keep height equal to text for shield alignment, additional 2px because of 1px padding on text */
            height: calc(1.125rem + 2px);
        }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MPollEndBody {
            /* Prevent the poll end body from exceeding the tile width */
            width: 100%;
        }

.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
        /* make the top and bottom padding 1px smaller so that we can pad
            .mx_EventTile_content by 1px */
        /* to avoid anti-zalgo cutting off our larger than text emojis. */
        padding: calc(var(--gutterSize) - 1px);
        padding-right: 60px; /* space for the timestamp */
        background: var(--backgroundColor);
    }

.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) .mx_EventTile_content {
            padding: 1px;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line {
        border-top-left-radius: 0;
    }

.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MImageBody::before,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MediaBody,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MLocationBody_map,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MBeaconBody {
            border-top-left-radius: 0;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line {
        border-bottom-left-radius: var(--cornerRadius);
    }

.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MImageBody::before,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MediaBody,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MLocationBody_map,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MBeaconBody {
            border-bottom-left-radius: var(--cornerRadius);
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line {
        border-top-right-radius: 0;
    }

.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MImageBody::before,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MediaBody,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MLocationBody_map,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MBeaconBody {
            border-top-right-radius: 0;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line {
        border-bottom-right-radius: var(--cornerRadius);
    }

.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MImageBody::before,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MediaBody,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MLocationBody_map,
        .mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MBeaconBody {
            border-bottom-right-radius: var(--cornerRadius);
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_noSender .mx_EventTile_avatar {
            top: -19px;
        }

.mx_EventTile[data-layout="bubble"][data-has-reply="true"] > .mx_EventTile_line {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile_reply {
                max-width: 90%;
                padding: 0;
            }

.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile_reply > a, 
                .mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile_reply .mx_MessageActionBar + .mx_MessageTimestamp {
                    display: none !important;
                }

.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                gap: var(--gutterSize);
            }

.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile .mx_EventTile_avatar {
                    position: static;
                }

.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile .mx_DisambiguatedProfile {
                    display: none;
                }

.mx_EventTile[data-layout="bubble"] .mx_MPollBody {
        width: 550px; /* to prevent timestamp overlapping summary text */
        max-width: 100%; /* prevent overflowing a reply tile */
    }

.mx_EventTile[data-layout="bubble"] .mx_MPollBody .mx_MPollBody_totalVotes {
            /* align summary text with corner timestamp */
            padding: 4px 0;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad:hover::before {
                background: transparent;
            }

/* Special layout scenario for "Unable To Decrypt (UTD)" events */

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line {
            display: grid;
            grid-template:
                "reply reply" auto
                "shield body" auto
                / auto 1fr;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_UnknownBody,
            .mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_ReplyChain_wrapper,
            .mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_ViewSourceEvent {
                min-width: 0; /* Prevent a grid blowout */
            }

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_EventTile_e2eIcon {
                grid-area: shield;
                margin-top: auto;
                margin-bottom: auto;
            }

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_UnknownBody,
            .mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_DecryptionFailureBody {
                grid-area: body;
            }

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_ReplyChain_wrapper {
                grid-area: reply;
            }

/* "Unable To Decrypt" layout for hidden events */

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad.mx_EventTile_info .mx_EventTile_line {
                gap: 0 9px; /* 9px: margin value of E2E icon */
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                grid-template:
                    "shield source" auto
                    / auto 1fr;
            }

.mx_EventTile[data-layout="bubble"].mx_EventTile_bad.mx_EventTile_info .mx_EventTile_line .mx_ViewSourceEvent {
                    grid-area: source;
                }

.mx_EventTile[data-layout="bubble"] .mx_MTextBody {
        max-width: 100%;
    }

.mx_EventTile[data-layout="bubble"] .mx_LegacyCallEvent_wrapper,
    .mx_EventTile[data-layout="bubble"] .mx_CallEvent_wrapper {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] {
    --backgroundColor: transparent;
}

.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_emote {
        padding-right: 60px; /* align with bubbles text */
        font-style: italic;
    }

.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_emote > a {
            /* timestamp anchor wrapper */
            -ms-flex-item-align: center;
                align-self: center;
            bottom: auto;
            bottom: initial;
            top: auto;
            top: initial;
            font-style: normal; /* undo italic above */
        }

.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_emote .mx_MEmoteBody {
            padding: 4px 0;
        }

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a {
        /* hide this timestamp as the tile will render its own */
        display: none;
    }

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] {
    padding: 5px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line,
    .mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_info,
    .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line,
    .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_info,
    .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line,
    .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_info {
        min-width: 100%;
        /* Preserve alignment with left edge of text in bubbles */
        margin: 0;
    }

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
.mx_EventTile.mx_EventTile_info[data-layout="bubble"],
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] {
    --backgroundColor: transparent;
    --gutterSize: 0;
}

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_avatar, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_avatar, .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_avatar, .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_avatar {
        position: static;
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
        -webkit-margin-end: var(--EventTile_bubble_gap-inline);
                margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
    }

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_e2eIcon, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_e2eIcon, .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_e2eIcon, .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_e2eIcon {
        -webkit-margin-start: 0;
                margin-inline-start: 0; /* mx_EventTile_avatar has margin-inline-end, so margin is not needed here */
        -ms-flex-item-align: center;
            align-self: center;
    }

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a, 
        .mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp, 
        .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a, 
        .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp, 
        .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line > a, 
        .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp, 
        .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line > a, 
        .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp {
            right: auto;
            left: -77px;
            bottom: auto;
            bottom: initial;
            -ms-flex-item-align: center;
                align-self: center;
        }

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a .mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a.mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a .mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a.mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line > a .mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line > a.mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
            .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp,
            .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line > a .mx_MessageTimestamp,
            .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line > a.mx_MessageTimestamp,
            .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
            .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp {
                vertical-align: middle;
            }

.mx_GenericEventListSummary[data-layout="bubble"] .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
        /* Avoid overflow of event info by cancelling width settings */
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

/* increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button */

.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] + .mx_EventTile[data-layout="bubble"][data-self="true"] {
        margin-top: 20px;
    }

.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info {
        padding: 2px 0;
        margin-right: 0;
    }

.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info .mx_MessageActionBar {
            /* Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar */
            inset-inline-start: initial;
            inset-inline-end: 48px; /* align with that of right-column bubbles */
        }

.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info .mx_ReadReceiptGroup {
            /* match alignment to RRs of chat bubbles */
            inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
        }

.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info::before {
            inset-inline-end: 0; /* match alignment of the hover background to that of chat bubbles */
        }

.mx_EventTile_tileError[data-layout="bubble"] .mx_EventTile_line {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* restore the centering */
}

/*
 * Copyright 2024 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_EventPreview {
    font: var(--cpd-font-body-sm-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx_EventPreview .mx_EventPreview_prefix {
        font: var(--cpd-font-body-sm-semibold);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EventTile {
    --EventTile_content-margin-inline-end: 34px;
    --EventTile_group_line-spacing-block-start: 1px;
    --EventTile_group_line-spacing-block-end: 3px;
    --EventTile_group_line-spacing-inline-start: 64px;
    --EventTile_group_line-line-height: 1.375rem;
    --EventTile_ThreadSummary-line-height: calc(2 * 0.75rem);

    -ms-flex-negative: 0;

        flex-shrink: 0;
    max-width: 100%;
    clear: both; /* TODO: check if this is necessary */
    padding-top: 18px;
    position: relative;
}

.mx_EventTile.mx_EventTile_info {
        font-size: var(--cpd-font-size-body-sm);
        color: #edf3ff;
    }

.mx_EventTile .mx_EventTile_avatar {
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

.mx_EventTile .mx_EventTile_body {
        overflow-y: hidden;
        text-align: start;
    }

.mx_EventTile .mx_EventTile_receiptSent,
    .mx_EventTile .mx_EventTile_receiptSending {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
    }

.mx_EventTile .mx_EventTile_receiptSent::before, .mx_EventTile .mx_EventTile_receiptSending::before {
            background-color: var(--cpd-color-icon-tertiary);
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: 16px;
                    mask-size: 16px;
            width: 16px;
            height: 16px;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }

.mx_EventTile .mx_EventTile_receiptSent::before {
        -webkit-mask-image: url(../../img/element-icons/circle-sent.4ba3d6b.svg);
                mask-image: url(../../img/element-icons/circle-sent.4ba3d6b.svg);
    }

.mx_EventTile .mx_EventTile_receiptSending::before {
        -webkit-mask-image: url(../../img/element-icons/circle-sending.394023e.svg);
                mask-image: url(../../img/element-icons/circle-sending.394023e.svg);
    }

.mx_EventTile .mx_EventTile_content.mx_EditMessageComposer,
        .mx_EventTile .mx_EventTile_content.mx_EditWysiwygComposer {
            /* Make sure the formatting bar is visible */
            overflow: visible;
        }

.mx_EventTile .mx_EventTile_searchHighlight {
        background-color: #0dbd8b;
        color: #ffffff;
        border-radius: 5px;
        padding-inline: 2px;
        cursor: pointer;
    }

.mx_EventTile .mx_EventTile_searchHighlight a {
            background-color: #0dbd8b;
            color: #ffffff;
        }

.mx_EventTile .mx_EventTileBubble {
        margin-block: var(--EventTileBubble_margin-block);
        min-width: 100px;
    }

.mx_EventTile .mx_MImageBody .mx_MImageBody_thumbnail_container {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center; /* on every layout */
        }

.mx_EventTile .mx_DisambiguatedProfile {
        color: #edf3ff;
        font: var(--cpd-font-body-md-regular);
        display: inline-block;
        padding-bottom: 0px;
        padding-top: 0px;
    }

.mx_EventTile .mx_ReactionsRow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 4px;
    }

.mx_EventTile .mx_ReplyChain--expanded .mx_EventTile_body {
            /* !important needed to override .mx_ReplyTile .mx_EventTile_content .mx_EventTile_body */
            display: block !important;
            overflow-y: scroll;
        }

.mx_EventTile .mx_ReplyChain--expanded .mx_EventTile_collapsedCodeBlock {
            /* !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre */
            display: block !important;
        }

.mx_RoomView_searchResultsPanel .mx_EventTile.mx_EventTile_contextual {
            opacity: 0.4;
        }

.mx_EventTile.mx_EventTile_bubbleContainer {
        display: grid;
        grid-template-columns: 1fr 100px;
    }

.mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_line {
            margin-right: 0;
            grid-column: 1 / 3;
            padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */
        }

.mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
            grid-column: 2;
        }

.mx_EventTile.mx_EventTile_bubbleContainer:hover .mx_EventTile_line {
                /* To avoid bubble events being highlighted */
                background-color: inherit !important;
            }

.mx_EventTile.mx_EventTile_isEditing .mx_MessageTimestamp {
        visibility: hidden;
    }

.mx_EventTile[data-layout="irc"],
    .mx_EventTile[data-layout="group"] {
        --selected-message-border-width: 4px;

        /* TODO: adjust the values for IRC layout */
        --EventTile-box-shadow-offset-x: calc(50px + var(--selected-message-border-width));
        --EventTile-box-shadow-spread-radius: -50px;

        /* this is used for the tile for the event which is selected via the URL. */
    }

.mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon, .mx_EventTile[data-layout="group"] .mx_EventTile_e2eIcon {
            position: absolute;
        }

.mx_EventTile[data-layout="irc"] .mx_MImageBody .mx_MImageBody_thumbnail_container, .mx_EventTile[data-layout="group"] .mx_MImageBody .mx_MImageBody_thumbnail_container {
                -webkit-box-pack: start;
                    -ms-flex-pack: start;
                        justify-content: flex-start;
                min-height: 2.75rem;
                min-width: 2.75rem;
            }

.mx_EventTile[data-layout="irc"] .mx_EventTile_line,
        .mx_EventTile[data-layout="irc"] .mx_EventTile_reply,
        .mx_EventTile[data-layout="group"] .mx_EventTile_line,
        .mx_EventTile[data-layout="group"] .mx_EventTile_reply {
            position: relative;
            border-radius: 8px;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_reply, .mx_EventTile[data-layout="group"] .mx_EventTile_reply {
            margin-right: 10px;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption, .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
            float: right;
            text-align: right;
            position: relative;
            width: 90px;

            /* Hack to stop the height of this pushing the messages apart.
               Replaces margin-top: -6px. This interacts better with a read
               marker being in between. Content overflows. */
            height: 1px;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption a, .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption a {
                text-decoration: none;
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_highlight .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_highlight .markdown-body .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_highlight .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_highlight .markdown-body .mx_EventTile_line {
                background-color: #25271f;
            }

.mx_EventTile[data-layout="irc"]:focus-visible:focus-within .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_actionBarFocused .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_isEditing .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_selected .mx_EventTile_line, .mx_EventTile[data-layout="group"]:focus-visible:focus-within .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_actionBarFocused .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_isEditing .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_selected .mx_EventTile_line {
                background-color: #22262e;
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_isEditing > .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_selected > .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_isEditing > .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_selected > .mx_EventTile_line {
                /* TODO: ultimately we probably want some transition on here. */
                -webkit-box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
                    var(--cpd-color-bg-action-primary-rest);
                        box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
                    var(--cpd-color-bg-action-primary-rest);
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_e2eIcon, .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_e2eIcon {
                top: 0;
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_continuation .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_continuation .mx_EventTile_line {
            clear: both;
        }

.mx_EventTile[data-layout="irc"]:hover .mx_EventTile_line, .mx_EventTile[data-layout="group"]:hover .mx_EventTile_line {
                background-color: #22262e;
            }

.mx_EventTile[data-layout="bubble"] .mx_EventTileBubble, .mx_EventTile[data-layout="group"] .mx_EventTileBubble {
            margin-inline: auto;
        }

.mx_EventTile[data-layout="bubble"] .mx_ReplyChain, .mx_EventTile[data-layout="group"] .mx_ReplyChain {
            margin-bottom: 8px;
        }

.mx_EventTile[data-layout="irc"] {
        --EventTile_irc_line-padding-block: 1px;

        /* add --right-padding value of MessageTimestamp only */
        /* stylelint-disable-next-line declaration-colon-space-after */
        --EventTile_irc_line_info-margin-inline-start: calc(
            var(--name-width) + var(--icon-width) + 1 * var(--right-padding)
        );

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        padding-top: 0;
    }

.mx_EventTile[data-layout="irc"] > a {
            text-decoration: none; /* timestamps are links which shouldn't be underlined */
            min-width: 46px;
            min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
        }

.mx_EventTile[data-layout="irc"] > * {
            margin-right: var(--right-padding);
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar,
        .mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon {
            height: 1.125rem;
            height: var(--irc-line-height);
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar,
        .mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile,
        .mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon,
        .mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption {
            -ms-flex-negative: 0;
                flex-shrink: 0;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar {
            -webkit-box-ordinal-group: 2;
                -ms-flex-order: 1;
                    order: 1;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;

            /* Need to use important to override the js provided height and width values. */
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar > .mx_BaseAvatar,
            .mx_EventTile[data-layout="irc"] .mx_EventTile_avatar > .mx_BaseAvatar > * {
                height: 0.875rem !important;
                width: 0.875rem !important;
                font-size: 0.625rem !important;
                line-height: 0.9375rem !important;
            }

.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile {
            -webkit-box-ordinal-group: 3;
                -ms-flex-order: 2;
                    order: 2;
            width: var(--name-width);
            -webkit-margin-end: 0;
                    margin-inline-end: 0; /* override mx_EventTile > * */
        }

.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile > .mx_DisambiguatedProfile_displayName {
                width: 100%;
                text-align: end;
                overflow: hidden;
                text-overflow: ellipsis;
            }

.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile > .mx_DisambiguatedProfile_mxid {
                visibility: collapse;
                margin-left: 0; /* Override the inherited margin. */
                padding: 0 5px;
            }

.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile:hover {
                overflow: visible;
                z-index: 10;
            }

.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile:hover > .mx_DisambiguatedProfile_displayName {
                    overflow: visible;
                    display: inline;
                    background-color: #22262e;
                    border-radius: 8px 0 0 8px;
                    padding-right: 8px;
                }

.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile:hover > .mx_DisambiguatedProfile_mxid {
                    visibility: visible;
                    opacity: 1;
                    background-color: #22262e;
                }

.mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon {
            padding: 0;
            -webkit-box-flex: 0;
                -ms-flex-positive: 0;
                    flex-grow: 0;
            background-position: center;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_e2eIcon,
            .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_TextualEvent,
            .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_ViewSourceEvent,
            .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_MTextBody {
                /* add a 1px padding top and bottom because our larger
                emoji font otherwise gets cropped by anti-zalgo */
                padding: var(--EventTile_irc_line-padding-block) 0;
            }

.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_e2eIcon,
            .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_TextualEvent,
            .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_MTextBody {
                display: inline-block;
            }

.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_ReplyTile .mx_MTextBody {
                    display: -webkit-box; /* Enable -webkit-line-clamp */
                }

.mx_EventTile[data-layout="irc"] .mx_EventTile_line,
        .mx_EventTile[data-layout="irc"] .mx_EventTile_reply {
            -webkit-box-ordinal-group: 4;
                -ms-flex-order: 3;
                    order: 3;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            -ms-flex-negative: 1;
                flex-shrink: 1;
            min-width: 0;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_reply {
            -webkit-box-ordinal-group: 5;
                -ms-flex-order: 4;
                    order: 4;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption {
            -webkit-box-ordinal-group: 6;
                -ms-flex-order: 5;
                    order: 5;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
                inset-block-start: -0.3rem; /* (var(--irc-line-height) - avatar height) / 2 */
            }

.mx_EventTile[data-layout="irc"] .mx_ReplyChain {
            margin: 0;
        }

.mx_EventTile[data-layout="irc"] .mx_MessageTimestamp {
            text-align: right;
        }

.mx_EventTile[data-layout="irc"] .mx_EditMessageComposer_buttons {
            position: relative;
        }

.mx_EventTile[data-layout="irc"] .mx_EventTileBubble {
            position: relative;
            left: var(--EventTile_irc_line_info-margin-inline-start);
        }

.mx_EventTile[data-layout="irc"] .mx_EventTileBubble.mx_cryptoEvent {
                left: auto;
                left: initial;
            }

.mx_EventTile[data-layout="irc"] .mx_ReplyTile .mx_EventTileBubble {
            left: auto;
            left: initial; /* Cancel the value specified above for the tile inside ReplyTile */
        }

.mx_EventTile[data-layout="irc"].mx_EventTile_isEditing > .mx_EventTile_line .mx_EditMessageComposer {
                /* add space for the stroke on box-shadow */
                -webkit-padding-start: calc(
                    var(--selected-message-border-width) + var(--EditMessageComposer-padding-inline)
                );
                        padding-inline-start: calc(
                    var(--selected-message-border-width) + var(--EditMessageComposer-padding-inline)
                );
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_avatar {
                left: var(--EventTile_irc_line_info-margin-inline-start);
                top: 0;
                margin-right: var(--right-padding);
                padding-block: var(--EventTile_irc_line-padding-block);
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_line {
                -webkit-margin-start: var(--EventTile_irc_line_info-margin-inline-start);
                        margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start);
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_ViewSourceEvent, 
            .mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_TextualEvent {
                line-height: 1.125rem;
                line-height: var(--irc-line-height);
            }

.mx_EventTile[data-layout="irc"].mx_EventTile_emote .mx_EventTile_avatar {
                /* add --right-padding value of MessageTimestamp only */
                margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
            }

.mx_EventTile[data-layout="irc"] .mx_EventTile_footer {
            margin: var(--cpd-space-1-5x) 0;
        }

.mx_EventTile[data-layout="group"] .mx_EventTile_avatar {
            top: 14px;
            left: 8px;
        }

.mx_EventTile[data-layout="group"] .mx_EventTile_line,
        .mx_EventTile[data-layout="group"] .mx_EventTile_reply {
            padding-top: var(--EventTile_group_line-spacing-block-start);
            padding-bottom: var(--EventTile_group_line-spacing-block-end);
            padding-left: var(--EventTile_group_line-spacing-inline-start);
            line-height: var(--EventTile_group_line-line-height);
        }

.mx_EventTile[data-layout="group"] .mx_EventTile_e2eIcon {
            inset: 0 0 0 44px;

            /* Keep height equal to text for alignment */
            height: var(--EventTile_group_line-line-height);
            margin: 1px;
        }

.mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
            -webkit-margin-end: 10px;
                    margin-inline-end: 10px;
        }

.mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
                /* This aligns the avatar with the last line of the */
                /* message. We want to move it one line up */
                /* See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss */
                inset-block-start: calc(-1.375rem - 3px);
            }

.mx_EventTile[data-layout="group"] .mx_MessageTimestamp {
            position: absolute;
            left: 0;
            text-align: center;
        }

.mx_EventTile[data-layout="group"] .mx_ThreadSummary,
        .mx_EventTile[data-layout="group"] .mx_ThreadSummary_icon {
            margin-left: 64px;
        }

.mx_EventTile[data-layout="group"] .mx_EventTile_footer {
            margin: var(--cpd-space-1x) var(--cpd-space-16x);
        }

.mx_EventTile[data-layout="group"] > .mx_DisambiguatedProfile {
            line-height: 1.25rem;
            margin-left: 64px;
            max-width: calc(100% - 64px);
        }

.mx_EventTile[data-layout="group"] > .mx_EventTile_avatar {
            position: absolute;
            z-index: 9;
        }

.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] {

            /* on ELS we need the margin to allow interaction with the expand/collapse button */
            /* which is normally in the RR gutter */
        }

.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_ThreadSummary,
            .mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_ThreadSummary_icon,
            .mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_EventTile_line {
                margin-right: 80px;
                min-height: 0.875rem;
            }

.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_ThreadSummary {
                /* leave space on both left & right gutters */
                max-width: min(calc(100% - 64px - 80px), 600px);
            }

.mx_EventTile[data-layout="group"].mx_EventTile_continuation {
            padding-top: 0;
        }

.mx_EventTile[data-layout="group"].mx_EventTile_info {

            padding-top: 0;
        }

.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar,
            .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_e2eIcon {
                line-height: 1;
                margin: 3px 0 2px;
            }

.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar {
                top: auto;
                top: initial;
                inset-inline-start: 64px;
                height: 14px;
            }

.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line {
                padding-block: 3px 2px;
                /* 20px: avatar area */
                -webkit-padding-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
                        padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
            }

.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line .mx_MessageTimestamp {
                    top: 0;
                }

.mx_EventTile[data-layout="group"].mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line {
                /* TODO: check if this would be necessary; */
                -webkit-padding-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
                        padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
            }

.mx_EventTile[data-layout="bubble"] {
        /* Other half of the gutter is provided by margin-bottom on the last tile
        of the section */
        margin-top: calc(var(--gutterSize) / 2);
        margin-left: var(--EventTile_bubble-margin-inline-start);

        /* Reset default values. TODO: remove */
        max-width: none;
        max-width: initial;
        padding-top: 0;
    }

.mx_EventTile[data-layout="bubble"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
                position: absolute;
                inset-block-start: auto;

                /* as close to right gutter without clipping as possible */
                inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));

                /* (EventTileLine.line-height - ReadReceiptGroup.height) / 2 */
                /* this centers the ReadReceiptGroup if we’ve got a single line */
                inset-block-end: calc((1.125rem - 24px) / 2);
            }

.mx_EventTile[data-layout="bubble"] .mx_EventTileBubble {
            /* Timestamps are inside the tile, so the width can be less constrained */
            max-width: 600px;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation {
            margin-top: 2px;
        }

.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection {
            /* Other half of the gutter is provided by margin-top on the first
            tile of the section */
            margin-bottom: calc(var(--gutterSize) / 2);
        }

.mx_GenericEventListSummary[data-layout="irc"] .mx_EventTile_line .mx_RedactedBody, .mx_GenericEventListSummary[data-layout="group"] .mx_EventTile_line .mx_RedactedBody {
            line-height: 1; /* remove spacing between lines */
        }

/* Apply only collapsed events block */

.mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line {
            /* add --right-padding value of MessageTimestamp and avatar only */
            /* stylelint-disable-next-line declaration-colon-space-after */
            padding-left: calc(
                var(--name-width) + var(--icon-width) + 46px + 2 * var(--right-padding)
            );
            padding-left: calc(
                var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
            );
        }

.mx_GenericEventListSummary[data-layout="group"] .mx_EventTile_line {
            padding-left: 64px;
        }

.mx_GenericEventListSummary[data-layout="group"] .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
            /* override padding-left $left-gutter */
            -webkit-padding-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
                    padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
        }

.mx_EventTile_content {
    /*
    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
    */
    overflow-y: hidden;
    overflow-x: hidden;
    margin-right: var(--EventTile_content-margin-inline-end);
}

.mx_EventTile_content .mx_EventTile_edited,
    .mx_EventTile_content .mx_EventTile_pendingModeration {
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        font-size: 0.75rem;
        color: #edf3ff;
        display: inline-block;
        -webkit-margin-start: 9px;
                margin-inline-start: 9px;
    }

.mx_EventTile_content .mx_EventTile_edited {
        cursor: pointer;
    }

.mx_EventTile_content .markdown-body {
        font: var(--cpd-font-body-md-regular) !important;
        letter-spacing: var(--cpd-font-letter-spacing-body-md);
        font-family: inherit !important;
        white-space: normal !important;
        line-height: inherit !important;
        background-color: inherit;
        color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;

        /*
        // actually, removing the Italic TTF provides
        // better results seemingly

        // compensate for Nunito italics being terrible
        // https://github.com/google/fonts/issues/1726
        em {
            transform: skewX(-14deg);
            display: inline-block;
        }
        */
    }

.mx_EventTile_content .markdown-body pre,
        .mx_EventTile_content .markdown-body code {
            font-family: "Inconsolata", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
            font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
            background-color: #21262c;
        }

.mx_EventTile_content .markdown-body code:not(pre *) {
            background-color: #2a3039;
            border: 1px solid #2a3039;
            border-radius: 4px;
            /* The horizontal padding is added by github-markdown-css .markdown-body */
            padding: 2px 0;
            /* Avoid inline code blocks to be sticked when on multiple lines */
            line-height: 1.375rem;
            /* Avoid the border to be glued to the other words */
            margin-right: 2px;
        }

.mx_EventTile_content .markdown-body code {
            white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
        }

.mx_EventTile_content .markdown-body pre {
            /* 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 */
            overflow-x: overlay;
            overflow-y: visible;
        }

.mx_EventTile_content .markdown-body pre::-webkit-scrollbar-corner {
                background: transparent;
            }

.mx_EventTile_content .markdown-body pre {

            border: 1px solid #6f7882;
}

.mx_EventTile_content .markdown-body pre code {
                white-space: pre; /* we want code blocks to be scrollable and not wrap */
            }

.mx_EventTile_content .markdown-body pre code > * {
                    display: inline;
                }

.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; /* override GFM */
        }

.mx_EventTile_content .markdown-body a {
            color: #238cf5;
        }

.mx_EventTile_content .markdown-body blockquote {
            border-left: 2px solid var(--cpd-color-border-interactive-primary);
            color: #edf3ff;
            border-radius: 2px;
            padding: 0 10px;
        }

/* Override nested lists being lower-roman */

.mx_EventTile_content .markdown-body ol ol,
        .mx_EventTile_content .markdown-body ul ol {
            list-style-type: revert;
        }

/* Make list type disc to match rich text editor */

.mx_EventTile_content .markdown-body ul {
            list-style-type: disc;
        }

/* override styles from the base markdown CSS that put markdown content on its own line,
           as this isn't what we want for richtext emote content.
         */

.mx_EventTile_content .markdown-body::before {
            display: none;
        }

.mx_EventTile_content .markdown-body::after {
            display: none;
        }

/* Spoiler stuff */

.mx_EventTile_spoiler {
    cursor: pointer;

    /* clear button styles */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    text-align: inherit;
}

.mx_EventTile_spoiler .mx_EventTile_spoiler_reason {
        color: #a1b2d1;
        font-size: 0.6875rem;
    }

.mx_EventTile_spoiler .mx_EventTile_spoiler_content {
        -webkit-filter: blur(5px) saturate(0.1) sepia(1);
                filter: blur(5px) saturate(0.1) sepia(1);
        -webkit-transition-duration: 0.5s;
                transition-duration: 0.5s;
        pointer-events: none;
    }

.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
        -webkit-filter: none;
                filter: none;
        -webkit-user-select: auto;
           -moz-user-select: auto;
            -ms-user-select: auto;
                user-select: auto;
        pointer-events: auto;
    }

.mx_EventTile_bigEmoji {
    font-size: 48px;
    line-height: 57px;
}

.mx_EventTile_bigEmoji .mx_Emoji {
        font-size: inherit !important;
    }

.mx_EventTile_e2eIcon {
    position: relative;
    width: 14px;
    height: 14px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
}

.mx_EventTile_e2eIcon::before,
    .mx_EventTile_e2eIcon::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
    }

.mx_EventTile_e2eIcon::before {
        -webkit-mask-size: 80%;
                mask-size: 80%;
    }

.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_warning::after {
        -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
                mask-image: url(../../img/e2e/warning.71ffc83.svg); /* (!) in a shield */
        background-color: #ff5b55; /* red */
    }

.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_normal::after {
        -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
                mask-image: url(../../img/e2e/normal.ab42a7b.svg); /* regular shield */
        background-color: var(--cpd-color-icon-tertiary); /* grey */
    }

.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_decryption_failure::after {
        -webkit-mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg);
                mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg); /* key in a circle */
        background-color: var(--cpd-color-icon-tertiary);
    }

.mx_EventTile_body a:hover {
        text-decoration: underline;
    }

.mx_EventTile_body pre {
        border: 1px solid transparent;
    }

.mx_EventTile:hover .mx_EventTile_body pre,
        .mx_EventTile:focus-visible:focus-within .mx_EventTile_body pre {
            border: 1px solid #edf3ff;
        }

/* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */

.mx_EventTile_body.markdown-body img {
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: left top;
           object-position: left top;

        /* Override the default colors of the 'github-markdown-css' library
        (#fff for light theme, #000 for dark theme) to match the inherited theme */
        background-color: inherit !important;
    }

.mx_EventTile_clamp .mx_EventTile_body {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }

.mx_EventTile_body .mx_EventTile_pre_container {
        /* For correct positioning of _copyButton (See TextualBody) */
        position: relative;
    }

.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_button, .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_button {
                visibility: visible;
            }

.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_collapsedCodeBlock {
            max-height: 30vh;
            padding-top: 12px;
            padding-bottom: 12px;
        }

/* Inserted adjacent to <pre> blocks, (See TextualBody) */

.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 19px;
            height: 19px;
            visibility: hidden;
            background-color: #a1b2d1;
        }

.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button.mx_EventTile_buttonBottom {
                top: 33px;
            }

.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button.mx_EventTile_collapseButton,
            .mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button.mx_EventTile_expandButton {
                -webkit-mask-size: 75%;
                        mask-size: 75%;
            }

.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_copyButton {
            height: 17px;
            -webkit-mask-image: url(../../icons/copy.95010ef.svg);
                    mask-image: url(../../icons/copy.95010ef.svg);
            -webkit-mask-position: center center;
                    mask-position: center center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            right: 9px;
            width: 17px;
        }

.mx_EventTile_lineNumbers {
    float: left;
    margin: 0 0.5em 0 -1.5em;
    color: gray;
}

.mx_EventTile_lineNumbers span {
        text-align: right;
        display: block;
        padding-left: 1em;
    }

.mx_EventTile_button {
    display: inline-block;
    cursor: pointer;
}

.mx_EventTile_collapseButton,
.mx_EventTile_expandButton {
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.mx_EventTile_collapseButton {
    -webkit-mask-image: url(../../icons/collapse.fc765b9.svg);
            mask-image: url(../../icons/collapse.fc765b9.svg);
}

.mx_EventTile_expandButton {
    -webkit-mask-image: url(../../icons/expand.867af0b.svg);
            mask-image: url(../../icons/expand.867af0b.svg);
}

.mx_EventTile_tileError {
    color: red;
    text-align: center;

    /* Remove some of the default tile padding so that the error is centered */
    margin-right: 0;
}

.mx_EventTile_tileError .mx_EventTile_line {
        padding-left: 0;
        margin-right: 0;
    }

.mx_EventTile_tileError .mx_EventTile_line span {
            padding: 4px 8px;
        }

.mx_EventTile_tileError a {
        margin-left: 1em;
    }

.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar,
.mx_EventTile:focus-visible:focus-within .mx_MessageActionBar {
    visibility: visible;
}

.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
    --topOffset: 12px;
    --leftOffset: 48px; /* notification dot next to the timestamp */

    margin: calc(12px + 1px) 0 12px;

    margin: calc(var(--topOffset) + 1px) 0 var(--topOffset); /* include the height of horizontal line */
    padding: 8px;
    border-radius: 8px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_EventTile[data-shape="ThreadsList"]::after,
    .mx_EventTile[data-shape="ThreadsList"]::before,
    .mx_EventTile[data-shape="Notification"]::after,
    .mx_EventTile[data-shape="Notification"]::before {
        content: "";
        position: absolute;
    }

.mx_EventTile[data-shape="ThreadsList"]::after, .mx_EventTile[data-shape="Notification"]::after { /* exclude the height of horizontal line */
        inset: auto calc(-1 * var(--cpd-space-2x)) calc(-1 * var(--topOffset) - 1px) calc(var(--leftOffset) + 8px);

        height: 1px;
        background-color: #6f7882;
        pointer-events: none; /* disable the message action bar on hover */
    }

.mx_EventTile[data-shape="ThreadsList"]::before, .mx_EventTile[data-shape="Notification"]::before {
        inset: 0;
        pointer-events: none; /* ensures the title for the sender name can be correctly displayed */
    }

.mx_EventTile[data-shape="ThreadsList"][data-notification="total"]::before, .mx_EventTile[data-shape="Notification"][data-notification="total"]::before {
        background-color: var(--cpd-color-icon-tertiary);
    }

.mx_EventTile[data-shape="ThreadsList"][data-notification="highlight"]::before, .mx_EventTile[data-shape="Notification"][data-notification="highlight"]::before {
        background-color: #ff5b55;
    }

.mx_EventTile[data-shape="ThreadsList"]:last-child::after, .mx_EventTile[data-shape="Notification"]:last-child::after {
            content: normal;
            content: initial;
        }

.mx_EventTile[data-shape="ThreadsList"]:last-child, .mx_EventTile[data-shape="Notification"]:last-child {

        margin-bottom: 0;
}

.mx_EventTile[data-shape="ThreadsList"]:first-child, .mx_EventTile[data-shape="Notification"]:first-child {
        margin-top: 0;
    }

.mx_EventTile[data-shape="ThreadsList"] .mx_EventTile_avatar, .mx_EventTile[data-shape="Notification"] .mx_EventTile_avatar {
        inset: 8px auto auto 8px;
    }

.mx_EventTile[data-shape="ThreadsList"] .mx_EventTile_details, .mx_EventTile[data-shape="Notification"] .mx_EventTile_details {
        overflow: hidden;
    }

.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile, .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName,
        .mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid,
        .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName,
        .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName, .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
            -webkit-box-flex: 0;
                -ms-flex: none;
                    flex: none;
            max-width: 100%;
        }

.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid, .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        }

.mx_EventTile[data-shape="ThreadsList"] .mx_EventTile_line, .mx_EventTile[data-shape="Notification"] .mx_EventTile_line {
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-bottom: 0;
        -webkit-padding-start: var(--leftOffset);
                padding-inline-start: var(--leftOffset);
    }

.mx_EventTile[data-shape="ThreadsList"] .mx_MessageTimestamp, .mx_EventTile[data-shape="Notification"] .mx_MessageTimestamp {
        font-size: 0.75rem;
        width: auto;
        width: initial; /* Cancel the default width */
        overflow: hidden; /* ensure correct overflow behavior */
        text-overflow: ellipsis;
        position: static;
        position: initial;
        margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */
    }

.mx_EventTile[data-shape="ThreadsList"]:hover, .mx_EventTile[data-shape="Notification"]:hover {
        background-color: rgba(33,38,44, 0.9);
    }

/* ThreadsList has always group layout */

.mx_EventTile[data-shape="ThreadsList"][data-layout="group"]:hover .mx_EventTile_line, .mx_EventTile[data-shape="Notification"][data-layout="group"]:hover .mx_EventTile_line {
            background-color: inherit;
            -webkit-box-shadow: none;
                    box-shadow: none; /* don't show the verification left stroke in the thread list */
        }

.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies {
        margin-top: 8px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: relative;
        font: var(--cpd-font-body-sm-regular);
    }

.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies::before {
            content: "";
            display: inline-block;
            -webkit-mask-image: url(../../icons/threads.52e135e.svg);
                    mask-image: url(../../icons/threads.52e135e.svg);
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            height: 18px;
            min-width: 18px;
            background-color: var(--cpd-color-icon-tertiary) !important;
        }

.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies .mx_ThreadPanel_replies_amount {
            color: #edf3ff;
            font-weight: var(--cpd-font-weight-semibold);
            white-space: nowrap;
            position: relative;
            padding: 0 12px 0 8px;
        }

.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies .mx_ThreadSummary_content {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

/* For style rules of ThreadView, see _ThreadPanel.pcss */

.mx_ThreadView {
    --ThreadView_group_spacing-start: 56px; /* 56px: 64px - 8px (padding) */
    --ThreadView_group_spacing-end: 8px;
}

/* same as padding */

.mx_ThreadView .mx_EventTile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_ThreadView .mx_EventTile .mx_EventTile_roomName {
            display: none;
        }

/* handling for hidden events (e.g reactions) in the thread view */

.mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
                position: absolute;
                top: 1.5px; /* Align with hidden event content */
                margin-top: 0;
                margin-bottom: 0;
                width: 14px; /* avatar img size */
                height: 14px; /* avatar img size */
            }

.mx_ThreadView .mx_EventTile.mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line,
            .mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_line {

                -webkit-padding-start: 0;

                        padding-inline-start: 0;
                line-height: 0.75rem;
            }

.mx_ThreadView .mx_EventTile.mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
                .mx_ThreadView .mx_EventTile.mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
                .mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_line .mx_EventTile_content,
                .mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_line .mx_RedactedBody {
                    width: auto;
                    font-size: 0.75rem;
                }

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"],
            .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] {
                padding-top: 0;
            }

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_EventTile_avatar, .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_EventTile_avatar {
                    /* 14px: avatar width, 4px: align with text */
                    left: calc(46px + 14px - 4px);
                    left: calc(var(--MessageTimestamp-width) + 14px - 4px);
                    z-index: 9; /* position above the hover styling */
                }

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_MessageTimestamp, .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_MessageTimestamp {
                    top: 2px; /* Align with avatar */
                }

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"].mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"].mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_EventTile_line .mx_EventTile_content,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_EventTile_line .mx_RedactedBody,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"].mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"].mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_EventTile_line .mx_EventTile_content,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_EventTile_line .mx_RedactedBody {
                        /* 14px: avatar width, 6px: 20px - 14px */
                        -webkit-margin-start: calc(14px + 6px);
                                margin-inline-start: calc(14px + 6px);
                    }

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_avatar {
                    inset-inline-start: 0;
                }

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"].mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"].mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_EventTile_content,
                    .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_RedactedBody {
                        -webkit-margin-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
                                margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
                    }

.mx_ThreadView .mx_EventTile[data-layout="irc"],
        .mx_ThreadView .mx_EventTile[data-layout="group"] {
            -webkit-padding-before: 16px;
                    padding-block-start: 16px;
        }

.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_line,
            .mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_footer,
            .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_line,
            .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_footer {
                -webkit-margin-end: var(--ThreadView_group_spacing-end);
                        margin-inline-end: var(--ThreadView_group_spacing-end);
            }

.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_line, .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_line {
                padding-block: var(--BaseCard_EventTile_line-padding-block);

                /* Add padding to align message text with summary text */
                /* See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */
                -webkit-padding-start: var(--ThreadView_group_spacing-start);
                        padding-inline-start: var(--ThreadView_group_spacing-start);
            }

.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_content.mx_EditMessageComposer, .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_line .mx_EventTile_content.mx_EditMessageComposer {
                        -webkit-padding-start: 0;
                                padding-inline-start: 0; /* align start of first letter with that of the event body */
                    }

.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_footer, .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_footer {
                /* Align with message text and summary text */
                -webkit-margin-start: var(--ThreadView_group_spacing-start);
                        margin-inline-start: var(--ThreadView_group_spacing-start);
            }

.mx_ThreadView .mx_EventTile[data-layout="irc"].mx_EventTile_continuation, .mx_ThreadView .mx_EventTile[data-layout="group"].mx_EventTile_continuation {
                -webkit-padding-before: 0;
                        padding-block-start: 0; /* Cancel padding-block-start */
            }

.mx_ThreadView .mx_EventTile[data-layout="group"] {
            width: 100%;
        }

.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_senderDetails {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                gap: 16px; /* gap between the avatar and the sender ID */
                -webkit-padding-start: 8px;
                        padding-inline-start: 8px;
            }

.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_senderDetails a {
                    -webkit-box-flex: 1;
                        -ms-flex: 1;
                            flex: 1;
                    min-width: 0;
                    min-width: initial;
                    max-width: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                }

.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_senderDetails a .mx_DisambiguatedProfile {
                        margin-left: 8px;
                        -webkit-box-flex: 1;
                            -ms-flex: 1;
                                flex: 1;
                    }

.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_MessageTimestamp {
                position: absolute; /* for IRC layout */
                top: 2px; /* Align with mx_EventTile_content */
            }

.mx_ThreadView .mx_EventTile[data-layout="bubble"] {
            margin-inline: var(--BaseCard_EventTile-spacing-inline);
        }

.mx_ThreadView .mx_EventTile[data-layout="bubble"]::before {
                inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
                z-index: auto; /* enable background color on hover */
            }

.mx_ThreadView .mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
                position: relative; /* display on hover */
            }

.mx_ThreadView .mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine {
                padding-block: 0;
                -webkit-padding-start: 0;
                        padding-inline-start: 0;
                max-width: var(--EventBubbleTile_line-max-width);
            }

.mx_ThreadView .mx_EventTile[data-layout="bubble"][data-self="true"] {
                -webkit-box-align: end;
                    -ms-flex-align: end;
                        align-items: flex-end;
            }

.mx_ThreadView .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line.mx_EventTile_mediaLine {
                    margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; /* align with normal messages */
                }

.mx_ThreadView .mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line, .mx_ThreadView .mx_GenericEventListSummary[data-layout="group"] > .mx_EventTile_line {
                -webkit-padding-start: var(--ThreadView_group_spacing-start);
                        padding-inline-start: var(--ThreadView_group_spacing-start); /* align summary text with message text */
                -webkit-padding-end: var(--ThreadView_group_spacing-end);
                        padding-inline-end: var(--ThreadView_group_spacing-end); /* align summary text with message text */
            }

/* Cascading - compact modern layout on the main timeline and the right panel */

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] {
        --MatrixChat_useCompactLayout_group-padding-top: 4px;
        --MatrixChat_useCompactLayout-top-avatar: 2px;
        --MatrixChat_useCompactLayout_line-spacing-block: 0px;

        padding-top: 4px;

        padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
    }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_line,
        .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_reply {
            padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_ReplyChain {
            margin-bottom: 4px;
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info {
            padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */
            font-size: 0.8125rem;
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_e2eIcon,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar {
                top: 0;
                margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
            }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_reply {
                line-height: 1.25rem;
            }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote {
            padding-top: 8px; /* add a bit more space for emotes so that avatars don't collide */
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote .mx_EventTile_avatar {
                top: var(--MatrixChat_useCompactLayout-top-avatar);
            }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote .mx_EventTile_line,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote .mx_EventTile_reply {
                padding-bottom: 1px;
            }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,
                .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply {
                    padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
                }

/* Cascading - apply zero padding to every element including mx_EventTile_emote */

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_continuation {
            padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_avatar {
            top: var(--MatrixChat_useCompactLayout-top-avatar);
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_e2eIcon {
            margin: 0px;
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile {
            font-size: 0.8125rem;
        }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
                /* This aligns the avatar with the last line of the */
                /* message. We want to move it one line up - 2rem */
                inset-block-start: -2rem;
            }

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body p,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body ul,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body ol,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body dl,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body blockquote,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body pre,
            .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body table {
                margin-bottom: 4px; /* 1/4 of the non-compact margin-bottom */
            }

.mx_EventTile_details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 8px;
    margin-left: var(--leftOffset);
}

.mx_EventTile_details .mx_EventTile_truncated {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.mx_EventTile_annotated {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_EventTile_footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-2x);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* Media query for mobile UI */

@media only screen and (max-width: 480px) {
    .mx_EventTile_content {
        margin-right: 0;
    }
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Robin Townsend <robin@robin.town>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EventTileBubble.mx_HistoryTile {
    margin: var(--EventTileBubble_margin-block) auto;
}

.mx_EventTileBubble.mx_HistoryTile::before {
        background-color: #a1b2d1;
        -webkit-mask-image: url(../../img/element-icons/hide.72c451b.svg);
                mask-image: url(../../img/element-icons/hide.72c451b.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

:root {
    --irc-line-height: 1.125rem;
}

.mx_IRCLayout {
    --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
    --icon-width: 14px;
    --line-height: var(--irc-line-height);
    --right-padding: 5px;

    line-height: 1.125rem !important;

    line-height: var(--line-height) !important;
}

.mx_IRCLayout blockquote {
        margin: 0;
    }

.mx_IRCLayout .mx_NewRoomIntro > h2 {
            line-height: normal;
            line-height: initial; /* Cancel var(--irc-line-height) */
        }

.mx_IRCLayout .mx_ReplyChain .mx_DisambiguatedProfile {
            width: auto;
            width: initial;
            background: transparent;
            -webkit-box-ordinal-group: initial;
                -ms-flex-order: initial;
                    order: initial;
            -ms-flex-negative: initial;
                flex-shrink: initial; /* Unset flex-shrink to prevent long display name blowout */
        }

.mx_IRCLayout .mx_ReplyChain .mx_EventTile_emote > .mx_EventTile_avatar {
                margin-left: 0;
                margin-left: initial;
            }

.mx_IRCLayout .mx_ReplyChain .mx_MessageTimestamp {
            width: auto;
            width: initial;
        }

/**
         * adding the icon back in the document flow
         * if it's not present, there's no unwanted wasted space
         */

.mx_IRCLayout .mx_ReplyChain .mx_EventTile_e2eIcon {
            position: relative;
            -webkit-box-ordinal-group: 0;
                -ms-flex-order: -1;
                    order: -1;
        }

.mx_IRCLayout .mx_ProfileResizer {
        --resizer-width: 15px;
        --resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */

        position: absolute;
        height: 100%;
        width: 15px;
        width: var(--resizer-width);
        cursor: col-resize;
        z-index: 100;

        /* Add width of every element rendered before the resizer (including padding for the avatar and the display
           name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving
           the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text.
           Please note that MessageTimestamp does not have inline padding. */
        inset-inline-start: calc(
            18px + 46px + var(--icon-width) +
                var(--right-padding) + var(--name-width) + var(--right-padding) - 15px -
                3px
        );
        inset-inline-start: calc(
            var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
                var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) -
                var(--resizer-a11y)
        );
    }

/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InvitedIconView {
    color: var(--cpd-color-icon-tertiary);
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_JumpToBottomButton {
    z-index: 1000;
    position: absolute;
    /* 12 because height is 50 but button is only 38 = 12+(50-38) = 24 */
    bottom: 12px;
    right: 24px;
    width: 38px;
    /* give it a fixed height so the badge doesn't make */
    /* it taller and pop upwards when visible */
    height: 50px;
    text-align: center;
}

.mx_JumpToBottomButton_badge {
    position: relative;
    top: -12px;
    border-radius: 16px;
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 0.875rem;
    text-align: center;
    /* to be able to get it centered */
    /* with text-align in parent */
    display: inline-block;
    padding: 0 4px;
    color: var(--cpd-color-text-on-solid-primary);
    background-color: var(--cpd-color-icon-secondary);
}

.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
    background-color: var(--cpd-color-icon-critical-primary);
}

.mx_JumpToBottomButton_scrollDown {
    position: relative;
    display: block;
    height: 38px;
    border-radius: 19px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #181b21;
    border: 1.3px solid var(--cpd-color-icon-tertiary);
    cursor: pointer;
}

.mx_JumpToBottomButton_scrollDown::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
            mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
            mask-size: 24px;
    -webkit-mask-position: center 6px;
            mask-position: center 6px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    background: var(--cpd-color-icon-tertiary);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyRoomList {
    padding-right: 7px; /* width of the scrollbar, to line things up */
}

.mx_LegacyRoomList_iconPlus::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/plus-circle.4fbd7e8.svg);
            mask-image: url(../../img/element-icons/roomlist/plus-circle.4fbd7e8.svg);
}

.mx_LegacyRoomList_iconNewRoom::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash-plus.0f56725.svg);
            mask-image: url(../../img/element-icons/roomlist/hash-plus.0f56725.svg);
}

.mx_LegacyRoomList_iconNewVideoRoom::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash-video.0d44220.svg);
            mask-image: url(../../img/element-icons/roomlist/hash-video.0d44220.svg);
}

.mx_LegacyRoomList_iconAddExistingRoom::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash.9de9cf7.svg);
            mask-image: url(../../img/element-icons/roomlist/hash.9de9cf7.svg);
}

.mx_LegacyRoomList_iconExplore::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash-search.53e3a04.svg);
            mask-image: url(../../img/element-icons/roomlist/hash-search.53e3a04.svg);
}

.mx_LegacyRoomList_iconDialpad::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.024cc1d.svg);
            mask-image: url(../../img/element-icons/roomlist/dialpad.024cc1d.svg);
}

.mx_LegacyRoomList_iconStartChat::before {
    -webkit-mask-image: url(../../icons/user-add-solid.6a5ddef.svg);
            mask-image: url(../../icons/user-add-solid.6a5ddef.svg);
}

.mx_LegacyRoomList_iconInvite::before {
    -webkit-mask-image: url(../../img/element-icons/room/share.6a6396f.svg);
            mask-image: url(../../img/element-icons/room/share.6a6396f.svg);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyRoomListHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextLessTitle,
    .mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton {
        font: var(--cpd-font-heading-sm-semibold);
        font-weight: var(--cpd-font-weight-semibold);
        padding: 1px 24px 1px 4px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 8px;
        margin-right: auto;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton {
        border-radius: 6px;
    }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton:hover {
            background-color: #6f7882;
        }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton::before {
            content: "";
            width: 20px;
            height: 20px;
            top: 3px;
            right: 0;
            position: absolute;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background-color: #edf3ff;
            -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                    mask-image: url(../../icons/chevron-down.9ea2899.svg);
        }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton[aria-expanded="true"] {
            background-color: #6f7882;
        }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton[aria-expanded="true"]::before {
                -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
            }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        position: relative;
        padding: 8px;
        margin-left: 8px;
        margin-right: 12px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton::before {
            content: "";
            width: 16px;
            height: 16px;
            position: absolute;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background-color: #edf3ff;
            -webkit-mask-image: url(../../icons/plus.95ca4d1.svg);
                    mask-image: url(../../icons/plus.95ca4d1.svg);
        }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton:hover {
            background-color: #edf3ff;
        }

.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton:hover::before {
                background-color: #181b21;
            }

.mx_LegacyRoomListHeader_iconInvite::before {
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
            mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
}

.mx_LegacyRoomListHeader_iconStartChat::before {
    -webkit-mask-image: url(../../icons/user-add-solid.6a5ddef.svg);
            mask-image: url(../../icons/user-add-solid.6a5ddef.svg);
}

.mx_LegacyRoomListHeader_iconNewRoom::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash-plus.0f56725.svg);
            mask-image: url(../../img/element-icons/roomlist/hash-plus.0f56725.svg);
}

.mx_LegacyRoomListHeader_iconNewVideoRoom::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash-video.0d44220.svg);
            mask-image: url(../../img/element-icons/roomlist/hash-video.0d44220.svg);
}

.mx_LegacyRoomListHeader_iconExplore::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash-search.53e3a04.svg);
            mask-image: url(../../img/element-icons/roomlist/hash-search.53e3a04.svg);
}

.mx_LegacyRoomListHeader_iconPlus::before {
    -webkit-mask-image: url(../../icons/plus.95ca4d1.svg);
            mask-image: url(../../icons/plus.95ca4d1.svg);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide {
        cursor: pointer;
        width: 18px;
        height: 18px;
    }

.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide svg {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 40px;
                    flex: 0 0 40px;
            visibility: hidden;
        }

.mx_LinkPreviewGroup:hover .mx_LinkPreviewGroup_hide svg,
    .mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
        visibility: visible;
    }

.mx_LinkPreviewGroup > .mx_AccessibleButton {
        color: #0dbd8b;
        text-align: center;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LinkPreviewWidget {
    margin: 16px 0 16px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 4px;
       -moz-column-gap: 4px;
            column-gap: 4px;
    -webkit-border-start: 2px solid #ddd;
            border-inline-start: 2px solid #ddd;
    border-radius: 2px;
    color: #888;
}

.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
        margin-top: 6px;
        margin-bottom: 6px;
    }

/* Exclude mx_LinkPreviewGroup_hide from wrapping */

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        row-gap: 8px;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_image,
        .mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_caption {
            -webkit-margin-start: 16px;
                    margin-inline-start: 16px;
            min-width: 0; /* Prevent blowout */
        }

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_image {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 100px;
                    flex: 0 0 100px;
            text-align: center;
            cursor: pointer;
        }

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_caption {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            overflow: hidden; /* cause it to wrap rather than clip */
        }

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title,
        .mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_description {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
        }

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title {
            font-weight: bold;
            -webkit-line-clamp: 2;
        }

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title .mx_LinkPreviewWidget_siteName {
                font-weight: normal;
            }

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_description {
            margin-top: 8px;
            word-wrap: break-word;
            -webkit-line-clamp: 3;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LiveContentSummary {
    color: #edf3ff;
}

.mx_LiveContentSummary .mx_LiveContentSummary_text::before {
            display: inline-block;
            vertical-align: text-bottom;
            content: "";
            background-color: #edf3ff;
            -webkit-mask-size: 16px;
                    mask-size: 16px;
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_video::before {
            -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                    mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
        }

.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active {
            color: #0dbd8b;
        }

.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active::before {
                background-color: #0dbd8b;
            }

.mx_LiveContentSummary .mx_LiveContentSummary_participants::before {
        display: inline-block;
        vertical-align: text-bottom;
        content: "";
        background-color: #edf3ff;
        -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
                mask-image: url(../../img/element-icons/group-members.d86d751.svg);
        -webkit-mask-size: 16px;
                mask-size: 16px;
        width: 16px;
        height: 16px;
        margin-right: 2px;
    }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MemberListHeaderView {
    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
    max-height: 112px;
}

.mx_MemberListHeaderView .mx_MemberListHeaderView_container {
        margin-top: var(--cpd-space-6x);
        width: 100%;
    }

.mx_MemberListHeaderView .mx_MemberListHeaderView_invite_small {
        margin-left: var(--cpd-space-3x);
        margin-right: var(--cpd-space-4x);
    }

.mx_MemberListHeaderView .mx_MemberListHeaderView_invite_large {
        width: 288px;
        height: 36px;
    }

.mx_MemberListHeaderView .mx_MemberListHeaderView_label {
        padding: var(--cpd-space-6x) 0 var(--cpd-space-2x) var(--cpd-space-4x);
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 100%;
        color: var(--cpd-color-text-secondary);
        font: var(--cpd-font-body-sm-semibold);
    }

.mx_MemberListHeaderView .mx_MemberListHeaderView_search {
        width: 240px;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        margin-left: var(--cpd-space-4x);
    }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MemberListView {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 0;
}

.mx_MemberListView .mx_MemberListView_container {
        height: 100%;
    }

.mx_MemberListView .mx_MemberListView_separator {
        margin: 0;
        border: none;
        border-top: 2px solid var(--cpd-color-bg-subtle-primary);
    }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MemberTileView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 56px;
    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-300);
}

.mx_MemberTileView .mx_MemberTileView_left,
    .mx_MemberTileView .mx_MemberTileView_right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--cpd-space-2x);
    }

.mx_MemberTileView .mx_MemberTileView_left {
        -ms-flex-preferred-size: 209px;
            flex-basis: 209px;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        min-width: 0;
    }

.mx_MemberTileView .mx_MemberTileView_name {
        font: var(--cpd-font-body-md-medium);
        min-width: 0;
    }

.mx_MemberTileView .mx_MemberTileView_userLabel {
        font: var(--cpd-font-body-sm-regular);
        color: var(--cpd-color-text-secondary);
        margin-left: var(--cpd-space-4x);
    }

.mx_MemberTileView .mx_MemberTileView_avatar {
        position: relative;
        height: 32px;
        width: 32px;
    }

/*
Copyright 2018-2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MessageComposer_wrapper {
    vertical-align: middle;
    margin: auto;
    border-top: 1px solid #000000;
    position: relative;
    padding-left: 42px;
    padding-right: 16px;
}

.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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
}

.mx_MessageComposer_actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
}

.mx_MessageComposer .mx_MessageComposer_avatar {
        position: absolute;
        left: 26px;
    }

.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
            display: block;
        }

.mx_MessageComposer_composecontrols {
    width: 100%;
}

.mx_MessageComposer_e2eIconWrapper {
    height: 12px; /* Match the height of the E2E icon for alignment */
}

.mx_MessageComposer_e2eIcon.mx_E2EIcon {
    position: absolute;
    left: 20px;
    margin-right: 0; /* Counteract the E2EIcon class */
    margin-left: 3px; /* Counteract the E2EIcon class */
    width: 12px;
    height: 12px;
}

.mx_MessageComposer_noperm_error {
    width: 100%;
    height: 60px;
    font-style: italic;
    color: #888;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mx_MessageComposer_input_wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    cursor: text;
}

.mx_MessageComposer_input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    vertical-align: middle;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 60px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    font: var(--cpd-font-body-md-regular);
    margin-right: 6px;
}

.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;
        -webkit-box-shadow: none;
                box-shadow: none;
        color: #edf3ff;
        background-color: #181b21;
        font: var(--cpd-font-body-md-regular);
        max-height: 120px;
        overflow: auto;
    }

/* hack for FF as vertical alignment of custom placeholder text is broken */

.mx_MessageComposer_input textarea::-moz-placeholder {
            line-height: 100%;
            color: #0dbd8b;
            opacity: 1;
        }

.mx_MessageComposer_input textarea::-webkit-input-placeholder {
            color: #0dbd8b;
        }

.mx_MessageComposer_editor {
    width: 100%;
    max-height: 120px;
    min-height: 19px;
    overflow-y: auto;
    overflow-x: hidden;
    word-break: break-word;

    /* FIXME: rather unpleasant hack to get rid of <p/> margins. */
}

/* really we should be mixing in markdown-body from github-markdown-css instead */

.mx_MessageComposer_editor > :first-child {
        margin-top: 0 !important;
    }

.mx_MessageComposer_editor > :last-child {
        margin-bottom: 0 !important;
    }

@keyframes visualbell {
    from {
        background-color: #800;
    }
    to {
        background-color: #181b21;
    }
}

.mx_MessageComposer_input_error {
    -webkit-animation: 0.2s visualbell;
            animation: 0.2s visualbell;
}

.mx_MessageComposer_button_highlight {
    background: var(--cpd-color-bg-subtle-primary);
}

.mx_MessageComposer_button_highlight::before {
        background-color: var(--cpd-color-icon-primary) !important;
    }

.mx_MessageComposer_button {
    --size: 26px;
    position: relative;
    cursor: pointer;
    height: 26px;
    height: var(--size);
    line-height: 26px;
    line-height: var(--size);
    width: auto;
    padding-left: 26px;
    padding-left: var(--size);
    border-radius: 50%;
}

.mx_MessageComposer_button::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        height: 20px;
        width: 20px;
        background-color: var(--cpd-color-icon-tertiary);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        z-index: 2;
    }

.mx_MessageComposer_button::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
    }

.mx_MessageComposer_button:hover::after {
            background: var(--cpd-color-bg-subtle-primary);
        }

.mx_MessageComposer_button:hover::before {
            background-color: var(--cpd-color-icon-primary);
        }

.mx_MessageComposer_button:last-child {
        margin-right: auto;
    }

.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after {
            background: var(--cpd-color-bg-subtle-primary);
        }

.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before {
            background-color: var(--cpd-color-icon-primary);
            z-index: 2;
        }

.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
        background-color: #ff5b55;
    }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_wrapper {
        padding-left: 16px;
        margin-top: 6px;
        margin-bottom: 12px;
    }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_row {
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
    }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_actions {
        /* Height of the composer editor */
        height: 40px;
    }

.mx_MessageComposer_wysiwyg .mx_MediaBody {
        padding-top: 4px;
        padding-bottom: 4px;
    }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button {
        --size: 26px;
        position: relative;
        cursor: pointer;
        height: 26px;
        height: var(--size);
        line-height: 26px;
        line-height: var(--size);
        width: auto;
        padding-left: 26px;
        padding-left: var(--size);
        border-radius: 5px;
    }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        height: 20px;
        width: 20px;
        background-color: var(--cpd-color-icon-tertiary);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        z-index: 2;
    }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: var(--size);
        height: var(--size);
        border-radius: 5px;
    }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover::after {
            background: rgba(33,38,44, 0.9);
        }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover::before {
            background-color: #edf3ff;
        }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after {
                background: var(--cpd-color-green-300);
            }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before {
                background-color: #0dbd8b;
                z-index: 2;
            }

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
            background-color: #ff5b55;
        }

.mx_MessageComposer_upload::before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg);
            mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg);
}

.mx_MessageComposer_poll::before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
            mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
}

.mx_MessageComposer_voiceMessage::before {
    -webkit-mask-image: url(../../icons/mic-on-solid.5e29984.svg);
            mask-image: url(../../icons/mic-on-solid.5e29984.svg);
}

.mx_MessageComposer_plain_text::before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/plain_text.ad262e9.svg);
            mask-image: url(../../img/element-icons/room/composer/plain_text.ad262e9.svg);
}

.mx_MessageComposer_rich_text::before {
    -webkit-mask-image: url(../../icons/text-formatting.0b0dd78.svg);
            mask-image: url(../../icons/text-formatting.0b0dd78.svg);
}

.mx_MessageComposer_location::before {
    -webkit-mask-image: url(../../icons/location-pin-solid.5b99343.svg);
            mask-image: url(../../icons/location-pin-solid.5b99343.svg);
}

.mx_MessageComposer_stickers::before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/sticker.6a92ae6.svg);
            mask-image: url(../../img/element-icons/room/composer/sticker.6a92ae6.svg);
}

.mx_MessageComposer_buttonMenu::before {
    -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
            mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
    -webkit-mask-size: 24px;
            mask-size: 24px;
}

.mx_MessageComposer_sendMessage {
    cursor: pointer;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-color: var(--cpd-color-icon-accent-tertiary);
}

.mx_MessageComposer_sendMessage::before {
        position: absolute;
        height: 16px;
        width: 16px;
        top: 8px;
        left: 9px;

        -webkit-mask-image: url(../../icons/send-solid.9074f92.svg);

                mask-image: url(../../icons/send-solid.9074f92.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;

        background-color: var(--cpd-color-icon-on-solid-primary);
        content: "";
    }

.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
        min-height: 50px;
    }

.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
        height: 50px;
    }

/**
 * Unstable compact mode
 */

.mx_MessageComposer.mx_MessageComposer--compact {
    margin-right: 0;
}

.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_wrapper {
        padding: 0 0 0 25px;
    }

.mx_MessageComposer.mx_MessageComposer--compact:not(.mx_MessageComposer_e2eStatus) .mx_MessageComposer_wrapper {
            padding: 0;
        }

.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_button:last-child {
        margin-right: 0;
    }

.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_e2eIcon {
        left: 0;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MessageComposerFormatBar {
    display: none;
    width: calc(32px * 6);
    height: 32px;
    position: absolute;
    cursor: pointer;
    border-radius: 8px;
    background-color: #181b21;
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    /* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
    /* but as it appears after them in the DOM, will appear on top. */
    z-index: 1000;
}

.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
        display: block;
    }

.mx_MessageComposerFormatBar > * {
        white-space: nowrap;
        display: inline-block;
        position: relative;
        margin: 2px;
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
        width: 28px;
        height: 28px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        vertical-align: middle;
        background: none;
        border: none;
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover {
            background: var(--cpd-color-bg-subtle-secondary);
            border-radius: 6px;
            z-index: 1;
        }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover::after {
        background-color: var(--cpd-color-icon-primary);
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold::after {
        -webkit-mask-image: url(../../icons/bold.b7f0698.svg);
                mask-image: url(../../icons/bold.b7f0698.svg);
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic::after {
        -webkit-mask-image: url(../../icons/italic.be1e35d.svg);
                mask-image: url(../../icons/italic.be1e35d.svg);
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
        -webkit-mask-image: url(../../icons/strikethrough.17fd61f.svg);
                mask-image: url(../../icons/strikethrough.17fd61f.svg);
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote::after {
        -webkit-mask-image: url(../../icons/quote.60f93d6.svg);
                mask-image: url(../../icons/quote.60f93d6.svg);
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode::after {
        -webkit-mask-image: url(../../icons/inline-code.f51200e.svg);
                mask-image: url(../../icons/inline-code.f51200e.svg);
    }

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconInsertLink::after {
        -webkit-mask-image: url(../../icons/link.d0734d2.svg);
                mask-image: url(../../icons/link.d0734d2.svg);
    }

.mx_MessageComposerFormatBar_buttonTooltip {
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: var(--cpd-font-weight-semibold);
    min-width: 54px;
    text-align: center;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NewRoomIntro {
    margin: 40px 0 48px 64px;
}

.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) .mx_MiniAvatarUploader_indicator {
            display: none;
        }

.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
        margin-top: 28px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
        gap: 14px 12px;
    }

.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
            line-height: 1.5rem;
            display: inline-block;
        }

.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline)::before {
                content: "";
                display: inline-block;
                background-color: white;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-size: 20px;
                        mask-size: 20px;
                width: 20px;
                height: 20px;
                margin-right: 5px;
                vertical-align: text-bottom;
            }

.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_NewRoomIntro_inviteButton::before {
            -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                    mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
        }

.mx_NewRoomIntro > h2 {
        margin-top: 24px;
        font-size: 1.5rem;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_NewRoomIntro > p {
        margin: 0;
        font-size: 0.9375rem;
        color: #edf3ff;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NotificationBadge {

    /* Badges are structured a bit weirdly to work around issues with non-monospace */
    /* font styles. The badge pill is actually a background div and the count floats */
    /* within that. For example: */
    /*  ( 99+ ) <-- Rounded pill is a _bg class. */
}

.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
        display: none;
    }

/*     ^- The count is an element floating within that. */

.mx_NotificationBadge.mx_NotificationBadge_visible {
        background-color: #61708b;

        /* Create a flexbox to order the count a bit easier */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        /* The following is the floating badge */
    }

/* These are the 3 background types */

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background-color: var(--cpd-color-icon-primary);
        }

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot .mx_NotificationBadge_count {
                display: none;
            }

/* Redundant sounding name, but a notification badge that indicates there is a regular,
             * non-highlight notification
             * The green colour only applies for notification dot: badges indicating the same notification
             * level are the standard grey.
             */

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot.mx_NotificationBadge_level_notification {
                background-color: var(--cpd-color-icon-success-primary);
            }

/* Badges for highlight notifications. Style for notification level
         * badges is in _EventTile.scss because it applies only to notification
         * dots, not badges.
         */

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_level_highlight {
            background-color: var(--cpd-color-icon-critical-primary);
        }

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_knocked {
            -webkit-mask-image: url(../../img/element-icons/ask-to-join.a351162.svg);
                    mask-image: url(../../img/element-icons/ask-to-join.a351162.svg);
            width: 12px;
            height: 16px;
        }

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
            width: 1rem;
            height: 1rem;
            border-radius: 1rem;
        }

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
            width: 1.625rem;
            height: 1rem;
            border-radius: 1rem;
        }

.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
            font-size: 0.625rem;
            line-height: 0.875rem;
            font-weight: var(--cpd-font-weight-semibold);
            color: var(--cpd-color-text-on-solid-primary);
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_OverflowTileView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #edf3ff;
    cursor: pointer;
}

.mx_OverflowTileView_text {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    overflow: hidden;
    font: var(--cpd-font-body-md-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

.mx_OverflowTileView:hover {
    padding-right: 30px;
    position: relative; /* to keep the chevron aligned */
}

.mx_OverflowTileView:hover::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px); /* center */
    right: -8px;
    -webkit-mask: url(../../icons/chevron-right.a1fc7b0.svg);
            mask: url(../../icons/chevron-right.a1fc7b0.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    width: 16px;
    height: 16px;
    background-color: #a1b2d1;
}

.mx_OverflowTileView_icon {
    padding-left: 3px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    position: relative;
    line-height: 0;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Travis Ralston

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PinnedEventTile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-4x);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.mx_PinnedEventTile .mx_PinnedEventTile_wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-1x);
        /* Remove avatar width and space between the avatar and the wrapper */
        /* We need it to make the location fit */
        width: calc(100% - var(--cpd-space-4x) - 32px);
        /* Prevent a long sender name to overflow the tile */
        overflow: hidden;
    }

.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_top {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: var(--cpd-space-1x);
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_top .mx_PinnedEventTile_sender {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font: var(--cpd-font-body-md-semibold);
            }

.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: var(--cpd-space-2x);
            font: var(--cpd-font-body-sm-regular);
        }

.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread svg {
                width: 20px;
                fill: var(--cpd-color-icon-tertiary);
            }

.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread span {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                color: var(--cpd-color-text-secondary);
            }

.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread button {
                background: transparent;
                border: none;
                cursor: pointer;
                text-decoration: underline;
            }

/*
 * Copyright 2024 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_PinnedMessageBanner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: var(--cpd-space-4x);
    /* 64px = 63px + 1px from the bottom border */
    height: 63px;
    padding: 0 var(--cpd-space-4x);

    background-color: var(--cpd-color-bg-canvas-default);
    border-bottom: 1px solid var(--cpd-color-gray-400);

    /* From figma */
    -webkit-box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgb(27, 29, 34, 0.1);
            box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgb(27, 29, 34, 0.1);
}

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main {
        background: transparent;
        border: none;
        text-align: start;
        cursor: pointer;

        height: 100%;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_content {
            display: grid;
            grid-template:
                "indicators pinIcon title" auto
                "indicators pinIcon message" auto;
            grid-column-gap: var(--cpd-space-2x);
            -webkit-column-gap: var(--cpd-space-2x);
               -moz-column-gap: var(--cpd-space-2x);
                    column-gap: var(--cpd-space-2x);
        }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators {
            grid-area: indicators;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: var(--cpd-space-0-5x);
            height: 100%;
        }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators .mx_PinnedMessageBanner_Indicator {
                width: var(--cpd-space-0-5x);
                background-color: var(--cpd-color-gray-600);
                height: 100%;
            }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators .mx_PinnedMessageBanner_Indicator--active {
                background-color: var(--cpd-color-icon-accent-primary);
            }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators .mx_PinnedMessageBanner_Indicator--hidden {
                background-color: transparent;
            }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_PinIcon {
            grid-area: pinIcon;
            align-self: center;
            fill: var(--cpd-color-icon-secondary-alpha);
        }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_title {
            grid-area: title;
            font: var(--cpd-font-body-sm-regular);
            color: var(--cpd-color-text-action-accent);
            line-height: 20px;
        }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_title .mx_PinnedMessageBanner_title_counter {
                font: var(--cpd-font-body-sm-semibold);
            }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_message {
            grid-area: message;
            line-height: 20px;
        }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_redactedMessage {
            grid-area: message;
            height: 20px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_PinnedMessageBanner .mx_PinnedMessageBanner_actions {
        white-space: nowrap;
    }

.mx_PinnedMessageBanner[data-single-message="true"] .mx_PinnedMessageBanner_content {
        grid-template: "indicators pinIcon message" auto;
    }

.mx_PinnedMessageBanner[data-single-message="true"] .mx_PinnedMessageBanner_content .mx_PinnedMessageBanner_message {
            line-height: 40px;
        }

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PresenceIconView {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 12px;
    height: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: var(--cpd-color-bg-canvas-default);
    border-radius: 100%;
}

.mx_PresenceIconView .mx_PresenceIconView_online {
        color: var(--cpd-color-icon-accent-primary);
    }

.mx_PresenceIconView .mx_PresenceIconView_offline,
    .mx_PresenceIconView .mx_PresenceIconView_dnd {
        color: var(--cpd-color-icon-tertiary);
    }

.mx_PresenceIconView .mx_PresenceIconView_unavailable {
        color: var(--cpd-color-icon-quaternary);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PresenceLabel {
    font-size: 0.6875rem;
    opacity: 0.5;
}

.mx_PresenceLabel_online {
    color: var(--cpd-color-text-success-primary);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ReadReceiptGroup {
    --ReadReceiptGroup_EventBubbleTile-spacing-end: 78px;

    position: relative;
    display: inline-block;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: 1;
}

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_button {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        height: 16px;
        padding: 4px;
        border-radius: 6px;
    }

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_button.mx_AccessibleButton:hover {
                background: #22262e;
            }

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_remainder {
        color: #edf3ff;
        font-size: 0.6875rem;
        line-height: 1rem;
        margin-right: 4px;
    }

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container {
        position: relative;
        display: block;
        height: 100%;
    }

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container .mx_BaseAvatar {
            -webkit-box-sizing: content-box;
                    box-sizing: content-box;
            position: absolute;
            border: 1px solid #181b21;
            width: 14px;
            height: 14px;
            will-change: left, top;
            -webkit-transition:
                left 0.1s ease-out,
                top 0.3s ease-out;
            transition:
                left 0.1s ease-out,
                top 0.3s ease-out;
            -webkit-transition:
                left var(--transition-short) ease-out,
                top var(--transition-standard) ease-out;
            transition:
                left var(--transition-short) ease-out,
                top var(--transition-standard) ease-out;
        }

.mx_ReadReceiptGroup_popup {
    max-height: 300px;
    width: 220px;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    font-size: 12px;
    line-height: 15px;

    right: 0;
}

.mx_ReadReceiptGroup_popup.mx_ContextualMenu_top {
        top: 8px;
    }

.mx_ReadReceiptGroup_popup.mx_ContextualMenu_bottom {
        bottom: 8px;
    }

.mx_ReadReceiptGroup_popup .mx_ReadReceiptGroup_title {
        font-size: 12px;
        line-height: 15px;
        margin: 16px 16px 8px;
        font-weight: var(--cpd-font-weight-semibold);
        /* shouldn’t be actually focusable */
        outline: none;
    }

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            padding: 4px;
            margin: 0 12px;
            border-radius: 8px;
        }

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:hover {
                background: #343a46;
            }

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:last-child {
                margin-bottom: 8px;
            }

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_BaseAvatar {
                margin: 6px 8px;
                -ms-flex-item-align: center;
                    align-self: center;
                justify-self: center;
                -ms-flex-negative: 0;
                    flex-shrink: 0; /* Long names should not shrink the picture */
            }

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-flex: 1;
                    -ms-flex-positive: 1;
                        flex-grow: 1;
                -ms-flex-negative: 1;
                    flex-shrink: 1;
                overflow: hidden;
            }

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name p {
                    margin: 2px 0;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name .mx_ReadReceiptGroup_secondary {
                    color: #edf3ff;
                }

.mx_ReadReceiptGroup_person--tooltip {
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2018 Vector Creations Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ReplyPreview {
    border: 1px solid #000000;
    border-bottom: none;
    background: #181b21;
    max-height: 50vh;
    overflow: auto;
}

.mx_ReplyPreview .mx_ReplyPreview_section {
        border-bottom: 1px solid #000000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
        row-gap: 8px;
        padding: 8px 8px 0 0;
    }

.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-column-gap: 8px;
               -moz-column-gap: 8px;
                    column-gap: 8px;

            color: #edf3ff;
            font-weight: 400;
            opacity: 0.4;
        }

.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel {
                background-color: #edf3ff;
                -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                        mask-image: url(../../icons/close.5ef7caf.svg);
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
                width: 20px;
                height: 20px;
                min-width: 20px;
                min-height: 20px;
            }

.mx_RoomView_body .mx_ReplyPreview {
        /* Add box-shadow to the reply preview on the main (left) panel only. */
        /* It is not added to the preview on the (right) panel for threads and a chat with a maximized widget. */
        -webkit-box-shadow: 0px -16px 32px tranparent;
                box-shadow: 0px -16px 32px tranparent;
        border-radius: 8px 8px 0 0;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 Tulir Asokan <tulir@maunium.net>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ReplyTile {
    position: relative;
    padding: 2px 0;
    font: var(--cpd-font-body-md-regular);
}

.mx_ReplyTile.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
        -webkit-mask-image: url(../../icons/volume-on-solid.3f0544f.svg);
                mask-image: url(../../icons/volume-on-solid.3f0544f.svg);
    }

.mx_ReplyTile.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
        -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
    }

.mx_ReplyTile > a {
        display: grid;
        grid-template:
            "sender" auto
            "message" auto
            / 100%;
        text-decoration: none;
        color: #edf3ff;
        -webkit-transition: color ease 0.15s;
        transition: color ease 0.15s;
        grid-gap: 2px;
        gap: 2px;
        max-width: 100%;

        /* avoid overflow with wide content*/
    }

.mx_ReplyTile > a:hover {
            color: #edf3ff;
        }

.mx_ReplyTile .mx_RedactedBody {
        line-height: 1.125rem;
    }

.mx_ReplyTile .mx_RedactedBody,
    .mx_ReplyTile .mx_HiddenBody {
        padding: 4px 0 2px 20px;
    }

.mx_ReplyTile .mx_RedactedBody::before, .mx_ReplyTile .mx_HiddenBody::before {
            height: 13px;
            width: 13px;
            top: 3px;
        }

/* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */

.mx_ReplyTile .mx_EventTile_content {
        grid-area: message;

        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body.mx_EventTile_bigEmoji {
            line-height: 1.375rem !important; /* Same as var(--EventTile_group_line-line-height) */
            font-size: 0.875rem !important; /* Override the big emoji override */
        }

/* in order to keep the message on two lines, we need to make the body inline*/

.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body {
            display: inline;
        }

/* Hide line numbers and edited indicator*/

.mx_ReplyTile .mx_EventTile_content .mx_EventTile_lineNumbers,
        .mx_ReplyTile .mx_EventTile_content .mx_EventTile_edited {
            display: none;
        }

/* Hack to cut content in <pre> tags too */

.mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre {
            overflow-x: scroll;
            overflow-y: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            padding: 4px;
        }

.mx_ReplyTile .mx_EventTile_content .markdown-body blockquote,
        .mx_ReplyTile .mx_EventTile_content .markdown-body dl,
        .mx_ReplyTile .mx_EventTile_content .markdown-body ol,
        .mx_ReplyTile .mx_EventTile_content .markdown-body p,
        .mx_ReplyTile .mx_EventTile_content .markdown-body pre,
        .mx_ReplyTile .mx_EventTile_content .markdown-body table,
        .mx_ReplyTile .mx_EventTile_content .markdown-body ul {
            margin-bottom: 4px;
        }

.mx_ReplyTile.mx_ReplyTile_info {
        padding-top: 0;
    }

.mx_ReplyTile.mx_ReplyTile_inline > a {
        /* Render replies to emotes inline with the sender avatar */
        grid-template:
            "sender        message" auto
            / -webkit-max-content auto;
        grid-template:
            "sender        message" auto
            / max-content auto;
        gap: 4px; /* increase spacing */
    }

.mx_ReplyTile .mx_ReplyTile_sender {
        grid-area: sender;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 4px;
    }

.mx_ReplyTile .mx_ReplyTile_sender .mx_DisambiguatedProfile {
            font: var(--cpd-font-body-md-regular);

            display: inline-block; /* anti-zalgo, with overflow hidden */
            padding: 0;
            margin: 0;

            /* truncate long display names */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

.mx_ReplyTile .mx_ReplyTile_sender .mx_BaseAvatar {
            line-height: 14px; /* To match size */
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomBreadcrumbs {
    width: 100%;

    /* Create a flexbox for the crumbs */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 12px;

    /* These classes come from the CSSTransition component. There's many more classes we */
    /* could care about, but this is all we worried about for now. The animation works by */
}

.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
        margin-right: 8px;
        width: 32px;
    }

/* sliding it into view. */

.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
        -webkit-transform: translateX(-40px);
                transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
    }

/* first triggering the enter state with the newest breadcrumb off screen (-40px) then */

.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
        -webkit-transform: translateX(0);
                transform: translateX(0);

        /* Timing function is as-requested by design. */
        /* NOTE: The transition time MUST match the value passed to CSSTransition! */
        -webkit-transition: -webkit-transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
        transition: -webkit-transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
        transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
        transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1), -webkit-transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
    }

.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
        font: var(--cpd-font-body-md-semibold);
        line-height: 32px; /* specifically to match the height this is not scaled */
        height: 32px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomCallBanner {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
    padding: 12px 16px;

    color: #edf3ff;
    background-color: #21262c;
    cursor: pointer;
}

.mx_RoomCallBanner_text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_RoomCallBanner_label {
    color: #edf3ff;
    font-weight: var(--cpd-font-weight-semibold);
    padding-right: 8px;
}

.mx_RoomCallBanner_label::before {
        display: inline-block;
        vertical-align: middle;
        content: "";
        background-color: #edf3ff;
        -webkit-mask-size: 16px;
                mask-size: 16px;
        -webkit-mask-position: center;
                mask-position: center;
        width: 16px;
        height: 1.2em; /* to match line height */
        margin-right: 8px;
        -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomHeader {
    height: 64px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 var(--cpd-space-3x) 0 calc(var(--cpd-space-3x) + var(--cpd-space-1-5x));
    border-bottom: 1px solid var(--cpd-color-gray-400);
    background-color: #181b21;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.mx_RoomHeader:hover {
    background-color: var(--cpd-color-gray-200);
}

.mx_RoomHeader_infoWrapper {
    /* unset button styles */
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    border: medium none currentcolor;
    border: initial;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    cursor: pointer;
    gap: var(--cpd-space-3x);
    text-align: left;
    height: 100%;
    padding: 0;
}

.mx_RoomHeader_info {
    /* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
       12px set on the flex container, which sums up to 64 */
    padding-right: var(--cpd-space-13x);
}

.mx_RoomHeader_truncated {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;

    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
}

.mx_RoomHeader_heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-1x);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_RoomHeader_icon {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding: var(--cpd-space-1x);
}

.mx_RoomHeader .mx_FacePile {
    color: #edf3ff;
    background: #181b21;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--cpd-space-2x);
    border-radius: 9999px;
    padding: var(--cpd-space-1-5x);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    font: var(--cpd-font-body-sm-medium);
}

/* RoomAvatar doesn't pass classes down to avatar
    So set style here
    using div because compound classes are not stable */

.mx_RoomHeader .mx_FacePile > div {
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

.mx_RoomHeader .mx_FacePile:hover {
        color: #edf3ff;
        background: var(--cpd-color-bg-subtle-primary);
    }

.mx_RoomHeader .mx_FacePile.mx_FacePile_toggled {
        background: var(--cpd-color-bg-success-subtle);
        color: var(--cpd-color-text-action-accent);
        font: var(--cpd-font-body-sm-semibold);
    }

.mx_RoomHeader .mx_BaseAvatar {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mx_RoomHeader_videoCallOption {
    /* Workaround for https://github.com/element-hq/compound/issues/331 */
    min-width: 240px;
}

.mx_RoomHeader .mx_RoomHeader_toggled {
    fill: var(--cpd-color-icon-accent-primary);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomInfoLine {
    color: #edf3ff;
    display: inline-block;
}

.mx_RoomInfoLine::before {
        content: "";
        display: inline-block;
        height: 1.2em;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background-color: #edf3ff;
        vertical-align: text-bottom;
        margin-right: 6px;
    }

.mx_RoomInfoLine.mx_RoomInfoLine_public::before {
        width: 12px;
        -webkit-mask-size: 12px;
                mask-size: 12px;
        -webkit-mask-image: url(../../icons/public.0e971dd.svg);
                mask-image: url(../../icons/public.0e971dd.svg);
    }

.mx_RoomInfoLine.mx_RoomInfoLine_private::before {
        width: 10px;
        -webkit-mask-size: 10px;
                mask-size: 10px;
        -webkit-mask-image: url(../../icons/lock-solid.6847293.svg);
                mask-image: url(../../icons/lock-solid.6847293.svg);
    }

.mx_RoomInfoLine.mx_RoomInfoLine_video::before {
        width: 16px;
        -webkit-mask-size: 16px;
                mask-size: 16px;
        -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
    }

.mx_RoomInfoLine .mx_RoomInfoLine_members {
        color: inherit;
        text-decoration: inherit;
        font-weight: inherit;
    }

.mx_RoomInfoLine .mx_RoomInfoLine_members::before {
            content: "·"; /* visual separator */
            margin: 0 6px;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Nordeck IT + Consulting GmbH

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomKnocksBar {
    background-color: var(--cpd-color-bg-subtle-secondary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: var(--cpd-space-2x) var(--cpd-space-4x);
}

.mx_RoomKnocksBar_content {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin: 0 var(--cpd-space-3x);
}

.mx_RoomKnocksBar_paragraph {
    color: #edf3ff;
    font-size: var(--cpd-font-size-body-sm);
    margin: 0;
}

.mx_RoomKnocksBar_link {
    margin-left: var(--cpd-space-3x);
}

.mx_RoomKnocksBar_action,
.mx_RoomKnocksBar_avatar {
    -ms-flex-item-align: center;
        align-self: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mx_RoomKnocksBar_action + .mx_RoomKnocksBar_action {
    margin-left: var(--cpd-space-3x);
}

.mx_RoomKnocksBar_avatar + .mx_RoomKnocksBar_avatar {
    margin-left: calc(var(--cpd-space-4x) * -1);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomPreviewBar {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
}

.mx_RoomPreviewBar h3 {
        font-size: 1.125rem;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin: 0;
        }

.mx_RoomPreviewBar h3,
    .mx_RoomPreviewBar .mx_RoomPreviewBar_message p {
        /* break-word, with fallback to break-all, which is wider supported */
        word-break: break-all;
        word-break: break-word;
    }

.mx_RoomPreviewBar .mx_Spinner {
        width: auto;
        height: auto;
        margin: 10px 10px 10px 0;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }

.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
        font-size: 0.75rem;
        line-height: 1.25rem;
    }

.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
            vertical-align: middle;
            display: inline-block;
        }

.mx_RoomPreviewBar_actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mx_RoomPreviewBar_message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.mx_RoomPreviewBar_message p {
        overflow-wrap: break-word;
    }

.mx_RoomPreviewBar_panel {
    padding: 8px 8px 8px 20px;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

        -ms-flex-direction: row;

            flex-direction: row;
}

.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        padding: 3px 8px;
    }

.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
            margin-left: 12px;
        }

.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 0px;
                flex: 1 0 0;
        min-width: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
            margin: 4px;
        }

/* With maximised widgets, the panel fits in better when rounded */

.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
    margin: 8px;
    margin: var(--container-gap-width);
    margin-right: calc(8px / 2);
    margin-right: calc(var(--container-gap-width) / 2); /* Shared with right panel */
    margin-top: 0; /* Already covered by apps drawer */
    border-radius: 8px;
}

.mx_RoomPreviewBar_dialog {
    margin: auto;
    -webkit-box-sizing: content;
            box-sizing: content;
    width: 400px;
    border-radius: 4px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 20px;
    text-align: center;
}

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
            margin: 5px 0 20px 0;
        }

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
            padding: 7px 50px; /* extra wide */
        }

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
            margin-top: 12px;
        }

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
            /* to account for the padding of the primary button which causes inconsistent look between */
            /* subsequent secondary (text) buttons */
            margin-bottom: 7px;
        }

.mx_RoomPreviewBar_Invite {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.mx_RoomPreviewBar_Invite h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-wrap;
    overflow: hidden;
}

.mx_RoomPreviewBar_inviter {
    font-weight: var(--cpd-font-weight-semibold);
}

a.mx_RoomPreviewBar_inviter {
    text-decoration: underline;
    cursor: pointer;
}

.mx_RoomPreviewBar_inviter_mxid {
    color: var(--cpd-color-text-secondary);
}

.mx_RoomPreviewBar_icon {
    margin-right: 8px;
    vertical-align: text-top;
}

.mx_RoomPreviewBar_fullWidth {
    width: 100%;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomPreviewCard {
    padding: 32px 24px !important; /* Override SpaceRoomView's default padding */
    margin: auto;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 480px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #21262c;
    border-radius: 8px;
    position: relative;
    font: var(--cpd-font-body-md-regular);
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_notice {
        font-weight: var(--cpd-font-weight-semibold);
        line-height: 1.5rem;
        color: #edf3ff;
        margin-top: 24px;
        position: relative;
        padding-left: calc(20px + 8px);
    }

.mx_RoomPreviewCard .mx_RoomPreviewCard_notice::before {
            content: "";
            position: absolute;
            height: 1.5rem;
            width: 20px;
            left: 0;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-image: url(../../icons/info-solid.ef2d524.svg);
                    mask-image: url(../../icons/info-solid.ef2d524.svg);
            background-color: #edf3ff;
        }

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-bottom: 20px;
        font-size: 0.9375rem;
    }

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div {
            margin-left: 8px;
        }

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_name {
                line-height: 1.125rem;
            }

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_mxid {
                color: #edf3ff;
            }

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video {
            width: 50px;
            height: 50px;
            border-radius: calc((50px + 2 * 3px) / 2);
            background-color: #0dbd8b;
            border: 3px solid #21262c;

            position: relative;
            left: calc(-50px / 4 - 3px);
        }

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video::before {
                content: "";
                background-color: #ffffff;
                position: absolute;
                width: 50px;
                height: 50px;
                -webkit-mask-size: 22px;
                        mask-size: 22px;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                        mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
            }

/* XXX Remove this when video rooms leave beta */

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_BetaCard_betaPill {
            position: absolute;
            inset-block-start: 32px;
            inset-inline-end: 24px;
        }

.mx_RoomPreviewCard h1.mx_RoomPreviewCard_name {
        margin: 16px 0 !important; /* Override SpaceRoomView's default margins */
    }

.mx_RoomPreviewCard .mx_RoomPreviewCard_topic {
        line-height: 1.375rem;
        margin-top: 16px;
        max-height: 160px;
        overflow-y: auto;
    }

.mx_RoomPreviewCard .mx_FacePile {
        margin-top: 20px;
    }

.mx_RoomPreviewCard .mx_RoomPreviewCard_joinButtons {
        margin-top: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 20px;
    }

.mx_RoomPreviewCard .mx_RoomPreviewCard_joinButtons .mx_AccessibleButton {
            max-width: 200px;
            padding: 14px 0;
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomSearchAuxPanel {
    /* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
    min-height: 84px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-color: var(--cpd-color-bg-canvas-default);
    border-style: solid;
    border-width: 1px 0;
    padding: var(--cpd-space-3x);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    gap: var(--cpd-space-2x);
}

.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        display: inherit; /* flex */
        gap: var(--cpd-space-2x);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        overflow: hidden;
    }

.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary > svg {
            padding: var(--cpd-space-2x);
            border-radius: var(--cpd-space-2x);
            background-color: var(--cpd-color-bg-subtle-secondary);
            color: var(--cpd-color-icon-secondary);
            -ms-flex-negative: 0;
                flex-shrink: 0;
        }

.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_RoomSearchAuxPanel_summary_text {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            font-size: 0.9375rem;
            line-height: 1.375rem;
            overflow: hidden;
        }

.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_RoomSearchAuxPanel_summary_text span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_SearchWarning {
            display: contents;
            font-size: 0.8125rem;
            line-height: 1.25rem;
            color: var(--cpd-color-text-secondary);
        }

.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_buttons {
        display: inherit; /* flex */
        gap: var(--cpd-space-6x);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomSublist {
    margin-left: 8px;
    margin-bottom: 4px;

    /* In the general case, we reserve space for each sublist header to prevent */
    /* scroll jumps when they become sticky. However, that leaves a gap when */
}

.mx_RoomSublist.mx_RoomSublist_hidden {
        display: none;
    }

.mx_RoomSublist:not(.mx_RoomSublist_minimized) .mx_RoomSublist_headerContainer {
            height: auto;
        }

.mx_RoomSublist .mx_RoomSublist_headerContainer {
        /* Create a flexbox to make alignment easy */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        /* *************************** */
        /* Sticky Headers Start */

        /* Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the */
        /* headerContainer, however due to our layout concerns we actually have to */
        /* calculate it manually so we can sticky things in the right places. We also */
        /* target the headerText instead of the container to reduce jumps when scrolling, */
        /* and to help hide the badges/other buttons that could appear on hover. This */
        /* all works by ensuring the header text has a fixed height when sticky so the */
        /* fixed height of the container can maintain the scroll position. */

        /* The combined height must be set in the LeftPanel component for sticky headers */
        /* to work correctly. */
        padding-bottom: 8px;
        height: 24px;
        color: #edf3ff;
    }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickableContainer {
            width: 100%;
        }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            max-width: 100%;

            /* Create a flexbox to make ordering easy */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;

            /* We use a generic sticky class for 2 reasons: to reduce style duplication and */
            /* to identify when a header is sticky. If we didn't have a consistent sticky class, */
            /* we'd have to do the "is sticky" checks again on click, as clicking the header */

            /* We don't have a top style because the top is dependent on the room list header's */
            /* height, and is therefore calculated in JS. */
            /* The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. */
        }

/* when sticky scrolls instead of collapses the list. */

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
                position: fixed;
                height: 32px; /* to match the header container */
                /* width set by JS because of a compat issue between Firefox and Chrome */
                width: calc(100% - 15px);
            }

/* *************************** */

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
            /* Create another flexbox row because it's super easy to position the badge this way. */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

/* Apply the width and margin to the badge so the container doesn't occupy dead space */

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge {
                /* Do not set a width so the badges get properly sized */
                margin-left: 8px; /* same as menu+aux buttons */
            }

/* Sticky Headers End */

.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge {
                margin-right: 4px; /* just to push it over a bit, aligning it with the other elements */
            }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
        .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
            margin-left: 8px; /* should be the same as the notification badge */
            position: relative;
            width: 24px;
            height: 24px;
            border-radius: 8px;
        }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton::before, .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton::before {
                content: "";
                width: 16px;
                height: 16px;
                position: absolute;
                top: 4px;
                left: 4px;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                background: var(--cpd-color-icon-secondary);
            }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
        .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover {
            background: #fff;
        }

/* Hide the menu button by default */

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
            visibility: hidden;
            width: 0;
            margin: 0;
        }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton::before {
            -webkit-mask-image: url(../../icons/plus.95ca4d1.svg);
                    mask-image: url(../../icons/plus.95ca4d1.svg);
        }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton::before {
            -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                    mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
        }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            max-width: calc(100% - 16px); /* 16px is the badge width */
            font: var(--cpd-font-body-sm-semibold);

            /* Ellipsize any text overflow */
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn {
                display: inline-block;
                position: relative;
                width: 14px;
                height: 14px;
                margin-right: 6px;
            }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn::before {
                    content: "";
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    -webkit-mask-position: center;
                            mask-position: center;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    background-color: var(--cpd-color-icon-secondary);
                    -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                            mask-image: url(../../icons/chevron-down.9ea2899.svg);
                }

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed::before {
                    -webkit-transform: rotate(-90deg);
                            transform: rotate(-90deg);
                }

/* stick to top), so we make sure to exclude the first visible sublist. */

.mx_RoomSublist:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
        height: 24px;
    }

/* scrolled to the top above the first sublist (whose header can only ever */

.mx_RoomSublist .mx_RoomSublist_resizeBox {
        position: relative;

        /* Create another flexbox column for the tiles */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        overflow: hidden;

        /* Class name comes from the ResizableBox component */
        /* The hover state needs to use the whole sublist, not just the resizable box, */
    }

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
            -webkit-box-flex: 1;
                -ms-flex: 1 0 0px;
                    flex: 1 0 0;
            overflow: hidden;
            overflow: clip;
            /* need this to be flex otherwise the overflow hidden from above */
            /* sometimes vertically centers the clipped list ... no idea why it would do this */
            /* as the box model should be top aligned. Happens in both FF and Chromium */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -ms-flex-item-align: stretch;
                align-self: stretch;
            /* without this Firefox will prefer pushing the resizer & show more/less button into the overflow */
            min-height: 0;

            -webkit-mask-image: linear-gradient(0deg, transparent, black 4px);

                    mask-image: linear-gradient(0deg, transparent, black 4px);
        }

.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
            /* in this state the div can collapse its height entirely in Chromium, */
            /* so prevent that by allowing overflow */
            overflow: visible;
            /* clear the min-height to make it not collapse entirely in a state with no active resizer */
            min-height: 0;
            min-height: initial;
        }

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 32px;
                    flex: 0 0 32px;
        }

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 4px;
                    flex: 0 0 4px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            width: 100%;
        }

/* so that selector is below and one level higher. */

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
            cursor: ns-resize;
            border-radius: 3px;

            /* Override styles from library */
            max-width: 64px;
            height: 4px !important; /* Update RESIZE_HANDLE_HEIGHT if this changes */

            /* This is positioned directly below the 'show more' button. */
            position: relative !important;
            bottom: 0 !important; /* override from library */
        }

.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle, .mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle {
                opacity: 0.8;
                background-color: #edf3ff;
            }

.mx_RoomSublist .mx_RoomSublist_showNButton {
        cursor: pointer;
        font-size: 0.8125rem;
        line-height: 1.125rem;
        color: #edf3ff;

        /* Update the render() function for RoomSublist if these change */
        /* Update the ListLayout class for minVisibleTiles if these change. */
        height: 24px;
        padding-bottom: 4px;

        /* We create a flexbox to cheat at alignment */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
            position: relative;
            width: 18px;
            height: 18px;
            margin-left: 12px;
            margin-right: 16px;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background: #edf3ff;
            left: -1px; /* adjust for image position */
        }

.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron,
        .mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron {
            -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                    mask-image: url(../../icons/chevron-down.9ea2899.svg);
        }

.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }

.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton, .mx_RoomSublist:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton, .mx_RoomSublist:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton {
            visibility: visible;
            width: 24px;
            margin-left: 8px;
        }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
            height: auto;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            position: relative;
        }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
                -webkit-box-ordinal-group: 1;
                    -ms-flex-order: 0;
                        order: 0;
                -ms-flex-item-align: end;
                    align-self: flex-end;
                margin-right: 0;
            }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
                -webkit-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                        order: 1;
                max-width: 100%;
            }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton {
                -webkit-box-ordinal-group: 3;
                    -ms-flex-order: 2;
                        order: 2;
                visibility: visible;
                width: 32px !important; /* !important to override hover styles */
                height: 32px !important; /* !important to override hover styles */
                margin-left: 0 !important; /* !important to override hover styles */
                background-color: #fff;
                margin-top: 8px;
            }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton::before {
                    top: 8px;
                    left: 8px;
                }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
                margin-right: 12px; /* to center */
            }

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
            height: 16px;
        }

.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton, .mx_RoomSublist.mx_RoomSublist_minimized > .mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton {
                visibility: visible;
                position: absolute;
                bottom: 48px; /* align to middle of name, 40px for aux button (with padding) and 8px for alignment */
                right: 0;
                width: 16px;
                height: 16px;
                border-radius: 0;
                z-index: 1; /* occlude the list name */

                /* This is the same color as the left panel background because it needs */
                /* to occlude the sublist title */
                background-color: rgba(38, 40, 45, 0.9);
            }

.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton::before, .mx_RoomSublist.mx_RoomSublist_minimized > .mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton::before {
                    top: 0;
                    left: 0;
                }

.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton, .mx_RoomSublist.mx_RoomSublist_minimized > .mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton {
                    bottom: 8px; /* align to the middle of name, 40px less than the `bottom` above. */
                }

.mx_RoomSublist_contextMenu {
    padding: 20px 16px;
    width: 250px;
}

.mx_RoomSublist_contextMenu hr {
        margin-top: 16px;
        margin-bottom: 16px;
        margin-right: 16px; /* additional 16px */
        border: 1px solid #edf3ff;
        opacity: 0.1;
    }

.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
        font-size: 0.9375rem;
        line-height: 1.25rem;
        font-weight: var(--cpd-font-weight-semibold);
        margin-bottom: 4px;
    }

.mx_RoomSublist_contextMenu .mx_StyledRadioButton {
        margin-top: 8px;
    }

.mx_RoomSublist_skeletonUI {
    position: relative;
    margin-left: 4px;
    height: 240px;
}

.mx_RoomSublist_skeletonUI::before {
        background-color: var(--cpd-color-bg-subtle-secondary);
        width: 100%;
        height: 100%;

        content: "";
        position: absolute;
        -webkit-mask-repeat: repeat-y;
                mask-repeat: repeat-y;
        -webkit-mask-size: auto 48px;
                mask-size: auto 48px;
        -webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.fde3810.svg);
                mask-image: url(../../img/element-icons/roomlist/skeleton-ui.fde3810.svg);
    }

.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
    width: 32px; /* cut off the horizontal lines in the svg */
    margin-left: 10px; /* align with sublist + buttons */
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020-2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* Note: the room tile expects to be in a flexbox column container */

.mx_RoomTile {
    margin-bottom: 4px;
    padding: 4px;

    /* The tile is also a flexbox row itself */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    contain: content; /* Not strict as it will break when resizing a sublist vertically */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    font-size: var(--cpd-font-size-body-sm);
}

.mx_RoomTile.mx_RoomTile_selected,
    .mx_RoomTile:hover,
    .mx_RoomTile:focus-within,
    .mx_RoomTile.mx_RoomTile_hasMenuOpen {
        background-color: #fff;
        border-radius: 8px;
    }

.mx_RoomTile .mx_DecoratedRoomAvatar,
    .mx_RoomTile .mx_RoomTile_avatarContainer {
        margin-right: 10px;
    }

.mx_RoomTile .mx_RoomTile_details {
        min-width: 0;
    }

.mx_RoomTile .mx_RoomTile_titleContainer {
        height: 32px;
        min-width: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        margin-right: 8px; /* spacing to buttons/badges */

        /* Create a new column layout flexbox for the title parts */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: #edf3ff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 4px;
            line-height: 1.25;
            position: relative;
            top: -1px;
        }

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title,
        .mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle_text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title {
            font: var(--cpd-font-body-md-regular);
            line-height: 1.25;
        }

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
                font-weight: var(--cpd-font-weight-semibold);
            }

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_titleWithSubtitle {
            margin-top: -2px; /* shift the title up a bit more */
        }

.mx_RoomTile .mx_RoomTile_notificationsButton {
        margin-left: 4px; /* spacing between buttons */
    }

.mx_RoomTile .mx_RoomTile_badgeContainer {
        height: 16px;
        /* don't set width so that it takes no space when there is no badge to show */
        margin: auto 0; /* vertically align */

        /* Create a flexbox to make aligning dot badges easier */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
            margin-right: 2px; /* centering */
        }

.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
            /* make the smaller dot occupy the same width for centering */
            margin-left: 5px;
            margin-right: 7px;
        }

/* The context menu buttons are hidden by default */

.mx_RoomTile .mx_RoomTile_menuButton,
    .mx_RoomTile .mx_RoomTile_notificationsButton {
        width: 20px;
        min-width: 20px; /* yay flex */
        height: 20px;
        margin-top: auto;
        margin-bottom: auto;
        position: relative;
        display: none;
    }

.mx_RoomTile .mx_RoomTile_menuButton::before, .mx_RoomTile .mx_RoomTile_notificationsButton::before {
            top: 2px;
            left: 2px;
            content: "";
            width: 16px;
            height: 16px;
            position: absolute;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background: var(--cpd-color-icon-primary);
        }

/* If the room has an overriden notification setting then we always show the notifications menu button */

.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
        display: block;
    }

.mx_RoomTile .mx_RoomTile_menuButton::before {
        -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
    }

/* Hide the badge container on hover because it'll be a menu button */

.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):hover .mx_RoomTile_badgeContainer, .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):focus-within .mx_RoomTile_badgeContainer, .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer {
                width: 0;
                height: 0;
                display: none;
            }

.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):hover .mx_RoomTile_notificationsButton,
            .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):hover .mx_RoomTile_menuButton,
            .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):focus-within .mx_RoomTile_notificationsButton,
            .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):focus-within .mx_RoomTile_menuButton,
            .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,
            .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton {
                display: block;
            }

.mx_RoomTile.mx_RoomTile_minimized {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: relative;
    }

.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
        .mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
            margin-right: 0;
        }

/* We use these both in context menus and the room tiles */

.mx_RoomTile_iconBell::before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
            mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
}

.mx_RoomTile_iconBellDot::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
}

.mx_RoomTile_iconBellCrossed::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
}

.mx_RoomTile_iconBellMentions::before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
            mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconStar::before {
        -webkit-mask-image: url(../../icons/favourite-solid.a1d4606.svg);
                mask-image: url(../../icons/favourite-solid.a1d4606.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconArrowDown::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/low-priority.d46a05a.svg);
                mask-image: url(../../img/element-icons/roomlist/low-priority.d46a05a.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconNotificationsDefault::before {
        -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
                mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconNotificationsAllMessages::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
                mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconNotificationsMentionsKeywords::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
                mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconNotificationsNone::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
                mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconPeople::before {
        -webkit-mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
                mask-image: url(../../icons/user-profile-solid.e886eb1.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconFiles::before {
        -webkit-mask-image: url(../../icons/files.453e84c.svg);
                mask-image: url(../../icons/files.453e84c.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconPins::before {
        -webkit-mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
                mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconWidgets::before {
        -webkit-mask-image: url(../../icons/extensions-solid.4aa63de.svg);
                mask-image: url(../../icons/extensions-solid.4aa63de.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings::before {
        -webkit-mask-image: url(../../icons/settings-solid.94c318a.svg);
                mask-image: url(../../icons/settings-solid.94c318a.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconExport::before {
        -webkit-mask-image: url(../../icons/export-archive.f43ec04.svg);
                mask-image: url(../../icons/export-archive.f43ec04.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconCopyLink::before {
        -webkit-mask-image: url(../../icons/link.d0734d2.svg);
                mask-image: url(../../icons/link.d0734d2.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite::before {
        -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    }

.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut::before {
        -webkit-mask-image: url(../../icons/leave.8b03b57.svg);
                mask-image: url(../../icons/leave.8b03b57.svg);
    }

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomUpgradeWarningBar {
    max-height: 235px;
    background-color: #22262e;
    padding-left: 20px;
    padding-right: 20px;
    overflow: scroll;
}

.mx_RoomUpgradeWarningBar_wrapped {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
}

.mx_RoomUpgradeWarningBar_header {
    color: #ff5b55;
    font-weight: bold;
}

.mx_RoomUpgradeWarningBar_body {
    color: #ff5b55;
}

.mx_RoomUpgradeWarningBar_upgradelink {
    color: #ff5b55;
    text-decoration: underline;
}

.mx_RoomUpgradeWarningBar_small {
    color: #888;
    font-size: 70%;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SendMessageComposer {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font: var(--cpd-font-body-md-regular);
    /* fixed line height to prevent emoji from being taller than text */
    line-height: 1.125rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-right: 6px;
    /* don't grow wider than available space */
    min-width: 0;
}

.mx_SendMessageComposer .mx_BasicMessageComposer {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        /* min-height at this level so the mx_BasicMessageComposer_input */
        /* still stays vertically centered when less than 55px. */
        /* We also set this to ensure the voice message recording widget */
        /* doesn't cause a jump. */
        min-height: 55px;
    }

.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input {
            padding: 3px 0;
            /* this will center the contenteditable */
            /* in it's parent vertically */
            /* while keeping the autocomplete at the top */
            /* of the composer. The parent needs to be a flex container for this to work. */
            margin: auto 0;
            /* max-height at this level so autocomplete doesn't get scrolled too */
            max-height: 140px;
            overflow-y: auto;
        }

.mx_Stickers_content {
    overflow: hidden;
}

.mx_Stickers_content_container {
    overflow: hidden;
    height: 300px;
}

#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
        height: auto;
        height: initial;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
        padding: 0;
    }

#mx_persistedElement_stickerPicker iframe {
        /* Sticker picker depends on the fixed height previously used for all tiles */
        height: 283px; /* height of the popout minus the AppTile menu bar */
    }

.mx_Stickers_contentPlaceholder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
}

.mx_Stickers_contentPlaceholder p {
    max-width: 200px;
}

.mx_Stickers_addLink {
    display: inline;
    cursor: pointer;
    color: #0dbd8b;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ThirdPartyMemberInfo {
    padding: var(--cpd-space-4x);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ThreadSummary,
.mx_ThreadSummary_content {
    color: #edf3ff;
}

.mx_ThreadSummary,
.mx_ThreadSummary_icon {
    margin-top: 8px;
}

.mx_ThreadSummary {
    min-width: 267px;
    /* leave space on both left & right gutters */
    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 40px;
    position: relative;
    background-color: rgba(33,38,44, 0.9);
    padding-inline: 12px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    clear: both;
    overflow: hidden;
    border: 1px solid rgba(33,38,44, 0.9); /* always render a border so the hover effect doesn't require a re-layout */
    font: var(--cpd-font-body-sm-regular);
}

.mx_ThreadSummary .mx_ThreadSummary_chevron {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 60px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        /* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */
        background: -webkit-gradient(linear, right top, left top, color-stop(50%, #21262c), to(#e1e6ec00));
        background: linear-gradient(270deg, #21262c 50%, #e1e6ec00 100%);

        opacity: 0;
        -webkit-transform: translateX(60px);
                transform: translateX(60px);
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }

.mx_ThreadSummary .mx_ThreadSummary_chevron::before {
            content: "";
            position: absolute;
            top: 50%;
            right: var(--cpd-space-1x);
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
            width: 24px;
            height: 24px;
            -webkit-mask-image: url(../../icons/chevron-right.a1fc7b0.svg);
                    mask-image: url(../../icons/chevron-right.a1fc7b0.svg);
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            background-color: #edf3ff;
        }

.mx_ThreadSummary:hover,
    .mx_ThreadSummary:focus {
        border-color: #6f7882;
    }

.mx_ThreadSummary:hover .mx_ThreadSummary_chevron, .mx_ThreadSummary:focus .mx_ThreadSummary_chevron {
            opacity: 1;
            -webkit-transform: translateX(0);
                    transform: translateX(0);
        }

.mx_ThreadSummary .mx_ThreadSummary_sender,
    .mx_ThreadSummary .mx_ThreadSummary_content,
    .mx_ThreadSummary .mx_ThreadSummary_replies_amount {
        line-height: var(--EventTile_ThreadSummary-line-height);
    }

.mx_ThreadSummary .mx_ThreadSummary_sender,
    .mx_ThreadSummary .mx_ThreadSummary_content {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

.mx_ThreadSummary .mx_ThreadSummary_sender {
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_ThreadSummary .mx_ThreadSummary_content {
        margin-left: 4px;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_ThreadSummary .mx_ThreadSummary_replies_amount {
        color: #edf3ff;
        font-weight: var(--cpd-font-weight-semibold);
        white-space: nowrap;
        position: relative;
        padding: 0 12px 0 8px;
    }

.mx_MessagePanel_narrow .mx_ThreadSummary {
        min-width: 0;
        min-width: initial;
        max-width: 100%; /* prevent overflow */
        width: auto;
        width: initial;
    }

.mx_ThreadSummary_avatar {
    -webkit-margin-end: 8px;
            margin-inline-end: 8px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mx_ThreadSummary_icon {
    display: inline-block;
    margin-bottom: 8px;
}

.mx_ThreadSummary_icon::before {
        content: "";
        display: inline-block;
        -webkit-mask-image: url(../../icons/threads.52e135e.svg);
                mask-image: url(../../icons/threads.52e135e.svg);
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        height: 18px;
        min-width: 18px;
        background-color: var(--cpd-color-icon-tertiary) !important;
        vertical-align: middle;
        -webkit-margin-end: 8px;
                margin-inline-end: 8px;
        margin-top: -2px;
    }

a.mx_ThreadSummary_icon {
        color: #edf3ff;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_TopUnreadMessagesBar {
    z-index: 1000;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 38px;
}

.mx_TopUnreadMessagesBar::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 11px;
    width: 4px;
    height: 4px;
    border-radius: 16px;
    background-color: var(--cpd-color-bg-canvas-default);
    border: 6px solid var(--cpd-color-icon-accent-tertiary);
    pointer-events: none;
}

.mx_TopUnreadMessagesBar_scrollUp {
    height: 38px;
    border-radius: 19px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #181b21;
    border: 1.3px solid var(--cpd-color-icon-tertiary);
    cursor: pointer;
}

.mx_TopUnreadMessagesBar_scrollUp::before {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    -webkit-mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
            mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
            mask-size: 24px;
    -webkit-mask-position: center;
            mask-position: center;
    background: var(--cpd-color-icon-tertiary);
}

.mx_TopUnreadMessagesBar_markAsRead {
    display: block;
    width: 18px;
    height: 18px;
    background: #181b21;
    border: 1.3px solid var(--cpd-color-icon-tertiary);
    border-radius: 10px;
    margin: 5px auto;
}

.mx_TopUnreadMessagesBar_markAsRead::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
            mask-image: url(../../icons/close.5ef7caf.svg);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
            mask-size: 16px;
    -webkit-mask-position: center;
            mask-position: center;
    background: var(--cpd-color-icon-tertiary);
}

/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UserIdentityWarning {
    /* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */
    margin-left: calc(-42px + 18px);
    margin-left: calc(-42px + var(--RoomView_MessageList-padding));
}

.mx_UserIdentityWarning .mx_UserIdentityWarning_row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_BaseAvatar {
            margin-left: var(--cpd-space-2x);
        }

.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_UserIdentityWarning_main {
            margin-left: var(--cpd-space-6x);
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
        }

.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_UserIdentityWarning_main.critical {
            color: var(--cpd-color-text-critical-primary);
        }

.mx_UserIdentityWarning.critical {
    background: -webkit-gradient(linear, left top, left bottom, from(var(--cpd-color-red-100)), to(var(--cpd-color-theme-bg)));
    background: linear-gradient(180deg, var(--cpd-color-red-100) 0%, var(--cpd-color-theme-bg) 100%);
}

.mx_MessageComposer.mx_MessageComposer--compact > .mx_UserIdentityWarning {
    margin-left: calc(-25px + 18px);
    margin-left: calc(-25px + var(--RoomView_MessageList-padding));
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_VoiceRecordComposerTile_stop {
    /* 28px plus a 2px border makes this a 32px square (as intended) */
    width: 28px;
    height: 28px;
    border: 2px solid #6f7882;
    border-radius: 32px;
    margin-right: 2px; /* between us and the waveform component */
    position: relative;
}

.mx_VoiceRecordComposerTile_stop::after {
        content: "";
        width: 14px;
        height: 14px;
        position: absolute;
        top: 7px;
        left: 7px;
        border-radius: 2px;
        background-color: #ff4b55;
    }

.mx_VoiceRecordComposerTile_delete {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
    background-color: #6f7882;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url(../../icons/delete.8165351.svg);
            mask-image: url(../../icons/delete.8165351.svg);
}

.mx_VoiceRecordComposerTile_uploadingState {
    margin-right: 10px;
    color: #edf3ff;
}

.mx_VoiceRecordComposerTile_failedState {
    margin-right: 21px;
}

.mx_VoiceRecordComposerTile_failedState .mx_VoiceRecordComposerTile_uploadState_badge {
        display: inline-block;
        margin-right: 4px;
        vertical-align: middle;
    }

.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
    /* Note: remaining class properties are in the PlayerContainer CSS. */

    /* fixed height to reduce layout jumps with the play button appearing */
    /* https://github.com/vector-im/element-web/issues/18431 */
    height: 32px;

    margin: 6px; /* force the composer area to put a gutter around us */
    margin-right: 6px; /* isolate from stop/send button */

    position: relative; /* important for the live circle */
}

.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
        /* We are putting the circle in this padding, so we need +10px from the regular */
        /* padding on the left side. */
        padding-left: 22px;
    }

.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording::before {
            -webkit-animation: recording-pulse 2s infinite;
                    animation: recording-pulse 2s infinite;

            content: "";
            background-color: #ff4b55;
            width: 10px;
            height: 10px;
            position: absolute;
            left: 12px; /* 12px from the left edge for container padding */
            top: 17px; /* vertically center (middle align with clock) */
            border-radius: 10px;
        }

.mx_MessageComposer_wysiwyg .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording::before {
            top: 15px; /* vertically center (middle align with clock) */
        }

/* The keyframes are slightly weird here to help make a ramping/punch effect */

/* for the recording dot. We start and end at 100% opacity to help make the */

/* dot feel a bit like a real lamp that is blinking: the animation ends up */

/* spending a lot of its time showing a steady state without a fade effect. */

/* This lamp effect extends into why the 0% opacity keyframe is not in the */

/* midpoint: lamps take longer to turn off than they do to turn on, and the */

/* extra frames give it a bit of a realistic punch for when the animation is */

/* ramping back up to 100% opacity. */

/* Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s */

/* (intended to be used in a loop for 2s animation speed) */

@-webkit-keyframes recording-pulse {
    0% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
}

@keyframes recording-pulse {
    0% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
}

/*
Copyright 2018-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_WhoIsTypingTile {
    margin-left: -18px; /* offset padding from mx_RoomView_MessageList to center avatars */
    padding-top: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */

.mx_WhoIsTypingTile_avatars {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 82px;
            flex: 0 0 82px; /* 18 (padding on message list) + 64 (padding on event lines) */
    text-align: center;
}

.mx_WhoIsTypingTile_avatars > :not(:first-child) {
    margin-left: -12px;
}

.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
    border: 1px solid #181b21;
    border-radius: 40px;
}

.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
    position: relative;
    display: inline-block;
    color: #edf3ff;
    background-color: #6f7882;
    border: 1px solid #181b21;
    border-radius: 40px;
    width: 24px;
    height: 24px;
    line-height: 1.5rem;
    font-size: 0.8em;
    vertical-align: top;
    text-align: center;
}

.mx_WhoIsTypingTile_label {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font: var(--cpd-font-body-md-semibold);
    color: #a1b2d1;
}

.mx_WhoIsTypingTile_label > span {
    background-image: url(../../img/typing-indicator-2x.e13c259.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 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_EditWysiwygComposer {
    --EditWysiwygComposer-padding-inline: 3px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 100%; /* disable overflow */
    width: auto;
    gap: 8px;
    padding: 8px 3px;
    padding: 8px var(--EditWysiwygComposer-padding-inline);
}

.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content {
        border-radius: 4px;
        border: solid 1px #000000;
        background-color: #181b21;
        max-height: 200px;
        padding: 3px 6px;
    }

.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content:focus {
            border-color: var(--cpd-color-green-400);
        }

.mx_EditWysiwygComposer .mx_EditWysiwygComposer_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap-reverse;
                flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        gap: 5px;
        -webkit-margin-start: auto;
                margin-inline-start: auto;
    }

.mx_EditWysiwygComposer .mx_EditWysiwygComposer_buttons .mx_AccessibleButton {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            min-width: 100px; /* magic number to align the edge of the button with the input area */
        }

.mx_EditWysiwygComposer .mx_FormattingButtons_Button:first-child {
            margin-left: 0px;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SendWysiwygComposer {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font: var(--cpd-font-body-md-regular);
    /* fixed line height to prevent emoji from being taller than text */
    line-height: 1.125rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-right: 13px;
    gap: 8px;
}

.mx_SendWysiwygComposer .mx_FormattingButtons {
        margin-left: 12px;
    }

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor {
        border: 1px solid;
        border-color: #6f7882;
        padding: 6px 11px 6px 12px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        gap: 10px;
    }

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_E2EIcon {
            margin: 0 0 7px 0;
            width: 12px;
            height: 12px;
        }

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="true"] {
            border-radius: 14px;
        }

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="true"] .mx_WysiwygComposer_Editor_container {
                margin-top: 3px;
                margin-bottom: 3px;
            }

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="false"] {
            border-radius: 40px;
        }

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_WysiwygComposer_Editor_container {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            min-height: 22px;
            margin-bottom: 2px;
            /* don't grow wider than available space */
            width: 0;
        }

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content {
                /* this will center the contenteditable */
                /* in it's parent vertically */
                /* while keeping the autocomplete at the top */
                /* of the composer. The parent needs to be a flex container for this to work. */
                margin: auto 0;
                /* the line height is $font-22px (set in _Editor.pcss) and we want to display 16 lines */
                max-height: calc(16 * 1.375rem);
                overflow-y: auto;
            }

.mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor {
        border-color: #6f7882;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_WysiwygComposer_Editor_container {
    /* These are set in Javascript */
    --avatar-letter: "";
    --avatar-background: unset;
    --placeholder: "";
}

@keyframes visualbell {
        from {
            background-color: #800;
        }
        to {
            background-color: #181b21;
        }
    }

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content {
        line-height: 1.375rem;
        white-space: pre-wrap;
        word-wrap: break-word;
        outline: none;
        overflow-x: hidden;
    }

/* navigated through in a single keypress */

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content .caretNode {
            -webkit-user-select: all;
               -moz-user-select: all;
                    user-select: all;
        }

/* we have any other elements*/

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content br:not(:only-child) {
            display: none;
        }

/* we always have a <br/> tag at the end of the html, we need it to be present at first then hide it as soon as*/

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content p {
            margin-top: 0;
            margin-bottom: 0;
            /* this may seem redundant, but we need to handle zero content formatting tags, which occur when we split a
               formatting tag into paragraphs */
            min-height: 1.375rem;
        }

/* Force caret nodes to be selected in full so that they can be */

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul,
        .mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ol {
            margin-top: 0;
            margin-bottom: 0;
            -webkit-padding-start: 28px;
                    padding-inline-start: 28px;
        }

/* Make list type disc to match rich text editor */

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul {
            list-style-type: disc;
        }

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content blockquote {
            color: #777;
            border-left: 2px solid var(--cpd-color-border-interactive-primary);
            border-radius: 2px;
            padding: 0 10px;

            -webkit-margin-before: 0;

                    margin-block-start: 0;
            -webkit-margin-after: 0;
                    margin-block-end: 0;
            -webkit-margin-start: 0;
                    margin-inline-start: 0;
            -webkit-margin-end: 0;
                    margin-inline-end: 0;
        }

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content > pre {
            font-size: 0.9375rem;
            line-height: 1.5rem;

            margin-top: 0;
            margin-bottom: 0;
            padding: 8px 12px;

            background-color: #2a3039;
            border: 1px solid #2a3039;
            border-radius: 2px;
        }

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *) {
            font-family: "Inconsolata", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
            font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
    "Noto Color Emoji" !important;
            background-color: #2a3039;
            border: 1px solid #2a3039;
            border-radius: 4px;
            padding: 2px;
        }

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *):empty {
                border: medium none currentcolor;
                border: initial;
                padding: 0;
                padding: initial;
            }

/* this selector represents what will become a pill
        nb despite there being mx_UserPill and mx_RoomPill classes appended to these pills
        in the current composer, there don't appear to be any styles associated with those classes
        in this repo */

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type] {
            /* combine mx_Pill from _Pill.pcss */
            padding: 0.0625rem 0.4em;
            line-height: 1.0625rem;
            border-radius: 1rem;
            display: inline;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            max-width: 100%;
            overflow: hidden;

            color: var(--cpd-color-text-on-solid-primary);
            background-color: var(--cpd-color-bg-action-primary-rest);

            /* ...with the overrides from _BasicMessageComposer.pcss */
            -webkit-user-select: all;
               -moz-user-select: all;
                    user-select: all;
            position: relative;
            cursor: inherit; /* We don't want indicate clickability */
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* avatar pseudo element */

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type]::before {
                /* After consolidation, all of the styling from _Pill.scss was being overridden,
                so take what is in _BasicMessageComposer.pcss as the starting point */
                display: inline-block;
                content: var(--avatar-letter);
                background: var(--avatar-background), #181b21;

                width: 1rem;
                min-width: 1rem; /* ensure the avatar is not compressed */
                height: 1rem;
                line-height: 1rem;
                text-align: center;

                /* Get the positioning of the avatar just right for consistency with timeline */
                -webkit-margin-start: -0.4rem;
                        margin-inline-start: -0.4rem;
                -webkit-margin-end: 0.24rem;
                        margin-inline-end: 0.24rem;
                vertical-align: 0.12rem;

                background-repeat: no-repeat;
                background-size: 1rem;
                border-radius: 1rem;

                color: #ffffff;

                color: var(--avatar-color, #ffffff);
                font-weight: bold;
                font-size: 0.6275rem;
            }

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content_placeholder::before {
        content: var(--placeholder);
        width: 0;
        height: 0;
        overflow: visible;
        display: inline-block;
        pointer-events: none;
        white-space: nowrap;
        color: var(--cpd-color-text-secondary);
    }

.mx_WysiwygComposer_AutoCompleteWrapper {
    position: relative;
}

/* Due to the fact that editing a message now has a larger amount of grey
    colour above it (due to the rich text buttons above the composer), we need
    to give the autocomplete a bit more visual separation by using a border.
    */

.mx_WysiwygComposer_AutoCompleteWrapper > .mx_Autocomplete {
        border: 1px solid #6f7882;
        border-radius: 8px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FormattingButtons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 8px;
}

.mx_FormattingButtons .mx_FormattingButtons_Button {
        --size: 28px;
        cursor: pointer;
        height: 28px;
        height: var(--size);
        width: 28px;
        width: var(--size);
        background-color: transparent;
        border: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        border-radius: 5px;
    }

.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover {
            background: rgba(33,38,44, 0.9);
        }

.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover .mx_FormattingButtons_Icon {
                color: #edf3ff;
            }

.mx_FormattingButtons .mx_FormattingButtons_active {
        background: var(--cpd-color-green-300);
    }

.mx_FormattingButtons .mx_FormattingButtons_active .mx_FormattingButtons_Icon {
            color: #0dbd8b;
        }

.mx_FormattingButtons .mx_FormattingButtons_disabled .mx_FormattingButtons_Icon {
            color: #6f7882;
        }

.mx_FormattingButtons .mx_FormattingButtons_Icon {
        --size: 16px;
        height: 16px;
        height: var(--size);
        width: 16px;
        width: var(--size);
        color: #edf3ff;
    }

.mx_FormattingButtons_Tooltip_KeyboardShortcut kbd {
        text-align: center;
        display: inline-block;
        text-transform: capitalize;
        font-family: Inter, sans-serif;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LinkModal {
    padding: 32px;
    max-width: 600px;
    height: 341px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.mx_LinkModal .mx_LinkModal_content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        gap: 8px;
        margin-top: 7px;
    }

.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_Field {
            -webkit-box-flex: initial;
                -ms-flex: initial;
                    flex: initial;
            height: 40px;
        }

.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_buttons {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
        }

.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_buttons .mx_Dialog_buttons {
                display: inline-block;
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AvatarSetting_avatar {
    width: 90px;
    min-width: 90px; /* so it doesn't get crushed by the flexbox in languages with longer words */
    height: 90px;
    margin-top: 8px;
    position: relative;
}

.mx_AvatarSetting_avatar.mx_AvatarSetting_avatarDisplay:hover .mx_AvatarSetting_hover {
        opacity: 1;
    }

.mx_AvatarSetting_avatar > * {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
        margin-top: 8px;
    }

.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
        width: 100%;
    }

.mx_AvatarSetting_avatar > img {
        display: block;
        height: 90px;
        width: inherit;
        border-radius: 90px;
        cursor: pointer;
        -o-object-fit: cover;
           object-fit: cover;
    }

.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
        width: 28px;
        height: 28px;
        border-radius: 32px;
        border: 1px solid var(--cpd-color-bg-canvas-default);
        background-color: var(--cpd-color-bg-canvas-default);

        position: absolute;
        bottom: 0;
        right: 0;
        text-align: center;
        cursor: pointer;
    }

.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton svg {
            position: relative;
            top: 3px;
        }

.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:hover,
    .mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton_active {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_AvatarSetting_removeMenuItem svg,
.mx_AvatarSetting_removeMenuItem span {
    color: var(--cpd-color-text-critical-primary) !important;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_FontScalingPanel_preview {
    --FontScalingPanel_preview-padding-block: 9px;

    border: 1px solid #6f7882;
    border-radius: 10px;
    padding: 0 16px 9px 16px;
    padding: 0 16px var(--FontScalingPanel_preview-padding-block) 16px;
    pointer-events: none;
    display: flow-root;
}

.mx_FontScalingPanel_preview.mx_IRCLayout {
        padding-top: 9px;
    }

.mx_FontScalingPanel_preview .mx_EventTile[data-layout="bubble"] {
        margin-top: 30px;
    }

.mx_FontScalingPanel_preview .mx_EventTile_msgOption {
        display: none;
    }

.mx_FontScalingPanel_Dropdown {
    width: 120px;
    /* Override default mx_Field margin */
    margin-bottom: var(--cpd-space-2x) !important;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ImageSizePanel_radios {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 16px;
}

.mx_ImageSizePanel_radios > label {
        margin-right: 68px; /* keep the boxes separate */
        cursor: pointer;
    }

.mx_ImageSizePanel_radios .mx_ImageSizePanel_size {
        background-color: #6f7882;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: 221px;
                mask-size: 221px;
        -webkit-mask-position: center;
                mask-position: center;
        width: 221px;
        height: 148px;
        margin-bottom: 14px; /* move radio button away from bottom edge a bit */
    }

.mx_ImageSizePanel_radios .mx_ImageSizePanel_size.mx_ImageSizePanel_sizeDefault {
            -webkit-mask: url(../../img/element-icons/settings/img-size-normal.769b56e.svg);
                    mask: url(../../img/element-icons/settings/img-size-normal.769b56e.svg);
        }

.mx_ImageSizePanel_radios .mx_ImageSizePanel_size.mx_ImageSizePanel_sizeLarge {
            -webkit-mask: url(../../img/element-icons/settings/img-size-large.9c06d67.svg);
                    mask: url(../../img/element-icons/settings/img-size-large.9c06d67.svg);
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_IntegrationManager .mx_Dialog_border {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 60%;
        height: 70%;
        max-width: none;
        max-width: initial;
        max-height: none;
        max-height: initial;
    }

.mx_IntegrationManager .mx_Dialog {
        padding: 0;
        overflow: hidden;
    }

.mx_IntegrationManager iframe {
        background-color: #fff;
        border: 0;
        width: 100%;
        height: 100%;
    }

.mx_IntegrationManager h3 {
        margin-block: 20px;
    }

.mx_IntegrationManager .mx_IntegrationManager_loading,
    .mx_IntegrationManager .mx_IntegrationManager_error {
        text-align: center;
    }

.mx_IntegrationManager .mx_IntegrationManager_error h3 {
        color: #ff5b55;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_JoinRuleSettings_upgradeRequired {
    margin-left: 16px;
    padding: 4px 16px;
    border: 1px solid #0dbd8b;
    border-radius: 8px;
    color: #0dbd8b;
    font-size: 0.75rem;
    line-height: 0.9375rem;
}

.mx_JoinRuleSettings_spacesWithAccess > h4 {
        color: #edf3ff;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.75rem;
        line-height: 0.9375rem;
        text-transform: uppercase;
    }

.mx_JoinRuleSettings_spacesWithAccess > span {
        font: var(--cpd-font-body-md-medium);
        line-height: 32px; /* matches height of avatar for v-align */
        color: #edf3ff;
        display: inline-block;
    }

.mx_JoinRuleSettings_spacesWithAccess > span .mx_BaseAvatar {
            margin-right: 8px;
        }

.mx_JoinRuleSettings_spacesWithAccess > span + span {
            margin-left: 16px;
        }

.mx_JoinRuleSettings_radioButton {
    padding-top: 16px;
}

.mx_JoinRuleSettings_radioButton .mx_StyledRadioButton_content {
        margin-left: 14px;
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: #edf3ff;
        display: block;
    }

.mx_JoinRuleSettings_radioButton.mx_StyledRadioButton_disabled {
        opacity: 0.5;
    }

.mx_JoinRuleSettings_radioButton.mx_StyledRadioButton_disabled + span {
        opacity: 0.5;
    }

.mx_JoinRuleSettings_radioButton + span {
        display: inline-block;
        margin-left: 34px;
        margin-bottom: 16px;
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: #edf3ff;
    }

.mx_JoinRuleSettings_radioButton + span + .mx_StyledRadioButton {
            border-top: 1px solid #6f7882;
        }

.mx_JoinRuleSettings_labelledCheckbox {
    font: var(--cpd-font-body-md-regular);
    margin-top: var(--cpd-space-2x);
}

.mx_JoinRuleSettings_recommended {
    color: var(--cpd-color-green-1000);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_KeyboardShortcut kbd {
        padding: 5px;
        border-radius: 4px;
        background-color: #181b21;
        min-width: 20px;
        text-align: center;
        display: inline-block;
        border: 1px solid #c7c7c7;
        -webkit-box-shadow: 0 2px #c7c7c7;
                box-shadow: 0 2px #c7c7c7;
        text-transform: capitalize;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LayoutSwitcher_LayoutSelector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /**
     * The settings form has a default gap of 10px
     * We want to have a bigger gap between the layout options
     */
    gap: var(--cpd-space-4x) !important;
}

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
        border: 1px solid var(--cpd-color-border-interactive-primary);
        border-radius: var(--cpd-space-2x);
    }

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            /*
             * 10px
             */
            gap: calc(var(--cpd-space-2x) + var(--cpd-space-0-5x));
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline,
        .mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
            margin: var(--cpd-space-3x);
        }

/**
         * Override the event tile style to make it fit in the selector
         * Tweak also hover style and remove action bar
         */

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
            pointer-events: none;
        }

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile {
                margin: 0;
            }

/**
                 * Hide the message options and message action bar in the preview
                 */

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_msgOption,
                .mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_MessageActionBar {
                    display: none;
                }

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_content {
                    margin-right: 0;
                }

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile[data-layout="group"] {
                    margin-top: calc(var(--cpd-space-3x) * -1);
                }

/**
                 * Add margin to center the bubble
                 */

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile[data-layout="bubble"] {
                    /**
                     * Add the layout margin and the margin to vertically center the bubble
                     */
                    margin-top: var(--cpd-space-6x);
                    margin-right: 34px;
                    -ms-flex-negative: 1;
                        flex-shrink: 1;
                }

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_line {
                    max-width: 100%;
                }

.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
            border-top: 0;
            border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NotificationPusherSettings .mx_NotificationPusherSettings_description {
        color: #edf3ff;
    }

.mx_NotificationPusherSettings .mx_NotificationPusherSettings_detail {
        margin-top: -4px;
        margin-bottom: 12px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NotificationSettings2 .mx_SettingsSection_subSections {
        color: #edf3ff;
        gap: 32px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.mx_NotificationSettings2 .mx_SettingsSubsection_description {
        margin-bottom: 20px;
    }

.mx_NotificationSettings2 .mx_SettingsSubsection_description .mx_SettingsSubsection_text {
            font-size: 1.2rem;
        }

.mx_NotificationSettings2 .mx_SettingsSubsection_description .mx_SettingsSubsection_text .mx_NotificationBadge {
                vertical-align: baseline;
                display: -webkit-inline-box;
                display: -ms-inline-flexbox;
                display: inline-flex;
                margin: 0 2px;
            }

.mx_NotificationSettings2 .mx_SettingsSubsection_content {
        margin-top: 12px;
        grid-gap: 12px;
        justify-items: stretch;
        -webkit-box-pack: stretch;
            -ms-flex-pack: stretch;
                justify-content: stretch;
    }

.mx_NotificationSettings2 .mx_SettingsBanner {
        margin-bottom: 32px;
    }

.mx_NotificationSettings2 .mx_NotificationSettings2_flags {
        grid-gap: 4px;
    }

.mx_NotificationSettings2 .mx_StyledRadioButton_content {
        margin-left: 10px;
        margin-right: 10px;
    }

.mx_NotificationSettings2 .mx_TagComposer {
        margin-top: 16px;
    }

.mx_NotificationSettings2 .mx_TagComposer.mx_TagComposer_disabled {
            opacity: 0.7;
        }

.mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags {
            margin-top: 16px;
            gap: 8px;
        }

.mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag {
                border-radius: 18px;
                padding: 6px 12px;
                background: #fff;
                margin: 0;
            }

.mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag .mx_Tag_delete {
                    background: #edf3ff;
                    color: #fff;
                    -ms-flex-item-align: initial;
                        align-self: initial;
                }

/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UserNotifSettings_grid {
    width: calc(100% + 12px); /* +12px to line up center of 'Noisy' column with toggle switches */
    display: grid;
    grid-template-columns: auto repeat(3, 62px);
    place-items: center center;
    grid-gap: 8px;
}

/* Override StyledRadioButton default styles */

.mx_UserNotifSettings_grid .mx_StyledRadioButton {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_content {
            display: none;
        }

.mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_spacer {
            display: none;
        }

/* left align section heading*/

.mx_UserNotifSettings_grid .mx_SettingsSubsectionHeading {
        justify-self: start;
    }

.mx_UserNotifSettings_gridRowContainer {
    display: contents;
}

.mx_UserNotifSettings_gridRow {
    display: contents;
}

.mx_UserNotifSettings_gridRowLabel {
    justify-self: start;
    /* <legend> does not accept */
    /* display: inline | inline-block */
    /* force it inline using float */
    float: left;
}

.mx_UserNotifSettings_gridColumnLabel {
    color: #edf3ff;
    font: var(--cpd-font-body-sm-semibold);
}

.mx_UserNotifSettings_gridRowError {
    /* occupy full row */
    grid-column: 1/-1;
    justify-self: start;
    padding-right: 30%;
    /* collapse half of the grid-gap */
    margin-top: -4px;
}

.mx_UserNotifSettings_floatingSection {
    margin-top: 40px;
}

.mx_UserNotifSettings_floatingSection > div:first-child {
        /* section header */
        font-size: 1.125rem;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_UserNotifSettings_floatingSection > table {
        border-collapse: collapse;
        border-spacing: 0;
        margin-top: 8px;
    }

.mx_UserNotifSettings_floatingSection > table tr > td:first-child {
            /* Just for a bit of spacing */
            padding-right: 8px;
        }

.mx_UserNotifSettings_clearNotifsButton {
    margin-top: 8px;
}

.mx_TagComposer {
    margin-top: 35px; /* lots of distance from the last line of the table */
}

.mx_AccessibleButton.mx_NotificationSound_browse {
    margin-right: 10px;
}

/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_GeneralUserSettingsTab_section--discovery_existing_verification {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_GeneralUserSettingsTab_section--discovery_existing_verification .mx_Field {
        margin: 0 0 0 1em;
    }

.mx_PhoneNumbers_input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_PhoneNumbers_input > .mx_Field {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.mx_PhoneNumbers_country {
    width: 80px;
}

/*
 * Copyright 2024 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_PowerLevelSelector_Button {
    -ms-flex-item-align: start;
        align-self: flex-start;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 , 2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RoomProfileSettings {
    border-bottom: 1px solid #6f7882;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile .mx_RoomProfileSettings_profile_controls {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            -webkit-margin-end: 54px;
                    margin-inline-end: 54px;
        }

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile .mx_RoomProfileSettings_profile_controls .mx_Field {
                margin-top: 8px;
            }

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile .mx_RoomProfileSettings_profile_controls .mx_RoomProfileSettings_profile_controls_topic {
                margin-top: 8px;
            }

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile .mx_RoomProfileSettings_profile_controls .mx_RoomProfileSettings_profile_controls_topic > textarea {
                    font-family: inherit;
                    resize: vertical;
                }

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile .mx_RoomProfileSettings_profile_controls .mx_RoomProfileSettings_profile_controls_topic.mx_RoomProfileSettings_profile_controls_topic--room textarea {
                    min-height: 4em;
                }

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile .mx_RoomProfileSettings_profile_controls .mx_RoomProfileSettings_profile_controls_userId {
                -webkit-margin-end: 20px;
                        margin-inline-end: 20px;
            }

.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: var(--cpd-space-4x);
        margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
        margin-bottom: 28px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SetIntegrationManager .mx_SetIntegrationManager_heading_manager {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-column-gap: 4px;
           -moz-column-gap: 4px;
                column-gap: 4px;
    }

.mx_SetIntegrationManager form {
        margin-top: var(--cpd-space-3x);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsFieldset {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}

.mx_SettingsFieldset_legend {
    font: var(--cpd-font-heading-md-semibold);
    font-weight: var(--cpd-font-weight-semibold);
    display: block;
    color: #edf3ff;
    margin-bottom: 10px;
    margin-top: 12px;
}

.mx_SettingsFieldset_description {
    display: block;
    margin-top: 0;
    margin-bottom: 10px;
}

.mx_SettingsFieldset_description p {
        margin-top: 10px;
        margin-bottom: 0;
    }

.mx_SettingsFieldset_description p:first-child {
            margin: 0;
        }

.mx_SettingsFieldset_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
}

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_SettingsHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--cpd-space-2x);
    /* Override margin from common.pcss */
    margin: 0;
}

.mx_SettingsHeader > span {
        font: var(--cpd-font-body-sm-medium);
        color: var(--cpd-color-text-action-accent);
    }

.mx_SettingsHeader.mx_SettingsHeader_recommended::after {
        display: inline-block;
        content: "";
        width: 8px;
        height: 8px;
        background-color: var(--cpd-color-icon-critical-primary);
        clip-path: circle(4px);
    }

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_SettingsSubheader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--cpd-space-2x);
}

.mx_SettingsSubheader > span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--cpd-space-2x);
        font: var(--cpd-font-body-sm-medium);
    }

.mx_SettingsSubheader .mx_SettingsSubheader_success {
        color: var(--cpd-color-text-success-primary);
    }

.mx_SettingsSubheader .mx_SettingsSubheader_error {
        color: var(--cpd-color-text-critical-primary);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ExistingSpellCheckLanguage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_ExistingSpellCheckLanguage_language {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-right: 10px;
}

.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
    margin-bottom: 8px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_ThemeChoicePanel_ThemeSelectors {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* Override form default style */
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    gap: var(--cpd-space-4x) !important;
}

.mx_ThemeChoicePanel_ThemeSelectors .mx_ThemeChoicePanel_themeSelector {
        border: 1px solid var(--cpd-color-border-interactive-secondary);
        border-radius: var(--cpd-space-1-5x);
        padding: var(--cpd-space-3x) var(--cpd-space-5x) var(--cpd-space-3x) var(--cpd-space-3x);
        gap: var(--cpd-space-2x);
        background-color: var(--cpd-color-bg-canvas-default);
    }

.mx_ThemeChoicePanel_ThemeSelectors .mx_ThemeChoicePanel_themeSelector.mx_ThemeChoicePanel_themeSelector_enabled {
            border-color: var(--cpd-color-border-interactive-primary);
        }

.mx_ThemeChoicePanel_ThemeSelectors .mx_ThemeChoicePanel_themeSelector.mx_ThemeChoicePanel_themeSelector_disabled {
            border-color: var(--cpd-color-border-disabled);
        }

.mx_ThemeChoicePanel_ThemeSelectors .mx_ThemeChoicePanel_themeSelector .mx_ThemeChoicePanel_themeSelector_Label {
            color: var(--cpd-color-text-primary);
            font: var(--cpd-font-body-md-semibold);
        }

.mx_ThemeChoicePanel_CustomTheme {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--cpd-space-4x);
}

.mx_ThemeChoicePanel_CustomTheme .mx_ThemeChoicePanel_CustomTheme_EditInPlace input:focus {
        /*
         * When the input is focused, the border is growing
         * We need to move it a bit to avoid the left border to be under the left panel
         */
        margin-left: var(--cpd-space-0-5x);
    }

.mx_ThemeChoicePanel_CustomTheme .mx_ThemeChoicePanel_CustomThemeList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-4x);
        /*
         * Override the default padding/margin of the list
         */
        padding: 0;
        margin: 0;
    }

.mx_ThemeChoicePanel_CustomTheme .mx_ThemeChoicePanel_CustomThemeList .mx_ThemeChoicePanel_CustomThemeList_theme {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            background-color: var(--cpd-color-gray-200);
            padding: var(--cpd-space-2x) var(--cpd-space-2x) var(--cpd-space-2x) var(--cpd-space-4x);
        }

.mx_ThemeChoicePanel_CustomTheme .mx_ThemeChoicePanel_CustomThemeList .mx_ThemeChoicePanel_CustomThemeList_theme .mx_ThemeChoicePanel_CustomThemeList_name {
                font: var(--cpd-font-body-sm-semibold);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UpdateCheckButton_summary {
    margin-left: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 , 2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_UserProfileSettings {
    border-bottom: 1px solid #6f7882;
}

.mx_UserProfileSettings .mx_UserProfileSettings_profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: var(--cpd-space-6x);
        gap: 16px;
    }

.mx_UserProfileSettings .mx_UserProfileSettings_profile .mx_UserProfileSettings_profile_displayName {
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
            width: 100%;
            gap: 0;
        }

.mx_UserProfileSettings .mx_UserProfileSettings_profile_controls {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }

.mx_UserProfileSettings .mx_UserProfileSettings_profile_controls_userId {
        width: 100%;
        margin-top: var(--cpd-space-4x);
    }

.mx_UserProfileSettings .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText {
            margin-top: var(--cpd-space-1x);
            width: 100%;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
        }

.mx_UserProfileSettings .mx_UserProfileSettings_profile_controls_userId_label {
        font-size: 15px;
        font-weight: 500;
    }

.mx_UserProfileSettings .mx_UserProfileSettings_profile_buttons {
        margin-top: var(--cpd-space-8x);
        margin-bottom: var(--cpd-space-8x);
    }

.mx_UserProfileSettings .mx_UserProfileSettings_accountmanageIcon {
        margin-right: var(--cpd-space-2x);
    }

@media (max-width: 768px) {
    .mx_UserProfileSettings_profile {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 30px;
    }
}

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_EncryptionDetails,
.mx_OtherSettings {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--cpd-space-6x);
    width: 100%;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
}

.mx_EncryptionDetails .mx_EncryptionDetails_session_title,
    .mx_EncryptionDetails .mx_OtherSettings_title,
    .mx_OtherSettings .mx_EncryptionDetails_session_title,
    .mx_OtherSettings .mx_OtherSettings_title {
        font: var(--cpd-font-body-lg-semibold);
        padding-bottom: var(--cpd-space-2x);
        border-bottom: 1px solid var(--cpd-color-gray-400);
        width: 100%;
        margin: 0;
    }

.mx_EncryptionDetails .mx_EncryptionDetails_session {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-4x);
        width: 100%;
    }

.mx_EncryptionDetails .mx_EncryptionDetails_session > div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

.mx_EncryptionDetails .mx_EncryptionDetails_session > div > span {
                width: 50%;
                word-wrap: break-word;
            }

.mx_EncryptionDetails .mx_EncryptionDetails_session > div:nth-child(odd) {
            background-color: var(--cpd-color-gray-200);
        }

.mx_EncryptionDetails .mx_EncryptionDetails_buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: var(--cpd-space-4x);
    }

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_ChangeRecoveryKey .mx_InformationPanel_description {
        text-align: center;
    }

.mx_ChangeRecoveryKey .mx_ChangeRecoveryKey_Form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-8x);
    }

.mx_ChangeRecoveryKey .mx_ChangeRecoveryKey_Form .mx_ChangeRecoveryKey_footer {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: var(--cpd-space-4x);
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

.mx_ChangeRecoveryKey .mx_KeyPanel {
        display: grid;
        grid-template:
            "header button" auto
            "content button" auto / 1fr;

        grid-column-gap: var(--cpd-space-3x);

        -webkit-column-gap: var(--cpd-space-3x);

           -moz-column-gap: var(--cpd-space-3x);

                column-gap: var(--cpd-space-3x);
        grid-row-gap: var(--cpd-space-1x);
        row-gap: var(--cpd-space-1x);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_ChangeRecoveryKey .mx_KeyPanel > span {
            grid-area: header;
        }

.mx_ChangeRecoveryKey .mx_KeyPanel > div {
            grid-area: content;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: var(--cpd-space-2x);
            color: var(--cpd-color-text-secondary);
        }

.mx_ChangeRecoveryKey .mx_KeyPanel > div .mx_KeyPanel_key {
                font-family: Inconsolata, monospace;
                /*
                 * From figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77471&t=t7lozYrSI1AVZZ3U-4
                 */
                height: 70px;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                border-radius: var(--cpd-space-2x);
                padding: var(--cpd-space-3x) var(--cpd-space-4x);
                background-color: var(--cpd-color-bg-subtle-secondary);
            }

.mx_ChangeRecoveryKey .mx_KeyPanel > button {
            margin: 0 var(--cpd-space-1x);
            grid-area: button;
            color: var(--cpd-color-icon-secondary-alpha);
        }

.mx_ChangeRecoveryKey .mx_KeyForm {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-8x);
    }

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_EncryptionCard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--cpd-space-8x);
    padding: var(--cpd-space-10x);
    border-radius: var(--cpd-space-4x);
    /* From figma */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(27, 29, 34, 0.15);
            box-shadow: 0 1.2px 2.4px 0 rgb(27, 29, 34, 0.15);
    border: 1px solid var(--cpd-color-gray-400);
}

.mx_EncryptionCard .mx_EncryptionCard_header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-4x);
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_EncryptionCard .mx_EncryptionCard_header > h2 {
            margin: 0;
        }

.mx_EncryptionCard .mx_EncryptionCard_header > span {
            color: var(--cpd-color-text-secondary);
            text-align: center;
        }

.mx_EncryptionCard_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--cpd-space-4x);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_EncryptionCard_emphasisedContent span {
        font: var(--cpd-font-body-md-medium);
        text-align: center;
    }

/*
 * Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.mx_RecoveryPanelOutOfSync {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-2x);
}

/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

/* Red text for the "Do not close this window" warning*/

.mx_ResetIdentityPanel_warning {
    color: var(--cpd-color-text-critical-primary);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsBanner {
    background: #21262c;
    border-radius: 8px;
    padding: 12px 16px;
    gap: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_SettingsBanner .mx_SettingsBanner_content {
        margin: 0;
    }

.mx_SettingsBanner .mx_AccessibleButton {
        white-space: nowrap;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsIndent {
    padding-left: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
}

/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsSection {
    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
    --SettingsTab_heading_nth_child-margin-top: 30px;
    --SettingsTab_tooltip-max-width: 20px; /* So it fits in the space provided by the page */

    color: #edf3ff;
}

.mx_SettingsSection a {
        color: #0086e6;
    }

.mx_SettingsSection.mx_SettingsSection_newUi {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-6x);
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
    }

.mx_SettingsSection .mx_SettingsSection_header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: var(--cpd-space-3x);
        color: var(--cpd-color-text-secondary);
    }

.mx_SettingsSection_subSections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 32px;

    padding: 16px 0;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsTab {
    --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */

    color: #edf3ff;
    /* never want full width buttons*/
}

.mx_SettingsTab a {
        color: #0086e6;
    }

.mx_SettingsTab form:not(.mx_EncryptionUserSettingsTab form) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 8px;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }

/* event when other content is 100% width*/

.mx_SettingsTab .mx_AccessibleButton {
        -ms-flex-item-align: start;
            align-self: flex-start;
        justify-self: flex-start;
    }

.mx_SettingsTab .mx_Field {
        margin: 0;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

.mx_SettingsTab_warningText {
    color: #ff5b55;
}

.mx_SettingsTab_subsectionText {
    color: #edf3ff;
    font: var(--cpd-font-body-md-regular);
    display: block;
    margin-top: 10px;
    -webkit-margin-end: 80px;
            margin-inline-end: 80px; /* Align with the rest of the view */
    margin-bottom: 10px;
    -webkit-margin-start: 0;
            margin-inline-start: 0;
}

.mx_SettingsTab_section {

    margin-bottom: 24px;
}

.mx_SettingsTab_section .mx_SettingsFlag {
        -webkit-margin-end: 80px;
                margin-inline-end: 80px;
        margin-bottom: 10px;
    }

.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
            vertical-align: middle;
            display: inline-block;
            max-width: calc(100% - 3rem); /* Force word wrap instead of colliding with the switch */
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
        }

.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
            float: inline-end;
        }

.mx_SettingsTab_section > p {
        -webkit-margin-end: 80px;
                margin-inline-end: 80px;
    }

.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
        -webkit-margin-end: 0 !important;
                margin-inline-end: 0 !important;
    }

.mx_SettingsTab_toggleWithDescription {
    margin-top: 24px;
}

.mx_SettingsTab_sections {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 32px;

    padding-bottom: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NotificationSettingsTab_notificationsSection {
    width: 360px;
}

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        color: #edf3ff;
        font-size: 0.9375rem;
        line-height: 1.125rem;
        font-weight: var(--cpd-font-weight-semibold);
        margin-top: 16px;
        position: relative;
        padding-left: 8px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton::before {
            content: "";
            position: absolute;
            height: 24px;
            width: 24px;
            left: 0;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            background-color: #edf3ff;
        }

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton input + div {
            margin-top: 8px;
        }

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton .mx_NotificationSettingsTab_microCopy {
            color: #edf3ff;
            font-weight: normal;
            font-size: 0.75rem;
            line-height: 0.9375rem;
            margin-right: 32px;
        }

.mx_NotificationSettingsTab_notificationsSection .mx_NotificationSettingsTab_defaultEntry::before {
        -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
                mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
    }

.mx_NotificationSettingsTab_notificationsSection .mx_NotificationSettingsTab_allMessagesEntry::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
                mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
    }

.mx_NotificationSettingsTab_notificationsSection .mx_NotificationSettingsTab_mentionsKeywordsEntry::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
                mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
    }

.mx_NotificationSettingsTab_notificationsSection .mx_NotificationSettingsTab_noneEntry::before {
        -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
                mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
    }

input[type="file"].mx_NotificationSound_soundUpload {
    display: none;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Nordeck IT + Consulting GmbH

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PeopleRoomSettingsTab_knock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: var(--cpd-space-2x);
}

.mx_PeopleRoomSettingsTab_content {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin: 0 var(--cpd-space-4x);
}

.mx_PeopleRoomSettingsTab_avatar {
    -ms-flex-item-align: start;
        align-self: flex-start;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mx_PeopleRoomSettingsTab_name {
    font-weight: var(--cpd-font-weight-semibold);
}

.mx_PeopleRoomSettingsTab_timestamp {
    color: #edf3ff;
    margin-left: var(--cpd-space-1x);
}

.mx_PeopleRoomSettingsTab_userId {
    color: #edf3ff;
    display: block;
    font-size: var(--cpd-font-size-body-sm);
}

.mx_PeopleRoomSettingsTab_seeMoreOrLess {
    margin: var(--cpd-space-3x) 0 0;
}

.mx_PeopleRoomSettingsTab_action {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.mx_PeopleRoomSettingsTab_action + .mx_PeopleRoomSettingsTab_action {
        margin-left: var(--cpd-space-3x);
    }

.mx_PeopleRoomSettingsTab_paragraph {
    margin: 0;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_RolesRoomSettingsTab_bannedList {
    margin-bottom: 0;
}

.mx_RolesRoomSettingsTab_unbanBtn {
    margin-right: 10px;
    margin-bottom: 5px;
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SecurityRoomSettingsTab_advancedSection {
    margin-top: 16px;
}

.mx_SecurityRoomSettingsTab_warning {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 4px;
       -moz-column-gap: 4px;
            column-gap: 4px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
    width: 256px;
    /* matches checkbox box + padding to align with checkbox label */
    -webkit-margin-start: calc(1rem + 10px);
            margin-inline-start: calc(1rem + 10px);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2019 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_HelpUserSettingsTab_accessTokenDetails {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_KeyboardShortcut_shortcutList {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-gap: 4px;
}

.mx_KeyboardShortcut_shortcutRow,
.mx_KeyboardShortcut {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.mx_KeyboardShortcut_shortcutRow {
    -webkit-column-gap: 8px;
       -moz-column-gap: 8px;
            column-gap: 8px;
}

.mx_KeyboardShortcut {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-column-gap: 4px;
       -moz-column-gap: 4px;
            column-gap: 4px;
}

/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MediaPreviewAccountSetting_Radio {
    margin: var(--cpd-space-1x) 0;
}

.mx_MediaPreviewAccountSetting {
    margin-top: var(--cpd-space-1x);
}

.mx_MediaPreviewAccountSetting_RadioHelp {
    margin-top: 0;
    margin-bottom: var(--cpd-space-1x);
}

.mx_MediaPreviewAccountSetting_Form {
    width: 100%;
}

.mx_MediaPreviewAccountSetting_ToggleSwitch {
    font: var(--cpd-font-body-md-medium);
    letter-spacing: var(--cpd-font-letter-spacing-body-md);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MjolnirUserSettingsTab_listItem {
    margin-bottom: 2px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_PreferencesUserSettingsTab_section_hint {
    font: var(--cpd-font-body-sm-regular);
    color: var(--cpd-color-text-secondary);
}

/*
Copyright 2019-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SecurityUserSettingsTab_bulkOptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-column-gap: 8px;
       -moz-column-gap: 8px;
            column-gap: 8px;
}

.mx_SecurityUserSettingsTab_ignoredUsers {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.mx_SecurityUserSettingsTab_ignoredUser {
    margin-bottom: 4px;
}

.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
    margin-right: 8px;
}

.mx_SecurityUserSettingsTab_warning {
    color: #ff5b55;
    position: relative;
    padding-left: 40px;
}

.mx_SecurityUserSettingsTab_warning::before {
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: 0 center;
                mask-position: 0 center;
        -webkit-mask-size: 1.5rem;
                mask-size: 1.5rem;
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        top: 0;
        left: 0;
        background-color: #ff5b55;
        -webkit-mask-image: url(../../icons/warning.80e5cc2.svg);
                mask-image: url(../../icons/warning.80e5cc2.svg);
    }

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SidebarUserSettingsTab_homeAllRoomsCheckbox {
    margin-left: 24px;
}

.mx_SidebarUserSettingsTab_homeAllRoomsCheckbox + div {
        margin-left: 48px;
    }

.mx_SidebarUserSettingsTab_icon {
    margin-right: var(--cpd-space-2x);
    margin-top: auto;
    margin-bottom: auto;
}

.mx_SidebarUserSettingsTab_checkbox label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpaceBasicSettings .mx_Field {
        margin: 24px 0;
    }

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 24px;
    }

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer .mx_SpaceBasicSettings_avatar {
            position: relative;
            height: 80px;
            width: 80px;
            background-color: #edf3ff;
            border-radius: 16px;
        }

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar {
            width: 80px;
            height: 80px;
            -o-object-fit: cover;
               object-fit: cover;
            border-radius: 16px;
        }

/* only show it when the button is a div and not an img (has avatar) */

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar {
            cursor: pointer;
        }

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar::before {
                content: "";
                position: absolute;
                height: 80px;
                width: 80px;
                top: 0;
                left: 0;
                background-color: #ffffff; /* white icon fill */
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: 20px;
                        mask-size: 20px;
                -webkit-mask-image: url(../../icons/take-photo-solid.f40d394.svg);
                        mask-image: url(../../icons/take-photo-solid.f40d394.svg);
            }

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer > input[type="file"] {
            display: none;
        }

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer > .mx_AccessibleButton_kind_link {
            display: inline-block;
            margin: auto 18px;
            color: #0086e6;
            font: var(--cpd-font-body-md-regular);
        }

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer > .mx_SpaceBasicSettings_avatar_remove {
            color: #ff5b55;
        }

.mx_SpaceBasicSettings .mx_AccessibleButton_hasKind {
        margin-left: auto;
        display: block;
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
    }

.mx_SpaceBasicSettings .mx_AccessibleButton_disabled {
        cursor: not-allowed;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpaceChildrenPicker {
    margin: 16px 0;
}

.mx_SpaceChildrenPicker .mx_StyledRadioButton + .mx_StyledRadioButton {
        margin-top: 16px;
    }

.mx_SpaceChildrenPicker .mx_SearchBox {
        /* To match the space around the title */
        margin: 0 0 15px 0;
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
        border-radius: 8px;
    }

.mx_SpaceChildrenPicker .mx_SpaceChildrenPicker_noResults {
        display: block;
        margin-top: 24px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* background blur everything except SpacePanel */

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
        background-color: #00000080;
        opacity: 0.6;
        left: 68px;
    }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
        padding: 24px;
        width: 480px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-color: #181b21;
        position: relative;
    }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
                font-weight: var(--cpd-font-weight-semibold);
                font-size: 1.125rem;
                margin-top: 4px;
            }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
                font-size: 0.9375rem;
                color: #edf3ff;
            }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
            position: relative;
            padding: 16px 32px 16px 72px;
            width: 432px;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            border-radius: 8px;
            border: 1px solid #e7e7e7;
            font-size: 1.0625rem;
            font-weight: var(--cpd-font-weight-semibold);
            margin: 20px 0;
        }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > div {
        margin-top: 4px;
        font-weight: normal;
        font-size: 0.9375rem;
        color: #edf3ff;
    }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType::before {
        position: absolute;
        content: "";
        width: 28px;
        height: 28px;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: 22px;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: 28px;
                mask-size: 28px;
        background-color: #edf3ff;
    }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
        border-color: var(--cpd-color-bg-action-primary-rest);
    }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover::before {
            background-color: var(--cpd-color-icon-primary);
        }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover > span {
            color: #edf3ff;
        }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public::before {
            -webkit-mask-image: url(../../icons/public.0e971dd.svg);
                    mask-image: url(../../icons/public.0e971dd.svg);
        }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private::before {
            -webkit-mask-image: url(../../icons/lock-solid.6847293.svg);
                    mask-image: url(../../icons/lock-solid.6847293.svg);
        }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
            width: 28px;
            height: 28px;
            position: relative;
            background-color: #fff;
            border-radius: 14px;
            margin-bottom: 12px;
        }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back::before {
                content: "";
                position: absolute;
                height: 28px;
                width: 28px;
                top: 0;
                left: 0;
                background-color: #edf3ff;
                -webkit-transform: rotate(90deg);
                        transform: rotate(90deg);
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: 2px 3px;
                        mask-position: 2px 3px;
                -webkit-mask-size: 24px;
                        mask-size: 24px;
                -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                        mask-image: url(../../icons/chevron-down.9ea2899.svg);
            }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary {
            padding: 8px 22px;
            margin-left: auto;
            display: block;
            width: -webkit-min-content;
            width: -moz-min-content;
            width: min-content;
        }

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_disabled {
            cursor: not-allowed;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpacePublicShare .mx_AccessibleButton {
        position: relative;
        padding: 16px 32px 16px 72px;
        width: 432px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid #e7e7e7;
        font-size: 1.0625rem;
        font-weight: var(--cpd-font-weight-semibold);
        margin: 20px 0;
    }

.mx_SpacePublicShare .mx_AccessibleButton > div {
        margin-top: 4px;
        font-weight: normal;
        font-size: 0.9375rem;
        color: #edf3ff;
    }

.mx_SpacePublicShare .mx_AccessibleButton::before {
        position: absolute;
        content: "";
        width: 28px;
        height: 28px;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: 22px;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: 28px;
                mask-size: 28px;
        background-color: #edf3ff;
    }

.mx_SpacePublicShare .mx_AccessibleButton:hover {
        border-color: var(--cpd-color-bg-action-primary-rest);
    }

.mx_SpacePublicShare .mx_AccessibleButton:hover::before {
            background-color: var(--cpd-color-icon-primary);
        }

.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
            color: #edf3ff;
        }

.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton::before {
            -webkit-mask-image: url(../../icons/link.d0734d2.svg);
                    mask-image: url(../../icons/link.d0734d2.svg);
        }

.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_inviteButton::before {
            -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
                    mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_InlineTermsAgreement_cbContainer {
    margin-top: var(--cpd-space-4x);
    margin-bottom: 10px;
    font: var(--cpd-font-body-md-regular);
}

.mx_InlineTermsAgreement_cbContainer a {
        color: #0dbd8b;
        text-decoration: none;
    }

.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
        margin-top: 10px;
    }

.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
            vertical-align: text-bottom;
        }

.mx_InlineTermsAgreement_link {
    display: inline-block;
    -webkit-mask-image: url(../../img/external-link.8197a77.svg);
            mask-image: url(../../img/external-link.8197a77.svg);
    background-color: #0dbd8b;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    vertical-align: middle;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_AnalyticsToast .mx_AccessibleButton_kind_danger_outline {
        background-color: #0dbd8b;
        color: #ffffff;
        border: 1px solid #0dbd8b;
        font-weight: var(--cpd-font-weight-semibold);
    }

.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
        background-color: #0dbd8b;
        color: #ffffff;
        border: 1px solid #0dbd8b;
        font-weight: var(--cpd-font-weight-semibold);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_IncomingCallToast {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    pointer-events: initial; /* restore pointer events so the user can accept/decline */
    width: 250px;
}

.mx_IncomingCallToast .mx_IncomingCallToast_content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-left: 8px;
        width: 100%;
        overflow: hidden;
    }

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info {
            margin-bottom: 16px;
        }

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info .mx_IncomingCallToast_room {
                display: inline-block;

                font-weight: var(--cpd-font-weight-semibold);
                font-size: 0.9375rem;
                line-height: 1.5rem;

                /* Prevent overlap with the close button */
                width: calc(100% - 16px - 2 * 4px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                margin-bottom: 4px;
            }

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info .mx_IncomingCallToast_message {
                font-size: 0.75rem;
                line-height: 0.9375rem;

                margin-bottom: 4px;
            }

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info .mx_LiveContentSummary {
                font-size: 0.75rem;
                line-height: 0.9375rem;
            }

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info .mx_LiveContentSummary .mx_LiveContentSummary_participants::before {
                    width: 15px;
                    height: 15px;
                }

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_joinButton {
            position: relative;

            bottom: 4px;
            right: 4px;

            -ms-flex-item-align: end;

                align-self: flex-end;

            -webkit-box-sizing: border-box;

                    box-sizing: border-box;
            min-width: 120px;

            padding: 4px 0;

            line-height: 1.5rem;
        }

.mx_IncomingCallToast .mx_IncomingCallToast_closeButton {
        position: absolute;

        top: 4px;
        right: 4px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        height: 16px;
        width: 16px;
    }

.mx_IncomingCallToast .mx_IncomingCallToast_closeButton::before {
            content: "";

            -webkit-mask-image: url(../../icons/close.5ef7caf.svg);

                    mask-image: url(../../icons/close.5ef7caf.svg);

            height: inherit;
            width: inherit;
            background-color: #edf3ff;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-position: center;
                    mask-position: center;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_IncomingLegacyCallToast {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    pointer-events: initial; /* restore pointer events so the user can accept/decline */
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-left: 8px;
    }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_LegacyCallEvent_caller {
            font-weight: bold;
            font-size: 0.9375rem;
            line-height: 1.125rem;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            margin-top: 2px;
            margin-right: 6px;

            max-width: 200px;
        }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_LegacyCallEvent_type {
            font-size: 0.75rem;
            line-height: 0.9375rem;
            color: #edf3ff;

            margin-top: 4px;
            margin-bottom: 6px;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon {
                height: 16px;
                width: 16px;
                margin-right: 6px;
            }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before {
                    content: "";
                    position: absolute;
                    height: inherit;
                    width: inherit;
                    background-color: #edf3ff;
                    -webkit-mask-repeat: no-repeat;
                            mask-repeat: no-repeat;
                    -webkit-mask-size: contain;
                            mask-size: contain;
                }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_voice .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
            .mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_voice .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
                -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
                        mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
            }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_video .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
            .mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_video .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
                -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
                        mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
            }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons {
            margin-top: 8px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            gap: 12px;
        }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button {
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                font-weight: var(--cpd-font-weight-semibold);
                height: 1.5rem;
                line-height: 1.5rem;
                margin-right: 0;
            }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button span::before {
            content: "";
            display: inline-block;
            background-color: white;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            margin-right: 8px;
        }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button {
                padding: 0px 8px;
                -ms-flex-negative: 0;
                    flex-shrink: 0;
                -webkit-box-flex: 1;
                    -ms-flex-positive: 1;
                        flex-grow: 1;
                font-size: 0.9375rem;
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button span {
                    padding: 8px 0;
                }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button.mx_IncomingLegacyCallToast_button_accept span::before {
                    -webkit-mask-size: 13px;
                            mask-size: 13px;
                    width: 13px;
                    height: 13px;
                }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button.mx_IncomingLegacyCallToast_button_decline span::before {
                    -webkit-mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                            mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                    -webkit-mask-size: 16px;
                            mask-size: 16px;
                    width: 16px;
                    height: 16px;
                }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_iconButton {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 20px;
        width: 20px;
    }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_iconButton::before {
            content: "";

            height: inherit;
            width: inherit;
            background-color: #edf3ff;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-position: center;
                    mask-position: center;
        }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_silence::before {
        -webkit-mask-image: url(../../img/voip/silence.fff021d.svg);
                mask-image: url(../../img/voip/silence.fff021d.svg);
    }

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_unSilence::before {
        -webkit-mask-image: url(../../img/voip/un-silence.fd94a16.svg);
                mask-image: url(../../img/voip/un-silence.fd94a16.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_NonUrgentEchoFailureToast .mx_NonUrgentEchoFailureToast_icon {
        display: inline-block;
        width: 1.125rem;
        height: 1.125rem;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background-color: #fff; /* we know that non-urgent toasts are always styled the same */
        -webkit-mask-image: url(../../img/element-icons/cloud-off.97663f7.svg);
                mask-image: url(../../img/element-icons/cloud-off.97663f7.svg);
        margin-right: 8px;
    }

.mx_NonUrgentEchoFailureToast span {
        /* includes the i18n block */
        vertical-align: middle;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021-2023 x The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Heading_h1,
.mx_Heading_h2,
.mx_Heading_h3,
.mx_Heading_h4 {
    margin-inline: unset;
    margin-block: unset;
}

.mx_Heading_h1 {
    font: var(--cpd-font-heading-xl-semibold);
}

.mx_Heading_h2 {
    font: var(--cpd-font-heading-lg-semibold);
}

.mx_Heading_h3 {
    font: var(--cpd-font-heading-md-semibold);
    font-weight: var(--cpd-font-weight-semibold);
}

.mx_Heading_h4 {
    font: var(--cpd-font-heading-sm-semibold);
    font-weight: var(--cpd-font-weight-semibold);
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 25px 0;
}

.mx_VerificationShowSas_emojiSas_block {
    display: inline-block;
    margin-bottom: 16px;
    position: relative;
    width: 52px;
}

.mx_Dialog .mx_VerificationShowSas_emojiSas_block,
.mx_AuthPage_modal .mx_VerificationShowSas_emojiSas_block {
    width: 60px;
}

.mx_VerificationShowSas_emojiSas_emoji {
    font-size: 2rem;
    /* Use the Twemoji font for consistency with other clients */
    font-family: Twemoji, var(--cpd-font-family-sans);
}

.mx_VerificationShowSas_emojiSas_label {
    font-size: 0.75rem;
    word-break: break-all;
}

.mx_VerificationShowSas_emojiSas_break {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
}

.mx_VerificationShowSas_buttonRow {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 9px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* data-whatintent makes more sense here semantically but then the tooltip would stay visible without the button */

/* which looks broken, so we match the behaviour of tooltips which is fine too. */

[data-whatinput="mouse"] .mx_LegacyCallViewButtons.mx_LegacyCallViewButtons_hidden {
    opacity: 0.001; /* opacity 0 can cause a re-layout */
    pointer-events: none;
}

.mx_LegacyCallViewButtons {
    --LegacyCallViewButtons_dropdownButton-size: 16px;

    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    bottom: 32px;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    z-index: 200; /* To be above _all_ feeds */
    gap: 18px;
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button {
        cursor: pointer;

        background-color: #21262c;

        border-radius: 100%;
        height: 40px;
        width: 40px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        position: relative;

        -webkit-box-shadow: 0px 4px 4px 0px #00000026;

                box-shadow: 0px 4px 4px 0px #00000026;
        /* Stateless buttons */
        /* Invisible state */
    }

/* Same on both themes */

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button::before {
            content: "";
            display: inline-block;

            -webkit-mask-repeat: no-repeat;

                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-position: center;
                    mask-position: center;

            background-color: #edf3ff;

            height: 24px;
            width: 24px;
        }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton {
            width: var(--LegacyCallViewButtons_dropdownButton-size);
            height: var(--LegacyCallViewButtons_dropdownButton-size);

            position: absolute;
            right: 0;
            bottom: 0;
        }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton::before {
                width: 16px;
                height: 16px;
                -webkit-mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
                        mask-image: url(../../icons/chevron-up.a7ca3bc.svg);
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton.mx_LegacyCallViewButtons_dropdownButton_collapsed::before {
                -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
            }

/* State buttons */

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on {
            background-color: #21262c;
        }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on::before {
                background-color: #edf3ff;
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_mic::before {
                height: 20px;
                -webkit-mask-image: url(../../icons/mic-on-solid.5e29984.svg);
                        mask-image: url(../../icons/mic-on-solid.5e29984.svg);
                width: 20px;
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_vid::before {
                -webkit-mask-image: url(../../icons/video-call-solid.d584e19.svg);
                        mask-image: url(../../icons/video-call-solid.d584e19.svg);
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_screensharing {
                background-color: #0dbd8b;
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_screensharing::before {
                    -webkit-mask-image: url(../../icons/share-screen-solid.c7c1310.svg);
                            mask-image: url(../../icons/share-screen-solid.c7c1310.svg);
                    background-color: white; /* Same on both themes */
                }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_sidebar::before {
                -webkit-mask-image: url(../../img/voip/call-view/sidebar-on.c8ce983.svg);
                        mask-image: url(../../img/voip/call-view/sidebar-on.c8ce983.svg);
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off {
            background-color: #edf3ff;
        }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off::before {
                background-color: #21262c;
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_mic::before {
                height: 20px;
                -webkit-mask-image: url(../../icons/mic-off-solid.b535c73.svg);
                        mask-image: url(../../icons/mic-off-solid.b535c73.svg);
                width: 20px;
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_vid::before {
                -webkit-mask-image: url(../../icons/video-call-off-solid.8b0f3e2.svg);
                        mask-image: url(../../icons/video-call-off-solid.8b0f3e2.svg);
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_screensharing {
                background-color: #21262c;
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_screensharing::before {
                    -webkit-mask-image: url(../../icons/share-screen-solid.c7c1310.svg);
                            mask-image: url(../../icons/share-screen-solid.c7c1310.svg);
                    background-color: #edf3ff;
                }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_sidebar {
                background-color: #21262c;
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_sidebar::before {
                    -webkit-mask-image: url(../../img/voip/call-view/sidebar-off.9164266.svg);
                            mask-image: url(../../img/voip/call-view/sidebar-off.9164266.svg);
                    background-color: #edf3ff;
                }

/* Stateless buttons */

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dialpad::before {
            -webkit-mask-image: url(../../img/voip/call-view/dialpad.44caf66.svg);
                    mask-image: url(../../img/voip/call-view/dialpad.44caf66.svg);
        }

/* State buttons */

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_hangup {
            background-color: #ff5b55;
        }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_hangup::before {
                -webkit-mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                        mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
                background-color: white; /* Same on both themes */
            }

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_more::before {
            -webkit-mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
                    mask-image: url(../../icons/overflow-horizontal.e4b97af.svg);
        }

/* Invisible state */

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_invisible {
            visibility: hidden;
            pointer-events: none;
            position: absolute;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CallDuration {
    color: #edf3ff;
    font-size: 0.75rem;
    white-space: nowrap;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_CallView {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-height: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    background-color: #22262e;
}

.mx_CallView .mx_AppTile {
        width: auto;
        height: 100%;
        border: none;
        border-radius: inherit;
        background-color: #181b21;
    }

/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */

.mx_CallView .mx_CallView_lobby ~ .mx_AppTile {
        display: none;
    }

.mx_CallView .mx_CallView_lobby {
        min-height: 0;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        padding: 12px;
        color: #edf3ff;
        background-color: #181b21;

        --facepile-background: #181b21;
        border-radius: 8px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 32px;
    }

.mx_CallView .mx_CallView_lobby .mx_FacePile {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            margin: 8px auto 0;
        }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview {
            position: relative;
            width: 100%;
            max-width: 800px;
            aspect-ratio: 1.5;
            background-color: #21262c;

            border-radius: 20px;
            overflow: hidden;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_BaseAvatar {
                margin: 20px;

                /* Override the explicit dimensions on the element so that this gets sized responsively */
                width: auto !important;
                width: initial !important;
                height: auto !important;
                height: initial !important;
                min-width: 0;
                min-height: 0;
                -webkit-box-flex: 0;
                    -ms-flex: 0 1 200px;
                        flex: 0 1 200px;
            }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview video {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                   object-fit: cover;
                display: block;
                -webkit-transform: scaleX(-1);
                        transform: scaleX(-1); /* flip the image */
                background-color: black;
            }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;

                background-color: #888;

                display: -webkit-box;

                display: -ms-flexbox;

                display: flex;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                gap: 24px;
            }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper {
                    position: relative;
                    margin: 6px 0 10px;
                }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton {

                        width: 50px;
                        height: 50px;

                        background-color: #21262c;
                        border-radius: calc(50px / 2);
                    }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton::before {
                            content: "";
                            display: inline-block;
                            -webkit-mask-repeat: no-repeat;
                                    mask-repeat: no-repeat;
                            -webkit-mask-size: 20px;
                                    mask-size: 20px;
                            -webkit-mask-position: center;
                                    mask-position: center;
                            background-color: #edf3ff;
                            height: 100%;
                            width: 100%;
                        }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton.mx_CallView_deviceButton_audio::before {
                            -webkit-mask-image: url(../../icons/mic-on-solid.5e29984.svg);
                                    mask-image: url(../../icons/mic-on-solid.5e29984.svg);
                            -webkit-mask-size: 14px;
                                    mask-size: 14px;
                        }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton.mx_CallView_deviceButton_video::before {
                            -webkit-mask-image: url(../../icons/video-call-solid.d584e19.svg);
                                    mask-image: url(../../icons/video-call-solid.d584e19.svg);
                        }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceListButton {

                        position: absolute;
                        bottom: 0;
                        right: -2.5px;
                        width: 15px;
                        height: 15px;

                        background-color: #21262c;
                        border-radius: calc(15px / 2);
                    }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceListButton::before {
                            content: "";
                            display: inline-block;
                            -webkit-mask-image: url(../../icons/chevron-down.9ea2899.svg);
                                    mask-image: url(../../icons/chevron-down.9ea2899.svg);
                            -webkit-mask-size: 20px;
                                    mask-size: 20px;
                            -webkit-mask-position: center;
                                    mask-position: center;
                            background-color: #edf3ff;
                            height: 100%;
                            width: 100%;
                        }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceButton,
                        .mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceListButton {
                            background-color: #edf3ff;
                        }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceButton::before, .mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceListButton::before {
                                background-color: #21262c;
                            }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceButton.mx_CallView_deviceButton_audio::before {
                                -webkit-mask-image: url(../../icons/mic-off-solid.b535c73.svg);
                                        mask-image: url(../../icons/mic-off-solid.b535c73.svg);
                                -webkit-mask-size: 18px;
                                        mask-size: 18px;
                            }

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceButton.mx_CallView_deviceButton_video::before {
                                -webkit-mask-image: url(../../icons/video-call-off-solid.8b0f3e2.svg);
                                        mask-image: url(../../icons/video-call-off-solid.8b0f3e2.svg);
                            }

.mx_CallView .mx_CallView_lobby .mx_CallView_connectButton {
            padding-left: 50px;
            padding-right: 50px;
        }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DialPad {
    display: grid;
    grid-row-gap: 16px;
    row-gap: 16px;
    grid-column-gap: 0px;
    -webkit-column-gap: 0px;
       -moz-column-gap: 0px;
            column-gap: 0px;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;

    /* squeeze the dial pad buttons together horizontally */
    grid-template-columns: repeat(3, 1fr);
}

.mx_DialPad_button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    width: 40px;
    height: 40px;
    background-color: #6f7882;
    border-radius: 40px;
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
    text-align: center;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

.mx_DialPad_button .mx_DialPad_buttonSubText {
    font-size: 8px;
}

.mx_DialPad_dialButton {
    /* Always show the dial button in the center grid column */
    grid-column: 2;
    background-color: #0dbd8b;
}

.mx_DialPad_dialButton::before {
        content: "";
        display: inline-block;
        height: 40px;
        width: 40px;
        vertical-align: middle;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        -webkit-mask-position: center;
                mask-position: center;
        background-color: #fff; /* on all themes */
        -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
                mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_DialPadContextMenu_dialPad .mx_DialPad {
    row-gap: 16px;
    -webkit-column-gap: 32px;
       -moz-column-gap: 32px;
            column-gap: 32px;
}

.mx_DialPadContextMenuWrapper {
    padding: 15px;
}

.mx_DialPadContextMenu_header {
    border: none;
    margin-top: 32px;
    margin-left: 20px;
    margin-right: 20px;

    /* a separator between the input line and the dial buttons */
    border-bottom: 1px solid #6f7882;
    -webkit-transition: border-bottom 0.25s;
    transition: border-bottom 0.25s;
}

.mx_DialPadContextMenu_cancel {
    cursor: pointer;
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--cpd-color-bg-subtle-secondary);
}

.mx_DialPadContextMenu_cancel:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_DialPadContextMenu_cancel::before {
        content: "";
        width: 28px;
        height: 28px;
        left: 0;
        top: 0;
        position: absolute;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_DialPadContextMenu_cancel {
    float: right;
}

.mx_DialPadContextMenu_header:focus-within {
    border-bottom: 1px solid #0dbd8b;
}

.mx_DialPadContextMenu_title {
    color: #a1b2d1;
    font-size: 12px;
    font-weight: var(--cpd-font-weight-semibold);
}

.mx_DialPadContextMenu_dialled {
    height: 1.5em;
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
    border: none;
    margin: 0px;
}

.mx_DialPadContextMenu_dialled input {
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
    overflow: hidden;
    max-width: 185px;
    text-align: left;
    padding: 8px 0px;
    background-color: rgb(0, 0, 0, 0);
}

.mx_DialPadContextMenu_dialPad {
    margin: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_Dialog_dialPadWrapper .mx_Dialog {
    padding: 0px;
}

.mx_DialPadModal {
    width: 292px;
    height: 370px;
    padding: 16px 0px 0px 0px;
}

.mx_DialPadModal_header {
    margin-top: 32px;
    margin-left: 40px;
    margin-right: 40px;

    /* a separator between the input line and the dial buttons */
    border-bottom: 1px solid #6f7882;
    -webkit-transition: border-bottom 0.25s;
    transition: border-bottom 0.25s;
}

.mx_DialPadModal_header:focus-within {
    border-bottom: 1px solid #0dbd8b;
}

.mx_DialPadModal_title {
    color: #a1b2d1;
    font-size: 12px;
    font-weight: var(--cpd-font-weight-semibold);
}

.mx_DialPadModal_cancel {
    cursor: pointer;
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: var(--cpd-color-bg-subtle-secondary);
}

.mx_DialPadModal_cancel:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

.mx_DialPadModal_cancel::before {
        content: "";
        width: 28px;
        height: 28px;
        left: 0;
        top: 0;
        position: absolute;
        -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                mask-image: url(../../icons/close.5ef7caf.svg);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 20px;
                mask-size: 20px;
        background-color: var(--cpd-color-icon-secondary);
    }

.mx_DialPadModal_cancel {
    float: right;
    margin-right: 16px;
}

.mx_DialPadModal_field {
    border: none;
    margin: 0px;
    height: 30px;
}

.mx_DialPadModal_field .mx_Field_postfix {
    /* Remove border separator between postfix and field content */
    border-left: none;
}

.mx_DialPadModal_field input {
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
}

.mx_DialPadModal_dialPad {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 16px;
}

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyCallPreview {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    left: 0;
    position: fixed;
    top: 0;
    /* Display above any widget elements */
    z-index: 102;
}

.mx_LegacyCallPreview .mx_VideoFeed_remote.mx_VideoFeed_voice {
        min-height: 150px;
    }

.mx_LegacyCallPreview .mx_VideoFeed_local {
        border-radius: 8px;
        overflow: hidden;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyCallView {
    border-radius: 8px;
    background-color: var(--cpd-color-bg-subtle-secondary);
    padding-left: 8px;
    padding-right: 8px;
    /* XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place */
    pointer-events: initial;
}

.mx_LegacyCallView .mx_LegacyCallView_toast {
        position: absolute;
        top: 74px;

        padding: 4px 8px;

        border-radius: 4px;
        z-index: 50;

        /* Same on both themes */
        color: white;
        background-color: #17191c;
    }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content {
            position: relative;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;

            -webkit-box-flex: 1;

                -ms-flex: 1;

                    flex: 1;
            overflow: hidden;

            border-radius: 10px;

            padding: 10px;
            padding-right: calc(20% + 20px); /* Space for the sidebar */

            background-color: #6f7882;
        }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_status {
                z-index: 50;
                color: #ffffff;
            }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_avatarsContainer {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
            }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_avatarsContainer div {
                    margin-left: 12px;
                    margin-right: 12px;
                }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_holdBackground {
                position: absolute;
                left: 0;
                right: 0;

                width: 100%;
                height: 100%;

                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                -webkit-filter: blur(20px);
                        filter: blur(20px);
            }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_holdBackground::after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    right: 0;
                    background-color: rgb(0, 0, 0, 0.6);
                }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content.mx_LegacyCallView_content_hold .mx_LegacyCallView_status {
                font-weight: bold;
                text-align: center;
            }

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content.mx_LegacyCallView_content_hold .mx_LegacyCallView_status::before {
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    content: "";
                    width: 40px;
                    height: 40px;
                    background-image: url(../../img/voip/paused.b00e0b4.svg);
                    background-position: center;
                    background-size: cover;
                }

.mx_LegacyCallView_pip .mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content.mx_LegacyCallView_content_hold .mx_LegacyCallView_status::before {
                    width: 30px;
                    height: 30px;
                }

.mx_LegacyCallView:not(.mx_LegacyCallView_sidebar) .mx_LegacyCallView_content {
        padding: 0;
        width: 100%;
        height: 100%;
    }

.mx_LegacyCallView:not(.mx_LegacyCallView_sidebar) .mx_LegacyCallView_content .mx_VideoFeed_primary {
            aspect-ratio: unset;
            border: 0;

            width: 100%;
            height: 100%;
        }

.mx_LegacyCallView.mx_LegacyCallView_pip {
        width: 320px;
        padding-bottom: 8px;

        border-radius: 8px;

        background-color: #21262c;
        -webkit-box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.2);
                box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.2);
    }

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons {
            bottom: 13px;
        }

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button {
                width: 34px;
                height: 34px;
            }

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton {
                    width: var(--LegacyCallViewButtons_dropdownButton-size);
                    height: var(--LegacyCallViewButtons_dropdownButton-size);
                }

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button::before {
                    width: 22px;
                    height: 22px;
                }

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallView_content {
            min-height: 180px;
        }

.mx_LegacyCallView.mx_LegacyCallView_large {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        -webkit-box-flex: 1;

            -ms-flex: 1;

                flex: 1;

        padding-bottom: 10px;

        margin: 8px;

        margin: var(--container-gap-width);
        /* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
        margin-right: calc(8px / 2);
        margin-right: calc(var(--container-gap-width) / 2);
        margin-bottom: 10px;
    }

.mx_LegacyCallView.mx_LegacyCallView_belowWidget {
        margin-top: 0;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyCallViewForRoom {
    overflow: hidden;
}

.mx_LegacyCallViewForRoom .mx_LegacyCallViewForRoom_ResizeWrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.mx_LegacyCallViewForRoom .mx_LegacyCallViewForRoom_ResizeWrapper:hover .mx_LegacyCallViewForRoom_ResizeHandle {
            /* Need to use important to override element style attributes */
            /* set by re-resizable */
            width: 100% !important;

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

.mx_LegacyCallViewForRoom .mx_LegacyCallViewForRoom_ResizeWrapper:hover .mx_LegacyCallViewForRoom_ResizeHandle::after {
                content: "";
                border-radius: 4px;

                height: 4px;
                width: 100%;
                max-width: 64px;

                background-color: #edf3ff;
            }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyCallViewHeader {
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 100%;
}

.mx_LegacyCallViewHeader.mx_LegacyCallViewHeader_pip {
        cursor: -webkit-grab;
        cursor: grab;
    }

.mx_LegacyCallViewHeader_text {
    font-size: 1.2rem;
    font-weight: bold;
    vertical-align: middle;
}

.mx_LegacyCallViewHeader_secondaryCallInfo::before {
        content: "·";
        margin-left: 6px;
        margin-right: 6px;
    }

.mx_LegacyCallViewHeader_controls {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
}

.mx_LegacyCallViewHeader_button {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.mx_LegacyCallViewHeader_button::before {
        content: "";
        display: inline-block;
        height: 20px;
        width: 20px;
        vertical-align: middle;
        background-color: #edf3ff;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
    }

.mx_LegacyCallViewHeader_button.mx_LegacyCallViewHeader_button_fullscreen::before {
            -webkit-mask-image: url(../../icons/expand.867af0b.svg);
                    mask-image: url(../../icons/expand.867af0b.svg);
        }

.mx_LegacyCallViewHeader_button.mx_LegacyCallViewHeader_button_pin::before {
            -webkit-mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
                    mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
        }

.mx_LegacyCallViewHeader_button.mx_LegacyCallViewHeader_button_expand::before {
            -webkit-mask-image: url(../../icons/pop-out.0a8fde3.svg);
                    mask-image: url(../../icons/pop-out.0a8fde3.svg);
        }

.mx_LegacyCallViewHeader_callInfo {
    margin-left: 12px;
    margin-right: 16px;
    overflow: hidden;
}

.mx_LegacyCallViewHeader_roomName {
    font-weight: bold;
    font-size: 12px;
    line-height: normal;
    line-height: initial;
    height: 15px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx_LegacyCallView_secondaryCall_roomName {
    margin-left: 4px;
}

.mx_LegacyCallViewHeader_icon {
    display: inline-block;
    margin-right: 6px;
    height: 16px;
    width: 16px;
    vertical-align: middle;
}

.mx_LegacyCallViewHeader_icon::before {
        content: "";
        display: inline-block;
        vertical-align: top;

        height: 16px;
        width: 16px;
        background-color: #edf3ff;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
                mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_LegacyCallViewSidebar {
    position: absolute;
    right: 10px;

    width: 20%;
    height: 100%;
    overflow: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 12px;
}

.mx_LegacyCallViewSidebar > .mx_VideoFeed {
        width: 100%;
        border-radius: 4px;
    }

.mx_LegacyCallViewSidebar > .mx_VideoFeed.mx_VideoFeed_voice {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;

            background-color: #21262c;
        }

.mx_LegacyCallViewSidebar.mx_LegacyCallViewSidebar_pipMode {
        top: 16px;
        bottom: auto;
        bottom: initial;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        gap: 4px;
    }

/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2015, 2016 , 2020, 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_VideoFeed {
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: transparent 2px solid;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 4px;
}

.mx_VideoFeed.mx_VideoFeed_secondary {
        position: absolute;
        right: 24px;
        bottom: 72px;
        width: 20%;
    }

.mx_VideoFeed.mx_VideoFeed_voice {
        background-color: #15171b;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.mx_VideoFeed.mx_VideoFeed_voice:not(.mx_VideoFeed_primary) {
            aspect-ratio: 16 / 9;
        }

.mx_VideoFeed .mx_VideoFeed_video {
        height: 100%;
        width: 100%;
        border-radius: 4px;
        background-color: #000000;
    }

.mx_VideoFeed .mx_VideoFeed_video.mx_VideoFeed_video_mirror {
            -webkit-transform: scale(-1, 1);
                    transform: scale(-1, 1);
        }

.mx_VideoFeed .mx_VideoFeed_mic {
        position: absolute;
        left: 6px;
        bottom: 6px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        width: 24px;
        height: 24px;

        background-color: rgb(0, 0, 0, 0.5); /* Same on both themes */
        border-radius: 100%;
    }

.mx_VideoFeed .mx_VideoFeed_mic::before {
            position: absolute;
            content: "";
            width: 17px;
            height: 17px;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-position: center;
                    mask-position: center;
            background-color: white; /* Same on both themes */
            border-radius: 7px;
        }

.mx_VideoFeed .mx_VideoFeed_mic.mx_VideoFeed_mic_muted::before {
            -webkit-mask-image: url(../../icons/mic-off-solid.b535c73.svg);
                    mask-image: url(../../icons/mic-off-solid.b535c73.svg);
        }

.mx_VideoFeed .mx_VideoFeed_mic.mx_VideoFeed_mic_unmuted::before {
            -webkit-mask-image: url(../../icons/mic-on-solid.5e29984.svg);
                    mask-image: url(../../icons/mic-on-solid.5e29984.svg);
        }

pre code.hljs{display:block;overflow-x:auto;padding:1em}

code.hljs{padding:3px 5px}

.hljs{color:#abb2bf;background:#282c34}

.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}

.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}

.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}

.hljs-literal{color:#56b6c2}

.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}

.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}

.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}

.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}

.hljs-emphasis{font-style:italic}

.hljs-strong{font-weight:700}

.hljs-link{text-decoration:underline}

/* dark */

.markdown-body {
  color-scheme: dark;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  color: #f0f6fc;
  background-color: #0d1117;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

.markdown-body .octicon {
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
}

.markdown-body h1:hover .anchor .octicon-link:before,
.markdown-body h2:hover .anchor .octicon-link:before,
.markdown-body h3:hover .anchor .octicon-link:before,
.markdown-body h4:hover .anchor .octicon-link:before,
.markdown-body h5:hover .anchor .octicon-link:before,
.markdown-body h6:hover .anchor .octicon-link:before {
  width: 16px;
  height: 16px;
  content: ' ';
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
}

.markdown-body details,
.markdown-body figcaption,
.markdown-body figure {
  display: block;
}

.markdown-body summary {
  display: list-item;
}

.markdown-body [hidden] {
  display: none !important;
}

.markdown-body a {
  background-color: transparent;
  color: #4493f8;
  text-decoration: none;
}

.markdown-body abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

.markdown-body b,
.markdown-body strong {
  font-weight: 600;
}

.markdown-body dfn {
  font-style: italic;
}

.markdown-body h1 {
  margin: .67em 0;
  font-weight: 600;
  padding-bottom: .3em;
  font-size: 2em;
  border-bottom: 1px solid #3d444db3;
}

.markdown-body mark {
  background-color: #bb800926;
  color: #f0f6fc;
}

.markdown-body small {
  font-size: 90%;
}

.markdown-body sub,
.markdown-body sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.markdown-body sub {
  bottom: -0.25em;
}

.markdown-body sup {
  top: -0.5em;
}

.markdown-body img {
  border-style: none;
  max-width: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.markdown-body code,
.markdown-body kbd,
.markdown-body pre,
.markdown-body samp {
  font-family: monospace;
  font-size: 1em;
}

.markdown-body figure {
  margin: 1em 2.5rem;
}

.markdown-body hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid #3d444db3;
  height: .25em;
  padding: 0;
  margin: 1.5rem 0;
  background-color: #3d444d;
  border: 0;
}

.markdown-body input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.markdown-body [type=button],
.markdown-body [type=reset],
.markdown-body [type=submit] {
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
}

.markdown-body [type=checkbox],
.markdown-body [type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

.markdown-body [type=number]::-webkit-inner-spin-button,
.markdown-body [type=number]::-webkit-outer-spin-button {
  height: auto;
}

.markdown-body [type=search]::-webkit-search-cancel-button,
.markdown-body [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.markdown-body ::-webkit-input-placeholder {
  color: inherit;
  opacity: .54;
}

.markdown-body ::-webkit-file-upload-button {
  -webkit-appearance: button;
  appearance: button;
  font: inherit;
}

.markdown-body a:hover {
  text-decoration: underline;
}

.markdown-body ::-webkit-input-placeholder {
  color: #9198a1;
  opacity: 1;
}

.markdown-body ::-moz-placeholder {
  color: #9198a1;
  opacity: 1;
}

.markdown-body :-ms-input-placeholder {
  color: #9198a1;
  opacity: 1;
}

.markdown-body ::-ms-input-placeholder {
  color: #9198a1;
  opacity: 1;
}

.markdown-body ::placeholder {
  color: #9198a1;
  opacity: 1;
}

.markdown-body hr::before {
  display: table;
  content: "";
}

.markdown-body hr::after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant: tabular-nums;
}

.markdown-body td,
.markdown-body th {
  padding: 0;
}

.markdown-body details summary {
  cursor: pointer;
}

.markdown-body a:focus,
.markdown-body [role=button]:focus,
.markdown-body input[type=radio]:focus,
.markdown-body input[type=checkbox]:focus {
  outline: 2px solid #1f6feb;
  outline-offset: -2px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.markdown-body a:focus:not(:focus-visible),
.markdown-body [role=button]:focus:not(:focus-visible),
.markdown-body input[type=radio]:focus:not(:focus-visible),
.markdown-body input[type=checkbox]:focus:not(:focus-visible) {
  outline: solid 1px transparent;
}

.markdown-body a:focus-visible,
.markdown-body [role=button]:focus-visible,
.markdown-body input[type=radio]:focus-visible,
.markdown-body input[type=checkbox]:focus-visible {
  outline: 2px solid #1f6feb;
  outline-offset: -2px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.markdown-body a:not([class]):focus,
.markdown-body a:not([class]):focus-visible,
.markdown-body input[type=radio]:focus,
.markdown-body input[type=radio]:focus-visible,
.markdown-body input[type=checkbox]:focus,
.markdown-body input[type=checkbox]:focus-visible {
  outline-offset: 0;
}

.markdown-body kbd {
  display: inline-block;
  padding: 0.25rem;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: #f0f6fc;
  vertical-align: middle;
  background-color: #151b23;
  border: solid 1px #3d444db3;
  border-bottom-color: #3d444db3;
  border-radius: 6px;
  -webkit-box-shadow: inset 0 -1px 0 #3d444db3;
          box-shadow: inset 0 -1px 0 #3d444db3;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h2 {
  font-weight: 600;
  padding-bottom: .3em;
  font-size: 1.5em;
  border-bottom: 1px solid #3d444db3;
}

.markdown-body h3 {
  font-weight: 600;
  font-size: 1.25em;
}

.markdown-body h4 {
  font-weight: 600;
  font-size: 1em;
}

.markdown-body h5 {
  font-weight: 600;
  font-size: .875em;
}

.markdown-body h6 {
  font-weight: 600;
  font-size: .85em;
  color: #9198a1;
}

.markdown-body p {
  margin-top: 0;
  margin-bottom: 10px;
}

.markdown-body blockquote {
  margin: 0;
  padding: 0 1em;
  color: #9198a1;
  border-left: .25em solid #3d444d;
}

.markdown-body ul,
.markdown-body ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}

.markdown-body ol ol,
.markdown-body ul ol {
  list-style-type: lower-roman;
}

.markdown-body ul ul ol,
.markdown-body ul ol ol,
.markdown-body ol ul ol,
.markdown-body ol ol ol {
  list-style-type: lower-alpha;
}

.markdown-body dd {
  margin-left: 0;
}

.markdown-body tt,
.markdown-body code,
.markdown-body samp {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
}

.markdown-body pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}

.markdown-body .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-body input::-webkit-outer-spin-button,
.markdown-body input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}

.markdown-body .mr-2 {
  margin-right: 0.5rem !important;
}

.markdown-body::before {
  display: table;
  content: "";
}

.markdown-body::after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body>*:first-child {
  margin-top: 0 !important;
}

.markdown-body>*:last-child {
  margin-bottom: 0 !important;
}

.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-body .absent {
  color: #f85149;
}

.markdown-body .anchor {
  float: left;
  padding-right: 0.25rem;
  margin-left: -20px;
  line-height: 1;
}

.markdown-body .anchor:focus {
  outline: none;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body details {
  margin-top: 0;
  margin-bottom: 1rem;
}

.markdown-body blockquote>:first-child {
  margin-top: 0;
}

.markdown-body blockquote>:last-child {
  margin-bottom: 0;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
  color: #f0f6fc;
  vertical-align: middle;
  visibility: hidden;
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
  text-decoration: none;
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
  visibility: visible;
}

.markdown-body h1 tt,
.markdown-body h1 code,
.markdown-body h2 tt,
.markdown-body h2 code,
.markdown-body h3 tt,
.markdown-body h3 code,
.markdown-body h4 tt,
.markdown-body h4 code,
.markdown-body h5 tt,
.markdown-body h5 code,
.markdown-body h6 tt,
.markdown-body h6 code {
  padding: 0 .2em;
  font-size: inherit;
}

.markdown-body summary h1,
.markdown-body summary h2,
.markdown-body summary h3,
.markdown-body summary h4,
.markdown-body summary h5,
.markdown-body summary h6 {
  display: inline-block;
}

.markdown-body summary h1 .anchor,
.markdown-body summary h2 .anchor,
.markdown-body summary h3 .anchor,
.markdown-body summary h4 .anchor,
.markdown-body summary h5 .anchor,
.markdown-body summary h6 .anchor {
  margin-left: -40px;
}

.markdown-body summary h1,
.markdown-body summary h2 {
  padding-bottom: 0;
  border-bottom: 0;
}

.markdown-body ul.no-list,
.markdown-body ol.no-list {
  padding: 0;
  list-style-type: none;
}

.markdown-body ol[type="a s"] {
  list-style-type: lower-alpha;
}

.markdown-body ol[type="A s"] {
  list-style-type: upper-alpha;
}

.markdown-body ol[type="i s"] {
  list-style-type: lower-roman;
}

.markdown-body ol[type="I s"] {
  list-style-type: upper-roman;
}

.markdown-body ol[type="1"] {
  list-style-type: decimal;
}

.markdown-body div>ol:not([type]) {
  list-style-type: decimal;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body li>p {
  margin-top: 1rem;
}

.markdown-body li+li {
  margin-top: .25em;
}

.markdown-body dl {
  padding: 0;
}

.markdown-body dl dt {
  padding: 0;
  margin-top: 1rem;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}

.markdown-body dl dd {
  padding: 0 1rem;
  margin-bottom: 1rem;
}

.markdown-body table th {
  font-weight: 600;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #3d444d;
}

.markdown-body table td>:last-child {
  margin-bottom: 0;
}

.markdown-body table tr {
  background-color: #0d1117;
  border-top: 1px solid #3d444db3;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #151b23;
}

.markdown-body table img {
  background-color: transparent;
}

.markdown-body img[align=right] {
  padding-left: 20px;
}

.markdown-body img[align=left] {
  padding-right: 20px;
}

.markdown-body .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}

.markdown-body span.frame {
  display: block;
  overflow: hidden;
}

.markdown-body span.frame>span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid #3d444d;
}

.markdown-body span.frame span img {
  display: block;
  float: left;
}

.markdown-body span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: #f0f6fc;
}

.markdown-body span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

.markdown-body span.align-center>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}

.markdown-body span.align-center span img {
  margin: 0 auto;
  text-align: center;
}

.markdown-body span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

.markdown-body span.align-right>span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}

.markdown-body span.align-right span img {
  margin: 0;
  text-align: right;
}

.markdown-body span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

.markdown-body span.float-left span {
  margin: 13px 0 0;
}

.markdown-body span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

.markdown-body span.float-right>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}

.markdown-body code,
.markdown-body tt {
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  background-color: #656c7633;
  border-radius: 6px;
}

.markdown-body code br,
.markdown-body tt br {
  display: none;
}

.markdown-body del code {
  text-decoration: inherit;
}

.markdown-body samp {
  font-size: 85%;
}

.markdown-body pre code {
  font-size: 100%;
}

.markdown-body pre>code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.markdown-body .highlight {
  margin-bottom: 1rem;
}

.markdown-body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 1rem;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  color: #f0f6fc;
  background-color: #151b23;
  border-radius: 6px;
}

.markdown-body pre code,
.markdown-body pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.markdown-body .csv-data td,
.markdown-body .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.markdown-body .csv-data .blob-num {
  padding: 10px 0.5rem 9px;
  text-align: right;
  background: #0d1117;
  border: 0;
}

.markdown-body .csv-data tr {
  border-top: 0;
}

.markdown-body .csv-data th {
  font-weight: 600;
  background: #151b23;
  border-top: 0;
}

.markdown-body [data-footnote-ref]::before {
  content: "[";
}

.markdown-body [data-footnote-ref]::after {
  content: "]";
}

.markdown-body .footnotes {
  font-size: 12px;
  color: #9198a1;
  border-top: 1px solid #3d444d;
}

.markdown-body .footnotes ol {
  padding-left: 1rem;
}

.markdown-body .footnotes ol ul {
  display: inline-block;
  padding-left: 1rem;
  margin-top: 1rem;
}

.markdown-body .footnotes li {
  position: relative;
}

.markdown-body .footnotes li:target::before {
  position: absolute;
  top: calc(0.5rem*-1);
  right: calc(0.5rem*-1);
  bottom: calc(0.5rem*-1);
  left: calc(1.5rem*-1);
  pointer-events: none;
  content: "";
  border: 2px solid #1f6feb;
  border-radius: 6px;
}

.markdown-body .footnotes li:target {
  color: #f0f6fc;
}

.markdown-body .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}

.markdown-body body:has(:modal) {
  padding-right: var(--dialog-scrollgutter) !important;
}

.markdown-body .pl-c {
  color: #9198a1;
}

.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
  color: #79c0ff;
}

.markdown-body .pl-e,
.markdown-body .pl-en {
  color: #d2a8ff;
}

.markdown-body .pl-smi,
.markdown-body .pl-s .pl-s1 {
  color: #f0f6fc;
}

.markdown-body .pl-ent {
  color: #7ee787;
}

.markdown-body .pl-k {
  color: #ff7b72;
}

.markdown-body .pl-s,
.markdown-body .pl-pds,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sre,
.markdown-body .pl-sr .pl-sra {
  color: #a5d6ff;
}

.markdown-body .pl-v,
.markdown-body .pl-smw {
  color: #ffa657;
}

.markdown-body .pl-bu {
  color: #f85149;
}

.markdown-body .pl-ii {
  color: #f0f6fc;
  background-color: #8e1519;
}

.markdown-body .pl-c2 {
  color: #f0f6fc;
  background-color: #b62324;
}

.markdown-body .pl-sr .pl-cce {
  font-weight: bold;
  color: #7ee787;
}

.markdown-body .pl-ml {
  color: #f2cc60;
}

.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
  font-weight: bold;
  color: #1f6feb;
}

.markdown-body .pl-mi {
  font-style: italic;
  color: #f0f6fc;
}

.markdown-body .pl-mb {
  font-weight: bold;
  color: #f0f6fc;
}

.markdown-body .pl-md {
  color: #ffdcd7;
  background-color: #67060c;
}

.markdown-body .pl-mi1 {
  color: #aff5b4;
  background-color: #033a16;
}

.markdown-body .pl-mc {
  color: #ffdfb6;
  background-color: #5a1e02;
}

.markdown-body .pl-mi2 {
  color: #f0f6fc;
  background-color: #1158c7;
}

.markdown-body .pl-mdr {
  font-weight: bold;
  color: #d2a8ff;
}

.markdown-body .pl-ba {
  color: #9198a1;
}

.markdown-body .pl-sg {
  color: #3d444d;
}

.markdown-body .pl-corl {
  text-decoration: underline;
  color: #a5d6ff;
}

.markdown-body [role=button]:focus:not(:focus-visible),
.markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),
.markdown-body button:focus:not(:focus-visible),
.markdown-body summary:focus:not(:focus-visible),
.markdown-body a:focus:not(:focus-visible) {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.markdown-body [tabindex="0"]:focus:not(:focus-visible),
.markdown-body details-dialog:focus:not(:focus-visible) {
  outline: none;
}

.markdown-body g-emoji {
  display: inline-block;
  min-width: 1ch;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 1em;
  font-style: normal !important;
  font-weight: 400;
  line-height: 1;
  vertical-align: -0.075em;
}

.markdown-body g-emoji img {
  width: 1em;
  height: 1em;
}

.markdown-body .task-list-item {
  list-style-type: none;
}

.markdown-body .task-list-item label {
  font-weight: 400;
}

.markdown-body .task-list-item.enabled label {
  cursor: pointer;
}

.markdown-body .task-list-item+.task-list-item {
  margin-top: 0.25rem;
}

.markdown-body .task-list-item .handle {
  display: none;
}

.markdown-body .task-list-item-checkbox {
  margin: 0 .2em .25em -1.4em;
  vertical-align: middle;
}

.markdown-body ul:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em .25em .2em;
}

.markdown-body ol:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em .25em .2em;
}

.markdown-body .contains-task-list:hover .task-list-item-convert-container,
.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
  display: block;
  width: auto;
  height: 24px;
  overflow: visible;
  clip: auto;
}

.markdown-body ::-webkit-calendar-picker-indicator {
  -webkit-filter: invert(50%);
          filter: invert(50%);
}

.markdown-body .markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  color: inherit;
  border-left: .25em solid #3d444d;
}

.markdown-body .markdown-alert>:first-child {
  margin-top: 0;
}

.markdown-body .markdown-alert>:last-child {
  margin-bottom: 0;
}

.markdown-body .markdown-alert .markdown-alert-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}

.markdown-body .markdown-alert.markdown-alert-note {
  border-left-color: #1f6feb;
}

.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
  color: #4493f8;
}

.markdown-body .markdown-alert.markdown-alert-important {
  border-left-color: #8957e5;
}

.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
  color: #ab7df8;
}

.markdown-body .markdown-alert.markdown-alert-warning {
  border-left-color: #9e6a03;
}

.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: #d29922;
}

.markdown-body .markdown-alert.markdown-alert-tip {
  border-left-color: #238636;
}

.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: #3fb950;
}

.markdown-body .markdown-alert.markdown-alert-caution {
  border-left-color: #da3633;
}

.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: #f85149;
}

.markdown-body>*:first-child>.heading-element:first-child {
  margin-top: 0 !important;
}

.markdown-body .highlight pre:has(+.zeroclipboard-container) {
  min-height: 52px;
}


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