/*!*****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!./res_custom/got/themes/light/css/light.pcss ***!
  \*****************************************************************************************************************************************************************************/

@layer compound{
@layer cpd-semantic, custom, cpd-base;
}/*
 * 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.
 *//*
 * These variables are now *deprecated* and should not be used in new code; instead Compound typographic tokens
 * should be used. Direct equivalents for these old font size tokens are listed below; where no equivalent exists,
 * that suggests that the design is using a non-standard font size and should be updated.
 *
 * In fact, modern Figma designs should actually use a named Typography style such as "Web/font/heading/sm/semibold",
 * translates directly to `font: var(--cpd-font-heading-sm-semibold)`.
 *//* Compound equivalent: --cpd-font-size-body-xs *//* Compound equivalent: --cpd-font-size-body-sm *//* Compound equivalent: --cpd-font-size-body-md *//* Compound equivalent: --cpd-font-size-body-lg *//* Compound equivalent: --cpd-font-size-heading-sm *//* Compound equivalent: --cpd-font-size-heading-md *//* Compound equivalent: --cpd-font-size-heading-lg *//* Compound equivalent: --cpd-font-size-heading-xl *//* 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`. *//* the 'src' links are relative to the bundle.css, which is in a subdirectory.
 *//*#region 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");
}/*#endregion*//*#region TITILLIUM WEB*//* latin-ext */@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/TitilliumWeb/TitilliumWeb-latin-ext-400.eb5057e.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../fonts/TitilliumWeb/TitilliumWeb-latin-400.55acb4d.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* latin-ext */@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../../fonts/TitilliumWeb/TitilliumWeb-latin-ext-600.63cc0cf.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../../fonts/TitilliumWeb/TitilliumWeb-latin-600.0e4c54a.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* latin-ext */@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../../fonts/TitilliumWeb/TitilliumWeb-latin-ext-700.6c8f14b.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
        U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../../fonts/TitilliumWeb/TitilliumWeb-latin-700.6bf067c.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/*#endregion*//*#region Noto Color Emoji COLR *//* 
    Noto Color Emoji
    Copyright (c) 2017 Google Inc.
    Licensed under the SIL Open Font License, Version 1.1
    https://scripts.sil.org/OFL
*/@font-face {
    font-family: "Noto Color Emoji";
    src: url(../../fonts/NotoColorEmoji/NotoColorEmoji.c220f5a.ttf) format("truetype");
    font-weight: 400 700;
    font-display: swap;
}/*#endregion*/:root {
    /* This is set to Twemoji when the user opts into the bundled emoji font */
    --emoji-font-family: "";
}/* Nunito and Inter 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. *//* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 *//* ******************** *//*SUCCESS*//*DANGER*//* SUBMIT *//* CANCEL *//* #region AVATAR/USERNAME VARIANTS *//* #endregion *//* ******************** *//**
 * 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
 *//* Reused Figma non-compound colors *//* ******************** *//* ******************** *//* Theme specific colors *//* ******************** *//* ******************** *//* Colors that aren't in Figma and are theme specific - we need to get rid of these *//* ******************** *//* ******************** *//* Colors that aren't in Figma - we need to get rid of these *//* ******************** *//* ******************** *//* Blockquote *//* ******************** *//* ******************** *//* Tooltip *//* ******************** *//* ******************** *//* Widget *//* ******************** *//* ******************** *//* Menu *//* ******************** *//* ******************** *//* Settings *//* ******************** *//* ******************** *//* Room *//* ******************** *//* ******************** *//* RoomHeader *//* ******************** *//* ******************** *//* Rich-text-editor *//* ******************** *//* ******************** *//* Presence *//* ******************** *//* not using a compound color here for now as we want to have the same color in
   light and dark theme. Until we have a non-symetrical token for it, let's keep
   it hardcoded to the following value *//* ******************** *//* Inputs *//* ******************** *//* ******************** *//* Dialog *//* ******************** *//* ******************** *//* ImageBody *//* ******************** *//* ******************** *//* RoomList *//* ******************** *//* ******************** *//* e2e *//* ******************** *//* ******************** *//* Tabbed views *//* ******************** *//* ******************** *//* Buttons *//* ******************** *//* TODO: Verify color *//* ******************** *//* Toggle switch *//* ******************** *//* ******************** *//* Authpage *//* ******************** *//* ******************** *//* Message action bar *//* ******************** *//* ******************** *//* Reaction row *//* ******************** *//* ******************** *//* Voice messages *//* ******************** *//* These two don't change between themes. They are the $alert, but we don't want *//* custom themes to affect them by accident. *//* ******************** *//* Bubble tiles *//* ******************** *//* ******************** *//* Lightbox *//* ******************** *//* not using a compound color here for now as we want to have the same color in
   light and dark theme. Until we have a non-symetrical token for it, let's keep
   it hardcoded to the following value *//* ******************** *//* VoIP *//* ******************** *//* XXX: Color from dark theme *//* All of these are from dark theme *//* This one is from light theme *//* ******************** *//* One-off colors *//* ******************** *//* ******************** *//* One-off global colors - these apply to both themes *//* ******************** *//* ******************** *//* blur amounts for left left panel (only for element theme) *//* ******************** */:root {
    --lp-background-blur: 40px;
}/* ******************** *//* Icon URLs *//* ******************** *//* ******************** *//* Location sharing *//* ******************** *//* ******************** */body {
    color-scheme: light;
}/* ******************** *//* diff highlight colors *//* ******************** */.hljs-addition {
    background: var(--cpd-color-green-500);
}.hljs-deletion {
    background: var(--cpd-color-red-500);
}/* ******************** *//* sidebar blurred avatar background *//**//* if backdrop-filter is supported, *//* set the user avatar (if any) as a background so *//* it can be blurred by the tag panel and room list */.mx_RoomSublist_showNButton {
    background-color: transparent !important;
}a:hover,
a:link,
a:visited {
    text-decoration: none;
}/* autogenerated by rethemendex.sh */:root {
    --quick-settings-mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
    /* --quick-settings-mask-image: url("$(res)/customIcons/settings-neg-icon-custom.svg"); */
    /* --quick-settings-mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); */

    --chat-icon-mask-image: url(../../customIcons/chats-neg-icon.5d732d2.svg);
    /* --chat-icon-mask-image: url("$(res)/img/element-icons/feedback.svg"); */

    --group-chat-icon-mask-image: url(../../customIcons/group-members-icon.44dc8fb.svg);
    --group-chat-solid-icon-mask-image: url(../../customIcons/group-members-neg-icon.1aa9df4.svg);

    --call-icon-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
    /* --call-icon-mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); */

    --call-logs-icon-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
    /* --call-logs-icon-mask-image: url("@vector-im/compound-design-tokens/icons/history.svg"); */

    --eye-icon-mask-image: url(../../customIcons/eye-icon-custom.432cad6.svg);
    /* --eye-icon-mask-image: url("$(res)/img/element-icons/eye.svg"); */

    --attach-icon-mask-image: url(../../customIcons/attach.78fd0d9.svg);
    /* --attach-icon-mask-image: url("$(res)/img/element-icons/room/composer/attach.svg"); */

    --file-icon-mask-image: url(../../customIcons/file-icon.9a6dc02.svg);
    --file-solid-icon-mask-image: url(../../customIcons/file-neg-icon.9a90874.svg);

    --emoji-icon-mask-image: url(../../customIcons/emoji.ba4c75f.svg);
    /* --emoji-icon-mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg"); */

    --mic-on-solid-mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
    /* --mic-on-solid-mask-image: url("$(res)/customIcons/microphone-neg-default-icon.svg"); */
    /* --mic-on-solid-mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); */

    --sign-out-mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
    /* --sign-out-mask-image: url("@vector-im/compound-design-tokens/icons/sign-out.svg"); */

    --leave-mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
    /* --leave-mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg"); */

    --trash-icon-mask-image: url(../../customIcons/trash-icon.4ae7ffa.svg);
    /* --trash-icon-mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); */

    --edit-icon-mask-image: url(../../customIcons/edit-icon.3855f62.svg);
    /* --edit-icon-mask-image: url("$(res)/img/element-icons/room/message-bar/edit-icon.svg"); */
    /* --edit-icon-mask-image: url("$(res)/customIcons/edit-message-icon.svg"); */
    /* --edit-icon-mask-image: url("@vector-im/compound-design-tokens/icons/edit-solid.svg"); */
    --edit-message-icon-mask-image: url(../../customIcons/edit-message-icon.99891f0.svg);

    --pin-icon-mask-image: url(../../customIcons/pinned-message-icon.fb9a58b.svg);
    /* --pin-icon-mask-image: url("@vector-im/compound-design-tokens/icons/pin.svg"); */

    --unpin-icon-mask-image: url(../../customIcons/unpinned-message-icon.75392dc.svg);
    /* --unpin-icon-mask-image: url("@vector-im/compound-design-tokens/icons/unpin.svg"); */
}/**
 * 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.95;
    }
}@keyframes mx_Dialog_lightbox_background_keyframes {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.95;
    }
}@-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;
    }
}@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 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-1100);
  --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-1100);
  --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-action-tertiary-rest: var(--cpd-color-theme-bg);
  --cpd-color-bg-action-tertiary-hovered: var(--cpd-color-gray-300);
  --cpd-color-bg-action-tertiary-selected: var(--cpd-color-gray-400);
  --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-green-400);
  --cpd-color-bg-badge-info: var(--cpd-color-blue-400);
  --cpd-color-bg-badge-default: var(--cpd-color-theme-bg);
  --cpd-color-bg-badge-primary: var(--cpd-color-gray-1400);
  --cpd-color-bg-badge-secondary: var(--cpd-color-gray-400);
  --cpd-color-bg-badge-critical: var(--cpd-color-red-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-1100);
  --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-blue-200);
  --cpd-color-gradient-info-stop2: var(--cpd-color-theme-bg);
  --cpd-color-gradient-critical-stop1: var(--cpd-color-red-200);
  --cpd-color-gradient-critical-stop2: var(--cpd-color-theme-bg);
  --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) 100%);
  --cpd-color-gradient-critical-linear: linear-gradient(180deg, var(--cpd-color-gradient-critical-stop1) 0%, var(--cpd-color-gradient-critical-stop2) 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_1215g_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_1215g_8[data-kind="primary"] * {
    color: var(--cpd-color-icon-secondary);
  }._icon-button_1215g_8[data-kind="secondary"] {
  background: var(--cpd-color-bg-subtle-secondary);
}._icon-button_1215g_8[data-kind="secondary"] * {
    color: var(--cpd-color-icon-secondary);
  }._no-background_1215g_42[data-kind="secondary"] {
  background: transparent;
}._icon-button_1215g_8[aria-disabled="true"] {
  cursor: not-allowed;
}._icon-button_1215g_8[aria-disabled="true"] * {
    color: var(--cpd-color-icon-disabled);
  }/**
 * Hover state
 */@media (hover) {
  ._icon-button_1215g_8:not([aria-disabled="true"]):hover {
    background: var(--cpd-color-bg-subtle-primary);
  }

    ._icon-button_1215g_8:not([aria-disabled="true"]):hover * {
      color: var(--cpd-color-icon-primary);
    }
}._icon-button_1215g_8:not([aria-disabled="true"]):active {
  background: var(--cpd-color-bg-subtle-primary);
}._icon-button_1215g_8:not([aria-disabled="true"]):active * {
    color: var(--cpd-color-icon-primary);
  }@media (hover) {
  ._icon-button_1215g_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_1215g_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_1215g_8:not([aria-disabled="true"])._destructive_1215g_95:hover {
    background: var(--cpd-color-bg-critical-subtle-hovered);
    outline: 1px solid var(--cpd-color-border-critical-subtle);
  }
}._icon-button_1215g_8:not([aria-disabled="true"])._destructive_1215g_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_147l5_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_147l5_17 svg {
  inline-size: 100%;
  block-size: 100%;
}._indicator-icon_147l5_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_147l5_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%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  --background-color: var(--cpd-color-icon-primary);

  background-color: var(--background-color);
}._indicator-icon_147l5_17[data-indicator="success"]::before {
  --background-color: var(--cpd-color-icon-success-primary);
}._indicator-icon_147l5_17[data-indicator="critical"]::before {
  --background-color: var(--cpd-color-icon-critical-primary);
}@media (forced-colors: active) {
  ._indicator-icon_147l5_17[data-indicator]::before {
    border: 1px solid var(--background-color);
  }
}/*
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_1nqnq_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_1nqnq_8._invisible_1nqnq_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_1nqnq_28 {
  font-weight: var(--cpd-font-weight-regular);
  color: var(--cpd-color-text-secondary);
}._arrow_1nqnq_33 {
  /* same color as the tooltip background */
  fill: var(--cpd-color-alpha-gray-1400);
}@media (forced-colors: active) {
  ._tooltip_1nqnq_8:not(._invisible_1nqnq_21) {
    outline: 1px solid transparent;
  }
}/*
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_zysgz_8 {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  /* -2px to account for the border styling below */
  line-height: calc(var(--cpd-avatar-size) - 2px);
  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_zysgz_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_zysgz_8:disabled {
  cursor: not-allowed;
}._avatar_zysgz_8,
._image_zysgz_43 {
  aspect-ratio: 1 / 1;
  inline-size: var(--cpd-avatar-size);
  border-radius: var(--cpd-avatar-radius);
}._image_zysgz_43 {
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}/* Additional selector for button to raise selector above button.avatar */button._avatar-imageless_zysgz_55,
._avatar-imageless_zysgz_55 {
  /* 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);

  /* Additional style to ensure visibility in contrast-mode */
  border: 1px solid var(--cpd-avatar-bg);
}._avatar_zysgz_8[data-color] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
  --cpd-avatar-color: var(--cpd-color-text-decorative-1);
}._avatar_zysgz_8[data-color="2"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
  --cpd-avatar-color: var(--cpd-color-text-decorative-2);
}._avatar_zysgz_8[data-color="3"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
  --cpd-avatar-color: var(--cpd-color-text-decorative-3);
}._avatar_zysgz_8[data-color="4"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
  --cpd-avatar-color: var(--cpd-color-text-decorative-4);
}._avatar_zysgz_8[data-color="5"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
  --cpd-avatar-color: var(--cpd-color-text-decorative-5);
}._avatar_zysgz_8[data-color="6"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
  --cpd-avatar-color: var(--cpd-color-text-decorative-6);
}._avatar_zysgz_8[data-type="round"] {
  --cpd-avatar-radius: 50%;
}._avatar_zysgz_8[data-type="square"] {
  --cpd-avatar-radius: 25%;
}/**
 * Stacked avatars 
 */._stacked-avatars_zysgz_109::after {
  content: "";
  display: table;
  clear: both;
}._stacked-avatars_zysgz_109 ._avatar_zysgz_8 {
  float: inline-start;
}._stacked-avatars_zysgz_109 ._avatar_zysgz_8:not(:last-child) {
  /* injected in the document from AvatarStack.tsx */
  clip-path: url("#cpdAvatarClip");
}._stacked-avatars_zysgz_109 > *: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_zysgz_128 {
  /* 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_18gm1_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_18gm1_8[data-kind="default"] {
  border: 1px solid var(--cpd-color-alpha-gray-400);
  outline: none;
  color: var(--cpd-color-gray-1100);
}._badge_18gm1_8[data-kind="grey"] {
  background: var(--cpd-color-alpha-gray-300);
  color: var(--cpd-color-gray-1100);
}._badge_18gm1_8[data-kind="on-solid"] {
  background: var(--cpd-color-alpha-gray-1200);
  color: var(--cpd-color-text-on-solid-primary);
}._badge_18gm1_8[data-kind="blue"] {
  background: var(--cpd-color-alpha-blue-300);
  color: var(--cpd-color-blue-1100);
}._badge_18gm1_8[data-kind="green"] {
  background: var(--cpd-color-alpha-green-300);
  color: var(--cpd-color-green-1100);
}._badge_18gm1_8[data-kind="red"] {
  background: var(--cpd-color-alpha-red-300);
  color: var(--cpd-color-red-1100);
}@media (forced-colors: active) {
  ._badge_18gm1_8 {
    outline: 1px solid transparent;
  }
}/*
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_1w1u7_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 rgb(0 0 0 / 10%);
          box-shadow: 0 4px 24px 0 rgb(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_1w1u7_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-3x));
            transform: translate(0, var(--cpd-space-3x));
  }
}@keyframes _slide-in_1w1u7_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-3x));
            transform: translate(0, var(--cpd-space-3x));
  }
}._menu_1w1u7_8[data-state="open"] {
  -webkit-animation: _slide-in_1w1u7_1 180ms;
          animation: _slide-in_1w1u7_1 180ms;
}@-webkit-keyframes _fade-in_1w1u7_1 {
  from {
    opacity: 0;
  }
}@keyframes _fade-in_1w1u7_1 {
  from {
    opacity: 0;
  }
}@-webkit-keyframes _fade-out_1w1u7_1 {
  to {
    opacity: 0;
  }
}@keyframes _fade-out_1w1u7_1 {
  to {
    opacity: 0;
  }
}@media (prefers-reduced-motion) {
  ._menu_1w1u7_8[data-state="open"] {
    -webkit-animation-name: _fade-in_1w1u7_1;
            animation-name: _fade-in_1w1u7_1;
  }

  ._menu_1w1u7_8[data-state="closed"] {
    -webkit-animation-name: _fade-out_1w1u7_1;
            animation-name: _fade-out_1w1u7_1;
  }
}._title_1w1u7_63 {
  /** 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_610zp_8 {
  position: fixed;
  inset: 0;

  /* TODO: This value is used across modals and menu drawers, so would be worth
  tokenizing */
  background: rgb(3 12 27 / 52.8%);
}._drawer_610zp_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_610zp_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_610zp_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_610zp_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 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_lqfwq_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_lqfwq_8._interactive_lqfwq_26 {
  cursor: pointer;
}._item_lqfwq_8._no-label_lqfwq_30 {
  grid-template: "icon ." auto / auto 1fr;
}._label_lqfwq_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_lqfwq_8._no-icon_lqfwq_41 {
  grid-template: "label ." auto / auto 1fr;
}._item_lqfwq_8._no-icon_lqfwq_41 ._label_lqfwq_34 {
    /* Without icon, the height changes when hovered */
    min-block-size: 24px;
  }._icon_lqfwq_50 {
  grid-area: icon;
  -webkit-margin-end: var(--cpd-space-3x);
          margin-inline-end: var(--cpd-space-3x);
}._item_lqfwq_8._no-label_lqfwq_30 ._icon_lqfwq_50 {
  -webkit-margin-end: var(--cpd-space-4x);
          margin-inline-end: var(--cpd-space-4x);
}._nav-hint_lqfwq_59 {
  /* Hidden until the item is hovered over */
  display: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}button._item_lqfwq_8 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}._item_lqfwq_8[data-kind="primary"] > ._label_lqfwq_34 {
  color: var(--cpd-color-text-primary);
}._item_lqfwq_8[data-kind="primary"] > ._icon_lqfwq_50 {
  color: var(--cpd-color-icon-primary);
}._item_lqfwq_8[data-kind="primary"] > ._nav-hint_lqfwq_59 {
  color: var(--cpd-color-icon-tertiary);
}._item_lqfwq_8[data-kind="critical"] > ._label_lqfwq_34 {
  color: var(--cpd-color-text-critical-primary);
}._item_lqfwq_8[data-kind="critical"] > ._icon_lqfwq_50,
._item_lqfwq_8[data-kind="critical"] > ._nav-hint_lqfwq_59 {
  color: var(--cpd-color-icon-critical-primary);
}@media (hover) {
  ._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:hover {
    background: var(--cpd-color-bg-action-secondary-hovered);
  }

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

  /* Replace the children with the navigation hint on hover */
  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 {
    display: inline;
    display: initial;
  }

  ._item_lqfwq_8._interactive_lqfwq_26:hover > ._nav-hint_lqfwq_59 ~ * {
    display: none;
  }
}._item_lqfwq_8._interactive_lqfwq_26[data-kind="primary"]:active {
  background: var(--cpd-color-bg-action-secondary-pressed);
}._item_lqfwq_8._interactive_lqfwq_26[data-kind="critical"]:active {
  background: var(--cpd-color-bg-critical-subtle-hovered);
}._item_lqfwq_8[data-kind]._disabled_lqfwq_118 {
  pointer-events: none;
}._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._label_lqfwq_34,
._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._icon_lqfwq_50,
._item_lqfwq_8[data-kind]._disabled_lqfwq_118 > ._nav-hint_lqfwq_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_1ug7n_10 {
  --size: 20px;

  display: grid;
  inline-size: 20px;
  inline-size: var(--size);
  block-size: 20px;
  block-size: var(--size);
}._input_1ug7n_18,
._ui_1ug7n_19 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  grid-area: 1/1;
  inline-size: var(--size);
  block-size: var(--size);
}._input_1ug7n_18 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}._ui_1ug7n_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_1ug7n_19::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  /* Additional style to ensure visibility in contrast-mode */
  border: 1px solid transparent;
  color: transparent;
}._input_1ug7n_18:checked + ._ui_1ug7n_19 {
  background-color: #38af9a;
  background-color: var(--cpd-color-bg-accent-rest);
  border-color: #38af9a;
  border-color: var(--cpd-color-bg-accent-rest);
  color: inherit;
}._input_1ug7n_18:checked + ._ui_1ug7n_19::after {
  background: var(--cpd-color-icon-on-solid-primary);
  border-color: var(--cpd-color-icon-on-solid-primary);
  color: inherit;
}._input_1ug7n_18:focus-visible + ._ui_1ug7n_19 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}._input_1ug7n_18[readonly] {
  pointer-events: none;
}._input_1ug7n_18[readonly] + ._ui_1ug7n_19 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}._input_1ug7n_18[disabled] {
  cursor: not-allowed;
}._input_1ug7n_18[disabled] + ._ui_1ug7n_19 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}._input_1ug7n_18[disabled]:checked + ._ui_1ug7n_19 {
  border-color: var(--cpd-color-bg-action-primary-disabled);
  background: var(--cpd-color-bg-action-primary-disabled);
}._input_1ug7n_18[readonly]:checked + ._ui_1ug7n_19::after {
  background-color: var(--cpd-color-icon-secondary);
  border-color: var(--cpd-color-icon-secondary);
  color: inherit;
}@media (hover) {
  ._input_1ug7n_18:not([disabled], [readonly], :checked):hover + ._ui_1ug7n_19 {
    border-color: #38af9acc;
    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_1ug7n_18:not([disabled], [readonly], :checked):hover + ._ui_1ug7n_19::after {
    background: var(--cpd-color-icon-quaternary);
    border-color: var(--cpd-color-icon-quaternary);
    color: inherit;
  }

  ._input_1ug7n_18:not([disabled], [readonly]):checked:hover + ._ui_1ug7n_19 {
    border-color: #38af9acc;
    border-color: var(--cpd-color-bg-accent-hovered);
    background: #38af9acc;
    background: var(--cpd-color-bg-accent-hovered);
  }

  ._input_1ug7n_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1ug7n_19 {
    border-color: var(--cpd-color-bg-critical-hovered);
    background: var(--cpd-color-bg-critical-hovered);
  }
}._input_1ug7n_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1ug7n_19 {
  border-color: var(--cpd-color-border-critical-primary);
}._input_1ug7n_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1ug7n_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_1l6pa_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_1l6pa_8[data-size="sm"] {
    block-size: var(--cpd-space-2x);
  }._progress-bar_1l6pa_8[data-size="lg"] {
    block-size: var(--cpd-space-4x);
  }._progress-bar-container_1l6pa_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_1l6pa_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_1l6pa_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_1l6pa_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_1l6pa_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_1l6pa_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_1l6pa_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;
}@media (forced-colors: active) {
  ._progress-bar-indicator_1l6pa_59 {
    outline: 1px solid transparent;
  }
}/*
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_cqpyv_8 {
  --cpd-separator-color: var(--cpd-color-gray-400);
  --cpd-separator-size: 1px;

  background-color: var(--cpd-separator-color);
}._separator_cqpyv_8[data-kind="secondary"] {
  --cpd-separator-color: var(--cpd-color-gray-300);
}._separator_cqpyv_8[data-kind="section"] {
  --cpd-separator-size: 2px;
}._separator_cqpyv_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_cqpyv_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);
}@media (forced-colors: active) {
  ._separator_cqpyv_8 {
    outline: 1px solid transparent;
  }
}/*
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_udcm8_10 {
  display: grid;
  inline-size: 2.25rem;
  block-size: 1.25rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}._container_udcm8_10 > * {
  grid-area: 1/1;
  inline-size: inherit;
  block-size: inherit;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}._container_udcm8_10 > ._input_udcm8_24 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}._container_udcm8_10 > ._input_udcm8_24[disabled] {
  cursor: not-allowed;
}._ui_udcm8_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_udcm8_24:checked + ._ui_udcm8_34 {
  background: #38af9a;
  background: var(--cpd-color-bg-accent-rest);
  border-color: #38af9a;
  border-color: var(--cpd-color-bg-accent-rest);
}._ui_udcm8_34::after {
  --dot-color: var(--cpd-color-icon-secondary);

  content: "";
  display: block;
  block-size: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--dot-color);

  /* Additional style to ensure visibility in contrast-mode */
  border: 1px solid var(--dot-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -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_udcm8_24:focus-visible + ._ui_udcm8_34 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}:checked + ._ui_udcm8_34::after {
  --dot-color: var(--cpd-color-icon-on-solid-primary);

  -webkit-transform: translateX(100%);

          transform: translateX(100%);
}@media (hover) {
  :checked:not([disabled]):hover + ._ui_udcm8_34 {
    background: #38af9acc;
    background: var(--cpd-color-bg-accent-hovered);
    border-color: #38af9acc;
    border-color: var(--cpd-color-bg-accent-hovered);
  }
}:checked:active + ._ui_udcm8_34 {
  background: #38af9acc;
  background: var(--cpd-color-bg-accent-hovered);
  border-color: #38af9acc;
  border-color: var(--cpd-color-bg-accent-hovered);
}._input_udcm8_24[readonly] {
  pointer-events: none;
}._input_udcm8_24[readonly] + ._ui_udcm8_34 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}._input_udcm8_24[readonly] + ._ui_udcm8_34::after {
  --dot-color: var(--cpd-color-icon-secondary);
}._input_udcm8_24[disabled] + ._ui_udcm8_34 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}._input_udcm8_24[disabled] + ._ui_udcm8_34::after {
  --dot-color: var(--cpd-color-bg-action-primary-disabled);
}._input_udcm8_24[readonly]:checked + ._ui_udcm8_34 {
  border-color: var(--cpd-color-icon-secondary);
  background: var(--cpd-color-icon-secondary);
}._input_udcm8_24[readonly]:checked + ._ui_udcm8_34::after {
  --dot-color: var(--cpd-color-icon-on-solid-primary);
}._input_udcm8_24[disabled]:checked + ._ui_udcm8_34 {
  background: var(--cpd-color-bg-action-primary-disabled);
  border-color: var(--cpd-color-bg-action-primary-disabled);
}._input_udcm8_24[disabled]:checked + ._ui_udcm8_34::after {
  --dot-color: var(--cpd-color-icon-on-solid-primary);
}@media (hover) {
  ._input_udcm8_24:not(:checked, [disabled], [readonly]):hover + ._ui_udcm8_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_udcm8_24:not(:checked, [disabled], [readonly]):active + ._ui_udcm8_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_153f2_10 {
  --size: 20px;

  display: grid;
  inline-size: 20px;
  inline-size: var(--size);
  block-size: 20px;
  block-size: var(--size);
}._input_153f2_18,
._ui_153f2_19 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  grid-area: 1/1;
  inline-size: var(--size);
  block-size: var(--size);
}._input_153f2_18 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}._ui_153f2_19 {
  pointer-events: none;
  border-radius: 4px; /* TODO: Ought to be a token */
  border: 1px solid;
  border-color: var(--cpd-color-border-interactive-primary);
}._ui_153f2_19 svg {
  inline-size: var(--size);
  block-size: var(--size);

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

  /** Default, rest state */
  color: transparent;
}._input_153f2_18:checked + ._ui_153f2_19 {
  background-color: #38af9a;
  background-color: var(--cpd-color-bg-accent-rest);
  border-color: #38af9a;
  border-color: var(--cpd-color-bg-accent-rest);
}._input_153f2_18:checked + ._ui_153f2_19 svg {
  color: var(--cpd-color-icon-on-solid-primary);
}._input_153f2_18:focus-visible + ._ui_153f2_19 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}._input_153f2_18[disabled] {
  cursor: not-allowed;
}._input_153f2_18[disabled] + ._ui_153f2_19 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}._input_153f2_18[readonly] {
  pointer-events: none;
}._input_153f2_18[readonly] + ._ui_153f2_19 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}._input_153f2_18[disabled]:checked + ._ui_153f2_19 {
  border-color: var(--cpd-color-bg-action-primary-disabled);
  background: var(--cpd-color-bg-action-primary-disabled);
}._input_153f2_18[readonly]:checked + ._ui_153f2_19 svg {
  color: var(--cpd-color-icon-secondary);
}@media (hover) {
  ._input_153f2_18:not([disabled], [readonly], :checked):hover + ._ui_153f2_19 {
    border-color: #38af9acc;
    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_153f2_18:not([disabled], [readonly], :checked):hover + ._ui_153f2_19 svg {
    color: var(--cpd-color-icon-quaternary);
  }

  ._input_153f2_18:not([disabled], [readonly]):checked:hover + ._ui_153f2_19 {
    border-color: #38af9acc;
    border-color: var(--cpd-color-bg-accent-hovered);
    background: #38af9acc;
    background: var(--cpd-color-bg-accent-hovered);
  }

  ._input_153f2_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_153f2_19 {
    border-color: var(--cpd-color-bg-critical-hovered);
    background: var(--cpd-color-bg-critical-hovered);
  }
}._input_153f2_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_153f2_19 {
  border-color: var(--cpd-color-border-critical-primary);
}._input_153f2_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_153f2_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_1xofk_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);
}@media (forced-colors: active) {
  ._toast-container_1xofk_8 {
    outline: 1px solid transparent;
  }
}/*
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_13vu4_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_13vu4_8 {
  /* Make the width match that of a real button */
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;

  /* Buttons should not be underlined */
  text-decoration: none;
}._button_13vu4_8 > svg {
  -webkit-transition: color 0.1s;
  transition: color 0.1s;
}._button_13vu4_8[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled) !important;
}._button_13vu4_8[aria-disabled="true"] > svg {
  color: var(--cpd-color-icon-disabled) !important;
}/**
 * SIZES
 */._button_13vu4_8[data-size="lg"] {
  padding-block: var(--cpd-space-2x);
  padding-inline: var(--cpd-space-8x);
  min-block-size: var(--cpd-space-12x);
}._button_13vu4_8[data-size="lg"]._icon-only_13vu4_53 {
    padding-inline: var(--cpd-space-2x);
    block-size: var(--cpd-space-12x);
    inline-size: var(--cpd-space-12x);
  }._button_13vu4_8[data-size="lg"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
  -webkit-padding-start: var(--cpd-space-7x);
          padding-inline-start: var(--cpd-space-7x);
}._button_13vu4_8[data-size="sm"] {
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-5x);
  min-block-size: var(--cpd-space-9x);
}._button_13vu4_8[data-size="sm"]._icon-only_13vu4_53 {
    padding-inline: var(--cpd-space-1x);
    block-size: var(--cpd-space-9x);
    inline-size: var(--cpd-space-9x);
  }._button_13vu4_8[data-size="sm"]._has-icon_13vu4_60:not(._icon-only_13vu4_53) {
  -webkit-padding-start: var(--cpd-space-4x);
          padding-inline-start: var(--cpd-space-4x);
}/**
 * KINDS
 */._button_13vu4_8[data-kind="primary"] {
  color: var(--cpd-color-text-on-solid-primary);
  background: var(--cpd-color-bg-action-primary-rest);
  border-width: 0;
}._button_13vu4_8[data-kind="primary"] > svg {
  color: var(--cpd-color-icon-on-solid-primary);
}@media (hover) {
  ._button_13vu4_8[data-kind="primary"]:hover {
    background: var(--cpd-color-bg-action-primary-hovered);
  }
}._button_13vu4_8[data-kind="primary"]:active,
._button_13vu4_8[data-kind="primary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-action-primary-pressed);
}._button_13vu4_8[data-kind="primary"][aria-disabled="true"] {
  /* !important to override destructive background */
  background: var(--cpd-color-bg-subtle-primary) !important;
}._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110 {
  background: var(--cpd-color-bg-critical-primary);
}@media (hover) {
  ._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:hover {
    background: var(--cpd-color-bg-critical-hovered);
  }
}._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110:active,
._button_13vu4_8[data-kind="primary"]._destructive_13vu4_110[aria-expanded="true"] {
  /* TODO: We're waiting for this value to be formalized as a semantic token */
  background: var(--cpd-color-red-1100);
}._button_13vu4_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_13vu4_8[data-kind="secondary"] > svg {
  color: var(--cpd-color-icon-primary);
}@media (hover) {
  ._button_13vu4_8[data-kind="secondary"]:hover {
    border-color: var(--cpd-color-border-interactive-hovered);
    background: var(--cpd-color-bg-subtle-secondary);
  }
}._button_13vu4_8[data-kind="secondary"]:active,
._button_13vu4_8[data-kind="secondary"][aria-expanded="true"] {
  border-color: var(--cpd-color-border-interactive-hovered);
  background: var(--cpd-color-bg-subtle-primary);
}._button_13vu4_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_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 {
  border-color: var(--cpd-color-border-critical-subtle);
  color: var(--cpd-color-text-critical-primary);
}._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110 > svg {
  color: var(--cpd-color-icon-critical-primary);
}@media (hover) {
  ._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:hover {
    border-color: var(--cpd-color-border-critical-hovered);
    background: var(--cpd-color-bg-critical-subtle);
  }
}._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110:active,
._button_13vu4_8[data-kind="secondary"]._destructive_13vu4_110[aria-expanded="true"] {
  border-color: var(--cpd-color-border-critical-hovered);
  background: var(--cpd-color-bg-critical-subtle-hovered);
}._button_13vu4_8[data-kind="tertiary"] {
  border: none;
  color: var(--cpd-color-text-primary);
  text-decoration: underline;
  background: transparent;
}@media (hover) {
  ._button_13vu4_8[data-kind="tertiary"]:hover {
    background: var(--cpd-color-bg-subtle-secondary);
  }
}._button_13vu4_8[data-kind="tertiary"]:active,
._button_13vu4_8[data-kind="tertiary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-subtle-primary);
}._button_13vu4_8[data-kind="tertiary"][aria-disabled="true"] {
  color: var(--cpd-color-text-disabled);

  /* !important to override destructive background */
  background: transparent !important;
}._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110 {
  color: var(--cpd-color-text-critical-primary);
}@media (hover) {
  ._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:hover {
    background: var(--cpd-color-bg-critical-subtle);
  }
}._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110:active,
._button_13vu4_8[data-kind="tertiary"]._destructive_13vu4_110[aria-expanded="true"] {
  background: var(--cpd-color-bg-critical-subtle-hovered);
}@media (forced-colors: active) {
  ._button_13vu4_8[data-kind="primary"] {
    outline: 1px solid transparent;
  }
}/*
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 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.
*/._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 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_1r8kr_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_1r8kr_8 > svg {
    inline-size: 32px;
    block-size: 32px;
  }._content_1r8kr_8[data-size="medium"] {
  padding: var(--cpd-space-3x);
}._content_1r8kr_8[data-size="small"] {
  padding: var(--cpd-space-3x);
}._content_1r8kr_8[data-size="small"] > svg {
    inline-size: 24px;
    block-size: 24px;
  }._destructive_1r8kr_34 {
  background-color: var(--cpd-color-bg-critical-subtle);
  color: var(--cpd-color-icon-critical-primary);
}._success_1r8kr_39 {
  background-color: var(--cpd-color-bg-success-subtle);
  color: var(--cpd-color-icon-success-primary);
}@media (forced-colors: active) {
  ._content_1r8kr_8 {
    outline: 1px solid transparent;
  }
}/*
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 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 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 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_z70g4_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_z70g4_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_z70g4_25 {
  padding: var(--cpd-space-4x) 0;
  position: relative;
}/* Underline effect */._nav-tab_z70g4_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_z70g4_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_z70g4_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_z70g4_47:not([disabled]):hover {
    color: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }
}._nav-item_z70g4_47:focus-visible {
  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
}._nav-item_z70g4_47:not([disabled]):active {
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-subtle-primary);
}._nav-item_z70g4_47[aria-current],
._nav-item_z70g4_47[aria-selected="true"] {
  color: var(--cpd-color-text-primary);
}._nav-item_z70g4_47[disabled] {
  cursor: not-allowed;

  /* Enable pointer events for svgs even with fill=none */
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled);
}@media (forced-colors: active) {
  ._nav-tab_z70g4_25[data-current]::before {
    outline: 1px solid transparent;
  }
}/*
 * 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_187tn_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;
}@media (forced-colors: active) {
  ._pill_187tn_8 {
    outline: 1px solid transparent;
  }
}/*
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_16f2y_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_16f2y_37 {
  margin: 0;
  color: var(--cpd-color-text-on-solid-primary);
  grid-area: header;
}._description_16f2y_43 {
  color: var(--cpd-color-gray-500);
  grid-area: description;
}._button_16f2y_48 {
  color: var(--cpd-color-bg-subtle-secondary);
  grid-area: button;
}._arrow_16f2y_53 {
  fill: var(--cpd-color-bg-action-primary-rest);
}@media (forced-colors: active) {
  ._content_16f2y_8 {
    outline: 1px solid transparent;
  }
}/*
 * 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_cti0f_8 {
  inline-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}._unread_cti0f_8 div {
    block-size: 8px;
    inline-size: 8px;
    background-color: var(--cpd-color-icon-secondary);
    border-radius: 100%;
  }@media (forced-colors: active) {
  ._unread_cti0f_8 div {
    outline: 1px solid transparent;
  }
}/*
 * 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_1147r_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;
}@media (forced-colors: active) {
  ._unread-counter_1147r_8 {
    outline: 1px solid transparent;
  }
}/*
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_1mgc1_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;
}@media (forced-colors: active) {
  ._visual-list_1mgc1_8 {
    outline: 1px solid transparent;
  }
}/*
 * 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_1nc1y_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_1nc1y_17 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--cpd-color-icon-secondary);
}._visual-list-item-icon-success_1nc1y_22 {
  color: var(--cpd-color-icon-success-primary);
}._visual-list-item-icon-destructive_1nc1y_26 {
  color: var(--cpd-color-icon-critical-primary);
}@media (forced-colors: active) {
  ._visual-list-item_1nc1y_8 {
    outline: 1px solid transparent;
  }
}/* Questo file serve per poter sovrascrivere i css in shared.pcss */:root,
[class*="cpd-theme-"] {
    /* Colore primario accent */
    --cpd-color-text-action-accent: var(--dth-primary-color);
    /* Colore primario accent per la scelta delle opzioni in settings Tab */
    --cpd-color-bg-accent-rest: var(--dth-primary-color);
    /* Colore primario accent quando l'opzione è selezionata */
    --cpd-color-bg-accent-hovered: var(--dth-primary-color-opacity-80);
    /* Colore primario accent per le icone */
    --cpd-color-icon-accent-primary: var(--dth-primary-color);
}/* #region Light COLORS */:root .cpd-theme-light.cpd-theme-light,
.cpd-theme-light.cpd-theme-light {
    --cpd-color-theme-bg: #ffffff;
    --cpd-color-transparent: rgba(0, 0, 0, 0);
    /* Per tutti i colori vedi @vector-im/compound-design-tokens/assets/web/css/** */
}/* #endregion *//* #region Dark COLORS */:root .cpd-theme-dark.cpd-theme-dark,
.cpd-theme-dark.cpd-theme-dark {
    --cpd-color-theme-bg: #000000;
    --cpd-color-transparent: rgba(0, 0, 0, 0);
    /* Per tutti i colori vedi @vector-im/compound-design-tokens/assets/web/css/** */
}/* #endregion *//* override di shared.pcss *//* ATTENZIONE: *//* QUESTO FILE CONTIENE SOLO DEFINIZIONI TEMPORANEE PER EVITARE ERRORI DI COMPILAZIONE.*//* LE VARIABILI EFFETTIVE SONO DEFINITE IN res_custom/{build_name}/themes/_global.pcss*//* 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:rgba(0,0,0,.05)}}.maplibregl-ctrl button:not(:disabled):active{background-color:rgba(0,0,0,.05)}.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:rgba(0,0,0,.05)}.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;white-space:nowrap}.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}[dir=rtl] .maplibregl-popup-anchor-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[dir=rtl] .maplibregl-popup-anchor-right{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[dir=rtl] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start}[dir=rtl] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{-ms-flex-item-align:end;align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{-ms-flex-item-align:start;align-self:flex-start}.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:rgba(0,0,0,.05)}.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}@media (prefers-reduced-motion:reduce){.maplibregl-user-location-dot:before{-webkit-animation:none;animation:none}}@-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: var(--dth-button-border-radius);

    /* 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: "Titillium Web", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial",
    "Helvetica", sans-serif;
}@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: #fefefe;

    background-color: var(--dth-bg-light);
    color: var(--cpd-color-text-primary);
    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", "", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace;
    font-family: "Inconsolata", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace;
    font-size: 100% !important;
}.error,
.warning,
.text-error,
.text-warning {
    color: var(--cpd-color-text-critical-primary);
}.text-success {
    color: #38af9a;
    color: var(--cpd-color-text-action-accent);
}.text-muted {
    color: #61708b;
}.text-primary {
    color: var(--cpd-color-text-primary);
}.text-secondary {
    color: var(--cpd-color-text-secondary);
}.mx_Verified {
    color: var(--cpd-color-icon-success-primary);
}.mx_Untrusted {
    color: var(--cpd-color-icon-critical-primary);
}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: var(--cpd-color-text-primary);
    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: var(--cpd-color-text-link-external);
}: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("@vector-im/compound-design-tokens/icons/search.svg");
} *//* Icona direttamente dentro SearchBox */.mx_SearchBox_search_icon {
    padding: 0px 5px 0px 5px;
    color: var(--cpd-color-text-primary);
    height: 22px;
    width: 22px;
}/* 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: var(--cpd-color-text-primary);
}/* Required by Firefox */textarea {
    color: var(--cpd-color-text-primary);
}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: var(--cpd-color-text-primary);
    }.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: #9fa9ba;
        border-radius: 8px;
        border-radius: var(--dth-button-border-radius);
        border: 1px solid var(--cpd-color-gray-900);
        /* 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: #38af9a;
    color: var(--cpd-color-text-action-accent);
}#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: #fefefe;
    background-color: var(--dth-bg-light);
    color: #747474;
    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 {
        padding: "0px 2px";
        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", "", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
            font-family: "Inconsolata", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
            background-color: var(--cpd-color-bg-subtle-primary);
        }/* 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: var(--cpd-color-text-link-external);
        }.mx_Dialog .markdown-body blockquote {
            border-left: 2px solid var(--cpd-color-border-interactive-primary);
            color: var(--cpd-color-text-secondary);
            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: #030c1b4d;
    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.95;
        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: var(--cpd-color-text-primary);
    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: var(--cpd-color-text-critical-primary);
    }.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: var(--cpd-color-text-primary);
    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 */
        }.mx_Dialog_buttons .mx_Dialog_buttons_row_center {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }/* 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: #fefefe;
    color: var(--dth-bg-light);
    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 */
    /* TODO */
}.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 #38af9a;
    border: 1px solid var(--dth-primary-color);
    color: #fefefe;
    color: var(--dth-text-white);
    background-color: #38af9a;
    background-color: var(--dth-primary-color);
    font-family: inherit;
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);
}.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 {
    min-width: 156px;

    /* border: 1px solid $primary-submit-border-color;
    color: $primary-submit-text-color;
    background-color: $primary-submit-background-color; */
    font-family: inherit;
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);

    color: #fefefe;

    color: var(--dth-text-white);
    background-color: #38af9a;
    background-color: var(--dth-primary-color);
    border: 1px solid #38af9a;
    border: 1px solid var(--dth-primary-color);
}/* Custom */.mx_Dialog .mx_Dialog_buttons .mx_Dialog_buttons_row button.mx_Dialog_cancel {
    min-width: 156px;

    border: 1px solid #38af9a;

    border: 1px solid var(--dth-primary-color);
    color: #38af9a;
    color: var(--dth-primary-color);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    font-family: inherit;
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);
}.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: #fefefe;
    color: var(--dth-text-white);
}.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
    border: solid 1px var(--cpd-color-text-critical-primary);
    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: #747474;
    border: solid 1px #747474;
    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: #fefefe;
    color: var(--dth-bg-light);
    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: var(--cpd-color-text-primary);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
}.mx_button_row {
    margin-top: 69px;
}/* username colors *//* used by SenderProfile & RoomPreviewBar */.mx_Username_color1 {
    color: var(--cpd-color-blue-1100);
}.mx_Username_color2 {
    color: var(--cpd-color-fuchsia-1100);
}.mx_Username_color3 {
    color: var(--cpd-color-green-1100);
}.mx_Username_color4 {
    color: var(--cpd-color-pink-1100);
}.mx_Username_color5 {
    color: var(--cpd-color-orange-1100);
}.mx_Username_color6 {
    color: var(--cpd-color-cyan-1100);
}.mx_Username_color7 {
    color: var(--cpd-color-purple-1100);
}.mx_Username_color8 {
    color: var(--cpd-color-lime-1100);
}.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;
}/* #region SVG COLORS  */.mx_primary_color,
svg.mx_primary_color path,
svg.mx_primary_color * {
    color: var(--cpd-color-text-primary) !important;
    fill: currentColor !important;
}.mx_success_color,
svg.mx_success_color path,
svg.mx_success_color * {
    color: var(--cpd-color-text-success-primary) !important;
    fill: currentColor !important;
}.mx_danger_color,
svg.mx_danger_color,
svg.mx_danger_color path,
svg.mx_danger_color * {
    color: var(--cpd-color-text-critical-primary) !important;
    fill: currentColor !important;
}.mx_accent_color,
svg.mx_accent_color,
svg.mx_accent_color path,
svg.mx_accent_color * {
    color: #38af9a !important;
    color: var(--cpd-color-icon-accent-primary) !important;
    fill: currentColor !important;
}/* #endregion */.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 var(--cpd-color-bg-subtle-primary);

    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 var(--cpd-color-purple-900);
    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: var(--cpd-color-gray-900);
    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;
}.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: var(--cpd-color-gray-900);
}.mx_BeaconStatus_Active,
.mx_BeaconStatus_Error {
    --color: var(--cpd-color-text-primary);
}.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: var(--cpd-color-text-secondary);
}.mx_BeaconStatus_label {
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}.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: #fefefe;
    background: var(--dth-bg-light);
    -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
            box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
}.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: #fefefe;
            background-color: var(--dth-bg-light);
        }.mx_BeaconViewDialog_map {
    width: 80vw;
    height: 80vh;
    border-radius: 8px;
}.mx_BeaconViewDialog_mapFallbackMessage {
    color: var(--cpd-color-text-secondary);
    margin-bottom: 16px;
}.mx_BeaconViewDialog_viewListButton {
    position: absolute;
    top: 24px;
    left: 24px;
}.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: #fefefe;

    background: var(--dth-bg-light);
    border-radius: 8px;
    -webkit-box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
            box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);

    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 var(--cpd-color-purple-900);
    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;
}.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: #fefefe;

    background-color: var(--dth-bg-light);
    -webkit-box-shadow: 0px 4px 4px rgba(118, 131, 156, 0.6);
            box-shadow: 0px 4px 4px rgba(118, 131, 156, 0.6);
}.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: var(--cpd-color-text-primary);
    }.mx_DialogSidebar .mx_DialogSidebar_header .mx_DialogSidebar_closeButtonIcon {
            color: var(--cpd-color-gray-900);
        }.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: var(--cpd-color-text-secondary);
}.mx_LeftPanelLiveShareWarning {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    padding: 4px;
    text-align: center;

    background-color: #38af9a;

    background-color: var(--cpd-color-text-action-accent);
    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: var(--cpd-color-text-critical-primary);
}.mx_LiveTimeRemaining {
    color: var(--cpd-color-text-secondary);
    font-size: 0.75rem;
}.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: var(--cpd-color-text-critical-primary) !important;
    font-weight: var(--cpd-font-weight-semibold) !important;
}.mx_ShareLatestLocation_icon {
    height: 13px;
    width: 13px;
    color: var(--cpd-color-text-secondary);
}/* 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: var(--cpd-color-text-secondary);
            height: 13px;
            width: 13px;
        }.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: var(--cpd-color-purple-900);
    border-color: var(--cpd-color-purple-900);
    padding: 2px;
    /* colors icon */
    color: white;
}.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
    background-color: var(--cpd-color-text-critical-primary);
    border-color: var(--cpd-color-text-critical-primary);
}.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
    background-color: var(--cpd-color-gray-700);
    border-color: var(--cpd-color-gray-700);
}.mx_KebabContextMenu_icon {
    width: 24px;
    height: 24px;
    color: var(--cpd-color-icon-tertiary);
}.mx_PollDetailHeader {
    /* override accessiblebutton style */
    font-size: 0.9375rem !important;
}.mx_PollDetailHeader_icon {
    height: 16px;
    width: 16px;
    margin-right: 8px;
    vertical-align: middle;
}.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;
    gap: 8px;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    cursor: pointer;

    color: var(--cpd-color-text-primary);
}.mx_PollListItem_icon {
    height: 14px;
    width: 14px;
    color: var(--cpd-color-gray-700);
    padding-left: 8px;
}.mx_PollListItem_question {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.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: var(--cpd-color-text-primary);
    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;
    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: var(--cpd-color-gray-700);
    padding-left: 8px;
}.mx_PollListItemEnded_date {
    font-size: 0.75rem;
    color: var(--cpd-color-text-secondary);
}.mx_PollListItemEnded_question {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.mx_PollListItemEnded_answers {
    display: grid;
    grid-gap: 8px;
    gap: 8px;
    margin-top: 12px;
}.mx_PollListItemEnded_voteCount {
    /* 6px to match PollOption padding */
    margin: 8px 0 0 6px;
}.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: #38af9a;
                color: var(--cpd-color-text-action-accent);
            }.mx_AppWarning {
    font-size: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}.mx_AppWarning h4 {
        margin: 0;
        padding: 0;
    }.mx_FilterDropdown .mx_Dropdown_menu {
        margin-top: 4px;
        left: auto;
        left: initial;
        right: -12px;
        width: 232px;
        padding: 12px;

        border: 1px solid var(--cpd-color-gray-400);
        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: var(--cpd-color-bg-subtle-primary);
    }.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: var(--cpd-color-text-secondary);
        border-radius: 4px;
    }.mx_FilterDropdown .mx_Dropdown_input:focus,
        .mx_FilterDropdown .mx_Dropdown_input:hover {
            background-color: var(--cpd-color-gray-400);
            border-color: var(--cpd-color-gray-400);
        }.mx_FilterDropdown .mx_Dropdown_arrow {
        background: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-text-primary);
}.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: var(--cpd-color-text-secondary);
    margin-top: 4px;
}.mx_FilterTabGroup {
    color: var(--cpd-color-text-primary);
}.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: var(--cpd-color-text-secondary);
            }.mx_FilterTabGroup input[type="radio"]:checked + span {
            color: #38af9a;
            color: var(--cpd-color-text-action-accent);
            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;
        }.mx_LearnMore_button {
    margin-left: 4px;
}.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%;
}.mx_LiveDurationDropdown {
    margin-bottom: 16px;
}.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;
}.mx_MapError {
    padding: 100px 32px 0;
    text-align: center;

    --mx-map-error-icon-color: var(--cpd-color-text-secondary);
    --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: var(--cpd-color-bg-subtle-secondary);
    font-size: 0.75rem;
    line-height: 1rem;

    --mx-map-error-icon-color: var(--cpd-color-text-critical-primary);
    --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);
}.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: var(--cpd-color-bg-subtle-primary);
}.mx_MapFallback_bg {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    color: var(--cpd-color-gray-400);
    z-index: -1;

    pointer-events: none;
}.mx_MapFallback_icon {
    width: 65px;
    margin-bottom: 16px;
    color: var(--cpd-color-gray-700);
}.mx_Marker_defaultColor {
    color: #38af9a;
    color: var(--cpd-color-text-action-accent);
}.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;
}.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: var(--cpd-color-gray-400);
    opacity: 0.8;
    text-align: center;
    color: var(--cpd-color-text-secondary);
    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;
}.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: var(--cpd-color-text-primary);
}.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 var(--cpd-color-gray-400);
            border-radius: 8px;

            font-size: 0.9375rem;
            font-family: inherit;
            line-height: inherit;
            color: var(--cpd-color-text-primary);
        }.mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:hover,
            .mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:focus {
                border-color: #38af9a;
                border-color: var(--cpd-color-text-action-accent);
            }.mx_ShareType_badge {
    height: 60px;
    width: 60px;
    margin-bottom: 20px;
    background-color: #38af9a;
    background-color: var(--cpd-color-text-action-accent);
    border-radius: 50%;
    border: 14px solid #38af9a;
    border: 14px solid var(--cpd-color-text-action-accent);
    /* 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: #38af9a;
        border-color: var(--cpd-color-text-action-accent);
    }.mx_ShareType_option-icon.Pin {
        border-color: #38af9a;
        border-color: var(--cpd-color-text-action-accent);
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
        padding: 7px;
        /* colors icon */
        color: white;
    }.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: #fefefe;
        background: var(--dth-bg-light);
        -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: var(--cpd-color-text-primary);
        }.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: var(--cpd-color-bg-subtle-secondary);
    border-radius: 4px;
}.mx_MBeaconBody_withoutMapInfoLastUpdated {
    /* 48px lines up with icon in BeaconStatus */
    margin-top: -8px;
    padding: 0 8px 8px 48px;

    color: var(--cpd-color-gray-900);
    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;
}.mx_MediaProcessingError_Icon {
    margin-right: 4px;
    vertical-align: text-top;
}.mx_WidgetPip {
    width: 320px;
    height: 220px;
}.mx_WidgetPip_overlay {
    width: 320px;
    height: 220px;
    position: absolute;
    top: 0;
    border-radius: 8px;
    overflow: hidden;
    color: #ffffff;
    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));
}.mx_PollOption {
    border: 1px solid var(--cpd-color-gray-400);
    border-radius: 8px;
    padding: 6px 12px;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
}.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: var(--cpd-color-text-secondary);
    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: var(--cpd-color-bg-subtle-primary);
    margin-top: 8px;
}.mx_PollOption_popularityBackground .mx_PollOption_popularityAmount {
        width: 0%;
        height: 8px;
        border-radius: 8px;
        background-color: var(--cpd-color-gray-700);
    }/*
 * 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;
}.mx_CurrentDeviceSection_deviceDetails {
    /* align with text of session tile */
    margin-left: 56px;
}.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;
    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: var(--cpd-color-text-critical-primary);
    padding-right: 4px;
    display: block;
}.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 var(--cpd-color-gray-400);
}.mx_DeviceDetails_section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cpd-color-gray-400);

    display: grid;
    grid-gap: 24px;
    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: var(--cpd-color-text-secondary);
        line-height: 0.875rem;
        margin-top: 4px;
    }.mx_DeviceDetails_metadataTable {
    font: var(--cpd-font-body-sm-regular);
    color: var(--cpd-color-text-secondary);

    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: var(--cpd-color-text-primary);
    }.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;
    }.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: var(--cpd-color-gray-400);
    }.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
    --icon-transform: rotate(0deg);

    background: var(--cpd-color-bg-subtle-primary);
}.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded:hover {
        background: var(--cpd-color-gray-400);
    }.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;
}.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 var(--cpd-color-gray-400);
    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: var(--cpd-color-icon-success-primary);
        --background-color: var(--cpd-color-green-300);
    }.mx_DeviceSecurityCard_icon.Unverified {
        --icon-color: var(--cpd-color-icon-critical-primary);
        --background-color: var(--cpd-color-red-300);
    }.mx_DeviceSecurityCard_icon.Inactive {
        --icon-color: var(--cpd-color-text-secondary);
        --background-color: var(--cpd-color-bg-subtle-secondary);
    }.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: var(--cpd-color-text-secondary);
}.mx_DeviceSecurityCard_actions {
    margin-top: 16px;
}.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: var(--cpd-color-text-secondary);
}.mx_DeviceTile_inactiveIcon {
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
}.mx_DeviceTile_actions {
    display: grid;
    grid-gap: 8px;
    gap: 8px;
    grid-auto-flow: column;
    margin-left: 8px;
}.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: var(--cpd-color-bg-subtle-secondary);
    --icon-color: var(--cpd-color-text-secondary);

    height: 40px;
    width: 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    border: 8px solid var(--background-color);
    border-radius: 50%;
    color: var(--cpd-color-text-secondary);
    color: var(--icon-color);
    background-color: var(--background-color);
}.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
    --background-color: var(--cpd-color-text-primary);
    --icon-color: var(--dth-bg-light);
}.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 var(--cpd-color-gray-400);
    border-radius: 50%;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);

    color: var(--v-icon-color);
}.mx_DeviceTypeIcon_verificationIcon.verified {
        --v-icon-color: var(--cpd-color-icon-success-primary);
    }.mx_DeviceTypeIcon_verificationIcon.unverified {
        --v-icon-color: var(--cpd-color-icon-critical-primary);
    }.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;
    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;
}.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: var(--cpd-color-bg-subtle-secondary);
    border-radius: 8px;
    color: var(--cpd-color-text-secondary);
}/* 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%;
}.mx_SecurityRecommendations_spacing {
    height: 16px;
}.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);
    }.mx_KeyStoragePanel_toggleRow {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}.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: var(--cpd-color-text-secondary);
}.mx_SettingsSubsection_content {
    width: 100%;
    display: grid;
    grid-gap: 8px;
    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: #38af9a;
        color: var(--cpd-color-text-action-accent);
    }.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;
    }.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%;
}.mx_QuickThemeSwitcher {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    gap: 0.5rem;
}.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: 120px;
    }.mx_QuickThemeSwitcher_heading {
    font-weight: var(--cpd-font-weight-semibold);
    font-size: 0.75rem;
    line-height: 0.9375rem;
    color: var(--cpd-color-text-secondary);
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
}.mx_Caption {
    font: var(--cpd-font-body-sm-regular);
    color: var(--cpd-color-text-secondary);
}.mx_Caption.mx_Caption_error {
        color: var(--cpd-color-text-critical-primary);
    }/*
 * Compound icon

 * {@link https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed}
 */.mx_Icon {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}.mx_Icon_accent {
    color: #38af9a;
    color: var(--cpd-color-text-action-accent);
}.mx_Icon_bg-accent-light {
    background-color: var(--cpd-color-green-300);
}.mx_Icon_alert {
    color: var(--cpd-color-text-critical-primary);
}.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;
}.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: var(--cpd-color-text-secondary);
        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;
            }/* make any scrollbar grey and thin */html {
    scrollbar-color: rgba(0, 0, 0, 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(0, 0, 0, 0.2);
}/* make auto-hide scrollbars not transparent again on hover */.mx_AutoHideScrollbar:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 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;
}.mx_AutocompleteInput {
    position: relative;
}.mx_AutocompleteInput_search_icon {
    margin-left: 8px;
    fill: var(--cpd-color-text-secondary);
}.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 var(--cpd-color-border-interactive-secondary);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    border-radius: 8px;
    -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: var(--cpd-color-text-primary) !important;
        font-weight: normal !important;
    }.mx_AutocompleteInput_editor > input::-webkit-input-placeholder {
            color: var(--cpd-color-text-primary) !important;
            font-weight: normal !important;
        }.mx_AutocompleteInput_editor > input::-moz-placeholder {
            color: var(--cpd-color-text-primary) !important;
            font-weight: normal !important;
        }.mx_AutocompleteInput_editor > input:-ms-input-placeholder {
            color: var(--cpd-color-text-primary) !important;
            font-weight: normal !important;
        }.mx_AutocompleteInput_editor > input::-ms-input-placeholder {
            color: var(--cpd-color-text-primary) !important;
            font-weight: normal !important;
        }.mx_AutocompleteInput_editor > input::placeholder {
            color: var(--cpd-color-text-primary) !important;
            font-weight: normal !important;
        }.mx_AutocompleteInput_editor--focused {
    border-color: var(--cpd-color-text-link-external);
}.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: #38af9a;
    background-color: var(--dth-primary-color);
    color: #fefefe;
    color: var(--dth-text-white);
    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: #fefefe;
    background-color: var(--dth-bg-light);
    border: 1px solid var(--cpd-color-text-link-external);
    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: var(--cpd-color-gray-400);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }.mx_AutocompleteInput_suggestion--selected {
    background-color: var(--cpd-color-gray-400);
}.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: var(--cpd-color-text-secondary);
    font-size: 0.75rem;
}.mx_BackdropPanel {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    -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;
}.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: var(--cpd-color-text-primary);
    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 #fefefe;
    border-left: 8px solid var(--dth-bg-light);
    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 #fefefe;
    border-right: 8px solid var(--dth-bg-light);
    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 #fefefe;
    border-bottom: 8px solid var(--dth-bg-light);
    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 #fefefe;
    border-top: 8px solid var(--dth-bg-light);
    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%);
}.mx_ErrorMessage {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--cpd-color-text-critical-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 0.75rem;
    gap: 8px;
    line-height: 1.2em;
    min-height: 2.4em;
}@-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: #fefefe;

    background-color: var(--dth-bg-light);
    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;
}.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: var(--cpd-color-text-secondary); /* 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;
    }.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: var(--cpd-color-text-secondary);
}.mx_GenericDropdownMenu_button:hover,
.mx_GenericDropdownMenu_button[aria-expanded="true"] {
    background: var(--cpd-color-gray-400);
}.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: var(--cpd-color-text-secondary);
        padding-top: 10px;
        padding-bottom: 10px;

        border: 1px solid var(--cpd-color-gray-400);
        -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: var(--cpd-color-gray-400);
    }.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu_chevron_top::after {
            content: "";
            border: inherit;
            border-bottom-color: #fefefe;
            border-bottom-color: var(--dth-bg-light);
            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 var(--cpd-color-gray-400);
    }.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: var(--cpd-color-text-primary);
                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: #f5f8fa;
            }.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: var(--cpd-color-text-primary);
                display: inline-block;
                vertical-align: middle;
            }.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: #61708b;
    }.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: #38af9a;
            background-color: var(--cpd-color-text-action-accent);
        }.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 {
                /* mask-image: url("$(res)/img/element-icons/feedback.svg"); */
                -webkit-mask-image: url(../../customIcons/chats-neg-icon.5d732d2.svg);
                        mask-image: url(../../customIcons/chats-neg-icon.5d732d2.svg);
                -webkit-mask-image: var(--chat-icon-mask-image);
                        mask-image: var(--chat-icon-mask-image);
            }.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 {
                /* mask-image: url("$(res)/img/element-icons/group-members.svg"); */
                -webkit-mask-image: url(../../customIcons/group-members-neg-icon.1aa9df4.svg);
                        mask-image: url(../../customIcons/group-members-neg-icon.1aa9df4.svg);
                -webkit-mask-image: var(--group-chat-solid-icon-mask-image);
                        mask-image: var(--group-chat-solid-icon-mask-image);
            }.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createCall::before {
                /* mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); */
                -webkit-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                        mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                -webkit-mask-image: var(--call-icon-mask-image);
                        mask-image: var(--call-icon-mask-image);
            }.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;
    }.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_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(245, 245, 245, 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(245, 245, 245, 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(245, 245, 245, 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 var(--cpd-color-gray-400);

            -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: #38af9a80;
                background-color: var(--dth-primary-color-opacity-50);
                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: var(--cpd-color-text-secondary);
                }.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: #38af9a80;
                background-color: var(--dth-primary-color-opacity-50);
                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: var(--cpd-color-text-secondary);
                }.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: var(--cpd-color-gray-900);
                }.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: #fefefe;
                        background-color: var(--dth-bg-light);
                    }.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;
                }.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;
    /* Important to force the color on ED titlebar until we remove the old room list */
    background-color: var(--cpd-color-bg-canvas-default) !important;
}.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: var(--cpd-color-text-primary);
        opacity: 0.8;
    }.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: #fefefe;
    background-color: var(--dth-bg-light);

    -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: var(--cpd-color-text-primary);
        opacity: 0.8;
    }.mx_MessagePanel_myReadMarker {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}.mx_MessagePanel_myReadMarker hr {
        border-top: solid 1px var(--cpd-color-gray-400);
        border-bottom: solid 1px var(--cpd-color-gray-400);
        border-left: solid 0px var(--cpd-color-gray-400);
        border-right: solid 0px var(--cpd-color-gray-400);
        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: 100%;
        opacity: 1;
    }.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;
    }.mx_QuickSettingsButton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    border-radius: 8px;
    position: relative;
    margin: 12px auto;
    color: var(--cpd-color-text-primary);
    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(../../customIcons/settings-neg-icon.c9b09e5.svg);
                mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
        -webkit-mask-image: var(--quick-settings-mask-image);
                mask-image: var(--quick-settings-mask-image);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 24px;
                mask-size: 24px;
        background: var(--cpd-color-text-secondary);
    }.mx_QuickSettingsButton:not(.expanded):hover {
        background-color: var(--cpd-color-gray-700);
    }.mx_QuickSettingsButton:not(.expanded):hover::before {
            background-color: var(--cpd-color-text-primary);
        }.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: var(--cpd-color-text-secondary);
    width: 18px;
    height: 18px;
    margin-top: auto;
    margin-bottom: auto;
}.mx_LiveKitCallUI_controlBar {
    border-top: 1px solid var(--cpd-color-gray-400);
}/* #region ConnectingRoom */.mx_LiveKitCallUI_connecting_layer {
    position: absolute;
    inset: 0;
    z-index: 10;
}.mx_LiveKitCallUI_connecting_layer_bg {
    position: absolute;
    inset: 0;
    background: #fefefe;
    background: var(--dth-bg-light);
    /* opacity: 0.6; */
    z-index: 10;
}.mx_LiveKitCallUI_connecting_layer_text {
    position: absolute;
    inset: 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;
    z-index: 11;
    color: var(--cpd-color-text-primary);
    /* opacity: 1; */
    background: none;
}.mx_LiveKitCallUI_connecting_layer_text p {
    position: absolute;
    inset: 0;
    background: transparent;
    /* opacity: 1; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: bold;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 11;
    color: var(--cpd-color-text-primary);
}/* #endregion *//* #region WaitingRoom */.mx_LiveKitCallUI_waiting_layer {
    position: absolute;
    inset: 0;
    z-index: 10;
}.mx_LiveKitCallUI_waiting_layer_bg {
    position: absolute;
    inset: 0;
    background: #fefefe;
    background: var(--dth-bg-light);
    opacity: 0.6;
    z-index: 10;
}.mx_LiveKitCallUI_waiting_layer_text {
    position: absolute;
    inset: 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;
    z-index: 11;
    color: var(--cpd-color-text-primary);
    opacity: 1;
    background: none;
}.mx_LiveKitCallUI_waiting_layer_text p {
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: bold;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 11;
    color: var(--cpd-color-text-primary);
}/* #endregion *//* #region LiveKit Overrides */.lk-participant-metadata {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}.lk-participant-metadata .lk-participant-metadata-item {
        background-color: rgba(0, 0, 0, 0.1);
    }.lk-participant-metadata .lk-participant-metadata-item .lk-track-muted-indicator-microphone {
            height: auto;
            width: auto;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-line-pack: center;
                align-content: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }.lk-participant-metadata .lk-participant-metadata-item .lk-track-muted-indicator-microphone[data-lk-muted="true"] {
                opacity: 1;
            }.lk-participant-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 2px;
}body.cpd-theme-dark [data-lk-theme="default"],
body [data-lk-theme="default"] {
    color-scheme: dark;
    --lk-bg: var(--dth-bg-dark);
    --lk-bg2: color-mix(in srgb, var(--lk-bg), white 5%);
    --lk-bg3: color-mix(in srgb, var(--lk-bg), white 10%);
    --lk-bg4: color-mix(in srgb, var(--lk-bg), white 15%);
    --lk-bg5: color-mix(in srgb, var(--lk-bg), white 20%);
    --lk-fg: var(--dth-text-white);
    --lk-fg2: color-mix(in srgb, var(--lk-fg), black 5%);
    --lk-fg3: color-mix(in srgb, var(--lk-fg), black 10%);
    --lk-fg4: color-mix(in srgb, var(--lk-fg), black 15%);
    --lk-fg5: color-mix(in srgb, var(--lk-fg), black 20%);
    --lk-border-color: rgba(255, 255, 255, 0.1);
    --lk-accent-fg: var(--dth-text-white);
    --lk-accent-bg: var(--dth-primary-color);
    --lk-accent2: color-mix(in srgb, var(--lk-accent-bg), white 9%);
    --lk-accent3: color-mix(in srgb, var(--lk-accent-bg), white 18%);
    --lk-accent4: color-mix(in srgb, var(--lk-accent-bg), white 27%);
    --lk-danger-fg: var(--dth-text-white);
    --lk-danger: rgb(249, 31, 49);
    --lk-danger2: color-mix(in srgb, var(--lk-danger), white 9%);
    --lk-danger3: color-mix(in srgb, var(--lk-danger), white 18%);
    --lk-danger4: color-mix(in srgb, var(--lk-danger), white 27%);
    --lk-success-fg: var(--dth-text-white);
    --lk-success: rgb(31, 249, 104);
    --lk-success2: color-mix(in srgb, var(--lk-success), white 9%);
    --lk-success3: color-mix(in srgb, var(--lk-success), white 18%);
    --lk-success4: color-mix(in srgb, var(--lk-success), white 27%);
    --lk-control-fg: var(--lk-fg);
    --lk-control-bg: var(--lk-bg2);
    --lk-control-hover-bg: var(--lk-bg3);
    --lk-control-active-bg: var(--lk-bg4);
    --lk-control-active-hover-bg: var(--lk-bg5);
    --lk-connection-excellent: rgb(6, 219, 77);
    --lk-connection-good: rgb(249, 177, 31);
    --lk-connection-poor: rgb(249, 31, 49);
    --lk-font-family: "Titillium Web", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial",
    "Helvetica", sans-serif;
    --lk-font-size: 16px;
    --lk-line-height: 1.5;
    --lk-border-radius: 0.5rem;
    --lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    --lk-drop-shadow: rgba(255, 255, 255, 0.2) 0px 0px 24px;
    --lk-grid-gap: 0.5rem;
    --lk-control-bar-height: 69px;
    --lk-chat-header-height: 69px;
}body.cpd-theme-light [data-lk-theme="default"] {
    color-scheme: light;
    --lk-bg: var(--dth-bg-light);
    --lk-bg2: color-mix(in srgb, var(--lk-bg), black 5%);
    --lk-bg3: color-mix(in srgb, var(--lk-bg), black 10%);
    --lk-bg4: color-mix(in srgb, var(--lk-bg), black 15%);
    --lk-bg5: color-mix(in srgb, var(--lk-bg), black 20%);
    --lk-fg: var(--dth-text-black);
    --lk-fg2: color-mix(in srgb, var(--lk-fg), white 5%);
    --lk-fg3: color-mix(in srgb, var(--lk-fg), white 10%);
    --lk-fg4: color-mix(in srgb, var(--lk-fg), white 15%);
    --lk-fg5: color-mix(in srgb, var(--lk-fg), white 20%);
    --lk-border-color: rgba(255, 255, 255, 0.1);
    --lk-accent-fg: var(--dth-text-white);
    --lk-accent-bg: var(--dth-primary-color);
    --lk-accent2: color-mix(in srgb, var(--lk-accent-bg), white 9%);
    --lk-accent3: color-mix(in srgb, var(--lk-accent-bg), white 18%);
    --lk-accent4: color-mix(in srgb, var(--lk-accent-bg), white 27%);
    --lk-danger-fg: var(--dth-text-white);
    --lk-danger: rgb(249, 31, 49);
    --lk-danger2: color-mix(in srgb, var(--lk-danger), white 9%);
    --lk-danger3: color-mix(in srgb, var(--lk-danger), white 18%);
    --lk-danger4: color-mix(in srgb, var(--lk-danger), white 27%);
    --lk-success-fg: var(--dth-text-white);
    --lk-success: rgb(31, 249, 104);
    --lk-success2: color-mix(in srgb, var(--lk-success), white 9%);
    --lk-success3: color-mix(in srgb, var(--lk-success), white 18%);
    --lk-success4: color-mix(in srgb, var(--lk-success), white 27%);
    --lk-control-fg: var(--lk-fg);
    --lk-control-bg: var(--lk-bg2);
    --lk-control-hover-bg: var(--lk-bg3);
    --lk-control-active-bg: var(--lk-bg4);
    --lk-control-active-hover-bg: var(--lk-bg5);
    --lk-connection-excellent: rgb(6, 219, 77);
    --lk-connection-good: rgb(249, 177, 31);
    --lk-connection-poor: rgb(249, 31, 49);
    --lk-font-family: "Titillium Web", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial",
    "Helvetica", sans-serif;
    --lk-font-size: 16px;
    --lk-line-height: 1.5;
    --lk-border-radius: 0.5rem;
    --lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    --lk-drop-shadow: rgba(255, 255, 255, 0.2) 0px 0px 24px;
    --lk-grid-gap: 0.5rem;
    --lk-control-bar-height: 69px;
    --lk-chat-header-height: 69px;
}/*
// ORIGINALE
[data-lk-theme=default] {
    color-scheme: dark;
    --lk-bg: #111;
    --lk-bg2: rgb(29.75, 29.75, 29.75);
    --lk-bg3: rgb(42.5, 42.5, 42.5);
    --lk-bg4: rgb(55.25, 55.25, 55.25);
    --lk-bg5: #444444;
    --lk-fg: #fff;
    --lk-fg2: rgb(244.8, 244.8, 244.8);
    --lk-fg3: rgb(234.6, 234.6, 234.6);
    --lk-fg4: rgb(224.4, 224.4, 224.4);
    --lk-fg5: rgb(214.2, 214.2, 214.2);
    --lk-border-color: rgba(255, 255, 255, 0.1);
    --lk-accent-fg: #fff;
    --lk-accent-bg: #1f8cf9;
    --lk-accent2: rgb(50.867826087, 150.2, 249.532173913);
    --lk-accent3: rgb(70.7356521739, 160.4, 250.0643478261);
    --lk-accent4: rgb(90.6034782609, 170.6, 250.5965217391);
    --lk-danger-fg: #fff;
    --lk-danger: #f91f31;
    --lk-danger2: rgb(249.532173913, 50.867826087, 67.2713043478);
    --lk-danger3: rgb(250.0643478261, 70.7356521739, 85.5426086957);
    --lk-danger4: rgb(250.5965217391, 90.6034782609, 103.8139130435);
    --lk-success-fg: #fff;
    --lk-success: #1ff968;
    --lk-success2: rgb(50.867826087, 249.532173913, 117.3930434783);
    --lk-success3: rgb(70.7356521739, 250.0643478261, 130.7860869565);
    --lk-success4: rgb(90.6034782609, 250.5965217391, 144.1791304348);
    --lk-control-fg: var(--lk-fg);
    --lk-control-bg: var(--lk-bg2);
    --lk-control-hover-bg: var(--lk-bg3);
    --lk-control-active-bg: var(--lk-bg4);
    --lk-control-active-hover-bg: var(--lk-bg5);
    --lk-connection-excellent: #06db4d;
    --lk-connection-good: #f9b11f;
    --lk-connection-poor: #f91f31;
    --lk-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --lk-font-size: 16px;
    --lk-line-height: 1.5;
    --lk-border-radius: 0.5rem;
    --lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    --lk-drop-shadow: rgba(255, 255, 255, 0.2) 0px 0px 24px;
    --lk-grid-gap: 0.5rem;
    --lk-control-bar-height: 69px;
    --lk-chat-header-height: 69px;
} *//* #endregion */.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;
}/* 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: #ededed;
    background-color: var(--dth-primary-light-grey);
    /* 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: var(--cpd-color-text-secondary);
        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: transparent;
        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: #747474;
        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: #38af9acc;
        background-color: var(--dth-primary-color-opacity-80);
    }.mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText {
            color: #fefefe;
            color: var(--dth-text-white);
        }.mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt {
            background-color: transparent;
            color: #fefefe;
            color: var(--dth-text-white);
        }.mx_RoomSearch:hover .mx_RoomSearch_icon {
            background-color: #fefefe;
            background-color: var(--dth-text-white);
        }.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 #fefefe;
    border: 1px solid var(--dth-bg-light);
    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: var(--cpd-color-text-critical-primary);
    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: var(--cpd-color-bg-subtle-primary);
        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: var(--cpd-color-text-critical-primary);
        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: #61708b;
    }.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 var(--cpd-color-gray-400);
            }.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton::before {
                content: "";
                position: absolute;
                left: 10px; /* inset for regular button padding */
                background-color: #61708b;
                -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                -webkit-mask-position: center;
                        mask-position: center;
                -webkit-mask-size: contain;
                        mask-size: contain;
                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(../../customIcons/trash-icon.4ae7ffa.svg);
                        mask-image: url(../../customIcons/trash-icon.4ae7ffa.svg);
                -webkit-mask-image: var(--trash-icon-mask-image);
                        mask-image: var(--trash-icon-mask-image);
            }.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: var(--cpd-color-text-critical-primary);
}.mx_RoomStatusBar_connectionLostBar_desc {
    color: var(--cpd-color-text-primary);
    font-size: 0.8125rem;
    opacity: 0.5;
    padding-bottom: 20px;
}.mx_RoomStatusBar_resend_link {
    color: var(--cpd-color-text-primary) !important;
    text-decoration: underline !important;
    cursor: pointer;
}.mx_RoomStatusBar_typingBar {
    height: 50px;
    line-height: 50px;

    color: var(--cpd-color-text-primary);
    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;
    }: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 transparent;
    padding: 10px 26px;
    color: var(--cpd-color-text-critical-primary);
    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: var(--cpd-color-gray-900);
        -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: #fefefe;
    background-color: var(--dth-bg-light);
    z-index: 1000;
    overflow: hidden;

    -webkit-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;
}.mx_RoomView_statusArea_expanded {
    max-height: 100px;
}.mx_RoomView_statusAreaBox {
    margin: auto;
    min-height: 50px;
}.mx_RoomView_statusAreaBox_line {
    margin-left: 65px;
    border-top: 1px solid transparent;
    height: 1px;
}.mx_RoomView_messageListWrapper {
    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;
    }.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);
    }.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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-text-primary);
        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: var(--cpd-color-text-critical-primary);
        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: var(--cpd-color-text-primary);
        }.mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > span {
            margin-left: 8px;
            font-size: 0.9375rem;
            line-height: 1.5rem;
            color: var(--cpd-color-text-secondary);
        }.mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle {
        position: absolute;
        left: -1px;
        top: 10px;
        height: 16px;
        width: 16px;
        border-radius: 4px;
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
    }.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: var(--cpd-color-gray-900);
            -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: var(--cpd-color-gray-900);
                            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: #38af9a;
                                background-color: var(--cpd-color-text-action-accent);
                                -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: var(--cpd-color-text-secondary);
                        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: rgba(232, 232, 232, 0.77);
                }.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: rgba(232, 232, 232, 0.77);
            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: var(--cpd-color-text-secondary);
        }.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;
    }.mx_SpacePanel {
    --activeBackground-color: var(--dth-primary-color-opacity-80);
    --activeBorder-color: var(--cpd-color-text-primary);
    --activeBorder-transparent-gap: 1px;
    --gutterSize: 14px;
    --height-nested: 24px;
    --height-topLevel: 32px;

    background-color: rgba(232, 232, 232, 0.77);
    -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: #38af9a;
        background-color: var(--dth-primary-color);
        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: #fefefe;
            background-color: var(--dth-bg-light);
            -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;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 4px 4px 4px 0;
        width: 100%;
        cursor: pointer;
    }.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active {
            color: #fefefe;
            color: var(--dth-text-white);
        }.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: var(--cpd-color-gray-900);
            -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: var(--cpd-color-alpha-gray-300);
            }.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: var(--cpd-color-text-secondary);
                }.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: var(--cpd-color-text-primary);
                -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: var(--cpd-color-text-primary);
            }.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 rgba(232, 232, 232, 0.77);
        }.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,
        .mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char {
            margin: -5px -5px 0 0;
            border: 2px solid rgba(232, 232, 232, 0.77);
        }.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: 4px 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 .mx_SpacePanel_versionLabel {
        text-align: center;
        font-size: 12px;
        color: var(--cpd-color-text-primary);
        padding: 8px 0;
        opacity: 0.8;
    }.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(../../customIcons/settings-neg-icon.c9b09e5.svg);
                mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
        -webkit-mask-image: var(--quick-settings-mask-image);
                mask-image: var(--quick-settings-mask-image);
    }.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave::before {
        -webkit-mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
                mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
        -webkit-mask-image: var(--leave-mask-image);
                mask-image: var(--leave-mask-image);
    }.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: var(--cpd-color-gray-900);
        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;
    }.mx_AccessibleButton.mx_SpaceButton.mx_SpaceButton_active .mx_SpaceButton_icon {
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
    }.mx_AccessibleButton.mx_SpaceButton.mx_SpaceButton_active .mx_SpaceButton_icon::before {
        background-color: #fefefe;
        background-color: var(--dth-text-white);
    }.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: var(--cpd-color-text-primary);
            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: var(--cpd-color-text-secondary);
            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: var(--cpd-color-text-critical-primary);
            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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-gray-900);
                        -webkit-mask-size: contain;
                                mask-size: contain;
                        -webkit-mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
                                mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
                        -webkit-mask-image: var(--quick-settings-mask-image);
                                mask-image: var(--quick-settings-mask-image);
                    }.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: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-gray-900);
    }.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: var(--cpd-color-text-primary);
        }.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: var(--cpd-color-text-secondary);
            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: var(--cpd-color-text-secondary);
                    -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);
                }.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%
                );
    }.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: var(--cpd-color-text-primary);
        background-color: #38af9a80;
        background-color: var(--dth-primary-color-opacity-50);
    }.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 {
        color: #fefefe;
        color: var(--dth-text-white);
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
    }.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: var(--cpd-color-gray-900);
        }.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: #38af9a;
        color: var(--cpd-color-text-action-accent);
    }.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text {
            color: #38af9a;
            color: var(--cpd-color-text-action-accent);
        }.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
    }.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: var(--cpd-color-text-secondary);
}.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: 8px;
    border-radius: var(--dth-button-border-radius);
    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;
            }
}.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: var(--cpd-color-text-secondary);
        }.mx_ThreadsActivityCentreButton:not(.expanded):hover,
        .mx_ThreadsActivityCentreButton:not(.expanded):hover .mx_ThreadsActivityCentreButton_Icon {
            background-color: var(--cpd-color-gray-700);
            fill: var(--cpd-color-text-primary);
        }.mx_ThreadsActivityCentreButton .mx_ThreadsActivityCentreButton_Icon {
        fill: var(--cpd-color-text-secondary);
    }.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;
}.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: var(--cpd-color-bg-subtle-primary);
        -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: var(--cpd-color-text-primary);
        -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: var(--cpd-color-text-primary);
            }/* 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: var(--cpd-color-icon-critical-primary);
                }.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: var(--cpd-color-text-primary);
            }.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_key_storage::after {
                -webkit-mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
                        mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
                -webkit-mask-image: var(--quick-settings-mask-image);
                        mask-image: var(--quick-settings-mask-image);
                background-color: var(--cpd-color-text-primary);
            }.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: var(--cpd-color-text-secondary);
            }.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: var(--cpd-color-text-secondary);
                -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: var(--cpd-color-text-secondary);
            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;
        }.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: #61708b;
    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: #61708b;
        -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: #61708b;
    -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
            mask-image: url(../../icons/close.5ef7caf.svg);
}.mx_Logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding-bottom: 12px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    /* border-bottom: 1px solid var(--cpd-color-gray-400); */
    margin: 12px 14px 4px 18px;
}.mx_Logo_icon {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -ms-flex-negative: 0;
        flex-shrink: 0; /* evita che l’icona si riduca */
}.mx_Logo_icon_expanded {
    width: 80%;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -ms-flex-negative: 0;
        flex-shrink: 0; /* evita che l’icona si riduca */
}.mx_Logo_text {
    margin-left: 8px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}/* Nascondi il testo quando il pannello è collassato */.mx_Logo_collapsed .mx_Logo_text {
    display: none;
}.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: 290px;
    }.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: var(--cpd-color-gray-400);
            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_account::before {
        -webkit-mask-image: url(../../img/element-icons/user-profile.1359ffe.svg);
                mask-image: url(../../img/element-icons/user-profile.1359ffe.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(../../customIcons/settings-neg-icon.c9b09e5.svg);
                mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
        -webkit-mask-image: var(--quick-settings-mask-image);
                mask-image: var(--quick-settings-mask-image);
    }.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(../../customIcons/leave-chat-icon.ac05702.svg);
                mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
        -webkit-mask-image: var(--sign-out-mask-image);
                mask-image: var(--sign-out-mask-image);
    }.mx_UserMenu_contextMenu .mx_UserMenu_iconQr::before {
        -webkit-mask-image: url(../../icons/qr-code.b517d20.svg);
                mask-image: url(../../icons/qr-code.b517d20.svg);
    }.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 var(--cpd-color-gray-400);
        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: var(--cpd-color-text-primary);
        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%;
    }.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: var(--cpd-color-gray-900);
}.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: var(--cpd-color-text-critical-primary);
        }.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;
}.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: #fefefe;
    color: var(--dth-bg-light);
    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: 12px;
    margin-bottom: 12px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);
    background: #38af9a;
    background: var(--dth-primary-color);
}.mx_Login_submit:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}.mx_Login_cancel {
    /* align images in buttons (eg spinners) */
    vertical-align: middle;
    border: 0px;
    border-radius: 24px;
    font: var(--cpd-font-body-md-regular);
    color: #fefefe;
    color: var(--dth-bg-light);
    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_cancel:not(:focus-visible) {
        outline: none;
    }.mx_Login_cancel{
    font-size: 15px;
    font-weight: var(--cpd-font-weight-semibold);
    width: 100%;
    margin-top: 12px;
    margin-bottom: 12px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    color: #38af9a;
    color: var(--dth-primary-color);
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);
    background: #fefefe;
    background: var(--dth-bg-light);
    border: 1px solid #38af9a;
    border: 1px solid var(--dth-primary-color);
}.mx_Login_cancel:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}/*TODO Vedere quando si farà il tema*//* .mx_Login_submit:hover {
    
} */.mx_Login_loader {
    position: relative;
    height: 100%;
}.mx_Login_loader .mx_Spinner {
    height: auto;
    width: auto;
    margin: 8px 0px 0px 0px;
}.mx_Login_loader .mx_Spinner img {
    width: 16px;
    height: 16px;
}.mx_Login_error {
    color: var(--cpd-color-text-critical-primary);
    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: var(--cpd-color-text-primary);
}.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 #38af9a;
    border-bottom: 1px dashed var(--cpd-color-text-action-accent);
}div.mx_AccessibleButton_kind_link.mx_Login_forgot {
    display: block;
    /* margin-top: 24px; */
    text-align: right;
    padding-right: 12px;
}div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
        cursor: not-allowed;
    }div.mx_AccessibleButton_kind_link.mx_Login_register {
    display: block;
    /* margin-top: 24px; */
    text-align: right;
    padding-right: 12px;
}div.mx_AccessibleButton_kind_link.mx_Login_register.mx_AccessibleButton_disabled {
        cursor: not-allowed;
    }div.mx_AccessibleButton_kind_link.mx_sign_in_instead_button {
    display: block;
    /* margin-top: 24px; */
    text-align: right;
    padding-right: 12px;
    color: #38af9a;
    color: var(--dth-primary-color);
}div.mx_AccessibleButton_kind_link.mx_sign_in_instead_button.mx_AccessibleButton_disabled {
        cursor: not-allowed;
    }div.mx_AccessibleButton_kind_link.mx_resend_button {
    display: block;
    text-align: right;
    padding-right: 12px;
    color: #38af9a;
    color: var(--dth-primary-color);
}div.mx_AccessibleButton_kind_link.mx_resend_button:hover {
        background-color: var(--cpd-color-bg-subtle-primary);
    }.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;
}.separatorWithText {
    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%;
    gap: 8px;
    gap: var(--cpd-space-2x, 8px);
}.line {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 1px;
    background-color: var(--cpd-color-gray-400);
    opacity: 0.6;
}.text {
    color: var(--cpd-color-text-secondary);
    font-size: 0.875rem;
    font-size: var(--cpd-font-size-200, 0.875rem);
    font-weight: 500;
    white-space: nowrap;
}/* #region OTP */.mx_OtpScreen_loader {
    position: relative;
    height: 100%;
}.mx_OtpScreen_loader .mx_Spinner {
    height: auto;
    width: auto;
    margin: 8px 0px;
}.mx_OtpScreen_loader .mx_Spinner img {
    width: 16px;
    height: 16px;
}/* #endregion *//* #region OTP */.mx_OtpScreen_loader {
    position: relative;
    height: 100%;
}.mx_OtpScreen_loader .mx_Spinner {
    height: auto;
    width: auto;
    margin: 8px 0px;
}.mx_OtpScreen_loader .mx_Spinner img {
    width: 16px;
    height: 16px;
}/* #endregion */.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: #f4f6fa;
    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%);
}.mx_MobileRegister_body {
    padding: 32px;
    height: 100vh;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}.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: var(--cpd-color-text-primary);
    }.mx_Register_mainContent p.secondary {
            color: #6a6a6a;
            color: var(--dth-primary-dark-grey);
        }.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;
    }.mx_Registration_error {
    color: var(--cpd-color-text-critical-primary);
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 12px;
}.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;
    }.mx_SetupEncryptionBody_reset {
    color: #747474;
    margin-top: 0.875rem;
}.mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link.mx_AccessibleButton_kind_link_inline {
            color: var(--cpd-color-text-critical-primary);
        }.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: var(--cpd-color-bg-subtle-primary);
}.mx_PlayPauseButton::before {
        content: "";
        position: absolute; /* sizing varies by icon */
        background-color: var(--cpd-color-text-secondary);
        -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);
    }/* 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: var(--cpd-color-gray-700);
            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: var(--cpd-color-text-secondary);
            }.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;
        }/* Flex row for timeline body and speed button */.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineRow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 0px;
        width: 100%;
    }.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_PlaybackSpeedButton {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        border: 1.5px solid #38af9a;
        border: 1.5px solid var(--cpd-color-text-action-accent);
        border-radius: 12px;
        background: transparent;
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.75rem;
        line-height: 1.25rem;
        padding: 0 8px;
        min-width: 36px;
        cursor: pointer;
        white-space: nowrap;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        margin-left: 8px;
    }.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_PlaybackSpeedButton:hover {
            background: rgba(56,175,154, 0.1);
            background: rgba(56,175,154, 0.1);
            background: rgba(var(--cpd-color-text-action-accent), 0.1);
        }.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_PlaybackSpeedButton:active {
            background: rgba(56,175,154, 0.2);
            background: rgba(56,175,154, 0.2);
            background: rgba(var(--cpd-color-text-action-accent), 0.2);
        }/* 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: var(--cpd-color-gray-700);
    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: var(--cpd-color-gray-900);
        cursor: pointer;
    }.mx_SeekBar::-moz-range-thumb {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: var(--cpd-color-gray-900);
        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: var(--cpd-color-gray-900);

        /* 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: var(--cpd-color-gray-900);
        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;
    }.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 */
    }.mx_AuthBody {
    width: 500px;
    font-size: 0.75rem;
    color: #6a6a6a;
    color: var(--dth-primary-dark-grey);
    /* background-color: $background-login; */
    border-radius: 0 4px 4px 0;
    padding: 0px 60px 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: var(--cpd-color-text-primary);
    }.mx_AuthBody h2 {
        font: var(--cpd-font-body-md-semibold);
        color: #6a6a6a;
        color: var(--dth-primary-dark-grey);
    }.mx_AuthBody h2.mx_AuthBody_centered {
        text-align: center;
    }.mx_AuthBody a:link,
    .mx_AuthBody a:hover,
    .mx_AuthBody a:visited {
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
        text-decoration: none;
    }.mx_AuthBody fieldset {
        display: block;
    }.mx_AuthBody .mx_AuthBody_icon {
        width: 44px;
        height: 44px;
    }.mx_AuthBody .mx_AuthBody_lockIcon {
        color: var(--cpd-color-text-secondary);
        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: var(--cpd-color-text-primary);
    }.mx_AuthBody .mx_Field label {
        color: #6a6a6a;
        color: var(--dth-primary-dark-grey);
    }.mx_AuthBody .mx_Field input,
    .mx_AuthBody .mx_Field select {
        color: var(--cpd-color-text-primary);
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
    }.mx_AuthBody .mx_Field input:not(:-moz-placeholder) + label, .mx_AuthBody .mx_Field textarea:not(:-moz-placeholder) + label {
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
    }.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label, .mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
    }.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: #fefefe;
        background-color: var(--dth-bg-light);
    }.mx_AuthBody input.error {
        color: var(--cpd-color-text-critical-primary);
    }.mx_AuthBody .mx_Login_submit {
        /* height: 32px; */
        margin-top: 12px;
    }.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: var(--cpd-color-text-primary);
    }.mx_AuthBody .mx_Dropdown {
        color: var(--cpd-color-text-primary);
    }.mx_AuthBody .mx_Dropdown_arrow {
        background: var(--cpd-color-text-primary);
    }.mx_AuthBody .mx_Dropdown_menu {
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
    }.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
            background-color: var(--cpd-color-bg-subtle-primary);
        }/* specialisation for password reset views */.mx_AuthBody.mx_AuthBody_forgot-password {
    font: var(--cpd-font-body-md-regular);
    color: var(--cpd-color-text-primary);
    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_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: var(--cpd-color-text-secondary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
}.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;
    }
}/* 
.mx_AuthBody_theme,
.mx_AuthBody_language {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
} 
*/.mx_AuthBody_theme .mx_Dropdown_input,
.mx_AuthBody_language .mx_Dropdown_input {
    border: none;
    font: var(--cpd-font-body-md-semibold);
    color: var(--cpd-color-text-secondary);
    background-color: #fff;
    width: auto;
    min-width: 148px;
}.mx_AuthBody_theme .mx_Dropdown_input input.mx_Dropdown_option,
    .mx_AuthBody_theme .mx_Dropdown_input input.mx_Dropdown_option:focus,
    .mx_AuthBody_language .mx_Dropdown_input input.mx_Dropdown_option,
    .mx_AuthBody_language .mx_Dropdown_input input.mx_Dropdown_option:focus {
        width: auto;
    }.mx_AuthBody_theme .mx_Dropdown_arrow,
.mx_AuthBody_language .mx_Dropdown_arrow {
    background: var(--cpd-color-text-secondary);
}.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: #f4f6fa;
    margin: 0 22px;
}.mx_AuthHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding: 25px 25px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}@media only screen and (max-width: 480px) {
    .mx_AuthHeader {
        display: none;
    }
}.mx_AuthHeaderLogo {
    margin-top: 15px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 0 25px;
}.mx_AuthHeaderLogo img {
    max-width: 500px;
    width: 100%;
}@media only screen and (max-width: 480px) {
    .mx_AuthHeaderLogo {
        display: none;
    }
}.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: #ededed;
    background-color: var(--dth-primary-light-grey);
    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: #fefefe;
    background-color: var(--dth-bg-light);
}@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
}
    }.mx_CompleteSecurityBody {
    width: 600px;
    color: var(--cpd-color-text-primary);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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: #38af9a;
        color: var(--cpd-color-text-action-accent);
        text-decoration: none;
    }.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
    padding: 0 3px;
}.mx_CountryDropdown .mx_Dropdown_arrow {
    padding-right: 3px;
}.mx_CountryDropdown_shortOption {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -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;
}.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 var(--cpd-color-border-interactive-primary);
    border-radius: 3px;
    width: 6em;
}.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
    border: 1px solid #38af9a;
    border: 1px solid var(--cpd-color-text-action-accent);
}.mx_InteractiveAuthEntryComponents_msisdnSubmit {
    margin-top: 4px;
    margin-bottom: 5px;
}/* XXX: This should be a common button class */.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
    background-color: #747474;
    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;
        }.mx_LanguageSelector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}.mx_LanguageSelector .mx_Dropdown {
        min-width: 100px;
        margin-left: auto;
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
    }.mx_LanguageSelector .mx_Dropdown_menu {
        max-height: 70px;
    }.mx_languageSelector_container{
    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: 0.5rem;
}.mx_LanguageSelector_heading {
    font-weight: var(--cpd-font-weight-semibold);
    font-size: 0.75rem;
    line-height: 0.9375rem;
    color: var(--cpd-color-text-secondary);
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
}.mx_TopRightControls {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.5rem;
    z-index: 1000;
}.mx_TopRightControls > * {
        cursor: pointer;
    }@media (max-width: 480px) {.mx_TopRightControls {
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.5rem
}
    }.mx_SeparatorWithText_container {
    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%;
    gap: 8px;
    padding-bottom: 8px;
}.mx_SeparatorWithText_container .mx_SeparatorWithText_separator {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        height: 1px;
        background-color: #6a6a6a;
        background-color: var(--dth-primary-dark-grey);
        opacity: 0.6;
        border: none;
    }.mx_SeparatorWithText_container .mx_SeparatorWithText_span {
        color: #6a6a6a;
        color: var(--dth-primary-dark-grey);
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
    }.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: var(--cpd-color-text-secondary);
        }.mx_LoginWithQR h1 > svg.error {
            color: var(--cpd-color-text-critical-primary);
        }.mx_LoginWithQR h1 > svg.success {
            color: #38af9a;
            color: var(--cpd-color-text-action-accent);
        }.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: var(--cpd-color-text-primary);
    }.mx_LoginWithQR .mx_LoginWithQR_confirmationAlert {
        border: 1px solid var(--cpd-color-gray-700);
        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: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-text-primary);
        text-align: center;
    }.mx_LoginWithQR .mx_LoginWithQR_main p {
            color: var(--cpd-color-text-secondary);
        }.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%;
    }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: var(--cpd-color-text-critical-primary);
}progress.mx_PassphraseField_progress::-moz-progress-bar {
        background-color: var(--cpd-color-text-critical-primary);
    }progress.mx_PassphraseField_progress::-webkit-progress-value {
        background-color: var(--cpd-color-text-critical-primary);
    }progress.mx_PassphraseField_progress[value="2"],
    progress.mx_PassphraseField_progress[value="3"] {
        color: var(--cpd-color-orange-1100);
    }progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar, progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
        background-color: var(--cpd-color-orange-1100);
    }progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value, progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
        background-color: var(--cpd-color-orange-1100);
    }progress.mx_PassphraseField_progress[value="4"] {
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
    }progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
    }progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
    }.mx_PassphraseField_toggleVisibility {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex; /* Usa inline-flex per adattarsi alla larghezza dell'icona */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%; /* Impostiamo l'altezza del bottone uguale all'altezza del campo input */
    width: 2em;
    margin: 0em 0.5em; /* Margine per distanziare lateralmente */
}.mx_PassphraseField_toggleVisibility .mx_PassphraseField_container_eye {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* Centra l'icona verticalmente */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* Centra l'icona orizzontalmente */
    height: 100%; /* L'altezza deve essere uguale a quella del bottone */
    width: auto; /* Assicura che lo span occupi tutta la larghezza disponibile */
}.mx_PassphraseField_toggleVisibility .mx_PassphraseField_container_eye .mx_PassphraseField_eye {
    height: 100%; /* Imposta l'altezza dell'icona al 80% dell'altezza del contenitore */
    width: auto; /* Mantieni il rapporto di aspetto */
    max-width: 100%; /* L'icona non deve superare mai la larghezza del contenitore */
    fill: currentColor;
    color: var(--cpd-color-text-primary); /* Colore dell'icona che cambia in base al tema */
}.mx_PassphraseField_toggleVisibility .mx_PassphraseField_container_eye,
.mx_PassphraseField_toggleVisibility .mx_PassphraseField_container_eye .mx_PassphraseField_eye {
    vertical-align: middle;
}.mx_PassphraseField_toggleVisibility:focus {
    outline: none;
}.mx_PassphraseField_toggleVisibility:hover .mx_PassphraseField_eye {
    opacity: 0.8;
}.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;
}.my-avatar.avatar {
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    /* -2px to account for the border styling below */
    line-height: calc(var(--cpd-avatar-size) - 2px);
    text-align: center;
    font-size: min(calc(var(--cpd-avatar-size) * 0.6275), 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.my-avatar.avatar,
button.avatar {
    /**
        * 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.my-avatar.avatar:disabled,
button.avatar:disabled {
    cursor: not-allowed;
}.my-avatar.avatar,
.avatar,
.image {
    aspect-ratio: 1 / 1;
    inline-size: var(--cpd-avatar-size);
    border-radius: var(--cpd-avatar-radius);
}.image {
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
}/* Additional selector for button to raise selector above button.avatar */button.my-avatar.avatar-imageless,
.my-avatar.avatar-imageless,
button.avatar-imageless,
.avatar-imageless {
    /* 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);

    /* Additional style to ensure visibility in contrast-mode */
    border: 1px solid var(--cpd-avatar-bg);
}/* Definiti i colori anche come variabili CSS per poterli usare anche nel codice */:root, [class*="cpd-theme-"] {
    --avatar-bg-variant1-color: var(--cpd-color-blue-300);
    --avatar-color-variant1-color: var(--cpd-color-blue-1200);

    --avatar-bg-variant2-color: var(--cpd-color-fuchsia-300);
    --avatar-color-variant2-color: var(--cpd-color-fuchsia-1200);

    --avatar-bg-variant3-color: var(--cpd-color-green-300);
    --avatar-color-variant3-color: var(--cpd-color-green-1200);

    --avatar-bg-variant4-color: var(--cpd-color-pink-300);
    --avatar-color-variant4-color: var(--cpd-color-pink-1200);

    --avatar-bg-variant5-color: var(--cpd-color-orange-300);
    --avatar-color-variant5-color: var(--cpd-color-orange-1200);

    --avatar-bg-variant6-color: var(--cpd-color-cyan-300);
    --avatar-color-variant6-color: var(--cpd-color-cyan-1200);

    --avatar-bg-variant7-color: var(--cpd-color-purple-300);
    --avatar-color-variant7-color: var(--cpd-color-purple-1200);

    --avatar-bg-variant8-color: var(--cpd-color-lime-300);
    --avatar-color-variant8-color: var(--cpd-color-lime-1200);
}.my-avatar.avatar[data-color],
.my-avatar.avatar[data-color="1"] {
    --cpd-avatar-bg: var(--cpd-color-blue-300);
    --cpd-avatar-color: var(--cpd-color-blue-1200);
}.my-avatar.avatar[data-color="2"] {
    --cpd-avatar-bg: var(--cpd-color-fuchsia-300);
    --cpd-avatar-color: var(--cpd-color-fuchsia-1200);
}.my-avatar.avatar[data-color="3"] {
    --cpd-avatar-bg: var(--cpd-color-green-300);
    --cpd-avatar-color: var(--cpd-color-green-1200);
}.my-avatar.avatar[data-color="4"] {
    --cpd-avatar-bg: var(--cpd-color-pink-300);
    --cpd-avatar-color: var(--cpd-color-pink-1200);
}.my-avatar.avatar[data-color="5"] {
    --cpd-avatar-bg: var(--cpd-color-orange-300);
    --cpd-avatar-color: var(--cpd-color-orange-1200);
}.my-avatar.avatar[data-color="6"] {
    --cpd-avatar-bg: var(--cpd-color-cyan-300);
    --cpd-avatar-color: var(--cpd-color-cyan-1200);
}.my-avatar.avatar[data-color="7"] {
    --cpd-avatar-bg: var(--cpd-color-purple-300);
    --cpd-avatar-color: var(--cpd-color-purple-1200);
}.my-avatar.avatar[data-color="8"] {
    --cpd-avatar-bg: var(--cpd-color-lime-300);
    --cpd-avatar-color: var(--cpd-color-lime-1200);
}.my-avatar.avatar[data-type="round"] {
    --cpd-avatar-radius: 50%;
}.my-avatar.avatar[data-type="square"] {
    --cpd-avatar-radius: 25%;
}/**
 * Stacked avatars 
 */.stacked-avatars::after {
    content: "";
    display: table;
    clear: both;
}.stacked-avatars .my-avatar.avatar {
    float: inline-start;
}.stacked-avatars .my-avatar.avatar:not(:last-child) {
    /* injected in the document from AvatarStack.tsx */
    clip-path: url("#cpdAvatarClip");
}.stacked-avatars > *: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 {
    /* 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;
}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;
}.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: var(--cpd-color-text-secondary);
        -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: #6a6a6a;
        background-color: var(--dth-primary-dark-grey);
    }.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online::before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online::before {
        background-color: var(--cpd-color-green-900);
    }.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: var(--cpd-color-text-critical-primary);
    }.mx_DecoratedRoomAvatar .mx_NotificationBadge,
    .mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer,
    .mx_ExtraTile .mx_NotificationBadge,
    .mx_ExtraTile .mx_RoomTile_badgeContainer {
        position: absolute;
        top: 0;
        right: 0;
        height: 18px;
        width: 18px;
    }.mx_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);
    }.mx_WidgetAvatar {
    border-radius: 4px;
}.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: #6a6a6a;
        background-color: var(--dth-primary-dark-grey);
    }.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon_online::before {
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
    }.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon_away::before {
        background-color: #d9b072;
    }.mx_WithPresenceIndicator .mx_WithPresenceIndicator_icon_busy::before {
        background-color: var(--cpd-color-text-critical-primary);
    }.mx_BetaCard {
    padding: 24px;
    background-color: var(--cpd-color-bg-subtle-secondary);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: var(--cpd-color-text-secondary);
}.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: var(--cpd-color-text-primary);
                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: var(--cpd-color-text-primary);
        }.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: var(--cpd-color-text-link-external);
    padding: 4px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 15px;
    color: #fefefe;
    color: var(--dth-bg-light);
    display: inline-block;
    vertical-align: text-bottom;
    word-break: keep-all; /* avoid multiple lines on CJK language */
}.mx_BetaCard_betaPill.mx_AccessibleButton {
        cursor: pointer;
    }.mx_DeviceContextMenu {
    max-width: 252px;
}.mx_DeviceContextMenu .mx_DeviceContextMenu_device_icon {
        display: none;
    }.mx_DeviceContextMenu .mx_IconizedContextMenu_label {
        padding-left: 0 !important;
    }/* 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: var(--cpd-color-text-primary);
            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: var(--cpd-color-text-critical-primary) !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: var(--cpd-color-text-critical-primary) !important;
    }.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon::before {
            background-color: var(--cpd-color-text-critical-primary);
        }.mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_IconizedContextMenu_item,
        .mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_item {
            color: #38af9a !important;
            color: var(--cpd-color-text-action-accent) !important;
        }.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon::before {
            background-color: #38af9a;
            background-color: var(--cpd-color-text-action-accent);
        }.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: var(--cpd-color-gray-900);
    }.mx_IconizedContextMenu_item.mx_IconizedContextMenu_itemDestructive {
    color: var(--cpd-color-text-critical-primary) !important;
}.mx_LegacyCallContextMenu_item {
    width: 205px;
    height: 40px;
    padding-left: 16px;
    line-height: 40px;
    vertical-align: center;
}.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(../../customIcons/trash-icon.4ae7ffa.svg);
                mask-image: url(../../customIcons/trash-icon.4ae7ffa.svg);
        -webkit-mask-image: var(--trash-icon-mask-image);
                mask-image: var(--trash-icon-mask-image);
    }.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(../../customIcons/pinned-message-icon.fb9a58b.svg);
                mask-image: url(../../customIcons/pinned-message-icon.fb9a58b.svg);
        -webkit-mask-image: var(--pin-icon-mask-image);
                mask-image: var(--pin-icon-mask-image);
        /* mask-image: url("@vector-im/compound-design-tokens/icons/pin.svg"); */
    }.mx_MessageContextMenu .mx_MessageContextMenu_iconUnpin::before {
        -webkit-mask-image: url(../../customIcons/unpinned-message-icon.75392dc.svg);
                mask-image: url(../../customIcons/unpinned-message-icon.75392dc.svg);
        -webkit-mask-image: var(--unpin-icon-mask-image);
                mask-image: var(--unpin-icon-mask-image);
        /* mask-image: url("@vector-im/compound-design-tokens/icons/unpin.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 {
        /* mask-image: url("$(res)/img/element-icons/room/message-bar/edit.svg"); */
        -webkit-mask-image: url(../../customIcons/edit-message-icon.99891f0.svg);
                mask-image: url(../../customIcons/edit-message-icon.99891f0.svg);
        -webkit-mask-image: var(--edit-message-icon-mask-image);
                mask-image: var(--edit-message-icon-mask-image);
    }.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 {
    /* mask-image: url("@vector-im/compound-design-tokens/icons/files.svg"); */
    -webkit-mask-image: url(../../customIcons/file-icon.9a6dc02.svg);
            mask-image: url(../../customIcons/file-icon.9a6dc02.svg);
    -webkit-mask-image: var(--file-icon-mask-image);
            mask-image: var(--file-icon-mask-image);
}.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(../../customIcons/settings-neg-icon.c9b09e5.svg);
            mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
    -webkit-mask-image: var(--quick-settings-mask-image);
            mask-image: var(--quick-settings-mask-image);
}.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 {
    /* mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg"); */
    -webkit-mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
            mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
    -webkit-mask-image: var(--leave-mask-image);
            mask-image: var(--leave-mask-image);
}.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);
}.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: var(--cpd-color-text-secondary);
            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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-text-primary);
            }.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: var(--cpd-color-text-critical-primary);
            }.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption {
                margin-top: 4px;
                font-size: 0.75rem;
                line-height: 0.9375rem;
                color: var(--cpd-color-text-primary);
            }.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: var(--cpd-color-text-primary);
                -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: var(--cpd-color-text-primary);
    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: var(--cpd-color-text-secondary);
            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: #38af9a;
                color: var(--cpd-color-text-action-accent);
                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: #38af9a;
                    background-color: var(--cpd-color-text-action-accent);
                    -webkit-mask-image: url(../../icons/check.aaad650.svg);
                            mask-image: url(../../icons/check.aaad650.svg);
                }.mx_SubspaceSelector .mx_SubspaceSelector_onlySpace {
        color: var(--cpd-color-text-secondary);
        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;
    }.mx_AnalyticsLearnMoreDialog {
    max-width: 500px;
}.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_image_holder {
        background-image: url(../../themes/logos/colore/Pittogramma_POS.0a2ba96.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 #e7e7e7;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }.mx_AnalyticsLearnMoreDialog a {
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
        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;
        }.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link {
            margin-right: 18px; /* Space between "Downloading logs..." */
        }.mx_CallLogsDialog {
    color: var(--cpd-color-text-primary);
}.mx_CallLogsDialog_error {
    color: var(--cpd-color-text-critical-primary);
    padding: 20px;
}.mx_CallLogsDialog_list {
    list-style: none;
    padding: 0;
}/* #region CallLogsButton */.mx_CallLogsButton {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    border-radius: 8px;
    position: relative;
    margin: 12px auto;
    color: var(--cpd-color-text-primary);
    min-width: 32px;
    min-height: 32px;
    line-height: 32px;
}.mx_CallLogsButton.expanded {
        margin-left: 20px;
        padding-left: 44px; /* align with toggle collapse button text */
        padding-right: 8px;
    }.mx_CallLogsButton::before {
        content: "";
        position: absolute;
        width: 32px;
        height: 32px;
        left: 0;
        /* mask-image: url("@vector-im/compound-design-tokens/icons/history.svg"); */
        -webkit-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
        -webkit-mask-image: var(--call-logs-icon-mask-image);
                mask-image: var(--call-logs-icon-mask-image);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: 24px;
                mask-size: 24px;
        background: var(--cpd-color-text-secondary);
    }.mx_CallLogsButton:not(.expanded):hover {
        background-color: var(--cpd-color-gray-700);
    }.mx_CallLogsButton:not(.expanded):hover::before {
            background-color: var(--cpd-color-text-primary);
        }/* #endregion CallLogsButton *//* #region CallLogsItem */.mx_CallLogsItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-bottom: 1px solid var(--cpd-color-text-primary);
    padding: 8px 0;
    cursor: pointer;
}.mx_CallLogsItem-avatar {
    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: 12px;
}.mx_CallLogsItem-info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
}.mx_CallLogsItem-missed {
    color: var(--cpd-color-text-critical-primary);
}.mx_CallLogsItem-name {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.mx_CallLogsItem-type {
    font-size: 13px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
}.mx_CallLogsItem-timestamp {
    font-size: 13px;
    margin-left: 8px;
    text-align: right;
    min-width: 90px;
}/* #endregion CallLogsItem *//* #region CallLogsSwitch */.mx_Dialog .mx_CallLogsSwitch_container,
.mx_CallLogsSwitch_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 16px;
}.mx_Dialog .mx_CallLogsSwitch_container .mx_CallLogsSwitch, .mx_CallLogsSwitch_container .mx_CallLogsSwitch {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        border-radius: 24px;
        overflow: hidden;
        background: transparent;
    }.mx_Dialog .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button, .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button {
            /* padding: "8px 28px"; */
            color: var(--cpd-color-text-primary);
            outline: none;
            height: 100%;
            -webkit-transition: 0.2s;
            transition: 0.2s;
            margin: 0px;
            opacity: 1;
            background-color: transparent;
            font-weight: normal;
            cursor: pointer;
            margin: 0;
            text-align: center;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
        }.mx_Dialog .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button:focus, .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button:focus {
                outline: none;
                opacity: 0.8;
            }.mx_Dialog .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button.mx_CallLogsSwitch_button_left, .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button.mx_CallLogsSwitch_button_left {
            border-width: 2px 1px 2px 2px;
            border-color: var(--cpd-color-text-primary);
            border-style: solid;
            border-radius: 24px 0 0 24px;
        }.mx_Dialog .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button.mx_CallLogsSwitch_button_right, .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button.mx_CallLogsSwitch_button_right {
            border-width: 2px 2px 2px 1px;
            border-color: var(--cpd-color-text-primary);
            border-style: solid;
            border-radius: 0px 24px 24px 0px;
        }.mx_Dialog .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button.mx_CallLogsSwitch_button_checked, .mx_CallLogsSwitch_container .mx_CallLogsSwitch button.mx_CallLogsSwitch_button.mx_CallLogsSwitch_button_checked {
            background: #38af9acc;
            background: var(--dth-primary-color-opacity-80);
            font-weight: bold;
            cursor: default;
        }/* #endregion CallLogsSwitch *//* #region CallLogsDetails */.mx_Dialog .mx_CallLogsDetails_container,
.mx_CallLogsDetails_container {
    text-align: center;
    padding: 24px 0;
}.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_avatar_container, .mx_CallLogsDetails_container .mx_CallLogsDetails_avatar_container {
        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;
        margin: 0px 0px 24px 0px;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_actions, .mx_CallLogsDetails_container .mx_CallLogsDetails_actions {
        margin-top: 20px;
        gap: 10px;
        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: nowrap;
            flex-wrap: nowrap;
        /* align-content: center; */
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: 100%;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_actions > .mx_AccessibleButton, .mx_CallLogsDetails_container .mx_CallLogsDetails_actions > .mx_AccessibleButton {
            width: auto;
            min-width: 100px;
            text-align: center;
            gap: 8px;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_actions > .mx_AccessibleButton:hover, .mx_CallLogsDetails_container .mx_CallLogsDetails_actions > .mx_AccessibleButton:hover {
                opacity: 0.9;
            }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_name, .mx_CallLogsDetails_container .mx_CallLogsDetails_name {
        font-weight: bold;
        font-size: 22px;
        margin-top: 12px;
        color: var(--cpd-color-text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90%;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_email, .mx_CallLogsDetails_container .mx_CallLogsDetails_email {
        font-weight: bold;
        font-size: 15px;
        margin-top: 2px;
        color: var(--cpd-color-text-secondary);
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_dates_container, .mx_CallLogsDetails_container .mx_CallLogsDetails_dates_container {
        font-size: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        gap: 24px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_date_container, .mx_CallLogsDetails_container .mx_CallLogsDetails_date_container {
        margin-top: 24px;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_date_title, .mx_CallLogsDetails_container .mx_CallLogsDetails_date_title {
        font-weight: bold;
        margin-bottom: 12px;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_date_event_list, .mx_CallLogsDetails_container .mx_CallLogsDetails_date_event_list {
        list-style: none;
        padding: 0px;
        margin: 0px;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_item, .mx_CallLogsDetails_container .mx_CallLogsDetails_item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        margin-bottom: 4px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_time, .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_time {
            min-width: 80px;
            text-align: right;
            font-weight: bold;
            font-size: 16px;
            color: var(--cpd-color-text-primary);
            padding-right: 16px;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_info_container, .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_info_container {
            text-align: left;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_info_container .mx_CallLogsDetails_type, .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_info_container .mx_CallLogsDetails_type {
                font-size: 16px;
                margin-bottom: 2px;
            }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_info_container .mx_CallLogsDetails_duration, .mx_CallLogsDetails_container .mx_CallLogsDetails_item .mx_CallLogsDetails_info_container .mx_CallLogsDetails_duration {
                color: var(--cpd-color-text-secondary);
                font-size: 15px;
            }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container {
        font-size: 18px;
        margin-top: 24px;
        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_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participants_title, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participants_title {
            font-weight: bold;
            margin-bottom: 12px;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participants_list, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participants_list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            -ms-flex-line-pack: center;
                align-content: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
            max-width: 100%;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_row, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            padding: 8px 0;
            gap: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_avatar, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_avatar {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                    flex: 0 0 auto;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            width: 40px;
            height: 40px;
            margin-right: 12px;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_info, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_info {
            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: start;
                -ms-flex-align: start;
                    align-items: flex-start;
            min-width: 0;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_name, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_name {
            font-weight: bold;
            font-size: 16px;
            color: var(--cpd-color-text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }.mx_Dialog .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_email, .mx_CallLogsDetails_container .mx_CallLogsDetails_participants_container .mx_CallLogsDetails_participant_email {
            font-weight: bold;
            font-size: 14px;
            color: var(--cpd-color-text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }/* #endregion CallLogsDetails */.mx_ChangelogDialog_content {
    max-height: 300px;
    overflow: auto;
}.mx_ChangelogDialog_li {
    padding: 0.2em;
}/* -------------------------------------------------------------------------------- *//* 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: var(--cpd-color-text-primary);
}.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 */
    }.mx_ConfirmKeyStorageOffDialog .mx_Dialog_border {
        width: 600px;
    }.mx_ConfirmKeyStorageOffDialog .mx_EncryptionCard {
        text-align: center;
    }.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: var(--cpd-color-bg-subtle-primary);

        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: var(--cpd-color-text-secondary);
    }.mx_ConfirmSpaceUserActionDialog .mx_ConfirmSpaceUserActionDialog_warning::before {
            content: "";
            position: absolute;
            left: 10px;
            top: calc(50% - 8px); /* vertical centering */
            height: 16px;
            width: 16px;
            background-color: var(--cpd-color-text-secondary);
            -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_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: var(--cpd-color-text-primary);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
}.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: var(--cpd-color-text-primary);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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 {
    max-height: 600px;
}.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
        width: 496px;
    }.mx_CreateRoomDialog .mx_Dialog_content {
        margin-bottom: 40px;
    }.mx_CreateRoomDialog p,
    .mx_CreateRoomDialog .mx_Field_input label {
        color: #61708b;
    }.mx_CreateRoomDialog .mx_SettingsFlag {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }.mx_CreateRoomDialog .mx_SettingsFlag_label {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0px;
                flex: 1 1 0;
        min-width: 0;
        font-weight: 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: #61708b;
    margin-top: var(--cpd-space-6x);
}/*CUSTOM*//* Layout principale: foto a sinistra, campi a destra */.mx_CreateRoomDialog_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; /* importante: allinea la foto con la parte alta del primo field */
    gap: 16px; /* spazio tra avatar e colonne campi */
}/* Colonna avatar: larghezza fissa */.mx_CreateRoomDialog_avatarCol {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 52px;
            flex: 0 0 52px; /* usa la stessa dimensione che usi per AVATAR_SIZE (52px) */
    width: 52px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; /* mantiene l'avatar in alto */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}/* Assicura che l'avatar o il placeholder riempiano lo spazio */.mx_CreateRoomDialog_avatarCol img,
.mx_CreateRoomDialog_avatarCol .mx_CreateRoomDialog_avatarPlaceholder,
.mx_CreateRoomDialog_avatarCol .mx_MiniAvatarUploader {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}/* Colonna dei campi: prende tutto lo spazio rimanente */.mx_CreateRoomDialog_fieldsCol {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: 0; /* evita overflow del Field */
    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; /* spazio verticale tra field1 e field2 */
}/* Wrapper per ogni field (utile per margini/override) */.mx_CreateRoomDialog_fieldRow {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}.mx_Field.mx_CreateRoomDialog_fieldRow {
    margin: 0;
}/* Assicurati che il Field interno occupi tutta la larghezza */.mx_CreateRoomDialog_field {
    width: 100%;
}/* Placeholder per avatar (se non c'è immagine) */.mx_CreateRoomDialog_avatarPlaceholder {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f6f7), to(gray));
    background: linear-gradient(180deg, #f5f6f7, gray);
    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-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}.mx_CreateRoomDialog_avatarPlaceholder::before {
    content: "";
    /* width: 28px; */
    /* height: 28px; */
    /* display: block; */
    background-image: url(../../img/element-icons/group-members.d86d751.svg);
    background-repeat: no-repeat;
    background-position: center;
}/* Responsive: su schermi stretti impila avatar sopra i campi */@media (max-width: 480px) {
    .mx_CreateRoomDialog_row {
        -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_CreateRoomDialog_avatarCol {
        -ms-flex-item-align: center;
            align-self: center;
        margin-bottom: 8px;
    }
}/* Contenitore esterno dei bottoni */.mx_CreateRoomDialog_buttonsWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; /* Pulsanti ai lati */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    margin-top: 1.5em;
}/* Assicura che DialogButtons non aggiunga spazi extra */.mx_CreateRoomDialog_buttonsWrap .mx_Dialog_buttons {
    width: 100%;
}/* Dentro, separa i bottoni ai lati */.mx_CreateRoomDialog_buttonsWrap .mx_Dialog_buttons_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
}/* Pulsante principale a destra */.mx_CreateRoomDialog_buttons_wrap .mx_Dialog_primary {
    margin-left: auto;
}.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: var(--cpd-color-text-primary);
    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: var(--cpd-color-bg-subtle-primary);
        }.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: #61708b;
            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: var(--cpd-color-text-secondary);
        }.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;
        }.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);
        }.mx_DeactivateAccountDialog .mx_Dialog_content {
    margin-bottom: 30px;
}.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
    width: 300px;
}.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", "", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace;
    font-family: "Inconsolata", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace;
}.mx_DevTools_VerificationRequest dl {
        display: grid;
        grid-template-columns: -webkit-max-content auto;
        grid-template-columns: max-content auto;
        margin: 0;
    }.mx_DevTools_VerificationRequest dd {
        grid-column-start: 2;
    }.mx_DevTools_VerificationRequest dd:empty {
        color: #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 #38af9a;
            border-bottom: 1px solid var(--cpd-color-text-action-accent);
            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: #38af9a;
            background-color: var(--cpd-color-text-action-accent);
        }.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
    }.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
        background-color: var(--cpd-color-text-critical-primary);
    }.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
        float: right;
        margin-right: 16px;
    }.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
        border: 2px solid var(--cpd-color-text-critical-primary);
        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: var(--cpd-color-text-link-external) !important;
}.mx_ExportDialog .mx_ExportDialog_subheading {
        font-size: 1rem;
        display: block;
        font-family: "Titillium Web", "", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial",
    "Helvetica", sans-serif;
        font-family: "Titillium Web", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial",
    "Helvetica", sans-serif;
        font-weight: var(--cpd-font-weight-semibold);
        color: var(--cpd-color-text-primary);
        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: var(--cpd-color-gray-900);
        }.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;
}.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 var(--cpd-color-gray-400);
    }.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: var(--cpd-color-text-secondary);
            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: #fefefe;
            background: var(--dth-bg-light); /* 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);
        }.mx_ForwardDialog {
    width: 520px;
    color: var(--cpd-color-text-primary);
    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: var(--cpd-color-text-secondary);
        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; */
            /* Per rimuovere scrollbar verticale superflua */
            margin-top: 1px;
            margin-bottom: 1px;
        }.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: rgba(232, 232, 232, 0.77);
                }.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    margin-right: 12px;
                    min-width: 0;
                }.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_DecoratedRoomAvatar {
                        margin-right: 12px;
                    }.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_name,
                    .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: var(--cpd-color-gray-900);
                    }.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; */
                        display: none;
                    }.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: #fefefe;
                        background-color: var(--dth-bg-light);
                    }.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sending .mx_ForwardList_sendIcon {
                        background-color: #38af9a;
                        background-color: var(--cpd-color-text-action-accent);
                        -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: #38af9a;
                        background-color: var(--cpd-color-text-action-accent);
                        -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;
                    }.mx_GenericFeatureFeedbackDialog .mx_GenericFeatureFeedbackDialog_subheading {
        color: var(--cpd-color-text-primary);
        font: var(--cpd-font-body-md-regular);
        line-height: 1.25rem;
        margin-bottom: 24px;
    }.mx_IncomingCallDialog_container {
    position: fixed;
    z-index: 9999;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    min-width: 300px;
    min-height: 120px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border: 1px solid var(--cpd-color-text-primary);
}.mx_IncomingCallDialog_header_container {
    padding: 8px 12px;
    border-bottom: 1px solid var(--cpd-color-text-primary);
    cursor: -webkit-grab;
    cursor: grab;
    font-weight: bold;
    background: #38af9a;
    background: var(--dth-primary-color);
    color: #fefefe;
    color: var(--dth-text-white);
    border-radius: 8px 8px 0 0;
    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_IncomingCallDialog_content_container {
    padding: 16px;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    border-radius: 0px 0px 8px 8px;
}.mx_IncomingCallDialog_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-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 24px;
}.mx_IncomingCallDialog_roomName {
    font-size: 1rem;
    font-weight: bold;
    color: var(--cpd-color-text-primary);
    margin-top: 8px;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* max-width: 90%; */
}.mx_IncomingCallDialog_actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}.mx_IncomingCallDialog_actions .mx_IncomingCallDialog_success,
    .mx_IncomingCallDialog_actions .mx_IncomingCallDialog_success.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary {
        border: 1px solid var(--cpd-color-text-success-primary);
        color: #fefefe;
        color: var(--dth-text-white);
        background-color: var(--cpd-color-text-success-primary);
    }.mx_IncomingCallDialog_actions .mx_IncomingCallDialog_reject,
    .mx_IncomingCallDialog_actions .mx_IncomingCallDialog_reject.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger {
        border: 1px solid var(--cpd-color-text-critical-primary);
        color: #fefefe;
        color: var(--dth-text-white);
        background-color: var(--cpd-color-text-critical-primary);
    }.mx_IncomingCallDialog_actions .mx_IncomingCallDialog_button_title {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 4px;
    }.mx_IncomingSasDialog_opponentProfile_image {
    position: relative;
}.mx_IncomingSasDialog_opponentProfile h2 {
    display: inline-block;
    margin-left: 10px;
}.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: var(--cpd-color-bg-subtle-primary);
        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: var(--cpd-color-text-primary) !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_section {
    padding-bottom: 4px;
}.mx_InviteDialog_section h3 {
        font-size: 0.75rem;
        color: #61708b;
        font-weight: bold;
        text-transform: uppercase;
    }.mx_InviteDialog_section > p {
        margin: 0;
    }.mx_InviteDialog_section > span {
        color: var(--cpd-color-text-primary);
    }.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: var(--cpd-color-text-primary);
        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: #61708b;
        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_content .mx_InviteProgressBody {
        margin-top: var(--cpd-space-12x);
    }.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: var(--cpd-color-gray-700);
    }.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
            border-color: #38af9a;
            border-color: var(--cpd-color-text-action-accent);
        }.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 var(--cpd-color-gray-400);

    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: var(--cpd-color-bg-subtle-primary);
            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: var(--cpd-color-text-primary);
            }.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: #61708b;
        }.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: var(--cpd-color-text-critical-primary);
        }.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: var(--cpd-color-text-primary);
        }.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId {
            font-size: 0.75rem;
            color: #61708b;
        }.mx_InviteDialog_multiInviterError > h4 {
        font-size: 0.9375rem;
        line-height: 1.5rem;
        color: var(--cpd-color-text-secondary);
        font-weight: normal;
    }.mx_InviteDialog_identityServer {
    margin-top: 1em;
}.mx_InviteDialog_oneThreepid {
    font-size: 0.75rem;
    margin: 8px 0;
}.mx_InviteProgressBody {
    text-align: center;
    font: var(--cpd-font-body-lg-regular);
}.mx_InviteProgressBody h1 {
        color: var(--cpd-color-text-primary);
        font: var(--cpd-font-heading-sm-semibold);
    }.mx_JoinRuleDropdown {
    margin-bottom: 8px;
    font: var(--cpd-font-body-md-regular);
    color: var(--cpd-color-text-primary);
}.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: var(--cpd-color-text-secondary);
            }.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: var(--cpd-color-text-secondary);
        position: absolute;
        left: 6px;
        top: 8px;
    }.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: var(--cpd-color-bg-subtle-primary);

                    font-size: 0.75rem;
                    line-height: 0.9375rem;
                    color: var(--cpd-color-text-secondary);
                }.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: var(--cpd-color-text-secondary);
                        -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: var(--cpd-color-text-primary);
                }.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;
}.mx_LogoutDialog_ExportKeyAdvanced {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}.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: var(--cpd-color-text-primary);
    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: var(--cpd-color-text-secondary);
            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: var(--cpd-color-gray-900);
            }.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: var(--cpd-color-bg-subtle-primary);

        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: var(--cpd-color-text-secondary);
    }.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_info::before {
            content: "";
            position: absolute;
            left: 10px;
            top: calc(50% - 8px); /* vertical centering */
            height: 16px;
            width: 16px;
            background-color: var(--cpd-color-text-secondary);
            -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;
                }.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: var(--cpd-color-text-critical-primary);
    text-align: center;
}.mx_MessageEditHistoryDialog_edits {
    list-style-type: none;
    font: var(--cpd-font-body-md-regular);
    padding: 0;
    color: var(--cpd-color-text-primary);
}.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: var(--cpd-color-bg-subtle-secondary);
            }.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;
    }.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
        margin-bottom: 24px;
    }.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
            vertical-align: middle;
            margin-right: 8px;
        }.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons {
        float: right;
        margin-top: 24px;
    }.mx_ModalWidgetDialog .mx_ModalWidgetDialog_buttons .mx_AccessibleButton + .mx_AccessibleButton {
            margin-left: 8px;
        }.mx_ModalWidgetDialog iframe {
        width: 100%;
        height: 450px;
        border: 0;
        border-radius: 8px;
    }.mx_PollCreateDialog .mx_PollCreateDialog_busy {
        position: absolute;
        inset: 0;
        background-color: var(--cpd-color-alpha-gray-1300);
        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: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-gray-400);
            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: var(--cpd-color-text-secondary);
            }.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;
    }.mx_RegistrationEmailPromptDialog {
    width: 417px;
}.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
        margin-bottom: 24px;
        color: var(--cpd-color-gray-900);
    }.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
        width: 100%;
    }.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);
    }/* ICONS *//* ========================================================== */.mx_RoomSettingsDialog_settingsIcon::before {
    -webkit-mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
            mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
    -webkit-mask-image: var(--quick-settings-mask-image);
            mask-image: var(--quick-settings-mask-image);
}.mx_RoomSettingsDialog_voiceIcon::before {
    /* mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); */
    -webkit-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
            mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
    -webkit-mask-image: var(--call-icon-mask-image);
            mask-image: var(--call-icon-mask-image);
}.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;
}.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: transparent;
            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 var(--cpd-color-gray-400);
                }.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: var(--cpd-color-gray-400);
                }.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon img {
                        border-width: 1px 1px;
                        border-color: transparent;
                    }.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: var(--cpd-color-text-primary);
                }.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_workspace_channel_details {
                    color: var(--cpd-color-text-primary);
                    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: #61708b;
                    margin-bottom: 0;
                    overflow-y: visible;
                    text-overflow: ellipsis;
                    white-space: normal;
                    padding: 0;
                }.mx_RoomUpgradeDialog {
    padding-right: 70px;
}.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: var(--cpd-color-text-primary);
        }.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
    font-weight: 700;
}.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
        float: right;
    }.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
        display: inline-block;
        vertical-align: middle;
    }.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
        padding-right: 85px;
        color: var(--cpd-color-text-primary);
    }.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
            border-color: var(--cpd-color-text-primary);
            opacity: 0.1;
            border-bottom: none;
        }.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul {
            padding: 16px;
        }.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content ul li:nth-child(n + 2) {
                margin-top: 16px;
            }.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timestamp {
                display: inline-block;
                width: 115px;
                color: #61708b;
                line-height: 24px; /* 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;
                    }.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: var(--cpd-color-text-secondary);
            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: var(--cpd-color-text-secondary);
            margin: 16px 0 16px 8px;
        }.mx_ServerPickerDialog .mx_Dialog_content > a {
            color: #38af9a;
            color: var(--cpd-color-text-action-accent);
            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;
    }.mx_SetEmailDialog_email_input {
    border-radius: 3px;
    border: 1px solid #e7e7e7;
    padding: 9px;
    color: rgba(74, 74, 74, 0.9);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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 #38af9a;
    border: 1px solid var(--cpd-color-text-action-accent);
}/* 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);
        }
}.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;
                }.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
    margin-bottom: 2px;
}.mx_SlashCommandHelpDialog .mx_Dialog_content {
    margin-top: 12px;
    margin-bottom: 34px;
}.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: var(--cpd-color-text-secondary);
    }.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);
}.mx_SpaceSettingsDialog {
    color: var(--cpd-color-text-primary);
}.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
        font-weight: var(--cpd-font-weight-semibold);
        font-size: 0.75rem;
        line-height: 0.9375rem;
        color: var(--cpd-color-text-critical-primary);
        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: var(--cpd-color-text-primary);
            }.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton + span {
                font-size: 0.9375rem;
                line-height: 1.125rem;
                color: var(--cpd-color-text-secondary);
                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(../../customIcons/settings-neg-icon.c9b09e5.svg);
                    mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
            -webkit-mask-image: var(--quick-settings-mask-image);
                    mask-image: var(--quick-settings-mask-image);
        }.mx_SpaceSettingsDialog .mx_TabbedView_tabLabel .mx_SpaceSettingsDialog_visibilityIcon::before {
            /* mask-image: url("$(res)/img/element-icons/eye.svg"); */
            -webkit-mask-image: url(../../customIcons/eye-icon-custom.432cad6.svg);
                    mask-image: url(../../customIcons/eye-icon-custom.432cad6.svg);
            -webkit-mask-image: var(--eye-icon-mask-image);
                    mask-image: var(--eye-icon-mask-image);
        }.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: #fefefe;
            background-color: var(--dth-bg-light);
            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: var(--cpd-color-text-secondary);
        }.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt kbd {
                display: inline-block;
                padding: 2px 4px;
                margin: 0 4px;
                border-radius: 6px;
                background-color: var(--cpd-color-gray-400);
                vertical-align: middle;
                color: var(--cpd-color-gray-900);
                /* 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 var(--cpd-color-bg-subtle-primary);
    }.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: var(--cpd-color-gray-400);
            vertical-align: middle;
            color: var(--cpd-color-text-primary);
            position: relative;
            padding: 4px 8px 4px 37px;
        }.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter::before {
                background-color: var(--cpd-color-text-secondary);
                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: var(--cpd-color-bg-subtle-primary);
                border-radius: 8px;
                margin-left: 8px;
                text-align: center;
                line-height: 16px;
                color: var(--cpd-color-text-secondary);
            }.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close::before {
                    background-color: var(--cpd-color-text-secondary);
                    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: var(--cpd-color-gray-900);
            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: var(--cpd-color-text-secondary);
                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: var(--cpd-color-text-primary);
                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: var(--cpd-color-gray-400);
                }.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: var(--cpd-color-text-primary);
                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: var(--cpd-color-text-primary);
                            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: var(--cpd-color-gray-900);
                            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: var(--cpd-color-text-secondary);
                        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: var(--cpd-color-gray-900);
                    }.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: var(--cpd-color-text-secondary);
                    }.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: var(--cpd-color-bg-subtle-primary);
                }.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: var(--cpd-color-text-secondary);
                    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: var(--cpd-color-gray-900);
            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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-gray-900);
            border-radius: 6px;
            background-color: var(--cpd-color-gray-400);
            margin-right: 4px;
            display: none;
        }.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult {
            background-color: var(--cpd-color-text-secondary);
            -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);
            }.mx_SSOClausesDialog .container {
    padding-top: 20px;
    padding-bottom: 20px;
}.mx_SSOClausesDialog h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
    font-weight: bold;
}.mx_SSOClausesDialog .checkbox-group {
    margin-bottom: 15px;
    display: grid; /* Usa grid per disporre la checkbox e il testo */
    grid-template-columns: auto 1fr; /* La prima colonna si adatta alla checkbox, la seconda al testo */
    grid-gap: 8px;
    gap: 8px; /* Spazio tra checkbox e testo */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; /* Allinea il testo e la checkbox in alto */
}/* .mx_SSOClausesDialog .checkbox-group input[type="checkbox"] {
    margin-top: 4px;
} */.mx_SSOClausesDialog .checkbox-group label {
    line-height: 1.4;
    word-wrap: break-word; /* Fa andare a capo il testo quando è troppo lungo */
    white-space: normal; /* Permette il wrapping del testo */
    overflow-wrap: break-word; /* Assicura che le parole lunghe vadano a capo correttamente */
}.mx_SSOClausesDialog .button {
    background-color: #38af9a;
    background-color: var(--dth-primary-color);
    color: #fefefe;
    color: var(--dth-text-white);
    padding: 10px 20px;
    border: #38af9a;
    border: var(--dth-primary-color);
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    width: 100%;
    margin-top: 15px;
    border-radius: 8px;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}/* .mx_SSOClausesDialog .button:hover {
    opacity: 0.8;
} */.mx_SSOClausesDialog .button.cancel {
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    color: #38af9a;
    color: var(--dth-primary-color);
    border: 1px solid #38af9a;
    border: 1px solid var(--dth-primary-color);
    margin-top: 10px;
}/*.mx_SSOClausesDialog .button.cancel:hover {
    opacity: 0.8;
} */.mx_SSOClausesDialog p {
    /* color: red; */
    font-size: 0.9em;
    margin-top: 10px;
}.mx_SSOClausesDialog .mx_SSOClauses_buttons {
    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;
    -ms-flex-line-pack: center;
        align-content: center;
}/*
 * 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;
}.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%;
        }.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;
    }.mx_UploadConfirmDialog_fileIcon {
    margin-right: 5px;
}.mx_UploadConfirmDialog_previewOuter {
    text-align: center;
}.mx_UploadConfirmDialog_previewInner {
    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-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    word-wrap: break-word;
}.mx_UploadConfirmDialog_imagePreview {
    max-height: 300px;
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid var(--cpd-color-icon-tertiary);
}.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);
    }.mx_VerifyEMailDialog {
    height: auto;
    top: 300px;
}.mx_VerifyEMailDialog .mx_Dialog {
        color: var(--cpd-color-text-primary);
        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: var(--cpd-color-text-secondary);
            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;
        }.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: #61708b;
        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;
            }.mx_AccessSecretStorageDialog.mx_EncryptionCard {
        /* override some styles that we don't need */
        border: 0px none;
        -webkit-box-shadow: none;
                box-shadow: none;
        padding: 0px;
    }/*
             * Be specific here to avoid "margin: 9px" from _common.pcss
             */.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) input {
                    /*
                     * From figma: https://www.figma.com/design/ZodBLtGnKmRTGJo5SGLnH3/ER-137--Excluding-Insecure-Devices?node-id=102-43729&t=QmewENUd7f6Tmw9U-1
                     */
                    width: 448px;
                    height: 70px;
                    margin: 0px;
                    border: 1px solid;
                }.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: var(--cpd-color-text-critical-primary);
            }.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: var(--cpd-color-text-critical-primary);
                }.mx_AccessSecretStorageDialog .mx_EncryptionCard_buttons {
        margin-top: var(--cpd-space-20x);
    }.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;
}.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: var(--cpd-color-text-primary);
}.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: var(--cpd-color-text-primary);
    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: var(--cpd-color-text-primary);
}.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: var(--cpd-color-gray-900);
    background-color: #f7f7f7;
    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;
}.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: var(--cpd-color-text-primary);
        content: "";
        position: absolute;
        top: -6px;
        right: 0;
        bottom: 0;
        left: 0;
    }.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
    margin-top: 36px;
}.mx_RestoreKeyBackupDialog_keyStatus {
    height: 30px;
}.mx_RestoreKeyBackupDialog_primaryContainer {
    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
    padding: 20px;
}.mx_RestoreKeyBackupDialog_passPhraseInput,
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
    width: 300px;
    border: 1px solid #38af9a;
    border: 1px solid var(--cpd-color-text-action-accent);
    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 */
}.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: var(--cpd-color-text-primary);
        }.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label span:not(:first-child) {
                margin-left: 4px;
                color: var(--cpd-color-text-secondary);
            }.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: var(--cpd-color-gray-400);
    border-radius: 8px;
    text-align: center;
    line-height: 16px;
    color: var(--cpd-color-text-secondary);
    margin-left: auto;
}.mx_NetworkDropdown_removeServer::before {
        background-color: var(--cpd-color-text-secondary);
        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;
}.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: 8px;
        border-radius: var(--dth-button-border-radius);
        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 #38af9a;
        border: 1px solid var(--dth-primary-color);
        color: #fefefe;
        color: var(--dth-text-white);
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
    }.mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
    .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline {
        border: 1px solid #38af9a;
        border: 1px solid var(--dth-primary-color);
        color: #38af9a;
        color: var(--dth-primary-color);
        background-color: transparent;
    }.mx_AccessibleButton.mx_AccessibleButton_kind_secondary {
        color: var(--cpd-color-text-primary);
        text-decoration: underline;
    }.mx_AccessibleButton.mx_AccessibleButton_kind_secondary_content {
        color: var(--cpd-color-text-secondary);
    }.mx_AccessibleButton.mx_AccessibleButton_kind_danger {
        color: #fefefe;
        color: var(--dth-text-white);
        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-text-critical-primary);
    }.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: var(--cpd-color-text-primary);
    }.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%;
        }.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: max-content; */
    max-width: 100%;
}.mx_CopyableText.mx_CopyableText_border {
        overflow: auto;
        border-radius: 5px;
        border: solid 1px #747474;
        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: transparent;
    }.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: var(--cpd-color-text-primary);
            width: 1em;
            height: 1em;
            display: block;
            background-repeat: no-repeat;
        }.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: #38af9a;
                    border-color: var(--cpd-color-text-action-accent);
                }.mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_name {
                margin: 0 4px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }.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;
    }.mx_Dropdown {
    position: relative;
    color: var(--cpd-color-text-primary);
}.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;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);
    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: var(--cpd-color-text-link-external);
}/* 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: var(--cpd-color-text-primary);
}.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 var(--cpd-color-text-link-external);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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: var(--cpd-color-bg-subtle-primary);
}.mx_Dropdown_searchPrompt {
    font-weight: normal;
    margin-left: 5px;
    margin-bottom: 5px;
}.mx_EditableItemList {
    margin-top: 12px;
    margin-bottom: 10px;
}.mx_EditableItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}.mx_EditableItem_delete {
    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: var(--cpd-color-text-critical-primary);
    -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;
}.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;
    }.mx_ExternalLink {
    color: var(--cpd-color-text-link-external);
}.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;
}.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: var(--cpd-color-bg-subtle-secondary);
    display: inline-block;
}.mx_FacePile_more::before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        height: inherit;
        width: inherit;
        background: var(--cpd-color-gray-900);
        -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: var(--cpd-color-gray-900);
}.mx_FacePile_stacked_avatars {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}/* 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: var(--cpd-color-text-primary);
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    -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: var(--cpd-color-text-primary);
    z-index: 1;
    pointer-events: none;
}.mx_Field:focus-within {
    border-color: var(--cpd-color-text-link-external);
}.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: var(--cpd-color-gray-900);
}.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: var(--cpd-color-gray-900);
}.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: var(--cpd-color-gray-900);
}.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: var(--cpd-color-gray-900);
}.mx_Field input:-moz-placeholder:focus::placeholder, .mx_Field textarea:-moz-placeholder:focus::placeholder {
    -moz-transition: color 0.25s ease-in 0.1s;
    transition: color 0.25s ease-in 0.1s;
    color: var(--cpd-color-gray-900);
}.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: var(--cpd-color-gray-900);
}.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: var(--cpd-color-gray-900);
}.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) + label, .mx_Field textarea:not(:-moz-placeholder) + 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 4px;
    border-radius: 8px;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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 4px;
    border-radius: 8px;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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 4px;
    border-radius: 8px;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    pointer-events: initial;
}.mx_Field input:focus + label,
.mx_Field select:focus + label,
.mx_Field textarea:focus + label {
    color: var(--cpd-color-text-link-external);
}.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: #fefefe;
    background-color: var(--dth-bg-light);
    color: var(--cpd-color-gray-900);
}.mx_Field_valid.mx_Field,
    .mx_Field_valid.mx_Field:focus-within {
        border-color: var(--cpd-color-text-primary);
    }.mx_Field_valid.mx_Field label,
    .mx_Field_valid.mx_Field:focus-within label {
        color: var(--cpd-color-text-primary);
    }.mx_Field_invalid.mx_Field,
    .mx_Field_invalid.mx_Field:focus-within {
        border-color: var(--cpd-color-text-critical-primary);
    }.mx_Field_invalid.mx_Field label,
    .mx_Field_invalid.mx_Field:focus-within label {
        color: var(--cpd-color-text-critical-primary);
    }/* 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;
}.mx_GenericEventListSummary {
    position: relative;
}.mx_GenericEventListSummary .mx_GenericEventListSummary_avatars {
        margin-right: 8px;
    }.mx_GenericEventListSummary .mx_GenericEventListSummary_spacer {
        border-bottom: 1px solid transparent;
        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 {
        /* Pas_Edit: Preferisco font della stessa dimensione degli altri eventi */
        /* font: var(--cpd-font-body-sm-regular); */
        color: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-text-secondary);
}.mx_GenericEventListSummary_avatars {
    display: inline-block;
    line-height: 0.75rem;
}.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
        margin-right: -4px;
        cursor: pointer;
    }: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: #fff;
    -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: #fff;
    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 - 24px));
}.mx_ImageView_button {
    padding: calc((32px - 24px) / 2);
    display: block;
}.mx_ImageView_button::before {
        content: "";
        height: 24px;
        width: 24px;
        -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 {
    /* mask-image: url("$(res)/img/image-view/rotate-cw.svg"); */
    /* mask-image: url("$(res)/customIcons/rotate-cw-icon.svg"); */
    -webkit-mask-image: url(../../customIcons/rotate-right-icon.c06cfb2.svg);
            mask-image: url(../../customIcons/rotate-right-icon.c06cfb2.svg);
}.mx_ImageView_button_rotateCCW::before {
    /* mask-image: url("$(res)/img/image-view/rotate-ccw.svg"); */
    /* mask-image: url("$(res)/customIcons/rotate-ccw-icon.svg"); */
    -webkit-mask-image: url(../../customIcons/rotate-left-icon.9199c07.svg);
            mask-image: url(../../customIcons/rotate-left-icon.9199c07.svg);
}.mx_ImageView_button_zoomOut::before {
    /* mask-image: url("$(res)/img/image-view/zoom-out.svg"); */
    -webkit-mask-image: url(../../customIcons/zoom-out-icon.977db0c.svg);
            mask-image: url(../../customIcons/zoom-out-icon.977db0c.svg);
}.mx_ImageView_button_zoomIn::before {
    /* mask-image: url("$(res)/img/image-view/zoom-in.svg"); */
    -webkit-mask-image: url(../../customIcons/zoom-in-icon.bc7d02f.svg);
            mask-image: url(../../customIcons/zoom-in-icon.bc7d02f.svg);
}.mx_ImageView_button_download::before {
    /* mask-image: url("@vector-im/compound-design-tokens/icons/download.svg"); */
    -webkit-mask-image: url(../../customIcons/download-icon.aac0157.svg);
            mask-image: url(../../customIcons/download-icon.aac0157.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;
    }
}.mx_LeftPanel_minimized .mx_InCallIndicator_container {
    -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;
}/* Nascondi tutti i figli tranne il primo */.mx_LeftPanel_minimized .mx_InCallIndicator_container > *:not(:first-child) {
        display: none !important;
    }.mx_InCallIndicator_container {
    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: 12px; */
    margin: 4px 4px 12px 4px;
    cursor: pointer;
}.mx_InCallIndicator_container .mx_InCallIndicator_text {
        font-size: 15px;
        color: var(--cpd-color-text-critical-primary);
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }/* #region LiveIcon */.mx_InCallIndicator_container .mx_LiveIcon,
.mx_LiveIcon {
    display: inline-block;
    color: var(--cpd-color-text-critical-primary);
}.mx_RoomTile.mx_RoomTile_selected .mx_LiveIcon {
    color: #fefefe;
    color: var(--dth-text-white);
}.mx_RoomTile .mx_LiveIcon {
    color: var(--cpd-color-text-critical-primary);
}/* #endregion LiveIcon */.mx_InfoTooltip_icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}.mx_InfoTooltip_icon::before {
    display: inline-block;
    background-color: #61708b;
    -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);
}.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 */
}.mx_InteractiveTooltip_wrapper {
    position: fixed;
    z-index: 3999;
}.mx_InteractiveTooltip {
    border-radius: 8px;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    color: var(--cpd-color-text-primary);
    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 #fefefe;
    border-bottom: 8px solid var(--dth-bg-light);
    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 #fefefe;
    border-top: 8px solid var(--dth-bg-light);
    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 */
    }
}.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: var(--cpd-color-text-secondary);
    }.mx_InviteReason .mx_InviteReason_view::before {
            content: "";
            margin-right: 8px;
            background-color: var(--cpd-color-text-secondary);
            /* mask-image: url("$(res)/img/element-icons/eye.svg"); */
            -webkit-mask-image: url(../../customIcons/eye-icon-custom.432cad6.svg);
                    mask-image: url(../../customIcons/eye-icon-custom.432cad6.svg);
            -webkit-mask-image: var(--eye-icon-mask-image);
                    mask-image: var(--eye-icon-mask-image);
            display: inline-block;
            width: 18px;
            height: 14px;
        }.mx_InviteReason_hidden .mx_InviteReason_reason {
        visibility: hidden;
    }.mx_InviteReason_hidden .mx_InviteReason_view {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }.mx_LabelledCheckbox {
    margin-top: var(--cpd-space-2x);
}.mx_LanguageDropdown .mx_Dropdown_option > div {
        text-transform: capitalize;
    }.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: #fefefe;

        background-color: var(--dth-bg-light);
        border-radius: 50%;
        z-index: 1;

        line-height: 0;
    }.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator .mx_MiniAvatarUploader_cameraIcon {
            height: 100%;
            width: 100%;

            background-color: var(--cpd-color-text-secondary);
            -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;
}.mx_Pill {
    padding: 0.0625rem 0.4em 0.0625rem 0.4em;
    line-height: 1.0625rem;
    border-radius: 1rem;
    vertical-align: text-top;
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;

    /* Tutti i !important servono per sovrascrivere gli stili di .markdown-body */

    color: #fefefe !important;

    color: var(--dth-text-white) !important;
    background-color: #3baf8c !important;
    background-color: var(--dth-secondary-color) !important;

    /* 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: #38af9a !important;
        background-color: var(--dth-primary-color) !important;
        color: #fefefe !important;
        color: var(--dth-text-white) !important;
        font-weight: bold;
    }.mx_Pill:hover {
        opacity: 0.9;
    }.mx_Pill:active {
        opacity: 0.9;
    }.mx_Pill.mx_AtRoomPill:hover,
    .mx_Pill.mx_KeywordPill:hover {
        opacity: 0.9;
        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 */
        -webkit-user-select: text;
           -moz-user-select: text;
            -ms-user-select: text;
                user-select: text;
        vertical-align: -2.5px;
    }.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: var(--cpd-color-text-link-external);
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        color: #fefefe;
        color: var(--dth-bg-light);
        height: 16px;
        padding: 1px;
        width: 16px;
        border-radius: 50%;
    }.mx_Pill .mx_Pill_UserIcon {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        color: var(--cpd-color-text-secondary);
        height: 16px;
        width: 16px;
    }.mx_Pill.mx_SpacePill {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        padding-left: 4px;
    }.mx_PowerSelector {
    width: 100%;
}.mx_PowerSelector .mx_Field select,
.mx_PowerSelector .mx_Field input {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}progress.mx_ProgressBar {
    height: 6px;
    width: 60px;
    overflow: hidden;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 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: #38af9a;
    color: var(--cpd-color-icon-accent-primary);
}progress.mx_ProgressBar::-moz-progress-bar {
        background-color: #38af9a;
        background-color: var(--cpd-color-icon-accent-primary);
    }progress.mx_ProgressBar::-webkit-progress-value {
        background-color: #38af9a;
        background-color: var(--cpd-color-icon-accent-primary);
    }progress.mx_ProgressBar{
    background-color: var(--cpd-color-gray-200);
}progress.mx_ProgressBar::-webkit-progress-bar {
        background-color: var(--cpd-color-gray-200);
    }progress.mx_ProgressBar::-webkit-progress-value {
        -webkit-transition: width 1s;
        transition: width 1s;
    }.mx_QRCode img {
        border-radius: 8px;
    }.otp-container-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* centro orizzontale */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* centro verticale */
    height: auto;
    width: 100%;
}.otp-container-wrapper .otp-container {
    width: 100%;
    aspect-ratio: 380 / 60; /* Mantiene proporzioni */
    width: 380px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}.mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input.otp-input[type="text"],
.otp-container-wrapper .otp-container input.otp-input[type="text"] {
    min-width: 35px;
    min-height: 40px;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);
    background-color: var(--cpd-color-gray-300);
    border: 1px solid #6a6a6a;
    border: 1px solid var(--dth-primary-dark-grey);
    outline: none;
    color: var(--cpd-color-text-primary);
    margin: 0px;
}.mx_Dialog .otp_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}.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: var(--cpd-color-text-secondary);
            -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: var(--cpd-color-text-primary);
            }.mx_ReplyChain_color1,
.mx_ReplyChain.mx_ReplyChain_color1 {
    --username-color: var(--cpd-color-blue-1100);
}.mx_ReplyChain_color2,
.mx_ReplyChain.mx_ReplyChain_color2 {
    --username-color: var(--cpd-color-fuchsia-1100);
}.mx_ReplyChain_color3,
.mx_ReplyChain.mx_ReplyChain_color3 {
    --username-color: var(--cpd-color-green-1100);
}.mx_ReplyChain_color4,
.mx_ReplyChain.mx_ReplyChain_color4 {
    --username-color: var(--cpd-color-pink-1100);
}.mx_ReplyChain_color5,
.mx_ReplyChain.mx_ReplyChain_color5 {
    --username-color: var(--cpd-color-orange-1100);
}.mx_ReplyChain_color6,
.mx_ReplyChain.mx_ReplyChain_color6 {
    --username-color: var(--cpd-color-cyan-1100);
}.mx_ReplyChain_color7,
.mx_ReplyChain.mx_ReplyChain_color7 {
    --username-color: var(--cpd-color-purple-1100);
}.mx_ReplyChain_color8,
.mx_ReplyChain.mx_ReplyChain_color8 {
    --username-color: var(--cpd-color-lime-1100);
}.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_EventTile_bigEmoji .mx_Emoji {
    margin: 0em 0em;
    padding: 0em 0em;
}.mx_Emoji {
    /* Should be 1.8rem for our default message bodies, and scale with the */
    /* surrounding text */
    font-size: max(1.125rem, 1em);
    display: inline-block;
    vertical-align: middle;
    margin: 0.125em 0em;
    padding: 0.125em 0em;
}.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: var(--cpd-color-gray-900);
        font-weight: normal;
    }.mx_RoomAliasField input::-moz-placeholder {
        color: var(--cpd-color-gray-900);
        font-weight: normal;
    }.mx_RoomAliasField input:-ms-input-placeholder {
        color: var(--cpd-color-gray-900);
        font-weight: normal;
    }.mx_RoomAliasField input::-ms-input-placeholder {
        color: var(--cpd-color-gray-900);
        font-weight: normal;
    }.mx_RoomAliasField input::placeholder {
        color: var(--cpd-color-gray-900);
        font-weight: normal;
    }.mx_RoomAliasField .mx_Field_prefix,
    .mx_RoomAliasField .mx_Field_postfix {
        color: var(--cpd-color-gray-900);
        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);
    }.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 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        width: 100%;
        padding: 7px 32px;
        text-align: center;
        border-radius: 8px;
        font: var(--cpd-font-body-md-semibold);
        border: 1px solid #e7e7e7;
        color: #232323;
        color: var(--dth-text-black);
        background-color: #fefefe;
        margin: 5px 0px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -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;
        gap: 1em;      
    }/* .mx_SSOButton:hover {
        background-color: $panel-actions;
    } */.mx_SSOButtons .mx_SSOButton_default {
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
        background-color: #f4f6fa;
        border-color: #38af9a;
        border-color: var(--cpd-color-text-action-accent);
    }/*TODO vedere opacita*/.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
        color: #fefefe;
        color: var(--dth-bg-light);
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
    }.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;
        }.mx_SearchWarning {
    text-align: center;
    padding: 0 16px;
}.mx_SearchWarning > * {
        vertical-align: middle;
    }.mx_SearchWarning > img {
        margin-right: 8px;
    }.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: var(--cpd-color-text-primary);
        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: var(--cpd-color-gray-900);
        grid-column: 1 / 2;
        grid-row: 3;
    }.mx_ServerPicker_helpDialog .mx_Dialog_content {
        width: 456px;
    }.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: var(--cpd-color-text-primary);
    padding-right: 10px;
    padding-top: 4px;
}.mx_SettingsFlag_microcopy {
    margin-top: 4px;
    font: var(--cpd-font-body-sm-regular);
    color: var(--cpd-color-text-secondary);

    /* Support code/pre elements in settings flag descriptions */
}.mx_SettingsFlag_microcopy pre,
    .mx_SettingsFlag_microcopy code {
        font-family: "Inconsolata", "", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
        font-family: "Inconsolata", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
        background-color: rgba(0, 0, 0, 0.04);
    }.mx_SettingsFlag_microcopy .mx_SettingsTab_microcopy_warning::before {
        content: "⚠️ ";
    }.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: var(--cpd-color-gray-400);
    -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: #38af9a;
        background-color: var(--dth-primary-color);
        -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;
    }/**
* 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: #38af9a;
                border-color: var(--dth-primary-color);
            }.mx_StyledRadioButton input[type="radio"]:checked + div > div {
                    background: #38af9a;
                    background: var(--dth-primary-color);
                }.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 var(--cpd-color-gray-400);
    border-radius: 8px;
}.mx_StyledRadioButton_checked {
    border-color: #38af9a;
    border-color: var(--dth-primary-color);
}.mx_SyntaxHighlight {
    /* inhibit hljs styling */
    background: none !important;
    color: #747474 !important;
}.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: var(--cpd-color-text-primary);
    background: var(--cpd-color-gray-400);
}.mx_Tag > svg:first-child {
        width: 1em;
        color: var(--cpd-color-text-secondary);
        -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: var(--cpd-color-text-secondary);
        background: var(--cpd-color-bg-subtle-primary);
        position: relative;
    }.mx_Tag .mx_Tag_delete svg {
            width: 16px;
            height: 16px;
        }.mx_TextWithTooltip_target {
    display: inline;
}.mx_TextWithTooltip_tooltip {
    display: none;
}.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: #38af9a;
            background-color: var(--dth-primary-color);
            border-color: #38af9a;
            border-color: var(--dth-primary-color);
        }.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;
}.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: #38af9a;
        color: var(--cpd-color-text-action-accent);
    }.mx_Validation_detail.mx_Validation_valid::before {
            -webkit-mask-image: url(../../icons/check.aaad650.svg);
                    mask-image: url(../../icons/check.aaad650.svg);
            background-color: #38af9a;
            background-color: var(--cpd-color-text-action-accent);
        }.mx_Validation_detail.mx_Validation_invalid {
        color: var(--cpd-color-text-critical-primary);
    }.mx_Validation_detail.mx_Validation_invalid::before {
            -webkit-mask-image: url(../../icons/close.5ef7caf.svg);
                    mask-image: url(../../icons/close.5ef7caf.svg);
            background-color: var(--cpd-color-text-critical-primary);
        }.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 #e9edf1;
}.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: var(--cpd-color-bg-subtle-primary);
        border-bottom: 2px solid #38af9a;
        border-bottom: 2px solid var(--cpd-color-text-action-accent);
    }.mx_EmojiPicker_anchor::before {
    background-color: var(--cpd-color-text-primary);
    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: var(--cpd-color-bg-subtle-primary);
}.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 #38af9a;
    border-bottom: 2px solid var(--cpd-color-text-action-accent);
}.mx_EmojiPicker_search {
    margin: 8px;
    border-radius: 4px;
    border: 1px solid #e7e7e7;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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: var(--cpd-color-text-primary);
    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: var(--cpd-color-bg-subtle-primary);
    }.mx_EmojiPicker_body .mx_EmojiPicker_item_wrapper[tabindex="0"] .mx_EmojiPicker_item {
    background-color: var(--cpd-color-bg-subtle-primary);
}.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: var(--cpd-color-bg-subtle-primary);
    }.mx_EmojiPicker_item_selected {
    color: rgb(0, 0, 0, 0.5);
    border: 1px solid #38af9a;
    border: 1px solid var(--cpd-color-text-action-accent);
    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 #e9edf1;
    min-height: 72px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}.mx_EmojiPicker_preview_emoji {
    font-size: 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: #747474;
    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;
}.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: var(--cpd-color-bg-subtle-primary);
    }.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: #fefefe;
        background-color: var(--dth-bg-light);
        color: var(--cpd-color-text-primary);

        font-size: 0.75rem;
    }.mx_LocationPicker_submitButton {
    width: 100%;
    height: 48px;
}.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: var(--cpd-color-bg-subtle-primary);
    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: var(--cpd-color-text-secondary);
    }.mx_CallEvent .mx_LiveContentSummary {
        font-size: 0.75rem;
    }.mx_CallEvent{

    --facepile-background: var(--cpd-color-bg-subtle-primary);
}.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: var(--cpd-color-text-secondary);
    -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;
}.mx_EventTileBubble.mx_CreateEvent {
    margin: var(--EventTileBubble_margin-block) auto;
}.mx_EventTileBubble.mx_CreateEvent::before {
        background-color: #91a1c0;
        -webkit-mask-image: url(../../img/element-icons/chat-bubbles.7946de9.svg);
                mask-image: url(../../img/element-icons/chat-bubbles.7946de9.svg);
    }.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);
}.mx_DecryptionFailureBody {
    color: var(--cpd-color-text-secondary);
    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;
}.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: var(--cpd-color-text-secondary);
        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;
    }.mx_EventTileBubble {
    --EventTileBubble_margin-block: 10px;

    background-color: #38af9a4d;

    background-color: var(--dth-primary-color-opacity-30);
    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;
    }.mx_HiddenBody {
    white-space: pre-wrap;
    color: #61708b;
    vertical-align: middle;

    padding-left: 20px;
    position: relative;
}.mx_HiddenBody::before {
        height: 14px;
        width: 14px;
        background-color: #61708b;
        -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: var(--cpd-color-bg-subtle-primary);
}.mx_HiddenMediaPlaceholder > div {
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
        /* 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: #fefefe;
    background-color: var(--dth-bg-light);
}.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;
}.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: var(--cpd-color-text-secondary);
                -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 {
                /* mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); */
                -webkit-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                        mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                -webkit-mask-image: var(--call-icon-mask-image);
                        mask-image: var(--call-icon-mask-image);
            }.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: var(--cpd-color-text-secondary);
                }.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: var(--cpd-color-text-secondary);
                            -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: var(--cpd-color-text-secondary);
            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: #fefefe;
            background-color: var(--dth-bg-light);
            -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 */
        }.mx_MEmoteBody {
    white-space: pre-wrap;
    text-align: start;
}.mx_MEmoteBody_sender {
    cursor: pointer;
}.mx_MFileBody_download {
    color: #38af9a;
    color: var(--cpd-color-text-action-accent);
    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_container {
        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-line-pack: center;
            align-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        max-width: 100%;
    }.mx_MFileBody_info .mx_MFileBody_info_icon {
        background-color: var(--cpd-color-bg-subtle-primary);
        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;
            background-color: var(--cpd-color-text-secondary);
            position: absolute;

            /* mask-image: url("$(res)/img/element-icons/room/composer/attach.svg"); */
            /* mask-image: var(--attach-icon-mask-image); */
            /* width: 15px;
            height: 15px;
            top: 8px;
            left: 8px; */

            -webkit-mask-image: url(../../customIcons/file-icon.9a6dc02.svg);

                    mask-image: url(../../customIcons/file-icon.9a6dc02.svg);

            -webkit-mask-image: var(--file-icon-mask-image);

                    mask-image: var(--file-icon-mask-image);
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
        }.mx_MFileBody_info .mx_MFileBody_info_container {
        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%;
    }.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;
    }.mx_MFileBody_info .mx_MFileBody_info_file_metadata {
        font: var(--cpd-font-body-md-regular);
        color: var(--cpd-color-text-secondary);
        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;
    }.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: #fefefe;

    background-color: var(--dth-bg-light);
}.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: #f4f6fa;
    pointer-events: none;
}.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 */
    }.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;
}.mx_MNoticeBody {
    white-space: pre-wrap;
    color: var(--cpd-color-text-secondary);
}.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: #9e9e9e;
            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: var(--cpd-color-text-secondary);
        -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: var(--cpd-color-text-secondary);
        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;
    gap: 16px;
    margin-bottom: 8px;
    max-width: 550px;
}.mx_MPollEndBody_icon {
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
    color: var(--cpd-color-text-secondary);
}.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);
}.mx_MTextBody {
    white-space: pre-wrap;
}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%;
        }/* A "media body" is any file upload looking thing, apart from images and videos (they *//* have unique styles). */.mx_MediaBody {
    background-color: var(--cpd-color-bg-subtle-secondary);
    border-radius: 12px;
    max-width: 280px; /* use max-width instead of width so it fits within right panels */

    color: var(--cpd-color-text-secondary);
    font: var(--cpd-font-body-md-regular);
    line-height: 1.5rem;

    padding: 6px 12px;
}.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: #fefefe;
    background: var(--dth-bg-light);
    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;
    }:root {
    --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
    --MessageTimestamp-max-width: 80px;
    --MessageTimestamp-color: var(--cpd-color-text-secondary);
}.mx_MessageTimestamp {
    color: var(--cpd-color-text-secondary);
    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;
}.mx_MjolnirBody {
    opacity: 0.4;
}.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);
    }.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: var(--cpd-color-gray-900);
            -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: var(--cpd-color-text-primary);
            }.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
    visibility: visible;
}.mx_ReactionsRow_showAll {
    color: var(--cpd-color-gray-900);
}.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: var(--cpd-color-text-primary);
        }.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;
    }.mx_RedactedBody {
    white-space: pre-wrap;
    color: var(--cpd-color-text-secondary);
    vertical-align: middle;

    padding-left: 20px;
    position: relative;
}.mx_RedactedBody::before {
        /* height: 14px; */
        /* width: 14px; */
        height: 20px;
        width: 20px;
        background-color: var(--cpd-color-icon-tertiary);
        -webkit-mask-image: url(../../customIcons/trash-icon.4ae7ffa.svg);
                mask-image: url(../../customIcons/trash-icon.4ae7ffa.svg);
        -webkit-mask-image: var(--trash-icon-mask-image);
                mask-image: var(--trash-icon-mask-image);
        -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; */
        top: -1px;
        left: -3px;
    }.mx_RoomAvatarEvent_avatar {
    display: inline;
    position: relative;
    top: 3px;
}.mx_TextualEvent {
    overflow-y: hidden;
    line-height: normal;
}.mx_TextualEvent a {
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
        cursor: pointer;
    }.mx_RoomView_searchResultsPanel .mx_TextualEvent {
        opacity: 1;
        opacity: initial; /* Unset the opacity value specified above on the search results panel */
    }.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);
}.mx_UnknownBody {
    white-space: pre-wrap;
}.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: #38af9a;
            color: var(--cpd-color-text-action-accent);
            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);
    }.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: #91a1c0;
    }.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon_verified::after {
        /* mask-image: url("$(res)/img/e2e/verified.svg"); */
        -webkit-mask-image: url(../../customIcons/padlock-neg-icon.9f7c9e3.svg);
                mask-image: url(../../customIcons/padlock-neg-icon.9f7c9e3.svg);
        /*TODO Cambiare colore $e2e-verified-color*/
        background-color: var(--cpd-color-text-primary);
    }.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon_warning::after {
        /* mask-image: url("$(res)/img/e2e/warning.svg"); */
        -webkit-mask-image: url(../../customIcons/warning-icon.3b33293.svg);
                mask-image: url(../../customIcons/warning-icon.3b33293.svg);
        /*TODO Cambiare colore  $e2e-warning-color;*/
        background-color: var(--cpd-color-text-primary);
    }.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: var(--cpd-color-gray-900);
        overflow-wrap: break-word;
        font-size: 0.75rem;
    }.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;
}.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;
    gap: 20px;
    padding-right: 64px;
    margin: 32px 0;
}.mx_PollHistoryList_list.mx_PollHistoryList_list_ENDED {
        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: var(--cpd-color-text-secondary);
}.mx_PollHistoryList_noResults .mx_PollHistoryList_loadMorePolls {
        margin-top: 16px;
    }.mx_PollHistoryList_loading {
    color: var(--cpd-color-text-secondary);
    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;
}.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: var(--cpd-color-text-secondary);
                }.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option:hover::after {
                    background-color: var(--cpd-color-text-primary);
                }.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: var(--cpd-color-text-secondary);
            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: var(--cpd-color-text-primary);
        }.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu{

        font: var(--cpd-font-body-sm-regular);
        color: var(--cpd-color-text-primary);
        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;
        }.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: #38af9a80;
        background-color: var(--dth-primary-color-opacity-50);
    }.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;
    }.mx_EncryptionInfo_spinner .mx_Spinner {
        margin-top: 25px;
        margin-bottom: 15px;
    }.mx_EncryptionInfo_spinner{

    text-align: center;
}.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: var(--cpd-color-gray-900);
        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: var(--cpd-color-text-primary);
            }.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: #38af9a;
                background-color: var(--cpd-color-text-action-accent);
            }.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));
    }.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;
    }.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_RoomSummaryCard_topic_box {
            width: 100%;
        }.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_container {
            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);
}.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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-gray-400);
            }.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: #fefefe;
        background-color: var(--dth-bg-light);
        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: #fefefe;
        background-color: var(--dth-bg-light);
        border-radius: 8px;
        margin-top: 8px;
        padding: 0 8px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }.mx_ThreadPanel .mx_MessageTimestamp {
        color: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-bg-subtle-secondary);
        }.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: var(--cpd-color-text-primary);
                display: inline-block;
                vertical-align: middle;
            }.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem :last-child {
            color: var(--cpd-color-text-secondary);
        }.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 #e9edf1;
            }.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 */
                }.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: #91a1c0;
        }.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: var(--cpd-color-gray-900);
        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;
        }.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_container .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;
                padding: 0px 16px 0px 16px;
                font-size: var(--cpd-font-size-body-md);
            }.mx_UserInfo.mx_BaseCard .mx_UserInfo_container .mx_UserInfo_profileField .mx_Field {
                margin: 0;
            }.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;
            }/* 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: var(--cpd-color-bg-subtle-primary);
            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;
        }.mx_WidgetCard .mx_AppTileFullWidth {
        max-width: none;
        max-width: initial;
        width: auto !important;
        height: 100%;
        border: 0;
    }.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;
    }.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%;
    }.mx_RoomList {
    height: 100%;
}.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);
        }/* "+" button matching legacy LegacyRoomListHeader_plusButton style */.mx_RoomListHeaderView .mx_RoomListHeaderView_plusButton {
        width: 32px;
        height: 32px;
        border-radius: 19px;
        position: relative;
        padding: 8px;
        margin-left: 8px;
        margin-right: 12px;
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        border: none;
        cursor: pointer;
        /* Ensure centered layout for the icon pseudo-element */
        display: inline-block;
        vertical-align: middle;
        line-height: 0;
    }.mx_RoomListHeaderView .mx_RoomListHeaderView_plusButton::before {
            content: "";
            width: 16px;
            height: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            -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: #fefefe;
            background-color: var(--dth-text-white);
            -webkit-mask-image: url(../../icons/plus.95ca4d1.svg);
                    mask-image: url(../../icons/plus.95ca4d1.svg);
        }.mx_RoomListHeaderView .mx_RoomListHeaderView_plusButton:hover {
            background-color: #3baf8c;
            background-color: var(--dth-secondary-color);
        }.mx_RoomListHeaderView .mx_RoomListHeaderView_plusButton:hover::before {
                background-color: #fefefe;
                background-color: var(--dth-text-white);
            }.mx_RoomListItemMenuView svg {
        fill: var(--cpd-color-icon-primary);
    }/**
 * The RoomListItemView mirrors the legacy RoomTile layout:
 * button (flex row) = avatar + titleContainer + dateContainer + badge + callBadge + menu
 */.mx_RoomListItemView {
    /* Remove button default style */
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    border: none;
    text-align: inherit;
    cursor: pointer;
    width: 100%;
    /* Inherit font from parent — <button> defaults to system UI/Arial without this */
    font: inherit;
    color: inherit;

    /* Match legacy: margin-bottom: 4px; padding: 4px; display: flex; */
    margin-bottom: 4px;
    padding: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    contain: content;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: var(--cpd-font-size-body-sm);
}.mx_RoomListItemView .mx_DecoratedRoomAvatar,
    .mx_RoomListItemView .mx_RoomAvatarView,
    .mx_RoomListItemView .mx_BaseAvatar {
        margin-right: 10px;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }.mx_RoomListItemView .mx_RoomListItemView_titleContainer {
        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;
        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_RoomListItemView .mx_RoomListItemView_titleContainer .mx_RoomListItemView_subtitle {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: var(--cpd-color-text-secondary);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 4px;
            line-height: 1.25;
            position: relative;
            top: -1px;
        }.mx_RoomListItemView .mx_RoomListItemView_titleContainer .mx_RoomListItemView_title,
        .mx_RoomListItemView .mx_RoomListItemView_titleContainer .mx_RoomListItemView_subtitle_text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }.mx_RoomListItemView .mx_RoomListItemView_titleContainer .mx_RoomListItemView_title {
            font: var(--cpd-font-body-md-regular);
            line-height: 1.25;
        }.mx_RoomListItemView .mx_RoomListItemView_titleContainer .mx_RoomListItemView_title.mx_RoomListItemView_titleHasUnreadEvents {
                font-weight: var(--cpd-font-weight-semibold);
            }.mx_RoomListItemView .mx_RoomListItemView_titleContainer .mx_RoomListItemView_titleWithSubtitle {
            margin-top: -2px;
        }.mx_RoomListItemView .mx_RoomListItemView_dateContainer {
        min-width: 0;
        margin-right: 8px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }.mx_RoomListItemView .mx_RoomListItemView_dateContainer .mx_RoomListItemView_subtitle {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: var(--cpd-color-text-secondary);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 4px;
            line-height: 1.25;
            position: relative;
            top: -1px;
        }.mx_RoomListItemView .mx_RoomListItemView_dateContainer .mx_RoomListItemView_subtitle_text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }.mx_RoomListItemView .mx_RoomListItemView_badgeContainer {
        min-height: 16px;
        margin: auto 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }.mx_RoomListItemView .mx_RoomListItemView_badgeContainer.mx_RoomListItemView_favouriteBadgeContainer {
            /* margin: auto 8px; */
            margin-right: 8px;
        }.mx_RoomListItemView .mx_RoomListItemView_badgeContainer .mx_NotificationBadge {
            margin-right: 2px;
        }.mx_RoomListItemView .mx_RoomListItemView_badgeContainer .mx_NotificationBadge_dot {
            margin-left: 5px;
            margin-right: 7px;
        }.mx_RoomListItemView .mx_RoomListItemMenuView {
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }/* Selected state: matches legacy --dth-primary-color */.mx_RoomListItemView_selected {
    background-color: #38af9a;
    background-color: var(--dth-primary-color);
    border-radius: 8px;
    color: #fefefe;
    color: var(--dth-text-white);
}.mx_RoomListItemView_selected .mx_RoomListItemView_icon {
        color: #fefefe !important;
        color: var(--dth-text-white) !important;
        fill: currentColor !important;
    }.mx_RoomListItemView_selected:hover,
    .mx_RoomListItemView_selected.mx_RoomListItemView_hover {
        color: var(--cpd-color-text-primary);
    }.mx_RoomListItemView_selected:hover .mx_RoomListItemView_icon, .mx_RoomListItemView_selected.mx_RoomListItemView_hover .mx_RoomListItemView_icon {
            color: var(--cpd-color-text-primary) !important;
            fill: currentColor !important;
        }.mx_RoomListItemView_selected .mx_RoomListItemView_dateContainer .mx_RoomListItemView_subtitle {
        color: #ededed;
        color: var(--dth-primary-light-grey);
    }.mx_RoomListItemView_selected .mx_RoomListItemView_titleContainer .mx_RoomListItemView_subtitle {
        color: #ededed;
        color: var(--dth-primary-light-grey);
    }/* Hover / focus / menu-open state: matches legacy */.mx_RoomListItemView_hover {
    background-color: #38af9a80;
    background-color: var(--dth-primary-color-opacity-50);
    border-radius: 8px;
}.mx_RoomListItemView_hover .mx_RoomListItemView_dateContainer .mx_RoomListItemView_subtitle {
        color: var(--cpd-color-text-primary);
    }.mx_RoomListItemView_hover .mx_RoomListItemView_titleContainer .mx_RoomListItemView_subtitle {
        color: var(--cpd-color-text-primary);
    }/* When hover menu is visible, hide badge and show menu buttons */.mx_RoomListItemView_menu_open .mx_RoomListItemView_badgeContainer {
        width: 0;
        height: 0;
        display: none;
    }.mx_RoomListItemView_bold .mx_RoomListItemView_title {
    font-weight: var(--cpd-font-weight-semibold);
}/* Icon color */.mx_RoomListItemView_icon {
    color: var(--cpd-color-text-primary) !important;
    fill: currentColor !important;
}.mx_RoomListPanel {
    background-color: var(--cpd-color-bg-canvas-default);
    height: 100%;
    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
}.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);
        }/* Filtro attivo*/.mx_RoomListPrimaryFilters li[aria-selected="true"].mx_RoomListPrimaryFilters_button_container button {
            background-color: #38af9a;
            background-color: var(--dth-primary-color);
        }.mx_RoomListPrimaryFilters li[aria-selected="true"].mx_RoomListPrimaryFilters_button_container .mx_RoomListPrimaryFilters_label {
            color: #fefefe;
            color: var(--dth-text-white);
            font-weight: bold;
        }.mx_RoomListPrimaryFilters li[aria-selected="true"].mx_RoomListPrimaryFilters_button_container .mx_RoomListPrimaryFilters_badge {
            background-color: #fefefe;
            background-color: var(--dth-text-white);
            color: #38af9a;
            color: var(--dth-primary-color);
        }.mx_RoomListPrimaryFilters .mx_RoomListPrimaryFilters_button_container button {
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
    }.mx_RoomListPrimaryFilters .mx_RoomListPrimaryFilters_label {
        color: var(--cpd-color-text-primary);
    }.mx_RoomListPrimaryFilters .mx_RoomListPrimaryFilters_badge {
        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;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin-left: 6px;
        border-radius: 9px;
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
        color: #fefefe;
        color: var(--dth-text-white);
        font-size: 11px;
        font-weight: 600;
        line-height: 18px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }.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 .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 svg {
            fill: var(--cpd-color-icon-secondary);
        }.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_RoomListSecondaryFilters {
    font: var(--cpd-font-body-md-medium);
    margin: var(--cpd-space-2x);
    margin-left: var(--cpd-space-1x);
}.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);
    }: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: var(--cpd-color-text-primary);
        }.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: var(--cpd-color-text-primary);
            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 #f2f5f8;
    border: var(--container-border-width) solid #f2f5f8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #f2f5f8;
}.mx_AppTileFullWidth {
    width: 100% !important; /* to override the inline style set by the resizer */
    margin: 0;
    padding: 0;
    border: 8px solid #f2f5f8;
    border: var(--container-border-width) solid #f2f5f8;
    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: #f2f5f8;
}.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: #f2f5f8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    padding-top: 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: #38af9a80;
                background-color: var(--dth-primary-color-opacity-50);
                border-radius: 50%;
                left: 0;
                top: 0;
            }.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button .mx_Icon {
                color: #61708b;
            }/* 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: #fefefe;

        background-color: var(--dth-bg-light);
    }.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: #fefefe !important;
        background-color: var(--dth-bg-light) !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 transparent;
    background: #fefefe;
    background: var(--dth-bg-light);
    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 rgba(0, 0, 0, 0.04);
            box-shadow: 0px -16px 32px rgba(0, 0, 0, 0.04);
}.mx_Autocomplete_ProviderSection {
    border-bottom: 1px solid transparent;
    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: var(--cpd-color-text-primary);
}.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: var(--cpd-color-text-primary);
}.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: auto;
    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: #f2f5f8;
    outline: none;
}.mx_Autocomplete_provider_name {
    margin: 12px;
    color: var(--cpd-color-text-primary);
    font-weight: 400;
    opacity: 0.4;
}.mx_AuxPanel {
    min-width: 0px;
    width: 100%;
    margin: 0px auto;

    overflow: auto;
}.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: #faa;
        }
        to {
            background-color: #fefefe;
            background-color: var(--dth-bg-light);
        }
    }@keyframes visualbell {
        from {
            background-color: #faa;
        }
        to {
            background-color: #fefefe;
            background-color: var(--dth-bg-light);
        }
    }.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 {
                display: -webkit-inline-box;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                -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;
            }/* 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), $background; */
                    background: var(--avatar-background);
                    color: #fefefe;
                    color: var(--avatar-color, var(--dth-bg-light));
                    background-repeat: no-repeat;
                    background-size: 1rem;
                    border-radius: 1rem;
                    text-align: center;
                    font-weight: normal;
                    line-height: 1rem;
                    font-size: 0.6275rem;

                    /* #region Per rendere la lettera uguale all'Avatar */
                    text-transform: uppercase;
                    font-family: var(--cpd-font-family-sans);
                    font-weight: bold;
                    overflow: hidden;
                    /* #endregion */
                }.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;
    }.mx_DecryptionFailureBar {
    --gap-row: 8px;
    --gap-column: 12px;
    --gap: var(--gap-row) var(--gap-column);
    --size-icon: 24px;

    background-color: var(--cpd-color-bg-subtle-primary);
    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: var(--cpd-color-icon-critical-primary);
                -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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-bg-subtle-primary);
    -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: var(--cpd-color-icon-critical-primary);
}.mx_E2EIcon_normal::after {
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
            mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    background-color: var(--cpd-color-icon-tertiary);
}.mx_E2EIcon_verified .mx_E2EIcon_normal::after, .mx_E2EIcon_warning .mx_E2EIcon_normal::after {
        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: var(--cpd-color-icon-success-primary);
}.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);
}.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 transparent;
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
        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 */
        }.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; */
        top: 0px;
        left: 0px;
        height: 24px;
        width: 24px;
        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 {
    /* mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg"); */
    -webkit-mask-image: url(../../customIcons/emoji.ba4c75f.svg);
            mask-image: url(../../customIcons/emoji.ba4c75f.svg);
    -webkit-mask-image: var(--emoji-icon-mask-image);
            mask-image: var(--emoji-icon-mask-image);
}.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; */
        top: 0px;
        left: 0px;
        height: 24px;
        width: 24px;
        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: var(--cpd-color-bg-subtle-secondary);
        }.mx_MessageComposer_wysiwyg .mx_EmojiButton:hover::before {
            background-color: var(--cpd-color-gray-900);
        }.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 transparent /*$background*/;
        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 transparent /*$background*/;
                    box-shadow: 0 0 0 3px transparent /*$background*/;
            border-radius: 50%;
        }.mx_EventTile[data-layout="bubble"].mx_EventTile_highlight .mx_EventTile_avatar {
            border-color: var(--cpd-color-yellow-200);
        }.mx_EventTile[data-layout="bubble"].mx_EventTile_highlight::before {
            background-color: var(--cpd-color-yellow-200);
        }.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar {
            border-color: var(--cpd-color-bg-subtle-secondary);
        }/* 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: var(--cpd-color-bg-subtle-secondary);
        }.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 var(--cpd-color-bg-subtle-secondary);
                        box-shadow: 0 0 0 3px var(--cpd-color-bg-subtle-secondary);
            }.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;
        /* padding-right: max(60px, var(--EventTile_bubble-margin-inline-end, 60px));  */
        /*48px (timestamp) + 12px (padding)*/
    }.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: var(--cpd-color-gray-400);
    }.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: -47px;
        }.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MediaBody {
            background: #ededed;
            background: var(--dth-primary-light-grey);
        }.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: var(--dth-primary-light-grey);
}.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 */
            top: 0px;
            right: -50px;
        }.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MediaBody {
            background: #38af9a4d;
            background: var(--dth-primary-color-opacity-30);
        }.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MessageActionBar {
            inset-inline-end: 0;
        }.mx_EventTile[data-layout="bubble"][data-self="true"]{

        --backgroundColor: var(--dth-primary-color-opacity-30);
}.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 */.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine {
            /* TODO: Use a common class name instead */

            /* we put the timestamps for media (other than stickers) atop the media */
        }.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;
            }.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine.mx_EventTile_image .mx_MessageTimestamp, .mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine.mx_EventTile_video .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: 2px 4px 2px 4px;
        }.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; */
            top: 0px;
        }.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 */
}.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);
    }.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: var(--cpd-color-text-secondary);
    }.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: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
        color: #f4f6fa;
        border-radius: 5px;
        padding-inline: 2px;
        cursor: pointer;
    }.mx_EventTile .mx_EventTile_searchHighlight a {
            background-color: #38af9a;
            background-color: var(--cpd-color-text-action-accent);
            color: #f4f6fa;
        }.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: var(--cpd-color-text-primary);
        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: var(--cpd-color-yellow-200);
            }.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: var(--cpd-color-bg-subtle-secondary);
            }.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: var(--cpd-color-bg-subtle-secondary);
            }.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: var(--cpd-color-bg-subtle-secondary);
                    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: var(--cpd-color-bg-subtle-secondary);
                }.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: var(--cpd-color-text-secondary);
        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", "", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
            font-family: "Inconsolata", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
            background-color: var(--cpd-color-bg-subtle-primary);
        }.mx_EventTile_content .markdown-body code:not(pre *) {
            background-color: var(--cpd-color-bg-subtle-primary);
            border: 1px solid var(--cpd-color-gray-400);
            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 var(--cpd-color-gray-400);
}.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: var(--cpd-color-text-link-external);
        }.mx_EventTile_content .markdown-body blockquote {
            border-left: 2px solid var(--cpd-color-border-interactive-primary);
            color: var(--cpd-color-text-secondary);
            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: var(--cpd-color-text-secondary);
        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: var(--cpd-color-icon-critical-primary); /* 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 var(--cpd-color-gray-900);
        }/* 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: var(--cpd-color-text-primary);
        }.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: var(--cpd-color-gray-400);
        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: var(--cpd-color-text-critical-primary);
    }.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: var(--cpd-color-bg-subtle-secondary);
    }/* 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: var(--cpd-color-text-secondary);
            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;
    }
}.mx_EventTileBubble.mx_HistoryTile {
    margin: var(--EventTileBubble_margin-block) auto;
}.mx_EventTileBubble.mx_HistoryTile::before {
        background-color: #91a1c0;
        -webkit-mask-image: url(../../img/element-icons/hide.72c451b.svg);
                mask-image: url(../../img/element-icons/hide.72c451b.svg);
    }: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)
        );
    }.mx_InvitedIconView {
    color: var(--cpd-color-icon-tertiary);
}.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: #fefefe;
    background: var(--dth-bg-light);
    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);
}.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);
}.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: var(--cpd-color-gray-400);
        }.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: var(--cpd-color-gray-900);
            -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: var(--cpd-color-gray-400);
        }.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: 19px;
        position: relative;
        padding: 8px;
        margin-left: 8px;
        margin-right: 12px;
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
        -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: #fefefe;
            background-color: var(--dth-text-white);
            -webkit-mask-image: url(../../icons/plus.95ca4d1.svg);
                    mask-image: url(../../icons/plus.95ca4d1.svg);
        }.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton:hover {
            background-color: #3baf8c;
            background-color: var(--dth-secondary-color);
        }.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton:hover::before {
                background-color: #fefefe;
                background-color: var(--dth-text-white);
            }.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_iconNewCall::before {
    /* mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); */
    -webkit-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
            mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
    -webkit-mask-image: var(--call-icon-mask-image);
            mask-image: var(--call-icon-mask-image);
}.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);
}.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: #38af9a;
        color: var(--cpd-color-text-action-accent);
        text-align: center;
    }.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 var(--cpd-color-bg-subtle-primary);
            border-inline-start: 2px solid var(--cpd-color-bg-subtle-primary);
    border-radius: 2px;
    color: var(--cpd-color-gray-900);
}.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;
        }.mx_LiveContentSummary {
    color: var(--cpd-color-text-secondary);
}.mx_LiveContentSummary .mx_LiveContentSummary_text::before {
            display: inline-block;
            vertical-align: text-bottom;
            content: "";
            background-color: var(--cpd-color-text-secondary);
            -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: #38af9a;
            color: var(--cpd-color-text-action-accent);
        }.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active::before {
                background-color: #38af9a;
                background-color: var(--cpd-color-text-action-accent);
            }.mx_LiveContentSummary .mx_LiveContentSummary_participants::before {
        display: inline-block;
        vertical-align: text-bottom;
        content: "";
        background-color: var(--cpd-color-text-secondary);
        -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;
    }.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);
    }.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);
    }.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;
    }.mx_MessageComposer_wrapper {
    vertical-align: middle;
    margin: auto;
    border-top: 1px solid transparent;
    position: relative;
    padding-left: 42px;
    padding-right: 16px;
    background-color: #ededed;
    background-color: var(--dth-primary-light-grey);
    border-radius: 8px;
    border-radius: var(--dth-button-border-radius);
}.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: var(--cpd-color-gray-900);
    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: var(--cpd-color-text-primary);
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
        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: #38af9a;
            color: var(--cpd-color-text-action-accent);
            opacity: 1;
        }.mx_MessageComposer_input textarea::-webkit-input-placeholder {
            color: #38af9a;
            color: var(--cpd-color-text-action-accent);
        }.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: #faa;
    }
    to {
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
    }
}.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; */
        top: 0px;
        left: 0px;
        height: 24px;
        width: 24px;
        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: var(--cpd-color-text-critical-primary);
    }.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; */
        top: 0px;
        left: 0px;
        height: 24px;
        width: 24px;
        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: var(--cpd-color-bg-subtle-secondary);
        }.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover::before {
            background-color: var(--cpd-color-gray-900);
        }.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: #38af9a;
                background-color: var(--cpd-color-text-action-accent);
                z-index: 2;
            }.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
            background-color: var(--cpd-color-text-critical-primary);
        }.mx_MessageComposer_upload::before {
    /* mask-image: url("$(res)/img/element-icons/room/composer/attach.svg"); */
    -webkit-mask-image: url(../../customIcons/attach.78fd0d9.svg);
            mask-image: url(../../customIcons/attach.78fd0d9.svg);
    -webkit-mask-image: var(--attach-icon-mask-image);
            mask-image: var(--attach-icon-mask-image);
}.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 {
    /* mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); */
    -webkit-mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
            mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
    -webkit-mask-image: var(--mic-on-solid-mask-image);
            mask-image: var(--mic-on-solid-mask-image);
}.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;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    position: relative;
    /* background-color: var(--cpd-color-icon-accent-tertiary); */
    background-color: #38af9a;
    background-color: var(--dth-primary-color);
}.mx_MessageComposer_sendMessage::before {
        position: absolute;
        /* height: 16px;
        width: 16px;
        top: 8px;
        left: 9px; */
        height: 20px;
        width: 20px;
        top: 6px;
        left: 7px;
        -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: #fefefe;

        background-color: var(--dth-text-white);
        content: "";
    }.mx_MessageComposer_sendMessage:hover {
        background-color: #3baf8c;
        background-color: var(--dth-secondary-color);
    }.mx_MessageComposer_sendMessage:hover::before {
            background-color: #fefefe;
            background-color: var(--dth-text-white);
        }.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;
    }.mx_MessageComposerFormatBar {
    display: none;
    width: auto;/* calc(32px * 6);*/
    height: 32px;
    position: absolute;
    cursor: pointer;
    border-radius: 8px;
    background-color: #fefefe;
    background-color: var(--dth-bg-light);
    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;
        z-index: 1002; /* above the autocomplete (1001) */
    }.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;
}.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: #fefefe;
                background-color: var(--dth-text-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: var(--cpd-color-text-secondary);
    }.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: #38af9a;
        background-color: var(--dth-primary-color);

        /* 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);
        }.mx_RoomTile.mx_RoomTile_selected .mx_NotificationBadge.mx_NotificationBadge_visible {
    background-color: #fefefe;
    background-color: var(--dth-text-white);
}.mx_RoomTile.mx_RoomTile_selected .mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
        color: #38af9a;
        color: var(--dth-primary-color);
    }.mx_OverflowTileView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--cpd-color-text-primary);
    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: #91a1c0;
}.mx_OverflowTileView_icon {
    padding-left: 3px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    position: relative;
    line-height: 0;
}.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;
            }.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: #38af9a;
                background-color: var(--dth-primary-color);
                color: #fefefe;
                color: var(--dth-text-white);
            }.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: #38af9a;
            color: var(--dth-primary-color);
            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;
        }.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: #38af9a;
        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);
    }.mx_PresenceLabel {
    font-size: 0.6875rem;
    opacity: 0.5;
}.mx_PresenceLabel_online {
    color: var(--cpd-color-text-success-primary);
}.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: var(--cpd-color-bg-subtle-secondary);
            }.mx_ReadReceiptGroup .mx_ReadReceiptGroup_remainder {
        color: var(--cpd-color-text-secondary);
        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 #fefefe;
            border: 1px solid var(--dth-bg-light);
            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: #f5f8fa;
            }.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: var(--cpd-color-text-secondary);
                }.mx_ReadReceiptGroup_person--tooltip {
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.mx_ReplyPreview {
    /* border: 1px solid $primary-hairline-color; */
    margin: 2px 0px;
    border-bottom: none;
    background: #fefefe;
    background: var(--dth-bg-light);
    max-height: 50vh;
    overflow: auto;
}.mx_ReplyPreview .mx_ReplyPreview_section {
        border-bottom: 1px solid transparent;
        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 8px 8px;
        background: #38af9a4d;
        background: var(--dth-primary-color-opacity-30);
    }.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: var(--cpd-color-text-secondary);
            font-weight: 400;
            /* opacity: 0.4; */
        }.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_text {
                color: var(--cpd-color-text-secondary);
            }.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel {
                background-color: var(--cpd-color-text-secondary);
                -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_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel:hover {
                    background-color: var(--cpd-color-text-primary);
                }.mx_ReplyPreview .mx_ReplyPreview_blockquote {
        margin: 0;
        padding-left: 10px;
        border-left: 2px solid var(--username-color);
        border-radius: 2px;
    }.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 rgba(0, 0, 0, 0.04);
                box-shadow: 0px -16px 32px rgba(0, 0, 0, 0.04);
        /* border-radius: 8px 8px 0 0; */
        border-radius: 8px;
    }.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: inline-block;
        grid-template:
            "sender" auto
            "message" auto
            / 100%;
        text-decoration: none;
        color: var(--cpd-color-text-secondary);
        -webkit-transition: color ease 0.15s;
        transition: color ease 0.15s;
        gap: 2px;
        max-width: 100%;

        /* avoid overflow with wide content*/
    }.mx_ReplyTile > a:hover {
            color: var(--cpd-color-text-primary);
        }.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 */
        }.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;
    }.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: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-bg-subtle-primary);
    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: var(--cpd-color-text-primary);
    font-weight: var(--cpd-font-weight-semibold);
    padding-right: 8px;
}.mx_RoomCallBanner_label::before {
        display: inline-block;
        vertical-align: middle;
        content: "";
        background-color: var(--cpd-color-text-secondary);
        -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);
    }.mx_RoomHeader {
    height: 64px;
    min-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: #fefefe;
    background-color: var(--dth-bg-light);
    -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: var(--cpd-color-text-secondary);
    background: #fefefe;
    background: var(--dth-bg-light);
    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: var(--cpd-color-text-primary);
        background: var(--cpd-color-bg-subtle-primary);
    }.mx_RoomHeader .mx_FacePile.mx_FacePile_toggled {
        background: var(--cpd-color-bg-subtle-primary);
        color: #38af9a;
        color: var(--dth-primary-color);
        font: var(--cpd-font-body-sm-semibold);
    }.mx_RoomHeader .mx_BaseAvatar {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin: 1px;
}.mx_RoomHeader_videoCallOption {
    /* Workaround for https://github.com/element-hq/compound/issues/331 */
    min-width: 240px;
}.mx_RoomHeader .mx_RoomHeader_toggled > svg,
.mx_RoomHeader .mx_RoomHeader_toggled > path {
    fill: #38af9a;
    fill: var(--dth-primary-color);
}.mx_RoomInfoLine {
    color: var(--cpd-color-text-secondary);
    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: var(--cpd-color-gray-900);
        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;
        }.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: var(--cpd-color-text-secondary);
    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);
}.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%;
}.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: var(--cpd-color-bg-subtle-primary);
    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: var(--cpd-color-text-primary);
        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: var(--cpd-color-text-secondary);
        }.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: var(--cpd-color-text-secondary);
            }.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: #38af9a;
            background-color: var(--cpd-color-text-action-accent);
            border: 3px solid var(--cpd-color-bg-subtle-primary);

            position: relative;
            left: calc(-50px / 4 - 3px);
        }.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video::before {
                content: "";
                background-color: #fefefe;
                background-color: var(--dth-bg-light);
                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;
        }.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;
    }.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: var(--cpd-color-text-secondary);
    }.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: #38af9a80;
            background: var(--dth-primary-color-opacity-50);
        }.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover::before, .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover::before {
                background: #fefefe;
                background: var(--dth-text-white);
            }/* 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: var(--cpd-color-text-primary);
            }.mx_RoomSublist .mx_RoomSublist_showNButton {
        cursor: pointer;
        font-size: 0.8125rem;
        line-height: 1.125rem;
        color: var(--cpd-color-text-secondary);

        /* 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: var(--cpd-color-gray-900);
            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: #38af9a80;
                background-color: var(--dth-primary-color-opacity-50);
                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(245, 245, 245, 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 var(--cpd-color-text-primary);
        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 */
}/* 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 {
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
        border-radius: 8px;
        color: #fefefe;
        color: var(--dth-text-white);
    }.mx_RoomTile.mx_RoomTile_selected:hover {
            color: var(--cpd-color-text-primary);
        }.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_dateContainer .mx_RoomTile_subtitle {
                color: #ededed;
                color: var(--dth-primary-light-grey);
            }.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_titleContainer .mx_RoomTile_subtitle {
                color: #ededed;
                color: var(--dth-primary-light-grey);
            }.mx_RoomTile:hover,
    .mx_RoomTile:focus-within,
    .mx_RoomTile.mx_RoomTile_hasMenuOpen {
        background-color: #38af9a80;
        background-color: var(--dth-primary-color-opacity-50);
        border-radius: 8px;
        /* color: var(--dth-text-white); */
    }.mx_RoomTile:hover .mx_RoomTile_dateContainer .mx_RoomTile_subtitle, .mx_RoomTile:focus-within .mx_RoomTile_dateContainer .mx_RoomTile_subtitle, .mx_RoomTile.mx_RoomTile_hasMenuOpen .mx_RoomTile_dateContainer .mx_RoomTile_subtitle {
                /* color: var(--dth-primary-light-grey); */
                color: var(--cpd-color-text-primary);
            }.mx_RoomTile:hover .mx_RoomTile_titleContainer .mx_RoomTile_subtitle, .mx_RoomTile:focus-within .mx_RoomTile_titleContainer .mx_RoomTile_subtitle, .mx_RoomTile.mx_RoomTile_hasMenuOpen .mx_RoomTile_titleContainer .mx_RoomTile_subtitle {
                /* color: var(--dth-primary-light-grey); */
                color: var(--cpd-color-text-primary);
            }.mx_RoomTile .mx_DecoratedRoomAvatar,
    .mx_RoomTile .mx_RoomTile_avatarContainer {
        margin-right: 10px;
    }.mx_RoomTile .mx_RoomTile_details {
        min-width: 0;
    }.mx_RoomTile .mx_RoomTile_dateContainer {
        /* height: 32px; */
        min-width: 0;
        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;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
    }.mx_RoomTile .mx_RoomTile_dateContainer .mx_RoomTile_subtitle {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: var(--cpd-color-text-secondary);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 4px;
            line-height: 1.25;
            position: relative;
            top: -1px;
        }.mx_RoomTile .mx_RoomTile_dateContainer .mx_RoomTile_title,
        .mx_RoomTile .mx_RoomTile_dateContainer .mx_RoomTile_subtitle_text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }.mx_RoomTile .mx_RoomTile_dateContainer .mx_RoomTile_title {
            font: var(--cpd-font-body-md-regular);
            line-height: 1.25;
        }.mx_RoomTile .mx_RoomTile_dateContainer .mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
                font-weight: var(--cpd-font-weight-semibold);
            }.mx_RoomTile .mx_RoomTile_dateContainer .mx_RoomTile_titleWithSubtitle {
            margin-top: -2px; /* shift the title up a bit more */
        }.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: var(--cpd-color-text-secondary);
            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 {
        min-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 */
        min-height: 20px;
        aspect-ratio: 1;
        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: "";
            min-width: 16px;
            min-height: 16px;
            aspect-ratio: 1;
            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-text-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 {
        /* mask-image: url("@vector-im/compound-design-tokens/icons/files.svg"); */
        -webkit-mask-image: url(../../customIcons/file-icon.9a6dc02.svg);
                mask-image: url(../../customIcons/file-icon.9a6dc02.svg);
        -webkit-mask-image: var(--file-icon-mask-image);
                mask-image: var(--file-icon-mask-image);
    }.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(../../customIcons/settings-neg-icon.c9b09e5.svg);
                mask-image: url(../../customIcons/settings-neg-icon.c9b09e5.svg);
        -webkit-mask-image: var(--quick-settings-mask-image);
                mask-image: var(--quick-settings-mask-image);
    }.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 {
        /* mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg"); */
        -webkit-mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
                mask-image: url(../../customIcons/leave-chat-icon.ac05702.svg);
        -webkit-mask-image: var(--leave-mask-image);
                mask-image: var(--leave-mask-image);
    }.mx_RoomUpgradeWarningBar {
    max-height: 235px;
    background-color: #f7f7f7;
    padding-left: 20px;
    padding-right: 20px;
    overflow: scroll;
}.mx_RoomUpgradeWarningBar_wrapped {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
}.mx_RoomUpgradeWarningBar_header {
    color: var(--cpd-color-text-critical-primary);
    font-weight: bold;
}.mx_RoomUpgradeWarningBar_body {
    color: var(--cpd-color-text-critical-primary);
}.mx_RoomUpgradeWarningBar_upgradelink {
    color: var(--cpd-color-text-critical-primary);
    text-decoration: underline;
}.mx_RoomUpgradeWarningBar_small {
    color: var(--cpd-color-gray-900);
    font-size: 70%;
}.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: #38af9a;
    color: var(--cpd-color-text-action-accent);
}.mx_ThirdPartyMemberInfo {
    padding: var(--cpd-space-4x);
}.mx_ThreadSummary,
.mx_ThreadSummary_content {
    color: var(--cpd-color-text-secondary);
}.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: var(--cpd-color-bg-subtle-secondary);
    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 var(--cpd-color-bg-subtle-secondary); /* 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: linear-gradient(270deg, var(--cpd-color-bg-subtle-primary) 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: var(--cpd-color-text-secondary);
        }.mx_ThreadSummary:hover,
    .mx_ThreadSummary:focus {
        border-color: var(--cpd-color-gray-400);
    }.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: var(--cpd-color-text-secondary);
        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: var(--cpd-color-text-secondary);
    }.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 #38af9a;
    border: 6px solid var(--cpd-color-icon-accent-primary);
    pointer-events: none;
}.mx_TopUnreadMessagesBar_scrollUp {
    height: 38px;
    border-radius: 19px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #fefefe;
    background: var(--dth-bg-light);
    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: #fefefe;
    background: var(--dth-bg-light);
    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);
}.unread-counter {
    border-radius: 38px;
    font: var(--cpd-font-body-xs-semibold);
    color: #fefefe;
    color: var(--dth-text-white);
    background-color: #38af9a;
    background-color: var(--dth-primary-color);
    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;
}.mx_RoomListItemView_selected .unread-counter {
    color: #38af9a;
    color: var(--dth-primary-color);
    background-color: #fefefe;
    background-color: var(--dth-text-white);
}@media (forced-colors: active) {
    .unread-counter {
        outline: 1px solid transparent;
    }
}.unread {
    inline-size: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}.unread div {
        block-size: 8px;
        inline-size: 8px;
        background-color: #38af9a;
        background-color: var(--dth-primary-color);
        border-radius: 100%;
    }@media (forced-colors: active) {
    .unread div {
        outline: 1px solid transparent;
    }
}.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: 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));
}.mx_VoiceRecordComposerTile_stop {
    /* 28px plus a 2px border makes this a 32px square (as intended) */
    width: 28px;
    height: 28px;
    border: 2px solid var(--cpd-color-text-critical-primary);
    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: var(--cpd-color-text-critical-primary);
    }.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: var(--cpd-color-gray-900);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url(../../customIcons/trash-icon.4ae7ffa.svg);
            mask-image: url(../../customIcons/trash-icon.4ae7ffa.svg);
    -webkit-mask-image: var(--trash-icon-mask-image);
            mask-image: var(--trash-icon-mask-image);
}.mx_VoiceRecordComposerTile_delete:hover {
        background-color: var(--cpd-color-icon-primary);
    }.mx_VoiceRecordComposerTile_uploadingState {
    margin-right: 10px;
    color: var(--cpd-color-text-secondary);
}.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: var(--cpd-color-text-critical-primary);
            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;
    }
}.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 #fefefe;
    border: 1px solid var(--dth-bg-light);
    border-radius: 40px;
}.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
    position: relative;
    display: inline-block;
    color: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-gray-400);
    border: 1px solid #fefefe;
    border: 1px solid var(--dth-bg-light);
    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: #9e9e9e;
}.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;
    }.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 transparent;
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
        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;
        }.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: var(--cpd-color-gray-400);
        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: var(--cpd-color-gray-700);
    }.mx_WysiwygComposer_Editor_container {
    /* These are set in Javascript */
    --avatar-letter: "";
    --avatar-background: unset;
    --placeholder: "";
}@keyframes visualbell {
        from {
            background-color: #faa;
        }
        to {
            background-color: #fefefe;
            background-color: var(--dth-bg-light);
        }
    }.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: var(--cpd-color-bg-subtle-primary);
            border: 1px solid var(--cpd-color-gray-400);
            border-radius: 2px;
        }.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *) {
            font-family: "Inconsolata", "", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
            font-family: "Inconsolata", var(--emoji-font-family), "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace !important;
            background-color: var(--cpd-color-bg-subtle-primary);
            border: 1px solid var(--cpd-color-gray-400);
            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: #38af9a;
            background-color: var(--dth-primary-color);

            /* ...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), $background; */
                background: var(--avatar-background);

                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: #fefefe;

                color: var(--avatar-color, var(--dth-bg-light));
                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 var(--cpd-color-gray-400);
        border-radius: 8px;
    }.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: var(--cpd-color-bg-subtle-secondary);
        }.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover .mx_FormattingButtons_Icon {
                color: var(--cpd-color-text-secondary);
            }.mx_FormattingButtons .mx_FormattingButtons_active {
        background: var(--cpd-color-green-300);
    }.mx_FormattingButtons .mx_FormattingButtons_active .mx_FormattingButtons_Icon {
            color: #38af9a;
            color: var(--cpd-color-text-action-accent);
        }.mx_FormattingButtons .mx_FormattingButtons_disabled .mx_FormattingButtons_Icon {
            color: var(--cpd-color-gray-400);
        }.mx_FormattingButtons .mx_FormattingButtons_Icon {
        --size: 16px;
        height: 16px;
        height: var(--size);
        width: 16px;
        width: var(--size);
        color: var(--cpd-color-gray-900);
    }.mx_FormattingButtons_Tooltip_KeyboardShortcut kbd {
        text-align: center;
        display: inline-block;
        text-transform: capitalize;
        font-family: Inter, sans-serif;
    }.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;
            }.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;
}.mx_FontScalingPanel_preview {
    --FontScalingPanel_preview-padding-block: 9px;

    border: 1px solid var(--cpd-color-gray-400);
    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: 130px;
    /* Override default mx_Field margin */
    margin-bottom: var(--cpd-space-2x) !important;
}.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: #afafaf;
        background-color: var(--dth-secondary-grey);
        -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);
        }.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: var(--cpd-color-text-critical-primary);
    }.mx_JoinRuleSettings_upgradeRequired {
    margin-left: 16px;
    padding: 4px 16px;
    border: 1px solid #38af9a;
    border: 1px solid var(--cpd-color-text-action-accent);
    border-radius: 8px;
    color: #38af9a;
    color: var(--cpd-color-text-action-accent);
    font-size: 0.75rem;
    line-height: 0.9375rem;
}.mx_JoinRuleSettings_spacesWithAccess > h4 {
        color: var(--cpd-color-text-secondary);
        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: var(--cpd-color-text-secondary);
        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: var(--cpd-color-text-primary);
        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: var(--cpd-color-text-secondary);
    }.mx_JoinRuleSettings_radioButton + span + .mx_StyledRadioButton {
            border-top: 1px solid var(--cpd-color-gray-400);
        }.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);
}.mx_KeyboardShortcut kbd {
        padding: 5px;
        border-radius: 4px;
        background-color: #fefefe;
        background-color: var(--dth-bg-light);
        min-width: 20px;
        text-align: center;
        display: inline-block;
        border: 1px solid var(--cpd-color-border-interactive-primary);
        -webkit-box-shadow: 0 2px var(--cpd-color-border-interactive-primary);
                box-shadow: 0 2px var(--cpd-color-border-interactive-primary);
        text-transform: capitalize;
    }.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);
        }.mx_NotificationPusherSettings .mx_NotificationPusherSettings_description {
        color: var(--cpd-color-text-primary);
    }.mx_NotificationPusherSettings .mx_NotificationPusherSettings_detail {
        margin-top: -4px;
        margin-bottom: 12px;
    }.mx_NotificationSettings2 .mx_SettingsSection_subSections {
        color: var(--cpd-color-text-primary);
        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;
        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 {
        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: #38af9a80;
                background: var(--dth-primary-color-opacity-50);
                margin: 0;
            }.mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag .mx_Tag_delete {
                    background: var(--cpd-color-gray-900);
                    color: #fff;
                    -ms-flex-item-align: initial;
                        align-self: initial;
                }.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;
    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: var(--cpd-color-text-secondary);
    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;
}.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;
}.mx_PowerLevelSelector_Button {
    -ms-flex-item-align: start;
        align-self: flex-start;
}.mx_PrivilegedMembersList {
    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;
    margin-bottom: 8px;
}.mx_PrivilegedMembersList_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}.mx_PrivilegedMembersList_name {
    font-size: 14px;
    color: var(--cpd-color-text-primary);
}.mx_PrivilegedMembersList_toggle {
    background: none;
    border: none;
    color: var(--cpd-color-text-primary);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
    text-align: left;
}.mx_PrivilegedMembersList_toggle:hover {
    text-decoration: underline;
}.mx_RoomProfileSettings {
    border-bottom: 1px solid var(--cpd-color-gray-400);
}.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;
    }.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);
    }.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: var(--cpd-color-text-primary);
    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;
}.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: #38af9a;
        color: var(--dth-primary-color);
    }.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);
    }.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);
    }.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;
}.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;
            }.mx_UpdateCheckButton_summary {
    margin-left: 16px;
}.mx_UserProfileSettings {
    border-bottom: 1px solid var(--cpd-color-gray-400);
}.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;
    }
}.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);
    }.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);
    }.mx_ChangeRecoveryKey .mx_KeyForm .mx_KeyForm_password > input[name="recoveryKey"] {
                /*
                 * From figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77506&t=d82NdRBDoKsUe1C9-4
                 */
                height: 70px;
                padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
                border: var(--cpd-border-width-1) solid;
                border-radius: 8px;
                margin: 0px;
            }.mx_ChangeRecoveryKey .mx_KeyForm .mx_KeyForm_password > button {
                /*
                 * See figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77506&t=d82NdRBDoKsUe1C9-4
                 * Avoid stretching the hide/show symbol to the height of the input, and centre it vertically.
                 */
                height: 24.5px;
                padding: var(--cpd-space-1x);
                -ms-flex-item-align: center;
                    align-self: center;
            }.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;
}.mx_EncryptionCard_emphasisedContent span {
        font: var(--cpd-font-body-md-medium);
        text-align: center;
    }.mx_RecoveryPanelOutOfSync {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-2x);
}/* Red text for the "Do not close this window" warning*/.mx_ResetIdentityPanel_warning {
    color: var(--cpd-color-text-critical-primary);
}.mx_SettingsBanner {
    background: var(--cpd-color-bg-subtle-primary);
    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;
    }.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;
}.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: var(--cpd-color-text-primary);
}.mx_SettingsSection a {
        color: var(--cpd-color-text-link-external);
    }.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;
    gap: 32px;

    padding: 16px 0;
}.mx_SettingsTab {
    --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */

    color: var(--cpd-color-text-primary);
    /* never want full width buttons*/
}.mx_SettingsTab a {
        color: var(--cpd-color-text-link-external);
    }.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: var(--cpd-color-text-critical-primary);
}.mx_SettingsTab_subsectionText {
    color: var(--cpd-color-text-secondary);
    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;
    gap: 32px;

    padding-bottom: 16px;
}.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: var(--cpd-color-text-primary);
        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: var(--cpd-color-text-secondary);
        }.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton input + div {
            margin-top: 8px;
        }.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton .mx_NotificationSettingsTab_microCopy {
            color: var(--cpd-color-text-secondary);
            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;
}.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: var(--cpd-color-text-secondary);
    margin-left: var(--cpd-space-1x);
}.mx_PeopleRoomSettingsTab_userId {
    color: var(--cpd-color-text-secondary);
    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;
}.mx_RolesRoomSettingsTab_bannedList {
    margin-bottom: 0;
}.mx_RolesRoomSettingsTab_unbanBtn {
    margin-right: 10px;
    margin-bottom: 5px;
}.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;
}.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);
}.mx_HelpUserSettingsTab_accessTokenDetails {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}.mx_KeyboardShortcut_shortcutList {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-gap: 4px;
    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;
}.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);
}.mx_MjolnirUserSettingsTab_listItem {
    margin-bottom: 2px;
}.mx_PreferencesUserSettingsTab_section_hint {
    font: var(--cpd-font-body-sm-regular);
    color: var(--cpd-color-text-secondary);
}.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: var(--cpd-color-text-critical-primary);
    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: var(--cpd-color-text-critical-primary);
        -webkit-mask-image: url(../../icons/warning.80e5cc2.svg);
                mask-image: url(../../icons/warning.80e5cc2.svg);
    }.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;
}.mx_ContactDropdown{
    width: 100%;
}.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: var(--cpd-color-gray-900);
            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: var(--cpd-color-text-link-external);
            font: var(--cpd-font-body-md-regular);
        }.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer > .mx_SpaceBasicSettings_avatar_remove {
            color: var(--cpd-color-text-critical-primary);
        }.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;
    }.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;
    }/* background blur everything except SpacePanel */.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
        background-color: #030c1b4d;
        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: #fefefe;
        background-color: var(--dth-bg-light);
        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: var(--cpd-color-text-secondary);
            }.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: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-gray-900);
    }.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: var(--cpd-color-text-primary);
        }.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: #38af9a80;
            background-color: var(--dth-primary-color-opacity-50);
            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: var(--cpd-color-gray-900);
                -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;
        }.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: var(--cpd-color-text-secondary);
    }.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: var(--cpd-color-gray-900);
    }.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: var(--cpd-color-text-primary);
        }.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);
        }.mx_InlineTermsAgreement_cbContainer {
    margin-top: var(--cpd-space-4x);
    margin-bottom: 10px;
    font: var(--cpd-font-body-md-regular);
}.mx_InlineTermsAgreement_cbContainer a {
        color: #38af9a;
        color: var(--cpd-color-text-action-accent);
        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: #38af9a;
    background-color: var(--cpd-color-text-action-accent);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    vertical-align: middle;
}.mx_AnalyticsToast .mx_AccessibleButton_kind_danger_outline {
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
        color: #ffffff;
        border: 1px solid #38af9a;
        border: 1px solid var(--cpd-color-text-action-accent);
        font-weight: var(--cpd-font-weight-semibold);
    }.mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
        background-color: #38af9a;
        background-color: var(--cpd-color-text-action-accent);
        color: #ffffff;
        border: 1px solid #38af9a;
        border: 1px solid var(--cpd-color-text-action-accent);
        font-weight: var(--cpd-font-weight-semibold);
    }.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: var(--cpd-color-text-secondary);
            -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 {
    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: var(--cpd-color-gray-900);

            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: var(--cpd-color-gray-900);
                    -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 {
                /* mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); */
                -webkit-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                        mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                -webkit-mask-image: var(--call-icon-mask-image);
                        mask-image: var(--call-icon-mask-image);
            }.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: #fefefe;
            background-color: var(--dth-bg-light);
            -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: var(--cpd-color-gray-900);
            -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);
    }.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;
    }.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);
}.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); */
    font-family:  "Noto Color Emoji", var(--cpd-font-family-sans);
}.mx_VerificationShowSas_emojiSas_label {
    font-size: 0.75rem;
    word-break: break-word;
}.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;
}/* 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: #fefefe;

        background-color: var(--dth-bg-light);

        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: var(--cpd-color-text-secondary);

            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: #fefefe;
            background-color: var(--dth-bg-light);
        }.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on::before {
                background-color: var(--cpd-color-text-secondary);
            }.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_mic::before {
                height: 20px;
                /* mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); */
                -webkit-mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
                        mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
                -webkit-mask-image: var(--mic-on-solid-mask-image);
                        mask-image: var(--mic-on-solid-mask-image);
                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: #38af9a;
                background-color: var(--cpd-color-text-action-accent);
            }.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: var(--cpd-color-text-secondary);
        }.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off::before {
                background-color: #fefefe;
                background-color: var(--dth-bg-light);
            }.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: #fefefe;
                background-color: var(--dth-bg-light);
            }.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: var(--cpd-color-text-secondary);
                }.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_sidebar {
                background-color: #fefefe;
                background-color: var(--dth-bg-light);
            }.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: var(--cpd-color-text-secondary);
                }/* 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: var(--cpd-color-text-critical-primary);
        }.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;
        }.mx_CallDuration {
    color: var(--cpd-color-text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}.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: var(--cpd-color-bg-subtle-primary);
}.mx_CallView .mx_AppTile {
        width: auto;
        height: 100%;
        border: none;
        border-radius: inherit;
        background-color: #15191e;
    }/* 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: #ffffff;
        background-color: #15191e;

        --facepile-background: #15191e;
        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: var(--cpd-color-gray-900);

                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: #ffffff;
                            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 {
                            /* mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); */
                            -webkit-mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
                                    mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
                            -webkit-mask-image: var(--mic-on-solid-mask-image);
                                    mask-image: var(--mic-on-solid-mask-image);
                            -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: #ffffff;
                            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: #ffffff;
                        }.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;
        }.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: var(--cpd-color-gray-400);
    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: #38af9a;
    background-color: var(--cpd-color-text-action-accent);
}.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(../../customIcons/call-icon-neg-custom.94d871d.svg);
                mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
        -webkit-mask-image: var(--call-icon-mask-image);
                mask-image: var(--call-icon-mask-image);
    }.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 var(--cpd-color-gray-700);
    -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 #38af9a;
    border-bottom: 1px solid var(--cpd-color-text-action-accent);
}.mx_DialPadContextMenu_title {
    color: #61708b;
    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;
}.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 var(--cpd-color-gray-700);
    -webkit-transition: border-bottom 0.25s;
    transition: border-bottom 0.25s;
}.mx_DialPadModal_header:focus-within {
    border-bottom: 1px solid #38af9a;
    border-bottom: 1px solid var(--cpd-color-text-action-accent);
}.mx_DialPadModal_title {
    color: #61708b;
    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;
}.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;
    }.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: #21262c;
        }.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_status {
                z-index: 50;
                color: #f4f6fa;
            }.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: var(--cpd-color-bg-subtle-primary);
        -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;
    }.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: var(--cpd-color-text-primary);
            }.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: var(--cpd-color-text-secondary);
        -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: var(--cpd-color-text-secondary);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-position: center;
                mask-position: center;
        /* mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); */
        -webkit-mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
                mask-image: url(../../customIcons/call-icon-neg-custom.94d871d.svg);
        -webkit-mask-image: var(--call-icon-mask-image);
                mask-image: var(--call-icon-mask-image);
    }.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: #394049;
        }.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;
    }.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: var(--cpd-color-bg-action-primary-rest);

        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 {
            /* mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); */
            -webkit-mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
                    mask-image: url(../../customIcons/microphone-neg-icon.e9cabd2.svg);
            -webkit-mask-image: var(--mic-on-solid-mask-image);
                    mask-image: var(--mic-on-solid-mask-image);
        }/*FONDAMENTALE: mantenere questa riga per importare le variabili globali da res_custom*//* ATTENZIONE! In questo file devono essere definiti solo colori che non dipendono e non cambiano in base al tema */:root {
    --dth-primary-color: #38af9a; /*colore primario*/
    --dth-secondary-color: #3baf8c; /*colore secondario*/
    --dth-primary-light-grey: #ededed; /*grigio chiaro primario*/
    --dth-primary-dark-grey: #6a6a6a; /*grigio scuro primario*/
    --dth-secondary-grey: #afafaf; /* grigio intermedio */
    --dth-text-white: #fefefe; /*bianco*/
    --dth-text-black: #232323; /*nero*/
    --dth-bg-dark: #121212; /*nero*/
    --dth-bg-secondary-dark: #26272b; /*grigio scuro*/
    --dth-bg-light: #fefefe; /*bianco*/
    --dth-bg-secondary-light: #ededed; /*bianco*/

    --dth-primary-color-opacity-80: #38af9acc; /*colore primario con 80% opacità*/
    --dth-primary-color-opacity-50: #38af9a80; /*colore primario con 50% opacità*/
    --dth-primary-color-opacity-30: #38af9a4d; /*colore primario con 30% opacità*/

    --dth-button-border-radius: 8px;
}p.new_line {
    white-space: pre-line;
}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}/*light */.markdown-body {
  color-scheme: light;
  /** CSS default easing. Use for hover state changes and micro-interactions. */
  /** Accelerating motion. Use for elements exiting the viewport (moving off-screen). */
  /** Smooth acceleration and deceleration. Use for elements moving or morphing within the viewport. */
  /** Decelerating motion. Use for elements entering the viewport or appearing on screen. */
  /** Constant motion with no acceleration. Use for continuous animations like progress bars or loaders. */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  font-weight: 400;
  color: #1f2328;
  background-color: #ffffff;
  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 a {
  text-decoration: underline;
  text-underline-offset: .2rem;
}.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: rgba(0,0,0,0);
  color: #0969da;
  text-decoration: none;
}.markdown-body abbr[title] {
  border-bottom: none;
  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 #d1d9e0b3;
}.markdown-body mark {
  background-color: #fff8c5;
  color: #1f2328;
}.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: rgba(0,0,0,0);
  border-bottom: 1px solid #d1d9e0b3;
  height: .25em;
  padding: 0;
  margin: 1.5rem 0;
  background-color: #d1d9e0;
  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: #59636e;
  opacity: 1;
}.markdown-body ::-moz-placeholder {
  color: #59636e;
  opacity: 1;
}.markdown-body :-ms-input-placeholder {
  color: #59636e;
  opacity: 1;
}.markdown-body ::-ms-input-placeholder {
  color: #59636e;
  opacity: 1;
}.markdown-body ::placeholder {
  color: #59636e;
  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 var(--borderColor-accent-emphasis);
  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 rgba(0,0,0,0);
}.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 var(--borderColor-accent-emphasis);
  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: #1f2328;
  vertical-align: middle;
  background-color: #f6f8fa;
  border: solid 1px var(--borderColor-muted);
  border-bottom-color: var(--borderColor-muted);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 -1px 0 var(--borderColor-muted);
          box-shadow: inset 0 -1px 0 var(--borderColor-muted);
}.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 #d1d9e0b3;
}.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: #59636e;
}.markdown-body p {
  margin-top: 0;
  margin-bottom: 10px;
}.markdown-body blockquote {
  margin: 0;
  padding: 0 1em;
  color: #59636e;
  border-left: .25em solid #d1d9e0;
}.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: #d1242f;
}.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: #1f2328;
  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 #d1d9e0;
}.markdown-body table td>:last-child {
  margin-bottom: 0;
}.markdown-body table tr {
  background-color: #ffffff;
  border-top: 1px solid #d1d9e0b3;
}.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}.markdown-body table img {
  background-color: rgba(0,0,0,0);
}.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: rgba(0,0,0,0);
}.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 #d1d9e0;
}.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: #1f2328;
}.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: #818b981f;
  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: rgba(0,0,0,0);
  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: #1f2328;
  background-color: #f6f8fa;
  border-radius: 6px;
}.markdown-body pre code,
.markdown-body pre tt {
  display: inline;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: rgba(0,0,0,0);
  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: #ffffff;
  border: 0;
}.markdown-body .csv-data tr {
  border-top: 0;
}.markdown-body .csv-data th {
  font-weight: 600;
  background: #f6f8fa;
  border-top: 0;
}.markdown-body [data-footnote-ref]::before {
  content: "[";
}.markdown-body [data-footnote-ref]::after {
  content: "]";
}.markdown-body .footnotes {
  font-size: 12px;
  color: #59636e;
  border-top: 1px solid #d1d9e0;
}.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 #0969da;
  border-radius: 6px;
}.markdown-body .footnotes li:target {
  color: #1f2328;
}.markdown-body .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}.markdown-body .pl-c {
  color: #59636e;
}.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
  color: #0550ae;
}.markdown-body .pl-e,
.markdown-body .pl-en {
  color: #6639ba;
}.markdown-body .pl-smi,
.markdown-body .pl-s .pl-s1 {
  color: #1f2328;
}.markdown-body .pl-ent {
  color: #0550ae;
}.markdown-body .pl-k {
  color: #cf222e;
}.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: #0a3069;
}.markdown-body .pl-v,
.markdown-body .pl-smw {
  color: #953800;
}.markdown-body .pl-bu {
  color: #82071e;
}.markdown-body .pl-ii {
  color: var(--fgColor-danger);
  background-color: var(--bgColor-danger-muted);
}.markdown-body .pl-c2 {
  color: #f6f8fa;
  background-color: #cf222e;
}.markdown-body .pl-sr .pl-cce {
  font-weight: bold;
  color: #116329;
}.markdown-body .pl-ml {
  color: #3b2300;
}.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
  font-weight: bold;
  color: #0550ae;
}.markdown-body .pl-mi {
  font-style: italic;
  color: #1f2328;
}.markdown-body .pl-mb {
  font-weight: bold;
  color: #1f2328;
}.markdown-body .pl-md {
  color: #82071e;
  background-color: #ffebe9;
}.markdown-body .pl-mi1 {
  color: #116329;
  background-color: #dafbe1;
}.markdown-body .pl-mc {
  color: #953800;
  background-color: #ffd8b5;
}.markdown-body .pl-mi2 {
  color: #d1d9e0;
  background-color: #0550ae;
}.markdown-body .pl-mdr {
  font-weight: bold;
  color: #8250df;
}.markdown-body .pl-ba {
  color: #59636e;
}.markdown-body .pl-sg {
  color: #818b98;
}.markdown-body .pl-corl {
  text-decoration: underline;
  color: #0a3069;
}.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 a:has(>p,>div,>pre,>blockquote) {
  display: block;
}.markdown-body a:has(>p,>div,>pre,>blockquote):not(:has(.snippet-clipboard-content,>pre)) {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}.markdown-body a:has(>p,>div,>pre,>blockquote):has(.snippet-clipboard-content,>pre):focus-visible {
  outline: 2px solid var(--borderColor-accent-emphasis);
  outline-offset: 2px;
}.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-path: none;
}.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 #d1d9e0;
}.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: #0969da;
}.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
  color: #0969da;
}.markdown-body .markdown-alert.markdown-alert-important {
  border-left-color: #8250df;
}.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
  color: #8250df;
}.markdown-body .markdown-alert.markdown-alert-warning {
  border-left-color: #9a6700;
}.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: #9a6700;
}.markdown-body .markdown-alert.markdown-alert-tip {
  border-left-color: #1a7f37;
}.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: #1a7f37;
}.markdown-body .markdown-alert.markdown-alert-caution {
  border-left-color: #cf222e;
}.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: #d1242f;
}.markdown-body>*:first-child>.heading-element:first-child {
  margin-top: 0 !important;
}.markdown-body .highlight pre:has(+.zeroclipboard-container) {
  min-height: 52px;
}


/*# sourceMappingURL=theme-light.css.map*/