@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: url(../../fonts/Inter/Inter-Regular.6cc68d6.woff2) format("woff2"), url(../../fonts/Inter/Inter-Regular.8398b37.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: italic;
    font-weight: 400;
    src: url(../../fonts/Inter/Inter-Italic.e2f5280.woff2) format("woff2"), url(../../fonts/Inter/Inter-Italic.635afee.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    src: url(../../fonts/Inter/Inter-Medium.ba68c34.woff2) format("woff2"), url(../../fonts/Inter/Inter-Medium.f5549f6.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: italic;
    font-weight: 500;
    src: url(../../fonts/Inter/Inter-MediumItalic.d29ef50.woff2) format("woff2"), url(../../fonts/Inter/Inter-MediumItalic.2812ec5.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    src: url(../../fonts/Inter/Inter-SemiBold.625474d.woff2) format("woff2"), url(../../fonts/Inter/Inter-SemiBold.25b1ffc.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: italic;
    font-weight: 600;
    src: url(../../fonts/Inter/Inter-SemiBoldItalic.c632fb9.woff2) format("woff2"), url(../../fonts/Inter/Inter-SemiBoldItalic.80d799b.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    src: url(../../fonts/Inter/Inter-Bold.a808c21.woff2) format("woff2"), url(../../fonts/Inter/Inter-Bold.1c3dfbb.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: italic;
    font-weight: 700;
    src: url(../../fonts/Inter/Inter-BoldItalic.9744396.woff2) format("woff2"), url(../../fonts/Inter/Inter-BoldItalic.32e2b20.woff) format("woff");
    unicode-range: u+0000 -20e2, u+20 e4-23ce, u+23 d0-24c1, u+24 c3-259f, u+25 c2-2664, u+2666 -2763, u+2765 -2 b05, u+2 b07-2b1b, u+2 b1d-10ffff
}

@font-face {
    font-family: Inconsolata;
    font-style: normal;
    font-weight: 400;
    src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.2ff0f39.woff2) format("woff2");
    unicode-range: u+0100 -024 f, u+0259, u+1 e ? ?, u+2020, u+20 a0-20ab, u+20 ad-20cf, u+2113, u+2 c60-2c7f, u+a720-a7ff
}

@font-face {
    font-display: swap;
    font-family: Inconsolata;
    font-style: normal;
    font-weight: 400;
    src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(../../fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.d8934e4.woff2) format("woff2");
    unicode-range: u+00 ? ?, u+0131, u+0152 -0153, u+02 bb-02bc, u+02 c6, u+02 da, u+02 dc, u+2000 -206 f, u+2074, u+20 ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-display: swap;
    font-family: Inconsolata;
    font-style: normal;
    font-weight: 700;
    src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.279a413.woff2) format("woff2");
    unicode-range: u+0100 -024 f, u+0259, u+1 e ? ?, u+2020, u+20 a0-20ab, u+20 ad-20cf, u+2113, u+2 c60-2c7f, u+a720-a7ff
}

@font-face {
    font-display: swap;
    font-family: Inconsolata;
    font-style: normal;
    font-weight: 700;
    src: local("Inconsolata Bold"), local("Inconsolata-Bold"), url(../../fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.e6a8d96.woff2) format("woff2");
    unicode-range: u+00 ? ?, u+0131, u+0152 -0153, u+02 bb-02bc, u+02 c6, u+02 da, u+02 dc, u+2000 -206 f, u+2074, u+20 ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

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

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

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

:root {
    --emoji-font-family: ""
}

body {
    color-scheme: light
}

.hljs-addition {
    background: #dfd
}

.hljs-deletion {
    background: #fdd
}

body {
    color-scheme: dark
}

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

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

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

.hljs-tag {
    color: inherit
}

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

.mx_rtg--fade-enter-active {
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

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

.mx_rtg--fade-exit-active {
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

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

@-webkit-keyframes mx--anim-pulse {
    0% {
        opacity: 1
    }
    50% {
        opacity: .7
    }
    to {
        opacity: 1
    }
}

@keyframes mx--anim-pulse {
    0% {
        opacity: 1
    }
    50% {
        opacity: .7
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes mx_Dialog_lightbox_background_keyframes {
    0% {
        opacity: 0
    }
    to {
        opacity: .85
    }
}

@keyframes mx_Dialog_lightbox_background_keyframes {
    0% {
        opacity: 0
    }
    to {
        opacity: .85
    }
}

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

@keyframes mx_ImageView_panel_keyframes {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@media (prefers-reduced-motion) {
    .mx_rtg--fade-enter-active, .mx_rtg--fade-exit-active {
        -webkit-transition: none;
        transition: none
    }
}

@layer compound {
    @layer cpd-semantic, custom, cpd-base
} @layer compound {
    @media screen {
        @layer cpd-base {
            :root, [class*=cpd-theme-] {
                --cpd-font-letter-spacing-heading-xl: -0.0216em;
                --cpd-font-letter-spacing-heading-lg: -0.0209em;
                --cpd-font-letter-spacing-heading-md: -0.0195em;
                --cpd-font-letter-spacing-heading-sm: -0.0166em;
                --cpd-font-letter-spacing-body-lg: -0.0128em;
                --cpd-font-letter-spacing-body-md: -0.0088em;
                --cpd-font-letter-spacing-body-sm: -0.0031em;
                --cpd-font-letter-spacing-body-xs: 0.0048em;
                --cpd-font-size-root: 1rem;
                --cpd-font-size-heading-xl: 2rem;
                --cpd-font-size-heading-lg: 1.75rem;
                --cpd-font-size-heading-md: 1.5rem;
                --cpd-font-size-heading-sm: 1.25rem;
                --cpd-font-size-body-lg: 1.0625rem;
                --cpd-font-size-body-md: 0.9375rem;
                --cpd-font-size-body-sm: 0.8125rem;
                --cpd-font-size-body-xs: 0.6875rem;
                --cpd-font-line-height-regular: 1.5;
                --cpd-font-line-height-tight: 1.25;
                --cpd-font-line-height-minimum: 1;
                --cpd-font-weight-semibold: 600;
                --cpd-font-weight-medium: 500;
                --cpd-font-weight-regular: 400;
                --cpd-font-family-mono: Inconsolata;
                --cpd-font-family-sans: Inter;
                --cpd-border-width-0-5: 0.5px;
                --cpd-border-width-4: 4px;
                --cpd-border-width-2: 2px;
                --cpd-border-width-1: 1px;
                --cpd-space-56x: 224px;
                --cpd-space-36x: 144px;
                --cpd-space-16x: 64px;
                --cpd-space-12x: 48px;
                --cpd-space-11x: 44px;
                --cpd-space-10x: 40px;
                --cpd-space-6x: 24px;
                --cpd-space-0x: 0px;
                --cpd-space-scale: 4px;
                --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);
                --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-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-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-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-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-sm-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-line-height-tight) rem/1.25 var(--cpd-font-family-sans);
                --cpd-font-heading-sm-medium: var(--cpd-font-weight-medium) var(--cpd-font-line-height-tight) rem/1.25 var(--cpd-font-family-sans);
                --cpd-font-heading-sm-regular: var(--cpd-font-weight-regular) var(--cpd-font-line-height-tight) rem/1.25 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-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-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-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-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-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-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-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-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-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-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-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
                --cpd-space-64x: 256px;
                --cpd-space-48x: 192px;
                --cpd-space-40x: 160px;
                --cpd-space-32x: 128px;
                --cpd-space-28x: 112px;
                --cpd-space-24x: 96px;
                --cpd-space-20x: 80px;
                --cpd-space-15x: 60px;
                --cpd-space-14x: 56px;
                --cpd-space-13x: 52px;
                --cpd-space-9x: 36px;
                --cpd-space-8x: 32px;
                --cpd-space-7x: 28px;
                --cpd-space-5x: 20px;
                --cpd-space-4x: 16px;
                --cpd-space-3x: 12px;
                --cpd-space-2x: 8px;
                --cpd-space-1-5x: 6px;
                --cpd-space-1x: var(--cpd-space-scale);
                --cpd-space-0-5x: 2px
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-semantic {
            :root, [class*=cpd-theme-] {
                --cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
                --cpd-color-icon-info-primary: var(--cpd-color-blue-900);
                --cpd-color-icon-success-primary: var(--cpd-color-green-900);
                --cpd-color-icon-critical-primary: var(--cpd-color-red-900);
                --cpd-color-icon-accent-tertiary: var(--cpd-color-green-800);
                --cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-700);
                --cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-800);
                --cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-900);
                --cpd-color-icon-primary-alpha: var(--cpd-color-alpha-gray-1400);
                --cpd-color-icon-disabled: var(--cpd-color-gray-700);
                --cpd-color-icon-quaternary: var(--cpd-color-gray-700);
                --cpd-color-icon-tertiary: var(--cpd-color-gray-800);
                --cpd-color-icon-secondary: var(--cpd-color-gray-900);
                --cpd-color-icon-primary: var(--cpd-color-gray-1400);
                --cpd-color-border-info-subtle: var(--cpd-color-blue-500);
                --cpd-color-border-success-subtle: var(--cpd-color-green-500);
                --cpd-color-border-critical-subtle: var(--cpd-color-red-500);
                --cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
                --cpd-color-border-critical-primary: var(--cpd-color-red-900);
                --cpd-color-border-interactive-hovered: var(--cpd-color-gray-1100);
                --cpd-color-border-interactive-secondary: var(--cpd-color-gray-600);
                --cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
                --cpd-color-border-focused: var(--cpd-color-blue-900);
                --cpd-color-border-disabled: var(--cpd-color-gray-500);
                --cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
                --cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
                --cpd-color-bg-accent-rest: var(--cpd-color-green-900);
                --cpd-color-bg-decorative-6: var(--cpd-color-orange-300);
                --cpd-color-bg-decorative-5: var(--cpd-color-pink-300);
                --cpd-color-bg-decorative-4: var(--cpd-color-purple-300);
                --cpd-color-bg-decorative-3: var(--cpd-color-fuchsia-300);
                --cpd-color-bg-decorative-2: var(--cpd-color-cyan-300);
                --cpd-color-bg-decorative-1: var(--cpd-color-lime-300);
                --cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
                --cpd-color-bg-success-subtle: var(--cpd-color-green-200);
                --cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);
                --cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
                --cpd-color-bg-critical-hovered: var(--cpd-color-red-1000);
                --cpd-color-bg-critical-primary: var(--cpd-color-red-900);
                --cpd-color-bg-action-secondary-pressed: var(--cpd-color-alpha-gray-300);
                --cpd-color-bg-action-secondary-hovered: var(--cpd-color-alpha-gray-200);
                --cpd-color-bg-action-secondary-rest: var(--cpd-color-theme-bg);
                --cpd-color-bg-action-primary-disabled: var(--cpd-color-gray-700);
                --cpd-color-bg-action-primary-pressed: var(--cpd-color-gray-1100);
                --cpd-color-bg-action-primary-hovered: var(--cpd-color-gray-1200);
                --cpd-color-bg-action-primary-rest: var(--cpd-color-gray-1400);
                --cpd-color-bg-canvas-disabled: var(--cpd-color-gray-200);
                --cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
                --cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
                --cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
                --cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
                --cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
                --cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
                --cpd-color-text-decorative-3: var(--cpd-color-fuchsia-1100);
                --cpd-color-text-decorative-2: var(--cpd-color-cyan-1100);
                --cpd-color-text-decorative-1: var(--cpd-color-lime-1100);
                --cpd-color-text-on-solid-primary: var(--cpd-color-theme-bg);
                --cpd-color-text-info-primary: var(--cpd-color-blue-900);
                --cpd-color-text-success-primary: var(--cpd-color-green-900);
                --cpd-color-text-critical-primary: var(--cpd-color-red-900);
                --cpd-color-text-link-external: var(--cpd-color-blue-900);
                --cpd-color-text-action-accent: var(--cpd-color-green-900);
                --cpd-color-text-action-primary: var(--cpd-color-gray-1400);
                --cpd-color-text-disabled: var(--cpd-color-gray-800);
                --cpd-color-text-placeholder: var(--cpd-color-gray-800);
                --cpd-color-text-secondary: var(--cpd-color-gray-900);
                --cpd-color-text-primary: var(--cpd-color-gray-1400)
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-base {
            .cpd-theme-light.cpd-theme-light {
                --cpd-color-alpha-pink-1400: #420017;
                --cpd-color-alpha-pink-1300: #61002c;
                --cpd-color-alpha-pink-1200: rgba(121, 1, 61, .98);
                --cpd-color-alpha-pink-1100: rgba(158, 0, 76, .97);
                --cpd-color-alpha-pink-1000: rgba(182, 2, 86, .97);
                --cpd-color-alpha-pink-900: rgba(207, 2, 94, .96);
                --cpd-color-alpha-pink-800: rgba(245, 0, 82, .75);
                --cpd-color-alpha-pink-700: rgba(255, 0, 64, .47);
                --cpd-color-alpha-pink-600: rgba(255, 5, 63, .33);
                --cpd-color-alpha-pink-500: rgba(255, 0, 55, .24);
                --cpd-color-alpha-pink-400: rgba(255, 0, 55, .13);
                --cpd-color-alpha-pink-300: rgba(255, 20, 71, .08);
                --cpd-color-alpha-pink-200: rgba(255, 5, 55, .04);
                --cpd-color-alpha-pink-100: rgba(255, 5, 55, .02);
                --cpd-color-alpha-fuchsia-1400: #34004d;
                --cpd-color-alpha-fuchsia-1300: #4d0066;
                --cpd-color-alpha-fuchsia-1200: rgba(93, 2, 121, .93);
                --cpd-color-alpha-fuchsia-1100: rgba(115, 3, 140, .88);
                --cpd-color-alpha-fuchsia-1000: rgba(130, 1, 152, .84);
                --cpd-color-alpha-fuchsia-900: rgba(153, 0, 173, .8);
                --cpd-color-alpha-fuchsia-800: rgba(171, 3, 186, .64);
                --cpd-color-alpha-fuchsia-700: rgba(170, 4, 185, .43);
                --cpd-color-alpha-fuchsia-600: rgba(178, 7, 187, .31);
                --cpd-color-alpha-fuchsia-500: rgba(180, 7, 192, .23);
                --cpd-color-alpha-fuchsia-400: rgba(189, 9, 195, .13);
                --cpd-color-alpha-fuchsia-300: rgba(182, 12, 198, .07);
                --cpd-color-alpha-fuchsia-200: rgba(181, 5, 204, .04);
                --cpd-color-alpha-fuchsia-100: rgba(204, 5, 204, .02);
                --cpd-color-alpha-purple-1400: #200066;
                --cpd-color-alpha-purple-1300: #34008f;
                --cpd-color-alpha-purple-1200: rgba(74, 2, 182, .99);
                --cpd-color-alpha-purple-1100: rgba(67, 3, 196, .86);
                --cpd-color-alpha-purple-1000: rgba(69, 2, 212, .79);
                --cpd-color-alpha-purple-900: rgba(73, 2, 237, .73);
                --cpd-color-alpha-purple-800: rgba(59, 1, 249, .56);
                --cpd-color-alpha-purple-700: rgba(51, 5, 255, .38);
                --cpd-color-alpha-purple-600: rgba(43, 5, 255, .27);
                --cpd-color-alpha-purple-500: rgba(38, 5, 255, .2);
                --cpd-color-alpha-purple-400: rgba(47, 15, 255, .12);
                --cpd-color-alpha-purple-300: rgba(56, 25, 255, .07);
                --cpd-color-alpha-purple-200: rgba(83, 56, 255, .04);
                --cpd-color-alpha-purple-100: rgba(56, 56, 255, .02);
                --cpd-color-alpha-blue-1400: #000e66;
                --cpd-color-alpha-blue-1300: #012579;
                --cpd-color-alpha-blue-1200: rgba(1, 54, 147, .99);
                --cpd-color-alpha-blue-1100: rgba(1, 72, 178, .98);
                --cpd-color-alpha-blue-1000: rgba(2, 86, 197, .99);
                --cpd-color-alpha-blue-900: rgba(1, 101, 223, .99);
                --cpd-color-alpha-blue-800: rgba(0, 98, 235, .75);
                --cpd-color-alpha-blue-700: rgba(2, 100, 237, .51);
                --cpd-color-alpha-blue-600: rgba(6, 99, 239, .37);
                --cpd-color-alpha-blue-500: rgba(9, 108, 246, .28);
                --cpd-color-alpha-blue-400: rgba(11, 106, 249, .16);
                --cpd-color-alpha-blue-300: rgba(10, 112, 255, .09);
                --cpd-color-alpha-blue-200: rgba(36, 116, 255, .05);
                --cpd-color-alpha-blue-100: rgba(56, 156, 255, .03);
                --cpd-color-alpha-cyan-1400: #001a52;
                --cpd-color-alpha-cyan-1300: #002c61;
                --cpd-color-alpha-cyan-1200: #003f75;
                --cpd-color-alpha-cyan-1100: #00568f;
                --cpd-color-alpha-cyan-1000: #00649e;
                --cpd-color-alpha-cyan-900: #0074ad;
                --cpd-color-alpha-cyan-800: #0095c2;
                --cpd-color-alpha-cyan-700: rgba(1, 183, 203, .92);
                --cpd-color-alpha-cyan-600: rgba(1, 170, 193, .54);
                --cpd-color-alpha-cyan-500: rgba(5, 171, 189, .4);
                --cpd-color-alpha-cyan-400: rgba(0, 170, 189, .22);
                --cpd-color-alpha-cyan-300: rgba(0, 168, 194, .11);
                --cpd-color-alpha-cyan-200: rgba(22, 171, 187, .06);
                --cpd-color-alpha-cyan-100: rgba(22, 187, 187, .03);
                --cpd-color-alpha-green-1400: #002411;
                --cpd-color-alpha-green-1300: #00331f;
                --cpd-color-alpha-green-1200: #004732;
                --cpd-color-alpha-green-1100: #005c45;
                --cpd-color-alpha-green-1000: #006b52;
                --cpd-color-alpha-green-900: #007a62;
                --cpd-color-alpha-green-800: #009975;
                --cpd-color-alpha-green-700: rgba(1, 193, 138, .96);
                --cpd-color-alpha-green-600: rgba(1, 183, 110, .56);
                --cpd-color-alpha-green-500: rgba(4, 185, 106, .41);
                --cpd-color-alpha-green-400: rgba(7, 182, 97, .23);
                --cpd-color-alpha-green-300: rgba(0, 184, 92, .11);
                --cpd-color-alpha-green-200: rgba(22, 187, 105, .06);
                --cpd-color-alpha-green-100: rgba(22, 187, 121, .03);
                --cpd-color-alpha-lime-1400: #002400;
                --cpd-color-alpha-lime-1300: #003800;
                --cpd-color-alpha-lime-1200: #004d00;
                --cpd-color-alpha-lime-1100: #006100;
                --cpd-color-alpha-lime-1000: #007000;
                --cpd-color-alpha-lime-900: rgba(16, 121, 2, .96);
                --cpd-color-alpha-lime-800: rgba(32, 147, 1, .91);
                --cpd-color-alpha-lime-700: rgba(57, 189, 0, .86);
                --cpd-color-alpha-lime-600: rgba(64, 206, 3, .71);
                --cpd-color-alpha-lime-500: rgba(55, 202, 2, .51);
                --cpd-color-alpha-lime-400: rgba(58, 206, 9, .28);
                --cpd-color-alpha-lime-300: rgba(46, 207, 2, .15);
                --cpd-color-alpha-lime-200: rgba(56, 212, 12, .07);
                --cpd-color-alpha-lime-100: rgba(79, 205, 29, .04);
                --cpd-color-alpha-yellow-1400: #420700;
                --cpd-color-alpha-yellow-1300: #571b00;
                --cpd-color-alpha-yellow-1200: #6b2e00;
                --cpd-color-alpha-yellow-1100: #804000;
                --cpd-color-alpha-yellow-1000: #8f4c00;
                --cpd-color-alpha-yellow-900: #9e5a00;
                --cpd-color-alpha-yellow-800: #bd7b00;
                --cpd-color-alpha-yellow-700: #e0a500;
                --cpd-color-alpha-yellow-600: #f0bc00;
                --cpd-color-alpha-yellow-500: #facc00;
                --cpd-color-alpha-yellow-400: rgba(255, 201, 5, .49);
                --cpd-color-alpha-yellow-300: rgba(255, 201, 5, .25);
                --cpd-color-alpha-yellow-200: rgba(255, 199, 15, .13);
                --cpd-color-alpha-yellow-100: rgba(255, 205, 5, .06);
                --cpd-color-alpha-orange-1400: #470000;
                --cpd-color-alpha-orange-1300: #610000;
                --cpd-color-alpha-orange-1200: #850000;
                --cpd-color-alpha-orange-1100: #992100;
                --cpd-color-alpha-orange-1000: #ad3400;
                --cpd-color-alpha-orange-900: #bd4500;
                --cpd-color-alpha-orange-800: #db6600;
                --cpd-color-alpha-orange-700: rgba(245, 110, 0, .75);
                --cpd-color-alpha-orange-600: rgba(252, 111, 3, .52);
                --cpd-color-alpha-orange-500: rgba(255, 106, 0, .37);
                --cpd-color-alpha-orange-400: rgba(255, 109, 5, .22);
                --cpd-color-alpha-orange-300: rgba(255, 108, 10, .11);
                --cpd-color-alpha-orange-200: rgba(255, 125, 25, .07);
                --cpd-color-alpha-orange-100: rgba(255, 129, 56, .04);
                --cpd-color-alpha-red-1400: #470000;
                --cpd-color-alpha-red-1300: #610000;
                --cpd-color-alpha-red-1200: #850007;
                --cpd-color-alpha-red-1100: rgba(162, 1, 28, .99);
                --cpd-color-alpha-red-1000: rgba(187, 2, 23, .95);
                --cpd-color-alpha-red-900: rgba(207, 2, 19, .91);
                --cpd-color-alpha-red-800: rgba(255, 5, 5, .77);
                --cpd-color-alpha-red-700: rgba(255, 26, 5, .5);
                --cpd-color-alpha-red-600: rgba(255, 34, 5, .36);
                --cpd-color-alpha-red-500: rgba(255, 38, 5, .27);
                --cpd-color-alpha-red-400: rgba(255, 43, 10, .15);
                --cpd-color-alpha-red-300: rgba(255, 56, 20, .08);
                --cpd-color-alpha-red-200: rgba(255, 57, 31, .04);
                --cpd-color-alpha-red-100: rgba(255, 89, 56, .03);
                --cpd-color-alpha-gray-1400: rgba(2, 4, 8, .9);
                --cpd-color-alpha-gray-1300: rgba(3, 5, 12, .84);
                --cpd-color-alpha-gray-1200: rgba(2, 7, 13, .77);
                --cpd-color-alpha-gray-1100: rgba(3, 11, 22, .71);
                --cpd-color-alpha-gray-1000: rgba(3, 12, 27, .66);
                --cpd-color-alpha-gray-900: rgba(3, 16, 33, .61);
                --cpd-color-alpha-gray-800: rgba(3, 21, 43, .5);
                --cpd-color-alpha-gray-700: rgba(1, 21, 50, .35);
                --cpd-color-alpha-gray-600: rgba(1, 29, 60, .26);
                --cpd-color-alpha-gray-500: rgba(5, 36, 72, .2);
                --cpd-color-alpha-gray-400: rgba(5, 46, 97, .12);
                --cpd-color-alpha-gray-300: rgba(5, 38, 87, .06);
                --cpd-color-alpha-gray-200: rgba(54, 104, 129, .04);
                --cpd-color-alpha-gray-100: rgba(54, 105, 155, .02);
                --cpd-color-pink-1400: #430017;
                --cpd-color-pink-1300: #5f002b;
                --cpd-color-pink-1200: #7e0642;
                --cpd-color-pink-1100: #9f0850;
                --cpd-color-pink-1000: #b80a5b;
                --cpd-color-pink-900: #d20c65;
                --cpd-color-pink-800: #f7407d;
                --cpd-color-pink-700: #ff88a6;
                --cpd-color-pink-600: #ffadc0;
                --cpd-color-pink-500: #ffc2cf;
                --cpd-color-pink-400: #ffdee5;
                --cpd-color-pink-300: #ffecf0;
                --cpd-color-pink-200: #fff5f7;
                --cpd-color-pink-100: #fffafb;
                --cpd-color-fuchsia-1400: #34004c;
                --cpd-color-fuchsia-1300: #4e0068;
                --cpd-color-fuchsia-1200: #671481;
                --cpd-color-fuchsia-1100: #822198;
                --cpd-color-fuchsia-1000: #972aaa;
                --cpd-color-fuchsia-900: #ad33bd;
                --cpd-color-fuchsia-800: #c85ed1;
                --cpd-color-fuchsia-700: #db93e1;
                --cpd-color-fuchsia-600: #e7b2ea;
                --cpd-color-fuchsia-500: #edc6f0;
                --cpd-color-fuchsia-400: #f6dff7;
                --cpd-color-fuchsia-300: #faeefb;
                --cpd-color-fuchsia-200: #fcf5fd;
                --cpd-color-fuchsia-100: #fefafe;
                --cpd-color-purple-1400: #200066;
                --cpd-color-purple-1300: #33008d;
                --cpd-color-purple-1200: #4c05b5;
                --cpd-color-purple-1100: #5d26cd;
                --cpd-color-purple-1000: #6b37de;
                --cpd-color-purple-900: #7a47f1;
                --cpd-color-purple-800: #9271fd;
                --cpd-color-purple-700: #b1a0ff;
                --cpd-color-purple-600: #c5bbff;
                --cpd-color-purple-500: #d4cdff;
                --cpd-color-purple-400: #e6e2ff;
                --cpd-color-purple-300: #f1efff;
                --cpd-color-purple-200: #f8f7ff;
                --cpd-color-purple-100: #fbfbff;
                --cpd-color-blue-1400: #000e65;
                --cpd-color-blue-1300: #012478;
                --cpd-color-blue-1200: #043894;
                --cpd-color-blue-1100: #064ab1;
                --cpd-color-blue-1000: #0558c7;
                --cpd-color-blue-900: #0467dd;
                --cpd-color-blue-800: #4088ee;
                --cpd-color-blue-700: #7eaff6;
                --cpd-color-blue-600: #a3c6fa;
                --cpd-color-blue-500: #bad5fc;
                --cpd-color-blue-400: #d8e7fe;
                --cpd-color-blue-300: #e9f2ff;
                --cpd-color-blue-200: #f4f8ff;
                --cpd-color-blue-100: #f9fcff;
                --cpd-color-cyan-1400: #00194f;
                --cpd-color-cyan-1300: #002b61;
                --cpd-color-cyan-1200: #004077;
                --cpd-color-cyan-1100: #00548c;
                --cpd-color-cyan-1000: #00629c;
                --cpd-color-cyan-900: #0072ac;
                --cpd-color-cyan-800: #0094c0;
                --cpd-color-cyan-700: #15becf;
                --cpd-color-cyan-600: #76d1dd;
                --cpd-color-cyan-500: #9bdde5;
                --cpd-color-cyan-400: #c7ecf0;
                --cpd-color-cyan-300: #e3f5f8;
                --cpd-color-cyan-200: #f1fafb;
                --cpd-color-cyan-100: #f8fdfd;
                --cpd-color-green-1400: #002311;
                --cpd-color-green-1300: #003420;
                --cpd-color-green-1200: #004933;
                --cpd-color-green-1100: #005c45;
                --cpd-color-green-1000: #006b52;
                --cpd-color-green-900: #007a61;
                --cpd-color-green-800: #009b78;
                --cpd-color-green-700: #0bc491;
                --cpd-color-green-600: #71d7ae;
                --cpd-color-green-500: #98e1c1;
                --cpd-color-green-400: #c6eedb;
                --cpd-color-green-300: #e3f7ed;
                --cpd-color-green-200: #f1fbf6;
                --cpd-color-green-100: #f8fdfb;
                --cpd-color-lime-1400: #002400;
                --cpd-color-lime-1300: #003600;
                --cpd-color-lime-1200: #004b00;
                --cpd-color-lime-1100: #005f00;
                --cpd-color-lime-1000: #006e00;
                --cpd-color-lime-900: #197d0c;
                --cpd-color-lime-800: #359d18;
                --cpd-color-lime-700: #54c424;
                --cpd-color-lime-600: #76db4c;
                --cpd-color-lime-500: #99e57e;
                --cpd-color-lime-400: #c8f1ba;
                --cpd-color-lime-300: #e0f8d9;
                --cpd-color-lime-200: #f1fcee;
                --cpd-color-lime-100: #f8fdf6;
                --cpd-color-yellow-1400: #410600;
                --cpd-color-yellow-1300: #541a00;
                --cpd-color-yellow-1200: #692e00;
                --cpd-color-yellow-1100: #803f00;
                --cpd-color-yellow-1000: #8f4d00;
                --cpd-color-yellow-900: #9f5b00;
                --cpd-color-yellow-800: #be7a00;
                --cpd-color-yellow-700: #dea200;
                --cpd-color-yellow-600: #f1bd00;
                --cpd-color-yellow-500: #fbce00;
                --cpd-color-yellow-400: #ffe484;
                --cpd-color-yellow-300: #fff2c1;
                --cpd-color-yellow-200: #fff8e0;
                --cpd-color-yellow-100: #fffcf0;
                --cpd-color-orange-1400: #450000;
                --cpd-color-orange-1300: #620000;
                --cpd-color-orange-1200: #850000;
                --cpd-color-orange-1100: #9b2200;
                --cpd-color-orange-1000: #ac3300;
                --cpd-color-orange-900: #bc4500;
                --cpd-color-orange-800: #dc6700;
                --cpd-color-orange-700: #f89440;
                --cpd-color-orange-600: #fdb37c;
                --cpd-color-orange-500: #ffc8a1;
                --cpd-color-orange-400: #ffdfc8;
                --cpd-color-orange-300: #ffefe4;
                --cpd-color-orange-200: #fff6ef;
                --cpd-color-orange-100: #fffaf7;
                --cpd-color-red-1400: #450000;
                --cpd-color-red-1300: #620000;
                --cpd-color-red-1200: #850006;
                --cpd-color-red-1100: #a4041d;
                --cpd-color-red-1000: #bc0f22;
                --cpd-color-red-900: #d51928;
                --cpd-color-red-800: #ff3d3d;
                --cpd-color-red-700: #ff8c81;
                --cpd-color-red-600: #ffafa5;
                --cpd-color-red-500: #ffc5bc;
                --cpd-color-red-400: #ffdfda;
                --cpd-color-red-300: #ffefec;
                --cpd-color-red-200: #fff7f6;
                --cpd-color-red-100: #fffaf9;
                --cpd-color-gray-1400: #1b1d22;
                --cpd-color-gray-1300: #2b2d32;
                --cpd-color-gray-1200: #3c4045;
                --cpd-color-gray-1100: #4c5158;
                --cpd-color-gray-1000: #595e67;
                --cpd-color-gray-900: #656d77;
                --cpd-color-gray-800: #818a95;
                --cpd-color-gray-700: #a6adb7;
                --cpd-color-gray-600: #bdc4cc;
                --cpd-color-gray-500: #cdd3da;
                --cpd-color-gray-400: #e1e6ec;
                --cpd-color-gray-300: #f0f2f5;
                --cpd-color-gray-200: #f7f9fa;
                --cpd-color-gray-100: #fbfcfd;
                --cpd-color-theme-bg: #fff
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: light) {
        @layer cpd-base {
            :root {
                --cpd-color-alpha-pink-1400: #420017;
                --cpd-color-alpha-pink-1300: #61002c;
                --cpd-color-alpha-pink-1200: rgba(121, 1, 61, .98);
                --cpd-color-alpha-pink-1100: rgba(158, 0, 76, .97);
                --cpd-color-alpha-pink-1000: rgba(182, 2, 86, .97);
                --cpd-color-alpha-pink-900: rgba(207, 2, 94, .96);
                --cpd-color-alpha-pink-800: rgba(245, 0, 82, .75);
                --cpd-color-alpha-pink-700: rgba(255, 0, 64, .47);
                --cpd-color-alpha-pink-600: rgba(255, 5, 63, .33);
                --cpd-color-alpha-pink-500: rgba(255, 0, 55, .24);
                --cpd-color-alpha-pink-400: rgba(255, 0, 55, .13);
                --cpd-color-alpha-pink-300: rgba(255, 20, 71, .08);
                --cpd-color-alpha-pink-200: rgba(255, 5, 55, .04);
                --cpd-color-alpha-pink-100: rgba(255, 5, 55, .02);
                --cpd-color-alpha-fuchsia-1400: #34004d;
                --cpd-color-alpha-fuchsia-1300: #4d0066;
                --cpd-color-alpha-fuchsia-1200: rgba(93, 2, 121, .93);
                --cpd-color-alpha-fuchsia-1100: rgba(115, 3, 140, .88);
                --cpd-color-alpha-fuchsia-1000: rgba(130, 1, 152, .84);
                --cpd-color-alpha-fuchsia-900: rgba(153, 0, 173, .8);
                --cpd-color-alpha-fuchsia-800: rgba(171, 3, 186, .64);
                --cpd-color-alpha-fuchsia-700: rgba(170, 4, 185, .43);
                --cpd-color-alpha-fuchsia-600: rgba(178, 7, 187, .31);
                --cpd-color-alpha-fuchsia-500: rgba(180, 7, 192, .23);
                --cpd-color-alpha-fuchsia-400: rgba(189, 9, 195, .13);
                --cpd-color-alpha-fuchsia-300: rgba(182, 12, 198, .07);
                --cpd-color-alpha-fuchsia-200: rgba(181, 5, 204, .04);
                --cpd-color-alpha-fuchsia-100: rgba(204, 5, 204, .02);
                --cpd-color-alpha-purple-1400: #200066;
                --cpd-color-alpha-purple-1300: #34008f;
                --cpd-color-alpha-purple-1200: rgba(74, 2, 182, .99);
                --cpd-color-alpha-purple-1100: rgba(67, 3, 196, .86);
                --cpd-color-alpha-purple-1000: rgba(69, 2, 212, .79);
                --cpd-color-alpha-purple-900: rgba(73, 2, 237, .73);
                --cpd-color-alpha-purple-800: rgba(59, 1, 249, .56);
                --cpd-color-alpha-purple-700: rgba(51, 5, 255, .38);
                --cpd-color-alpha-purple-600: rgba(43, 5, 255, .27);
                --cpd-color-alpha-purple-500: rgba(38, 5, 255, .2);
                --cpd-color-alpha-purple-400: rgba(47, 15, 255, .12);
                --cpd-color-alpha-purple-300: rgba(56, 25, 255, .07);
                --cpd-color-alpha-purple-200: rgba(83, 56, 255, .04);
                --cpd-color-alpha-purple-100: rgba(56, 56, 255, .02);
                --cpd-color-alpha-blue-1400: #000e66;
                --cpd-color-alpha-blue-1300: #012579;
                --cpd-color-alpha-blue-1200: rgba(1, 54, 147, .99);
                --cpd-color-alpha-blue-1100: rgba(1, 72, 178, .98);
                --cpd-color-alpha-blue-1000: rgba(2, 86, 197, .99);
                --cpd-color-alpha-blue-900: rgba(1, 101, 223, .99);
                --cpd-color-alpha-blue-800: rgba(0, 98, 235, .75);
                --cpd-color-alpha-blue-700: rgba(2, 100, 237, .51);
                --cpd-color-alpha-blue-600: rgba(6, 99, 239, .37);
                --cpd-color-alpha-blue-500: rgba(9, 108, 246, .28);
                --cpd-color-alpha-blue-400: rgba(11, 106, 249, .16);
                --cpd-color-alpha-blue-300: rgba(10, 112, 255, .09);
                --cpd-color-alpha-blue-200: rgba(36, 116, 255, .05);
                --cpd-color-alpha-blue-100: rgba(56, 156, 255, .03);
                --cpd-color-alpha-cyan-1400: #001a52;
                --cpd-color-alpha-cyan-1300: #002c61;
                --cpd-color-alpha-cyan-1200: #003f75;
                --cpd-color-alpha-cyan-1100: #00568f;
                --cpd-color-alpha-cyan-1000: #00649e;
                --cpd-color-alpha-cyan-900: #0074ad;
                --cpd-color-alpha-cyan-800: #0095c2;
                --cpd-color-alpha-cyan-700: rgba(1, 183, 203, .92);
                --cpd-color-alpha-cyan-600: rgba(1, 170, 193, .54);
                --cpd-color-alpha-cyan-500: rgba(5, 171, 189, .4);
                --cpd-color-alpha-cyan-400: rgba(0, 170, 189, .22);
                --cpd-color-alpha-cyan-300: rgba(0, 168, 194, .11);
                --cpd-color-alpha-cyan-200: rgba(22, 171, 187, .06);
                --cpd-color-alpha-cyan-100: rgba(22, 187, 187, .03);
                --cpd-color-alpha-green-1400: #002411;
                --cpd-color-alpha-green-1300: #00331f;
                --cpd-color-alpha-green-1200: #004732;
                --cpd-color-alpha-green-1100: #005c45;
                --cpd-color-alpha-green-1000: #006b52;
                --cpd-color-alpha-green-900: #007a62;
                --cpd-color-alpha-green-800: #009975;
                --cpd-color-alpha-green-700: rgba(1, 193, 138, .96);
                --cpd-color-alpha-green-600: rgba(1, 183, 110, .56);
                --cpd-color-alpha-green-500: rgba(4, 185, 106, .41);
                --cpd-color-alpha-green-400: rgba(7, 182, 97, .23);
                --cpd-color-alpha-green-300: rgba(0, 184, 92, .11);
                --cpd-color-alpha-green-200: rgba(22, 187, 105, .06);
                --cpd-color-alpha-green-100: rgba(22, 187, 121, .03);
                --cpd-color-alpha-lime-1400: #002400;
                --cpd-color-alpha-lime-1300: #003800;
                --cpd-color-alpha-lime-1200: #004d00;
                --cpd-color-alpha-lime-1100: #006100;
                --cpd-color-alpha-lime-1000: #007000;
                --cpd-color-alpha-lime-900: rgba(16, 121, 2, .96);
                --cpd-color-alpha-lime-800: rgba(32, 147, 1, .91);
                --cpd-color-alpha-lime-700: rgba(57, 189, 0, .86);
                --cpd-color-alpha-lime-600: rgba(64, 206, 3, .71);
                --cpd-color-alpha-lime-500: rgba(55, 202, 2, .51);
                --cpd-color-alpha-lime-400: rgba(58, 206, 9, .28);
                --cpd-color-alpha-lime-300: rgba(46, 207, 2, .15);
                --cpd-color-alpha-lime-200: rgba(56, 212, 12, .07);
                --cpd-color-alpha-lime-100: rgba(79, 205, 29, .04);
                --cpd-color-alpha-yellow-1400: #420700;
                --cpd-color-alpha-yellow-1300: #571b00;
                --cpd-color-alpha-yellow-1200: #6b2e00;
                --cpd-color-alpha-yellow-1100: #804000;
                --cpd-color-alpha-yellow-1000: #8f4c00;
                --cpd-color-alpha-yellow-900: #9e5a00;
                --cpd-color-alpha-yellow-800: #bd7b00;
                --cpd-color-alpha-yellow-700: #e0a500;
                --cpd-color-alpha-yellow-600: #f0bc00;
                --cpd-color-alpha-yellow-500: #facc00;
                --cpd-color-alpha-yellow-400: rgba(255, 201, 5, .49);
                --cpd-color-alpha-yellow-300: rgba(255, 201, 5, .25);
                --cpd-color-alpha-yellow-200: rgba(255, 199, 15, .13);
                --cpd-color-alpha-yellow-100: rgba(255, 205, 5, .06);
                --cpd-color-alpha-orange-1400: #470000;
                --cpd-color-alpha-orange-1300: #610000;
                --cpd-color-alpha-orange-1200: #850000;
                --cpd-color-alpha-orange-1100: #992100;
                --cpd-color-alpha-orange-1000: #ad3400;
                --cpd-color-alpha-orange-900: #bd4500;
                --cpd-color-alpha-orange-800: #db6600;
                --cpd-color-alpha-orange-700: rgba(245, 110, 0, .75);
                --cpd-color-alpha-orange-600: rgba(252, 111, 3, .52);
                --cpd-color-alpha-orange-500: rgba(255, 106, 0, .37);
                --cpd-color-alpha-orange-400: rgba(255, 109, 5, .22);
                --cpd-color-alpha-orange-300: rgba(255, 108, 10, .11);
                --cpd-color-alpha-orange-200: rgba(255, 125, 25, .07);
                --cpd-color-alpha-orange-100: rgba(255, 129, 56, .04);
                --cpd-color-alpha-red-1400: #470000;
                --cpd-color-alpha-red-1300: #610000;
                --cpd-color-alpha-red-1200: #850007;
                --cpd-color-alpha-red-1100: rgba(162, 1, 28, .99);
                --cpd-color-alpha-red-1000: rgba(187, 2, 23, .95);
                --cpd-color-alpha-red-900: rgba(207, 2, 19, .91);
                --cpd-color-alpha-red-800: rgba(255, 5, 5, .77);
                --cpd-color-alpha-red-700: rgba(255, 26, 5, .5);
                --cpd-color-alpha-red-600: rgba(255, 34, 5, .36);
                --cpd-color-alpha-red-500: rgba(255, 38, 5, .27);
                --cpd-color-alpha-red-400: rgba(255, 43, 10, .15);
                --cpd-color-alpha-red-300: rgba(255, 56, 20, .08);
                --cpd-color-alpha-red-200: rgba(255, 57, 31, .04);
                --cpd-color-alpha-red-100: rgba(255, 89, 56, .03);
                --cpd-color-alpha-gray-1400: rgba(2, 4, 8, .9);
                --cpd-color-alpha-gray-1300: rgba(3, 5, 12, .84);
                --cpd-color-alpha-gray-1200: rgba(2, 7, 13, .77);
                --cpd-color-alpha-gray-1100: rgba(3, 11, 22, .71);
                --cpd-color-alpha-gray-1000: rgba(3, 12, 27, .66);
                --cpd-color-alpha-gray-900: rgba(3, 16, 33, .61);
                --cpd-color-alpha-gray-800: rgba(3, 21, 43, .5);
                --cpd-color-alpha-gray-700: rgba(1, 21, 50, .35);
                --cpd-color-alpha-gray-600: rgba(1, 29, 60, .26);
                --cpd-color-alpha-gray-500: rgba(5, 36, 72, .2);
                --cpd-color-alpha-gray-400: rgba(5, 46, 97, .12);
                --cpd-color-alpha-gray-300: rgba(5, 38, 87, .06);
                --cpd-color-alpha-gray-200: rgba(54, 104, 129, .04);
                --cpd-color-alpha-gray-100: rgba(54, 105, 155, .02);
                --cpd-color-pink-1400: #430017;
                --cpd-color-pink-1300: #5f002b;
                --cpd-color-pink-1200: #7e0642;
                --cpd-color-pink-1100: #9f0850;
                --cpd-color-pink-1000: #b80a5b;
                --cpd-color-pink-900: #d20c65;
                --cpd-color-pink-800: #f7407d;
                --cpd-color-pink-700: #ff88a6;
                --cpd-color-pink-600: #ffadc0;
                --cpd-color-pink-500: #ffc2cf;
                --cpd-color-pink-400: #ffdee5;
                --cpd-color-pink-300: #ffecf0;
                --cpd-color-pink-200: #fff5f7;
                --cpd-color-pink-100: #fffafb;
                --cpd-color-fuchsia-1400: #34004c;
                --cpd-color-fuchsia-1300: #4e0068;
                --cpd-color-fuchsia-1200: #671481;
                --cpd-color-fuchsia-1100: #822198;
                --cpd-color-fuchsia-1000: #972aaa;
                --cpd-color-fuchsia-900: #ad33bd;
                --cpd-color-fuchsia-800: #c85ed1;
                --cpd-color-fuchsia-700: #db93e1;
                --cpd-color-fuchsia-600: #e7b2ea;
                --cpd-color-fuchsia-500: #edc6f0;
                --cpd-color-fuchsia-400: #f6dff7;
                --cpd-color-fuchsia-300: #faeefb;
                --cpd-color-fuchsia-200: #fcf5fd;
                --cpd-color-fuchsia-100: #fefafe;
                --cpd-color-purple-1400: #200066;
                --cpd-color-purple-1300: #33008d;
                --cpd-color-purple-1200: #4c05b5;
                --cpd-color-purple-1100: #5d26cd;
                --cpd-color-purple-1000: #6b37de;
                --cpd-color-purple-900: #7a47f1;
                --cpd-color-purple-800: #9271fd;
                --cpd-color-purple-700: #b1a0ff;
                --cpd-color-purple-600: #c5bbff;
                --cpd-color-purple-500: #d4cdff;
                --cpd-color-purple-400: #e6e2ff;
                --cpd-color-purple-300: #f1efff;
                --cpd-color-purple-200: #f8f7ff;
                --cpd-color-purple-100: #fbfbff;
                --cpd-color-blue-1400: #000e65;
                --cpd-color-blue-1300: #012478;
                --cpd-color-blue-1200: #043894;
                --cpd-color-blue-1100: #064ab1;
                --cpd-color-blue-1000: #0558c7;
                --cpd-color-blue-900: #0467dd;
                --cpd-color-blue-800: #4088ee;
                --cpd-color-blue-700: #7eaff6;
                --cpd-color-blue-600: #a3c6fa;
                --cpd-color-blue-500: #bad5fc;
                --cpd-color-blue-400: #d8e7fe;
                --cpd-color-blue-300: #e9f2ff;
                --cpd-color-blue-200: #f4f8ff;
                --cpd-color-blue-100: #f9fcff;
                --cpd-color-cyan-1400: #00194f;
                --cpd-color-cyan-1300: #002b61;
                --cpd-color-cyan-1200: #004077;
                --cpd-color-cyan-1100: #00548c;
                --cpd-color-cyan-1000: #00629c;
                --cpd-color-cyan-900: #0072ac;
                --cpd-color-cyan-800: #0094c0;
                --cpd-color-cyan-700: #15becf;
                --cpd-color-cyan-600: #76d1dd;
                --cpd-color-cyan-500: #9bdde5;
                --cpd-color-cyan-400: #c7ecf0;
                --cpd-color-cyan-300: #e3f5f8;
                --cpd-color-cyan-200: #f1fafb;
                --cpd-color-cyan-100: #f8fdfd;
                --cpd-color-green-1400: #002311;
                --cpd-color-green-1300: #003420;
                --cpd-color-green-1200: #004933;
                --cpd-color-green-1100: #005c45;
                --cpd-color-green-1000: #006b52;
                --cpd-color-green-900: #007a61;
                --cpd-color-green-800: #009b78;
                --cpd-color-green-700: #0bc491;
                --cpd-color-green-600: #71d7ae;
                --cpd-color-green-500: #98e1c1;
                --cpd-color-green-400: #c6eedb;
                --cpd-color-green-300: #e3f7ed;
                --cpd-color-green-200: #f1fbf6;
                --cpd-color-green-100: #f8fdfb;
                --cpd-color-lime-1400: #002400;
                --cpd-color-lime-1300: #003600;
                --cpd-color-lime-1200: #004b00;
                --cpd-color-lime-1100: #005f00;
                --cpd-color-lime-1000: #006e00;
                --cpd-color-lime-900: #197d0c;
                --cpd-color-lime-800: #359d18;
                --cpd-color-lime-700: #54c424;
                --cpd-color-lime-600: #76db4c;
                --cpd-color-lime-500: #99e57e;
                --cpd-color-lime-400: #c8f1ba;
                --cpd-color-lime-300: #e0f8d9;
                --cpd-color-lime-200: #f1fcee;
                --cpd-color-lime-100: #f8fdf6;
                --cpd-color-yellow-1400: #410600;
                --cpd-color-yellow-1300: #541a00;
                --cpd-color-yellow-1200: #692e00;
                --cpd-color-yellow-1100: #803f00;
                --cpd-color-yellow-1000: #8f4d00;
                --cpd-color-yellow-900: #9f5b00;
                --cpd-color-yellow-800: #be7a00;
                --cpd-color-yellow-700: #dea200;
                --cpd-color-yellow-600: #f1bd00;
                --cpd-color-yellow-500: #fbce00;
                --cpd-color-yellow-400: #ffe484;
                --cpd-color-yellow-300: #fff2c1;
                --cpd-color-yellow-200: #fff8e0;
                --cpd-color-yellow-100: #fffcf0;
                --cpd-color-orange-1400: #450000;
                --cpd-color-orange-1300: #620000;
                --cpd-color-orange-1200: #850000;
                --cpd-color-orange-1100: #9b2200;
                --cpd-color-orange-1000: #ac3300;
                --cpd-color-orange-900: #bc4500;
                --cpd-color-orange-800: #dc6700;
                --cpd-color-orange-700: #f89440;
                --cpd-color-orange-600: #fdb37c;
                --cpd-color-orange-500: #ffc8a1;
                --cpd-color-orange-400: #ffdfc8;
                --cpd-color-orange-300: #ffefe4;
                --cpd-color-orange-200: #fff6ef;
                --cpd-color-orange-100: #fffaf7;
                --cpd-color-red-1400: #450000;
                --cpd-color-red-1300: #620000;
                --cpd-color-red-1200: #850006;
                --cpd-color-red-1100: #a4041d;
                --cpd-color-red-1000: #bc0f22;
                --cpd-color-red-900: #d51928;
                --cpd-color-red-800: #ff3d3d;
                --cpd-color-red-700: #ff8c81;
                --cpd-color-red-600: #ffafa5;
                --cpd-color-red-500: #ffc5bc;
                --cpd-color-red-400: #ffdfda;
                --cpd-color-red-300: #ffefec;
                --cpd-color-red-200: #fff7f6;
                --cpd-color-red-100: #fffaf9;
                --cpd-color-gray-1400: #1b1d22;
                --cpd-color-gray-1300: #2b2d32;
                --cpd-color-gray-1200: #3c4045;
                --cpd-color-gray-1100: #4c5158;
                --cpd-color-gray-1000: #595e67;
                --cpd-color-gray-900: #656d77;
                --cpd-color-gray-800: #818a95;
                --cpd-color-gray-700: #a6adb7;
                --cpd-color-gray-600: #bdc4cc;
                --cpd-color-gray-500: #cdd3da;
                --cpd-color-gray-400: #e1e6ec;
                --cpd-color-gray-300: #f0f2f5;
                --cpd-color-gray-200: #f7f9fa;
                --cpd-color-gray-100: #fbfcfd;
                --cpd-color-theme-bg: #fff
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-semantic {
            .cpd-theme-light.cpd-theme-light {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg)
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: light) {
        @layer cpd-semantic {
            :root {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg)
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-base {
            .cpd-theme-light-hc.cpd-theme-light-hc {
                --cpd-color-alpha-pink-1400: #420015;
                --cpd-color-alpha-pink-1300: #4d001d;
                --cpd-color-alpha-pink-1200: #660030;
                --cpd-color-alpha-pink-1100: #70003a;
                --cpd-color-alpha-pink-1000: rgba(131, 2, 66, .98);
                --cpd-color-alpha-pink-900: rgba(143, 0, 69, .97);
                --cpd-color-alpha-pink-800: rgba(222, 2, 101, .96);
                --cpd-color-alpha-pink-700: rgba(247, 2, 80, .7);
                --cpd-color-alpha-pink-600: rgba(255, 0, 64, .47);
                --cpd-color-alpha-pink-500: rgba(255, 5, 63, .33);
                --cpd-color-alpha-pink-400: rgba(255, 10, 63, .19);
                --cpd-color-alpha-pink-300: rgba(255, 0, 55, .13);
                --cpd-color-alpha-pink-200: rgba(255, 20, 71, .08);
                --cpd-color-alpha-pink-100: rgba(255, 5, 55, .04);
                --cpd-color-alpha-fuchsia-1400: #34004d;
                --cpd-color-alpha-fuchsia-1300: #3a0052;
                --cpd-color-alpha-fuchsia-1200: #53026e;
                --cpd-color-alpha-fuchsia-1100: rgba(83, 2, 111, .95);
                --cpd-color-alpha-fuchsia-1000: rgba(94, 0, 122, .91);
                --cpd-color-alpha-fuchsia-900: rgba(106, 3, 135, .9);
                --cpd-color-alpha-fuchsia-800: rgba(164, 2, 182, .79);
                --cpd-color-alpha-fuchsia-700: rgba(171, 3, 186, .6);
                --cpd-color-alpha-fuchsia-600: rgba(170, 4, 185, .43);
                --cpd-color-alpha-fuchsia-500: rgba(178, 7, 187, .31);
                --cpd-color-alpha-fuchsia-400: rgba(177, 5, 189, .18);
                --cpd-color-alpha-fuchsia-300: rgba(189, 9, 195, .13);
                --cpd-color-alpha-fuchsia-200: rgba(182, 12, 198, .07);
                --cpd-color-alpha-fuchsia-100: rgba(181, 5, 204, .04);
                --cpd-color-alpha-purple-1400: #1f0061;
                --cpd-color-alpha-purple-1300: #240070;
                --cpd-color-alpha-purple-1200: #360094;
                --cpd-color-alpha-purple-1100: #4300a8;
                --cpd-color-alpha-purple-1000: rgba(70, 0, 184, .95);
                --cpd-color-alpha-purple-900: rgba(69, 3, 191, .9);
                --cpd-color-alpha-purple-800: rgba(76, 2, 247, .7);
                --cpd-color-alpha-purple-700: rgba(60, 0, 255, .53);
                --cpd-color-alpha-purple-600: rgba(51, 5, 255, .38);
                --cpd-color-alpha-purple-500: rgba(43, 5, 255, .27);
                --cpd-color-alpha-purple-400: rgba(43, 10, 255, .16);
                --cpd-color-alpha-purple-300: rgba(47, 15, 255, .12);
                --cpd-color-alpha-purple-200: rgba(56, 25, 255, .07);
                --cpd-color-alpha-purple-100: rgba(83, 56, 255, .04);
                --cpd-color-alpha-blue-1400: #000b61;
                --cpd-color-alpha-blue-1300: #00156b;
                --cpd-color-alpha-blue-1200: rgba(0, 37, 122, .99);
                --cpd-color-alpha-blue-1100: rgba(1, 46, 137, .99);
                --cpd-color-alpha-blue-1000: rgba(2, 57, 151, .99);
                --cpd-color-alpha-blue-900: rgba(2, 65, 167, .99);
                --cpd-color-alpha-blue-800: rgba(1, 110, 233, .99);
                --cpd-color-alpha-blue-700: rgba(0, 98, 235, .71);
                --cpd-color-alpha-blue-600: rgba(2, 100, 237, .51);
                --cpd-color-alpha-blue-500: rgba(6, 99, 239, .37);
                --cpd-color-alpha-blue-400: rgba(5, 101, 245, .22);
                --cpd-color-alpha-blue-300: rgba(11, 106, 249, .16);
                --cpd-color-alpha-blue-200: rgba(10, 112, 255, .09);
                --cpd-color-alpha-blue-100: rgba(36, 116, 255, .05);
                --cpd-color-alpha-cyan-1400: #00174d;
                --cpd-color-alpha-cyan-1300: #001e52;
                --cpd-color-alpha-cyan-1200: #003066;
                --cpd-color-alpha-cyan-1100: #003870;
                --cpd-color-alpha-cyan-1000: #00437a;
                --cpd-color-alpha-cyan-900: #004d85;
                --cpd-color-alpha-cyan-800: #007ab3;
                --cpd-color-alpha-cyan-700: #0098c2;
                --cpd-color-alpha-cyan-600: rgba(1, 183, 203, .92);
                --cpd-color-alpha-cyan-500: rgba(1, 170, 193, .54);
                --cpd-color-alpha-cyan-400: rgba(3, 169, 191, .31);
                --cpd-color-alpha-cyan-300: rgba(0, 170, 189, .22);
                --cpd-color-alpha-cyan-200: rgba(0, 168, 194, .11);
                --cpd-color-alpha-cyan-100: rgba(22, 171, 187, .06);
                --cpd-color-alpha-green-1400: #002410;
                --cpd-color-alpha-green-1300: #002916;
                --cpd-color-alpha-green-1200: #003824;
                --cpd-color-alpha-green-1100: #00422c;
                --cpd-color-alpha-green-1000: #004d36;
                --cpd-color-alpha-green-900: #00573e;
                --cpd-color-alpha-green-800: #00856a;
                --cpd-color-alpha-green-700: #00a37d;
                --cpd-color-alpha-green-600: rgba(1, 193, 138, .96);
                --cpd-color-alpha-green-500: rgba(1, 183, 110, .56);
                --cpd-color-alpha-green-400: rgba(5, 184, 103, .32);
                --cpd-color-alpha-green-300: rgba(7, 182, 97, .23);
                --cpd-color-alpha-green-200: rgba(0, 184, 92, .11);
                --cpd-color-alpha-green-100: rgba(22, 187, 105, .06);
                --cpd-color-alpha-lime-1400: #002400;
                --cpd-color-alpha-lime-1300: #002900;
                --cpd-color-alpha-lime-1200: #003800;
                --cpd-color-alpha-lime-1100: #004200;
                --cpd-color-alpha-lime-1000: #005200;
                --cpd-color-alpha-lime-900: #005700;
                --cpd-color-alpha-lime-800: rgba(18, 126, 2, .95);
                --cpd-color-alpha-lime-700: rgba(36, 152, 1, .9);
                --cpd-color-alpha-lime-600: rgba(57, 189, 0, .86);
                --cpd-color-alpha-lime-500: rgba(64, 206, 3, .71);
                --cpd-color-alpha-lime-400: rgba(55, 204, 5, .4);
                --cpd-color-alpha-lime-300: rgba(58, 206, 9, .28);
                --cpd-color-alpha-lime-200: rgba(46, 207, 2, .15);
                --cpd-color-alpha-lime-100: rgba(56, 212, 12, .07);
                --cpd-color-alpha-yellow-1400: #3d0500;
                --cpd-color-alpha-yellow-1300: #470c00;
                --cpd-color-alpha-yellow-1200: #571d00;
                --cpd-color-alpha-yellow-1100: #612700;
                --cpd-color-alpha-yellow-1000: #703200;
                --cpd-color-alpha-yellow-900: #753700;
                --cpd-color-alpha-yellow-800: #a86500;
                --cpd-color-alpha-yellow-700: #c28100;
                --cpd-color-alpha-yellow-600: #e0a500;
                --cpd-color-alpha-yellow-500: #f0bc00;
                --cpd-color-alpha-yellow-400: rgba(255, 204, 0, .72);
                --cpd-color-alpha-yellow-300: rgba(255, 201, 5, .49);
                --cpd-color-alpha-yellow-200: rgba(255, 201, 5, .25);
                --cpd-color-alpha-yellow-100: rgba(255, 199, 15, .13);
                --cpd-color-alpha-orange-1400: #420000;
                --cpd-color-alpha-orange-1300: #4d0000;
                --cpd-color-alpha-orange-1200: #600;
                --cpd-color-alpha-orange-1100: #750000;
                --cpd-color-alpha-orange-1000: #8a0900;
                --cpd-color-alpha-orange-900: #941600;
                --cpd-color-alpha-orange-800: #c24e00;
                --cpd-color-alpha-orange-700: #e06c00;
                --cpd-color-alpha-orange-600: rgba(245, 110, 0, .75);
                --cpd-color-alpha-orange-500: rgba(252, 111, 3, .52);
                --cpd-color-alpha-orange-400: rgba(255, 112, 10, .3);
                --cpd-color-alpha-orange-300: rgba(255, 109, 5, .22);
                --cpd-color-alpha-orange-200: rgba(255, 108, 10, .11);
                --cpd-color-alpha-orange-100: rgba(255, 125, 25, .07);
                --cpd-color-alpha-red-1400: #420000;
                --cpd-color-alpha-red-1300: #4d0000;
                --cpd-color-alpha-red-1200: #600;
                --cpd-color-alpha-red-1100: #750000;
                --cpd-color-alpha-red-1000: #8a000b;
                --cpd-color-alpha-red-900: #99001a;
                --cpd-color-alpha-red-800: rgba(222, 2, 17, .89);
                --cpd-color-alpha-red-700: rgba(255, 8, 0, .72);
                --cpd-color-alpha-red-600: rgba(255, 26, 5, .5);
                --cpd-color-alpha-red-500: rgba(255, 34, 5, .36);
                --cpd-color-alpha-red-400: rgba(255, 38, 5, .21);
                --cpd-color-alpha-red-300: rgba(255, 43, 10, .15);
                --cpd-color-alpha-red-200: rgba(255, 56, 20, .08);
                --cpd-color-alpha-red-100: rgba(255, 57, 31, .04);
                --cpd-color-alpha-gray-1400: rgba(1, 3, 9, .9);
                --cpd-color-alpha-gray-1300: rgba(0, 4, 10, .88);
                --cpd-color-alpha-gray-1200: rgba(2, 5, 9, .83);
                --cpd-color-alpha-gray-1100: rgba(3, 6, 12, .8);
                --cpd-color-alpha-gray-1000: rgba(2, 6, 13, .76);
                --cpd-color-alpha-gray-900: rgba(3, 7, 17, .73);
                --cpd-color-alpha-gray-800: rgba(2, 14, 34, .58);
                --cpd-color-alpha-gray-700: rgba(5, 21, 46, .48);
                --cpd-color-alpha-gray-600: rgba(1, 21, 50, .35);
                --cpd-color-alpha-gray-500: rgba(1, 29, 60, .26);
                --cpd-color-alpha-gray-400: rgba(5, 37, 81, .16);
                --cpd-color-alpha-gray-300: rgba(5, 46, 97, .12);
                --cpd-color-alpha-gray-200: rgba(5, 38, 87, .06);
                --cpd-color-alpha-gray-100: rgba(54, 104, 129, .04);
                --cpd-color-pink-1400: #410015;
                --cpd-color-pink-1300: #4a001c;
                --cpd-color-pink-1200: #64002f;
                --cpd-color-pink-1100: #72003a;
                --cpd-color-pink-1000: #840745;
                --cpd-color-pink-900: #92084b;
                --cpd-color-pink-800: #e00c6a;
                --cpd-color-pink-700: #f94e84;
                --cpd-color-pink-600: #ff88a6;
                --cpd-color-pink-500: #ffadc0;
                --cpd-color-pink-400: #ffd0da;
                --cpd-color-pink-300: #ffdee5;
                --cpd-color-pink-200: #ffecf0;
                --cpd-color-pink-100: #fff5f7;
                --cpd-color-fuchsia-1400: #32004a;
                --cpd-color-fuchsia-1300: #3b0053;
                --cpd-color-fuchsia-1200: #52026c;
                --cpd-color-fuchsia-1100: #5c0f76;
                --cpd-color-fuchsia-1000: #6c1785;
                --cpd-color-fuchsia-900: #781c90;
                --cpd-color-fuchsia-800: #b937c6;
                --cpd-color-fuchsia-700: #cb68d4;
                --cpd-color-fuchsia-600: #db93e1;
                --cpd-color-fuchsia-500: #e7b2ea;
                --cpd-color-fuchsia-400: #f1d2f3;
                --cpd-color-fuchsia-300: #f6dff7;
                --cpd-color-fuchsia-200: #faeefb;
                --cpd-color-fuchsia-100: #fcf5fd;
                --cpd-color-purple-1400: #1f0062;
                --cpd-color-purple-1300: #240070;
                --cpd-color-purple-1200: #360094;
                --cpd-color-purple-1100: #4200a6;
                --cpd-color-purple-1000: #4f0dba;
                --cpd-color-purple-900: #571cc4;
                --cpd-color-purple-800: #824ef9;
                --cpd-color-purple-700: #9778fe;
                --cpd-color-purple-600: #b1a0ff;
                --cpd-color-purple-500: #c5bbff;
                --cpd-color-purple-400: #ddd8ff;
                --cpd-color-purple-300: #e6e2ff;
                --cpd-color-purple-200: #f1efff;
                --cpd-color-purple-100: #f8f7ff;
                --cpd-color-blue-1400: #000c63;
                --cpd-color-blue-1300: #001569;
                --cpd-color-blue-1200: #03277b;
                --cpd-color-blue-1100: #043088;
                --cpd-color-blue-1000: #053b9a;
                --cpd-color-blue-900: #0543a7;
                --cpd-color-blue-800: #046ee8;
                --cpd-color-blue-700: #4a8ef0;
                --cpd-color-blue-600: #7eaff6;
                --cpd-color-blue-500: #a3c6fa;
                --cpd-color-blue-400: #c8ddfd;
                --cpd-color-blue-300: #d8e7fe;
                --cpd-color-blue-200: #e9f2ff;
                --cpd-color-blue-100: #f4f8ff;
                --cpd-color-cyan-1400: #00174d;
                --cpd-color-cyan-1300: #001e53;
                --cpd-color-cyan-1200: #002e64;
                --cpd-color-cyan-1100: #00376e;
                --cpd-color-cyan-1000: #00447b;
                --cpd-color-cyan-900: #004c84;
                --cpd-color-cyan-800: #007ab3;
                --cpd-color-cyan-700: #009ac3;
                --cpd-color-cyan-600: #15becf;
                --cpd-color-cyan-500: #76d1dd;
                --cpd-color-cyan-400: #b1e4eb;
                --cpd-color-cyan-300: #c7ecf0;
                --cpd-color-cyan-200: #e3f5f8;
                --cpd-color-cyan-100: #f1fafb;
                --cpd-color-green-1400: #00210f;
                --cpd-color-green-1300: #002715;
                --cpd-color-green-1200: #003723;
                --cpd-color-green-1100: #00402b;
                --cpd-color-green-1000: #004d36;
                --cpd-color-green-900: #00553d;
                --cpd-color-green-800: #008268;
                --cpd-color-green-700: #00a27c;
                --cpd-color-green-600: #0bc491;
                --cpd-color-green-500: #71d7ae;
                --cpd-color-green-400: #afe8ce;
                --cpd-color-green-300: #c6eedb;
                --cpd-color-green-200: #e3f7ed;
                --cpd-color-green-100: #f1fbf6;
                --cpd-color-lime-1400: #020;
                --cpd-color-lime-1300: #002900;
                --cpd-color-lime-1200: #003900;
                --cpd-color-lime-1100: #004200;
                --cpd-color-lime-1000: #004f00;
                --cpd-color-lime-900: #005700;
                --cpd-color-lime-800: #1f850f;
                --cpd-color-lime-700: #3aa31a;
                --cpd-color-lime-600: #54c424;
                --cpd-color-lime-500: #76db4c;
                --cpd-color-lime-400: #afeb9b;
                --cpd-color-lime-300: #c8f1ba;
                --cpd-color-lime-200: #e0f8d9;
                --cpd-color-lime-100: #f1fcee;
                --cpd-color-yellow-1400: #3f0500;
                --cpd-color-yellow-1300: #450c00;
                --cpd-color-yellow-1200: #571d00;
                --cpd-color-yellow-1100: #612600;
                --cpd-color-yellow-1000: #6e3100;
                --cpd-color-yellow-900: #773800;
                --cpd-color-yellow-800: #a76300;
                --cpd-color-yellow-700: #c38100;
                --cpd-color-yellow-600: #dea200;
                --cpd-color-yellow-500: #f1bd00;
                --cpd-color-yellow-400: #ffda49;
                --cpd-color-yellow-300: #ffe484;
                --cpd-color-yellow-200: #fff2c1;
                --cpd-color-yellow-100: #fff8e0;
                --cpd-color-orange-1400: #420000;
                --cpd-color-orange-1300: #4c0000;
                --cpd-color-orange-1200: #670000;
                --cpd-color-orange-1100: #700;
                --cpd-color-orange-1000: #890800;
                --cpd-color-orange-900: #931700;
                --cpd-color-orange-800: #c44d00;
                --cpd-color-orange-700: #e26e00;
                --cpd-color-orange-600: #f89440;
                --cpd-color-orange-500: #fdb37c;
                --cpd-color-orange-400: #ffd4b5;
                --cpd-color-orange-300: #ffdfc8;
                --cpd-color-orange-200: #ffefe4;
                --cpd-color-orange-100: #fff6ef;
                --cpd-color-red-1400: #420000;
                --cpd-color-red-1300: #4c0000;
                --cpd-color-red-1200: #670000;
                --cpd-color-red-1100: #700;
                --cpd-color-red-1000: #8b000c;
                --cpd-color-red-900: #99001a;
                --cpd-color-red-800: #e11e2a;
                --cpd-color-red-700: #ff4e49;
                --cpd-color-red-600: #ff8c81;
                --cpd-color-red-500: #ffafa5;
                --cpd-color-red-400: #ffd1ca;
                --cpd-color-red-300: #ffdfda;
                --cpd-color-red-200: #ffefec;
                --cpd-color-red-100: #fff7f6;
                --cpd-color-gray-1400: #1a1c21;
                --cpd-color-gray-1300: #1f2126;
                --cpd-color-gray-1200: #2d3034;
                --cpd-color-gray-1100: #35383d;
                --cpd-color-gray-1000: #3f4248;
                --cpd-color-gray-900: #474a51;
                --cpd-color-gray-800: #6c737e;
                --cpd-color-gray-700: #878f9b;
                --cpd-color-gray-600: #a6adb7;
                --cpd-color-gray-500: #bdc4cc;
                --cpd-color-gray-400: #d7dce3;
                --cpd-color-gray-300: #e1e6ec;
                --cpd-color-gray-200: #f0f2f5;
                --cpd-color-gray-100: #f7f9fa;
                --cpd-color-theme-bg: #fff
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: light) and (prefers-contrast: more) {
        @layer cpd-base {
            :root {
                --cpd-color-alpha-pink-1400: #420015;
                --cpd-color-alpha-pink-1300: #4d001d;
                --cpd-color-alpha-pink-1200: #660030;
                --cpd-color-alpha-pink-1100: #70003a;
                --cpd-color-alpha-pink-1000: rgba(131, 2, 66, .98);
                --cpd-color-alpha-pink-900: rgba(143, 0, 69, .97);
                --cpd-color-alpha-pink-800: rgba(222, 2, 101, .96);
                --cpd-color-alpha-pink-700: rgba(247, 2, 80, .7);
                --cpd-color-alpha-pink-600: rgba(255, 0, 64, .47);
                --cpd-color-alpha-pink-500: rgba(255, 5, 63, .33);
                --cpd-color-alpha-pink-400: rgba(255, 10, 63, .19);
                --cpd-color-alpha-pink-300: rgba(255, 0, 55, .13);
                --cpd-color-alpha-pink-200: rgba(255, 20, 71, .08);
                --cpd-color-alpha-pink-100: rgba(255, 5, 55, .04);
                --cpd-color-alpha-fuchsia-1400: #34004d;
                --cpd-color-alpha-fuchsia-1300: #3a0052;
                --cpd-color-alpha-fuchsia-1200: #53026e;
                --cpd-color-alpha-fuchsia-1100: rgba(83, 2, 111, .95);
                --cpd-color-alpha-fuchsia-1000: rgba(94, 0, 122, .91);
                --cpd-color-alpha-fuchsia-900: rgba(106, 3, 135, .9);
                --cpd-color-alpha-fuchsia-800: rgba(164, 2, 182, .79);
                --cpd-color-alpha-fuchsia-700: rgba(171, 3, 186, .6);
                --cpd-color-alpha-fuchsia-600: rgba(170, 4, 185, .43);
                --cpd-color-alpha-fuchsia-500: rgba(178, 7, 187, .31);
                --cpd-color-alpha-fuchsia-400: rgba(177, 5, 189, .18);
                --cpd-color-alpha-fuchsia-300: rgba(189, 9, 195, .13);
                --cpd-color-alpha-fuchsia-200: rgba(182, 12, 198, .07);
                --cpd-color-alpha-fuchsia-100: rgba(181, 5, 204, .04);
                --cpd-color-alpha-purple-1400: #1f0061;
                --cpd-color-alpha-purple-1300: #240070;
                --cpd-color-alpha-purple-1200: #360094;
                --cpd-color-alpha-purple-1100: #4300a8;
                --cpd-color-alpha-purple-1000: rgba(70, 0, 184, .95);
                --cpd-color-alpha-purple-900: rgba(69, 3, 191, .9);
                --cpd-color-alpha-purple-800: rgba(76, 2, 247, .7);
                --cpd-color-alpha-purple-700: rgba(60, 0, 255, .53);
                --cpd-color-alpha-purple-600: rgba(51, 5, 255, .38);
                --cpd-color-alpha-purple-500: rgba(43, 5, 255, .27);
                --cpd-color-alpha-purple-400: rgba(43, 10, 255, .16);
                --cpd-color-alpha-purple-300: rgba(47, 15, 255, .12);
                --cpd-color-alpha-purple-200: rgba(56, 25, 255, .07);
                --cpd-color-alpha-purple-100: rgba(83, 56, 255, .04);
                --cpd-color-alpha-blue-1400: #000b61;
                --cpd-color-alpha-blue-1300: #00156b;
                --cpd-color-alpha-blue-1200: rgba(0, 37, 122, .99);
                --cpd-color-alpha-blue-1100: rgba(1, 46, 137, .99);
                --cpd-color-alpha-blue-1000: rgba(2, 57, 151, .99);
                --cpd-color-alpha-blue-900: rgba(2, 65, 167, .99);
                --cpd-color-alpha-blue-800: rgba(1, 110, 233, .99);
                --cpd-color-alpha-blue-700: rgba(0, 98, 235, .71);
                --cpd-color-alpha-blue-600: rgba(2, 100, 237, .51);
                --cpd-color-alpha-blue-500: rgba(6, 99, 239, .37);
                --cpd-color-alpha-blue-400: rgba(5, 101, 245, .22);
                --cpd-color-alpha-blue-300: rgba(11, 106, 249, .16);
                --cpd-color-alpha-blue-200: rgba(10, 112, 255, .09);
                --cpd-color-alpha-blue-100: rgba(36, 116, 255, .05);
                --cpd-color-alpha-cyan-1400: #00174d;
                --cpd-color-alpha-cyan-1300: #001e52;
                --cpd-color-alpha-cyan-1200: #003066;
                --cpd-color-alpha-cyan-1100: #003870;
                --cpd-color-alpha-cyan-1000: #00437a;
                --cpd-color-alpha-cyan-900: #004d85;
                --cpd-color-alpha-cyan-800: #007ab3;
                --cpd-color-alpha-cyan-700: #0098c2;
                --cpd-color-alpha-cyan-600: rgba(1, 183, 203, .92);
                --cpd-color-alpha-cyan-500: rgba(1, 170, 193, .54);
                --cpd-color-alpha-cyan-400: rgba(3, 169, 191, .31);
                --cpd-color-alpha-cyan-300: rgba(0, 170, 189, .22);
                --cpd-color-alpha-cyan-200: rgba(0, 168, 194, .11);
                --cpd-color-alpha-cyan-100: rgba(22, 171, 187, .06);
                --cpd-color-alpha-green-1400: #002410;
                --cpd-color-alpha-green-1300: #002916;
                --cpd-color-alpha-green-1200: #003824;
                --cpd-color-alpha-green-1100: #00422c;
                --cpd-color-alpha-green-1000: #004d36;
                --cpd-color-alpha-green-900: #00573e;
                --cpd-color-alpha-green-800: #00856a;
                --cpd-color-alpha-green-700: #00a37d;
                --cpd-color-alpha-green-600: rgba(1, 193, 138, .96);
                --cpd-color-alpha-green-500: rgba(1, 183, 110, .56);
                --cpd-color-alpha-green-400: rgba(5, 184, 103, .32);
                --cpd-color-alpha-green-300: rgba(7, 182, 97, .23);
                --cpd-color-alpha-green-200: rgba(0, 184, 92, .11);
                --cpd-color-alpha-green-100: rgba(22, 187, 105, .06);
                --cpd-color-alpha-lime-1400: #002400;
                --cpd-color-alpha-lime-1300: #002900;
                --cpd-color-alpha-lime-1200: #003800;
                --cpd-color-alpha-lime-1100: #004200;
                --cpd-color-alpha-lime-1000: #005200;
                --cpd-color-alpha-lime-900: #005700;
                --cpd-color-alpha-lime-800: rgba(18, 126, 2, .95);
                --cpd-color-alpha-lime-700: rgba(36, 152, 1, .9);
                --cpd-color-alpha-lime-600: rgba(57, 189, 0, .86);
                --cpd-color-alpha-lime-500: rgba(64, 206, 3, .71);
                --cpd-color-alpha-lime-400: rgba(55, 204, 5, .4);
                --cpd-color-alpha-lime-300: rgba(58, 206, 9, .28);
                --cpd-color-alpha-lime-200: rgba(46, 207, 2, .15);
                --cpd-color-alpha-lime-100: rgba(56, 212, 12, .07);
                --cpd-color-alpha-yellow-1400: #3d0500;
                --cpd-color-alpha-yellow-1300: #470c00;
                --cpd-color-alpha-yellow-1200: #571d00;
                --cpd-color-alpha-yellow-1100: #612700;
                --cpd-color-alpha-yellow-1000: #703200;
                --cpd-color-alpha-yellow-900: #753700;
                --cpd-color-alpha-yellow-800: #a86500;
                --cpd-color-alpha-yellow-700: #c28100;
                --cpd-color-alpha-yellow-600: #e0a500;
                --cpd-color-alpha-yellow-500: #f0bc00;
                --cpd-color-alpha-yellow-400: rgba(255, 204, 0, .72);
                --cpd-color-alpha-yellow-300: rgba(255, 201, 5, .49);
                --cpd-color-alpha-yellow-200: rgba(255, 201, 5, .25);
                --cpd-color-alpha-yellow-100: rgba(255, 199, 15, .13);
                --cpd-color-alpha-orange-1400: #420000;
                --cpd-color-alpha-orange-1300: #4d0000;
                --cpd-color-alpha-orange-1200: #600;
                --cpd-color-alpha-orange-1100: #750000;
                --cpd-color-alpha-orange-1000: #8a0900;
                --cpd-color-alpha-orange-900: #941600;
                --cpd-color-alpha-orange-800: #c24e00;
                --cpd-color-alpha-orange-700: #e06c00;
                --cpd-color-alpha-orange-600: rgba(245, 110, 0, .75);
                --cpd-color-alpha-orange-500: rgba(252, 111, 3, .52);
                --cpd-color-alpha-orange-400: rgba(255, 112, 10, .3);
                --cpd-color-alpha-orange-300: rgba(255, 109, 5, .22);
                --cpd-color-alpha-orange-200: rgba(255, 108, 10, .11);
                --cpd-color-alpha-orange-100: rgba(255, 125, 25, .07);
                --cpd-color-alpha-red-1400: #420000;
                --cpd-color-alpha-red-1300: #4d0000;
                --cpd-color-alpha-red-1200: #600;
                --cpd-color-alpha-red-1100: #750000;
                --cpd-color-alpha-red-1000: #8a000b;
                --cpd-color-alpha-red-900: #99001a;
                --cpd-color-alpha-red-800: rgba(222, 2, 17, .89);
                --cpd-color-alpha-red-700: rgba(255, 8, 0, .72);
                --cpd-color-alpha-red-600: rgba(255, 26, 5, .5);
                --cpd-color-alpha-red-500: rgba(255, 34, 5, .36);
                --cpd-color-alpha-red-400: rgba(255, 38, 5, .21);
                --cpd-color-alpha-red-300: rgba(255, 43, 10, .15);
                --cpd-color-alpha-red-200: rgba(255, 56, 20, .08);
                --cpd-color-alpha-red-100: rgba(255, 57, 31, .04);
                --cpd-color-alpha-gray-1400: rgba(1, 3, 9, .9);
                --cpd-color-alpha-gray-1300: rgba(0, 4, 10, .88);
                --cpd-color-alpha-gray-1200: rgba(2, 5, 9, .83);
                --cpd-color-alpha-gray-1100: rgba(3, 6, 12, .8);
                --cpd-color-alpha-gray-1000: rgba(2, 6, 13, .76);
                --cpd-color-alpha-gray-900: rgba(3, 7, 17, .73);
                --cpd-color-alpha-gray-800: rgba(2, 14, 34, .58);
                --cpd-color-alpha-gray-700: rgba(5, 21, 46, .48);
                --cpd-color-alpha-gray-600: rgba(1, 21, 50, .35);
                --cpd-color-alpha-gray-500: rgba(1, 29, 60, .26);
                --cpd-color-alpha-gray-400: rgba(5, 37, 81, .16);
                --cpd-color-alpha-gray-300: rgba(5, 46, 97, .12);
                --cpd-color-alpha-gray-200: rgba(5, 38, 87, .06);
                --cpd-color-alpha-gray-100: rgba(54, 104, 129, .04);
                --cpd-color-pink-1400: #410015;
                --cpd-color-pink-1300: #4a001c;
                --cpd-color-pink-1200: #64002f;
                --cpd-color-pink-1100: #72003a;
                --cpd-color-pink-1000: #840745;
                --cpd-color-pink-900: #92084b;
                --cpd-color-pink-800: #e00c6a;
                --cpd-color-pink-700: #f94e84;
                --cpd-color-pink-600: #ff88a6;
                --cpd-color-pink-500: #ffadc0;
                --cpd-color-pink-400: #ffd0da;
                --cpd-color-pink-300: #ffdee5;
                --cpd-color-pink-200: #ffecf0;
                --cpd-color-pink-100: #fff5f7;
                --cpd-color-fuchsia-1400: #32004a;
                --cpd-color-fuchsia-1300: #3b0053;
                --cpd-color-fuchsia-1200: #52026c;
                --cpd-color-fuchsia-1100: #5c0f76;
                --cpd-color-fuchsia-1000: #6c1785;
                --cpd-color-fuchsia-900: #781c90;
                --cpd-color-fuchsia-800: #b937c6;
                --cpd-color-fuchsia-700: #cb68d4;
                --cpd-color-fuchsia-600: #db93e1;
                --cpd-color-fuchsia-500: #e7b2ea;
                --cpd-color-fuchsia-400: #f1d2f3;
                --cpd-color-fuchsia-300: #f6dff7;
                --cpd-color-fuchsia-200: #faeefb;
                --cpd-color-fuchsia-100: #fcf5fd;
                --cpd-color-purple-1400: #1f0062;
                --cpd-color-purple-1300: #240070;
                --cpd-color-purple-1200: #360094;
                --cpd-color-purple-1100: #4200a6;
                --cpd-color-purple-1000: #4f0dba;
                --cpd-color-purple-900: #571cc4;
                --cpd-color-purple-800: #824ef9;
                --cpd-color-purple-700: #9778fe;
                --cpd-color-purple-600: #b1a0ff;
                --cpd-color-purple-500: #c5bbff;
                --cpd-color-purple-400: #ddd8ff;
                --cpd-color-purple-300: #e6e2ff;
                --cpd-color-purple-200: #f1efff;
                --cpd-color-purple-100: #f8f7ff;
                --cpd-color-blue-1400: #000c63;
                --cpd-color-blue-1300: #001569;
                --cpd-color-blue-1200: #03277b;
                --cpd-color-blue-1100: #043088;
                --cpd-color-blue-1000: #053b9a;
                --cpd-color-blue-900: #0543a7;
                --cpd-color-blue-800: #046ee8;
                --cpd-color-blue-700: #4a8ef0;
                --cpd-color-blue-600: #7eaff6;
                --cpd-color-blue-500: #a3c6fa;
                --cpd-color-blue-400: #c8ddfd;
                --cpd-color-blue-300: #d8e7fe;
                --cpd-color-blue-200: #e9f2ff;
                --cpd-color-blue-100: #f4f8ff;
                --cpd-color-cyan-1400: #00174d;
                --cpd-color-cyan-1300: #001e53;
                --cpd-color-cyan-1200: #002e64;
                --cpd-color-cyan-1100: #00376e;
                --cpd-color-cyan-1000: #00447b;
                --cpd-color-cyan-900: #004c84;
                --cpd-color-cyan-800: #007ab3;
                --cpd-color-cyan-700: #009ac3;
                --cpd-color-cyan-600: #15becf;
                --cpd-color-cyan-500: #76d1dd;
                --cpd-color-cyan-400: #b1e4eb;
                --cpd-color-cyan-300: #c7ecf0;
                --cpd-color-cyan-200: #e3f5f8;
                --cpd-color-cyan-100: #f1fafb;
                --cpd-color-green-1400: #00210f;
                --cpd-color-green-1300: #002715;
                --cpd-color-green-1200: #003723;
                --cpd-color-green-1100: #00402b;
                --cpd-color-green-1000: #004d36;
                --cpd-color-green-900: #00553d;
                --cpd-color-green-800: #008268;
                --cpd-color-green-700: #00a27c;
                --cpd-color-green-600: #0bc491;
                --cpd-color-green-500: #71d7ae;
                --cpd-color-green-400: #afe8ce;
                --cpd-color-green-300: #c6eedb;
                --cpd-color-green-200: #e3f7ed;
                --cpd-color-green-100: #f1fbf6;
                --cpd-color-lime-1400: #020;
                --cpd-color-lime-1300: #002900;
                --cpd-color-lime-1200: #003900;
                --cpd-color-lime-1100: #004200;
                --cpd-color-lime-1000: #004f00;
                --cpd-color-lime-900: #005700;
                --cpd-color-lime-800: #1f850f;
                --cpd-color-lime-700: #3aa31a;
                --cpd-color-lime-600: #54c424;
                --cpd-color-lime-500: #76db4c;
                --cpd-color-lime-400: #afeb9b;
                --cpd-color-lime-300: #c8f1ba;
                --cpd-color-lime-200: #e0f8d9;
                --cpd-color-lime-100: #f1fcee;
                --cpd-color-yellow-1400: #3f0500;
                --cpd-color-yellow-1300: #450c00;
                --cpd-color-yellow-1200: #571d00;
                --cpd-color-yellow-1100: #612600;
                --cpd-color-yellow-1000: #6e3100;
                --cpd-color-yellow-900: #773800;
                --cpd-color-yellow-800: #a76300;
                --cpd-color-yellow-700: #c38100;
                --cpd-color-yellow-600: #dea200;
                --cpd-color-yellow-500: #f1bd00;
                --cpd-color-yellow-400: #ffda49;
                --cpd-color-yellow-300: #ffe484;
                --cpd-color-yellow-200: #fff2c1;
                --cpd-color-yellow-100: #fff8e0;
                --cpd-color-orange-1400: #420000;
                --cpd-color-orange-1300: #4c0000;
                --cpd-color-orange-1200: #670000;
                --cpd-color-orange-1100: #700;
                --cpd-color-orange-1000: #890800;
                --cpd-color-orange-900: #931700;
                --cpd-color-orange-800: #c44d00;
                --cpd-color-orange-700: #e26e00;
                --cpd-color-orange-600: #f89440;
                --cpd-color-orange-500: #fdb37c;
                --cpd-color-orange-400: #ffd4b5;
                --cpd-color-orange-300: #ffdfc8;
                --cpd-color-orange-200: #ffefe4;
                --cpd-color-orange-100: #fff6ef;
                --cpd-color-red-1400: #420000;
                --cpd-color-red-1300: #4c0000;
                --cpd-color-red-1200: #670000;
                --cpd-color-red-1100: #700;
                --cpd-color-red-1000: #8b000c;
                --cpd-color-red-900: #99001a;
                --cpd-color-red-800: #e11e2a;
                --cpd-color-red-700: #ff4e49;
                --cpd-color-red-600: #ff8c81;
                --cpd-color-red-500: #ffafa5;
                --cpd-color-red-400: #ffd1ca;
                --cpd-color-red-300: #ffdfda;
                --cpd-color-red-200: #ffefec;
                --cpd-color-red-100: #fff7f6;
                --cpd-color-gray-1400: #1a1c21;
                --cpd-color-gray-1300: #1f2126;
                --cpd-color-gray-1200: #2d3034;
                --cpd-color-gray-1100: #35383d;
                --cpd-color-gray-1000: #3f4248;
                --cpd-color-gray-900: #474a51;
                --cpd-color-gray-800: #6c737e;
                --cpd-color-gray-700: #878f9b;
                --cpd-color-gray-600: #a6adb7;
                --cpd-color-gray-500: #bdc4cc;
                --cpd-color-gray-400: #d7dce3;
                --cpd-color-gray-300: #e1e6ec;
                --cpd-color-gray-200: #f0f2f5;
                --cpd-color-gray-100: #f7f9fa;
                --cpd-color-theme-bg: #fff
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-semantic {
            .cpd-theme-light-hc.cpd-theme-light-hc {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg)
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: light) and (prefers-contrast: more) {
        @layer cpd-semantic {
            :root {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg)
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-base {
            .cpd-theme-dark.cpd-theme-dark {
                --cpd-color-alpha-pink-1400: #ffebef;
                --cpd-color-alpha-pink-1300: #ffd1db;
                --cpd-color-alpha-pink-1200: #ffadc0;
                --cpd-color-alpha-pink-1100: #fe86a4;
                --cpd-color-alpha-pink-1000: rgba(255, 102, 145, .98);
                --cpd-color-alpha-pink-900: rgba(254, 67, 130, .96);
                --cpd-color-alpha-pink-800: rgba(254, 27, 121, .8);
                --cpd-color-alpha-pink-700: rgba(253, 18, 119, .58);
                --cpd-color-alpha-pink-600: rgba(251, 4, 115, .46);
                --cpd-color-alpha-pink-500: #6b0036;
                --cpd-color-alpha-pink-400: #570024;
                --cpd-color-alpha-pink-300: #470019;
                --cpd-color-alpha-pink-200: #3d0012;
                --cpd-color-alpha-pink-100: #38000f;
                --cpd-color-alpha-fuchsia-1400: rgba(253, 236, 254, .98);
                --cpd-color-alpha-fuchsia-1300: rgba(253, 224, 255, .95);
                --cpd-color-alpha-fuchsia-1200: rgba(250, 195, 254, .91);
                --cpd-color-alpha-fuchsia-1100: rgba(250, 164, 254, .86);
                --cpd-color-alpha-fuchsia-1000: rgba(247, 144, 254, .83);
                --cpd-color-alpha-fuchsia-900: rgba(241, 114, 253, .8);
                --cpd-color-alpha-fuchsia-800: rgba(235, 68, 253, .71);
                --cpd-color-alpha-fuchsia-700: rgba(216, 47, 254, .54);
                --cpd-color-alpha-fuchsia-600: rgba(210, 31, 255, .44);
                --cpd-color-alpha-fuchsia-500: rgba(202, 10, 255, .38);
                --cpd-color-alpha-fuchsia-400: #45005c;
                --cpd-color-alpha-fuchsia-300: #36004d;
                --cpd-color-alpha-fuchsia-200: #2d0042;
                --cpd-color-alpha-fuchsia-100: #28003d;
                --cpd-color-alpha-purple-1400: #eeebff;
                --cpd-color-alpha-purple-1300: #dfdbff;
                --cpd-color-alpha-purple-1200: #c7bdff;
                --cpd-color-alpha-purple-1100: #ab9afe;
                --cpd-color-alpha-purple-1000: rgba(162, 139, 254, .99);
                --cpd-color-alpha-purple-900: rgba(146, 113, 254, .98);
                --cpd-color-alpha-purple-800: rgba(127, 77, 255, .92);
                --cpd-color-alpha-purple-700: rgba(113, 43, 253, .76);
                --cpd-color-alpha-purple-600: rgba(105, 13, 253, .67);
                --cpd-color-alpha-purple-500: #3d009e;
                --cpd-color-alpha-purple-400: #2d0080;
                --cpd-color-alpha-purple-300: #22006b;
                --cpd-color-alpha-purple-200: #1d005c;
                --cpd-color-alpha-purple-100: #1a0057;
                --cpd-color-alpha-blue-1400: #e6effe;
                --cpd-color-alpha-blue-1300: rgba(205, 225, 254, .99);
                --cpd-color-alpha-blue-1200: rgba(163, 200, 255, .97);
                --cpd-color-alpha-blue-1100: rgba(124, 178, 253, .96);
                --cpd-color-alpha-blue-1000: rgba(98, 160, 254, .94);
                --cpd-color-alpha-blue-900: rgba(68, 145, 253, .92);
                --cpd-color-alpha-blue-800: rgba(16, 119, 254, .84);
                --cpd-color-alpha-blue-700: rgba(6, 101, 254, .64);
                --cpd-color-alpha-blue-600: rgba(1, 90, 254, .53);
                --cpd-color-alpha-blue-500: rgba(0, 60, 189, .63);
                --cpd-color-alpha-blue-400: #001e70;
                --cpd-color-alpha-blue-300: #001366;
                --cpd-color-alpha-blue-200: #00095c;
                --cpd-color-alpha-blue-100: #00055c;
                --cpd-color-alpha-cyan-1400: rgba(225, 251, 254, .96);
                --cpd-color-alpha-cyan-1300: rgba(201, 247, 253, .92);
                --cpd-color-alpha-cyan-1200: rgba(138, 241, 255, .85);
                --cpd-color-alpha-cyan-1100: rgba(38, 231, 253, .79);
                --cpd-color-alpha-cyan-1000: rgba(0, 191, 224, .88);
                --cpd-color-alpha-cyan-900: #0091bd;
                --cpd-color-alpha-cyan-800: rgba(0, 126, 189, .88);
                --cpd-color-alpha-cyan-700: #00538a;
                --cpd-color-alpha-cyan-600: #003f75;
                --cpd-color-alpha-cyan-500: #036;
                --cpd-color-alpha-cyan-400: #00265c;
                --cpd-color-alpha-cyan-300: #001b4d;
                --cpd-color-alpha-cyan-200: #001447;
                --cpd-color-alpha-cyan-100: #001142;
                --cpd-color-alpha-green-1400: rgba(226, 253, 241, .96);
                --cpd-color-alpha-green-1300: rgba(196, 253, 226, .91);
                --cpd-color-alpha-green-1200: rgba(134, 253, 206, .83);
                --cpd-color-alpha-green-1100: rgba(38, 253, 188, .74);
                --cpd-color-alpha-green-1000: rgba(27, 254, 189, .65);
                --cpd-color-alpha-green-900: rgba(18, 253, 190, .58);
                --cpd-color-alpha-green-800: #007a62;
                --cpd-color-alpha-green-700: #005c45;
                --cpd-color-alpha-green-600: #004732;
                --cpd-color-alpha-green-500: #003d29;
                --cpd-color-alpha-green-400: #002e1b;
                --cpd-color-alpha-green-300: #002412;
                --cpd-color-alpha-green-200: #001f0e;
                --cpd-color-alpha-green-100: #001f0c;
                --cpd-color-alpha-lime-1400: rgba(225, 253, 216, .97);
                --cpd-color-alpha-lime-1300: rgba(195, 255, 173, .92);
                --cpd-color-alpha-lime-1200: rgba(141, 255, 92, .84);
                --cpd-color-alpha-lime-1100: rgba(113, 253, 53, .74);
                --cpd-color-alpha-lime-1000: rgba(96, 252, 44, .66);
                --cpd-color-alpha-lime-900: rgba(84, 253, 38, .58);
                --cpd-color-alpha-lime-800: rgba(45, 253, 13, .45);
                --cpd-color-alpha-lime-700: #005c00;
                --cpd-color-alpha-lime-600: #004d00;
                --cpd-color-alpha-lime-500: #003d00;
                --cpd-color-alpha-lime-400: #002e00;
                --cpd-color-alpha-lime-300: #002900;
                --cpd-color-alpha-lime-200: #001f00;
                --cpd-color-alpha-lime-100: #001a00;
                --cpd-color-alpha-yellow-1400: #ffedb3;
                --cpd-color-alpha-yellow-1300: #feda58;
                --cpd-color-alpha-yellow-1200: rgba(253, 197, 13, .94);
                --cpd-color-alpha-yellow-1100: #dba100;
                --cpd-color-alpha-yellow-1000: #cc8b00;
                --cpd-color-alpha-yellow-900: #bd7b00;
                --cpd-color-alpha-yellow-800: #9e5c00;
                --cpd-color-alpha-yellow-700: rgba(133, 66, 0, .92);
                --cpd-color-alpha-yellow-600: rgba(117, 51, 0, .87);
                --cpd-color-alpha-yellow-500: #5c2300;
                --cpd-color-alpha-yellow-400: #4d1400;
                --cpd-color-alpha-yellow-300: #420900;
                --cpd-color-alpha-yellow-200: #380300;
                --cpd-color-alpha-yellow-100: #380000;
                --cpd-color-alpha-orange-1400: #ffeadb;
                --cpd-color-alpha-orange-1300: #ffd4b8;
                --cpd-color-alpha-orange-1200: hsla(26, 97%, 75%, .99);
                --cpd-color-alpha-orange-1100: rgba(253, 149, 63, .97);
                --cpd-color-alpha-orange-1000: rgba(254, 131, 16, .92);
                --cpd-color-alpha-orange-900: rgba(254, 116, 11, .85);
                --cpd-color-alpha-orange-800: rgba(255, 89, 0, .71);
                --cpd-color-alpha-orange-700: rgba(199, 40, 0, .74);
                --cpd-color-alpha-orange-600: #850400;
                --cpd-color-alpha-orange-500: #700000;
                --cpd-color-alpha-orange-400: #570000;
                --cpd-color-alpha-orange-300: #470000;
                --cpd-color-alpha-orange-200: #3d0000;
                --cpd-color-alpha-orange-100: #380000;
                --cpd-color-alpha-red-1400: #ffe8e6;
                --cpd-color-alpha-red-1300: #ffd3cc;
                --cpd-color-alpha-red-1200: #ffaea3;
                --cpd-color-alpha-red-1100: #ff857a;
                --cpd-color-alpha-red-1000: #ff645c;
                --cpd-color-alpha-red-900: #fd3d3a;
                --cpd-color-alpha-red-800: rgba(254, 37, 48, .81);
                --cpd-color-alpha-red-700: rgba(254, 11, 36, .6);
                --cpd-color-alpha-red-600: #850009;
                --cpd-color-alpha-red-500: #700000;
                --cpd-color-alpha-red-400: #5c0000;
                --cpd-color-alpha-red-300: #470000;
                --cpd-color-alpha-red-200: #3d0000;
                --cpd-color-alpha-red-100: #380000;
                --cpd-color-alpha-gray-1400: rgba(246, 249, 254, .95);
                --cpd-color-alpha-gray-1300: rgba(242, 247, 253, .89);
                --cpd-color-alpha-gray-1200: rgba(237, 244, 252, .79);
                --cpd-color-alpha-gray-1100: rgba(231, 240, 254, .68);
                --cpd-color-alpha-gray-1000: rgba(225, 238, 254, .61);
                --cpd-color-alpha-gray-900: rgba(225, 239, 254, .54);
                --cpd-color-alpha-gray-800: rgba(224, 237, 255, .41);
                --cpd-color-alpha-gray-700: rgba(231, 241, 253, .27);
                --cpd-color-alpha-gray-600: rgba(236, 239, 248, .2);
                --cpd-color-alpha-gray-500: rgba(244, 247, 250, .15);
                --cpd-color-alpha-gray-400: rgba(237, 231, 244, .1);
                --cpd-color-alpha-gray-300: rgba(233, 219, 240, .06);
                --cpd-color-alpha-gray-200: rgba(217, 195, 223, .04);
                --cpd-color-alpha-gray-100: rgba(216, 219, 223, .02);
                --cpd-color-pink-1400: #ffe8ed;
                --cpd-color-pink-1300: #ffd2dc;
                --cpd-color-pink-1200: #ffabbe;
                --cpd-color-pink-1100: #fe84a2;
                --cpd-color-pink-1000: #fa658f;
                --cpd-color-pink-900: #f4427d;
                --cpd-color-pink-800: #ce1865;
                --cpd-color-pink-700: #99114f;
                --cpd-color-pink-600: #7c0c41;
                --cpd-color-pink-500: #6d0036;
                --cpd-color-pink-400: #550024;
                --cpd-color-pink-300: #450018;
                --cpd-color-pink-200: #3c0012;
                --cpd-color-pink-100: #37000f;
                --cpd-color-fuchsia-1400: #f8e9f9;
                --cpd-color-fuchsia-1300: #f1d4f3;
                --cpd-color-fuchsia-1200: #e5b1e9;
                --cpd-color-fuchsia-1100: #d991de;
                --cpd-color-fuchsia-1000: #cf78d7;
                --cpd-color-fuchsia-900: #c560cf;
                --cpd-color-fuchsia-800: #aa36ba;
                --cpd-color-fuchsia-700: #7d2394;
                --cpd-color-fuchsia-600: #65177d;
                --cpd-color-fuchsia-500: #560f6f;
                --cpd-color-fuchsia-400: #46005e;
                --cpd-color-fuchsia-300: #37004e;
                --cpd-color-fuchsia-200: #2e0044;
                --cpd-color-fuchsia-100: #28003d;
                --cpd-color-purple-1400: #eeebff;
                --cpd-color-purple-1300: #dedaff;
                --cpd-color-purple-1200: #c4baff;
                --cpd-color-purple-1100: #ad9cfe;
                --cpd-color-purple-1000: #9e87fc;
                --cpd-color-purple-900: #9171f9;
                --cpd-color-purple-800: #7849ec;
                --cpd-color-purple-700: #5a27c6;
                --cpd-color-purple-600: #4a0db1;
                --cpd-color-purple-500: #3d009e;
                --cpd-color-purple-400: #2c0080;
                --cpd-color-purple-300: #22006a;
                --cpd-color-purple-200: #1c005a;
                --cpd-color-purple-100: #1a0055;
                --cpd-color-blue-1400: #e4eefe;
                --cpd-color-blue-1300: #cbdffc;
                --cpd-color-blue-1200: #a1c4f8;
                --cpd-color-blue-1100: #7aacf4;
                --cpd-color-blue-1000: #5e99f0;
                --cpd-color-blue-900: #4187eb;
                --cpd-color-blue-800: #0e67d9;
                --cpd-color-blue-700: #0b49ab;
                --cpd-color-blue-600: #083891;
                --cpd-color-blue-500: #062d80;
                --cpd-color-blue-400: #001e6f;
                --cpd-color-blue-300: #001264;
                --cpd-color-blue-200: #00095d;
                --cpd-color-blue-100: #00055a;
                --cpd-color-cyan-1400: #dbf2f5;
                --cpd-color-cyan-1300: #b8e5eb;
                --cpd-color-cyan-1200: #78d0dc;
                --cpd-color-cyan-1100: #21bacd;
                --cpd-color-cyan-1000: #02a7c6;
                --cpd-color-cyan-900: #0093be;
                --cpd-color-cyan-800: #0271aa;
                --cpd-color-cyan-700: #005188;
                --cpd-color-cyan-600: #003f75;
                --cpd-color-cyan-500: #003468;
                --cpd-color-cyan-400: #002559;
                --cpd-color-cyan-300: #001b4e;
                --cpd-color-cyan-200: #001448;
                --cpd-color-cyan-100: #014;
                --cpd-color-green-1400: #d9f4e7;
                --cpd-color-green-1300: #b5e8d1;
                --cpd-color-green-1200: #72d5ae;
                --cpd-color-green-1100: #1fc090;
                --cpd-color-green-1000: #17ac84;
                --cpd-color-green-900: #129a78;
                --cpd-color-green-800: #007a62;
                --cpd-color-green-700: #005a43;
                --cpd-color-green-600: #004832;
                --cpd-color-green-500: #003d29;
                --cpd-color-green-400: #002e1b;
                --cpd-color-green-300: #002513;
                --cpd-color-green-200: #001f0e;
                --cpd-color-green-100: #001c0b;
                --cpd-color-lime-1400: #daf6d0;
                --cpd-color-lime-1300: #b6eca3;
                --cpd-color-lime-1200: #77d94f;
                --cpd-color-lime-1100: #56c02c;
                --cpd-color-lime-1000: #47ad26;
                --cpd-color-lime-900: #389b20;
                --cpd-color-lime-800: #1d7c13;
                --cpd-color-lime-700: #005c00;
                --cpd-color-lime-600: #004a00;
                --cpd-color-lime-500: #003e00;
                --cpd-color-lime-400: #003000;
                --cpd-color-lime-300: #002600;
                --cpd-color-lime-200: #002000;
                --cpd-color-lime-100: #001b00;
                --cpd-color-yellow-1400: #ffedb1;
                --cpd-color-yellow-1300: #fedb58;
                --cpd-color-yellow-1200: #efbb0b;
                --cpd-color-yellow-1100: #db9f00;
                --cpd-color-yellow-1000: #cc8c00;
                --cpd-color-yellow-900: #bc7a00;
                --cpd-color-yellow-800: #9d5b00;
                --cpd-color-yellow-700: #7c3e02;
                --cpd-color-yellow-600: #682e03;
                --cpd-color-yellow-500: #5c2400;
                --cpd-color-yellow-400: #4c1400;
                --cpd-color-yellow-300: #410900;
                --cpd-color-yellow-200: #3a0300;
                --cpd-color-yellow-100: #360000;
                --cpd-color-orange-1400: #ffeadb;
                --cpd-color-orange-1300: #ffd5b9;
                --cpd-color-orange-1200: #fbb37e;
                --cpd-color-orange-1100: #f6913d;
                --cpd-color-orange-1000: #eb7a12;
                --cpd-color-orange-900: #da670d;
                --cpd-color-orange-800: #b94607;
                --cpd-color-orange-700: #972206;
                --cpd-color-orange-600: #830500;
                --cpd-color-orange-500: #710000;
                --cpd-color-orange-400: #580000;
                --cpd-color-orange-300: #470000;
                --cpd-color-orange-200: #3c0000;
                --cpd-color-orange-100: #380000;
                --cpd-color-red-1400: #ffe9e6;
                --cpd-color-red-1300: #ffd4cd;
                --cpd-color-red-1200: #ffaea4;
                --cpd-color-red-1100: #ff877c;
                --cpd-color-red-1000: #ff665d;
                --cpd-color-red-900: #fd3e3c;
                --cpd-color-red-800: #d1212a;
                --cpd-color-red-700: #9f0d1e;
                --cpd-color-red-600: #830009;
                --cpd-color-red-500: #710000;
                --cpd-color-red-400: #590000;
                --cpd-color-red-300: #470000;
                --cpd-color-red-200: #3e0000;
                --cpd-color-red-100: #370000;
                --cpd-color-gray-1400: #ebeef2;
                --cpd-color-gray-1300: #d9dee4;
                --cpd-color-gray-1200: #bdc3cc;
                --cpd-color-gray-1100: #a3aab4;
                --cpd-color-gray-1000: #9199a4;
                --cpd-color-gray-900: #808994;
                --cpd-color-gray-800: #656c76;
                --cpd-color-gray-700: #4a4f55;
                --cpd-color-gray-600: #3c3f44;
                --cpd-color-gray-500: #323539;
                --cpd-color-gray-400: #26282d;
                --cpd-color-gray-300: #1d1f24;
                --cpd-color-gray-200: #181a1f;
                --cpd-color-gray-100: #14171b;
                --cpd-color-theme-bg: #101317
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: dark) {
        @layer cpd-base {
            :root {
                --cpd-color-alpha-pink-1400: #ffebef;
                --cpd-color-alpha-pink-1300: #ffd1db;
                --cpd-color-alpha-pink-1200: #ffadc0;
                --cpd-color-alpha-pink-1100: #fe86a4;
                --cpd-color-alpha-pink-1000: rgba(255, 102, 145, .98);
                --cpd-color-alpha-pink-900: rgba(254, 67, 130, .96);
                --cpd-color-alpha-pink-800: rgba(254, 27, 121, .8);
                --cpd-color-alpha-pink-700: rgba(253, 18, 119, .58);
                --cpd-color-alpha-pink-600: rgba(251, 4, 115, .46);
                --cpd-color-alpha-pink-500: #6b0036;
                --cpd-color-alpha-pink-400: #570024;
                --cpd-color-alpha-pink-300: #470019;
                --cpd-color-alpha-pink-200: #3d0012;
                --cpd-color-alpha-pink-100: #38000f;
                --cpd-color-alpha-fuchsia-1400: rgba(253, 236, 254, .98);
                --cpd-color-alpha-fuchsia-1300: rgba(253, 224, 255, .95);
                --cpd-color-alpha-fuchsia-1200: rgba(250, 195, 254, .91);
                --cpd-color-alpha-fuchsia-1100: rgba(250, 164, 254, .86);
                --cpd-color-alpha-fuchsia-1000: rgba(247, 144, 254, .83);
                --cpd-color-alpha-fuchsia-900: rgba(241, 114, 253, .8);
                --cpd-color-alpha-fuchsia-800: rgba(235, 68, 253, .71);
                --cpd-color-alpha-fuchsia-700: rgba(216, 47, 254, .54);
                --cpd-color-alpha-fuchsia-600: rgba(210, 31, 255, .44);
                --cpd-color-alpha-fuchsia-500: rgba(202, 10, 255, .38);
                --cpd-color-alpha-fuchsia-400: #45005c;
                --cpd-color-alpha-fuchsia-300: #36004d;
                --cpd-color-alpha-fuchsia-200: #2d0042;
                --cpd-color-alpha-fuchsia-100: #28003d;
                --cpd-color-alpha-purple-1400: #eeebff;
                --cpd-color-alpha-purple-1300: #dfdbff;
                --cpd-color-alpha-purple-1200: #c7bdff;
                --cpd-color-alpha-purple-1100: #ab9afe;
                --cpd-color-alpha-purple-1000: rgba(162, 139, 254, .99);
                --cpd-color-alpha-purple-900: rgba(146, 113, 254, .98);
                --cpd-color-alpha-purple-800: rgba(127, 77, 255, .92);
                --cpd-color-alpha-purple-700: rgba(113, 43, 253, .76);
                --cpd-color-alpha-purple-600: rgba(105, 13, 253, .67);
                --cpd-color-alpha-purple-500: #3d009e;
                --cpd-color-alpha-purple-400: #2d0080;
                --cpd-color-alpha-purple-300: #22006b;
                --cpd-color-alpha-purple-200: #1d005c;
                --cpd-color-alpha-purple-100: #1a0057;
                --cpd-color-alpha-blue-1400: #e6effe;
                --cpd-color-alpha-blue-1300: rgba(205, 225, 254, .99);
                --cpd-color-alpha-blue-1200: rgba(163, 200, 255, .97);
                --cpd-color-alpha-blue-1100: rgba(124, 178, 253, .96);
                --cpd-color-alpha-blue-1000: rgba(98, 160, 254, .94);
                --cpd-color-alpha-blue-900: rgba(68, 145, 253, .92);
                --cpd-color-alpha-blue-800: rgba(16, 119, 254, .84);
                --cpd-color-alpha-blue-700: rgba(6, 101, 254, .64);
                --cpd-color-alpha-blue-600: rgba(1, 90, 254, .53);
                --cpd-color-alpha-blue-500: rgba(0, 60, 189, .63);
                --cpd-color-alpha-blue-400: #001e70;
                --cpd-color-alpha-blue-300: #001366;
                --cpd-color-alpha-blue-200: #00095c;
                --cpd-color-alpha-blue-100: #00055c;
                --cpd-color-alpha-cyan-1400: rgba(225, 251, 254, .96);
                --cpd-color-alpha-cyan-1300: rgba(201, 247, 253, .92);
                --cpd-color-alpha-cyan-1200: rgba(138, 241, 255, .85);
                --cpd-color-alpha-cyan-1100: rgba(38, 231, 253, .79);
                --cpd-color-alpha-cyan-1000: rgba(0, 191, 224, .88);
                --cpd-color-alpha-cyan-900: #0091bd;
                --cpd-color-alpha-cyan-800: rgba(0, 126, 189, .88);
                --cpd-color-alpha-cyan-700: #00538a;
                --cpd-color-alpha-cyan-600: #003f75;
                --cpd-color-alpha-cyan-500: #036;
                --cpd-color-alpha-cyan-400: #00265c;
                --cpd-color-alpha-cyan-300: #001b4d;
                --cpd-color-alpha-cyan-200: #001447;
                --cpd-color-alpha-cyan-100: #001142;
                --cpd-color-alpha-green-1400: rgba(226, 253, 241, .96);
                --cpd-color-alpha-green-1300: rgba(196, 253, 226, .91);
                --cpd-color-alpha-green-1200: rgba(134, 253, 206, .83);
                --cpd-color-alpha-green-1100: rgba(38, 253, 188, .74);
                --cpd-color-alpha-green-1000: rgba(27, 254, 189, .65);
                --cpd-color-alpha-green-900: rgba(18, 253, 190, .58);
                --cpd-color-alpha-green-800: #007a62;
                --cpd-color-alpha-green-700: #005c45;
                --cpd-color-alpha-green-600: #004732;
                --cpd-color-alpha-green-500: #003d29;
                --cpd-color-alpha-green-400: #002e1b;
                --cpd-color-alpha-green-300: #002412;
                --cpd-color-alpha-green-200: #001f0e;
                --cpd-color-alpha-green-100: #001f0c;
                --cpd-color-alpha-lime-1400: rgba(225, 253, 216, .97);
                --cpd-color-alpha-lime-1300: rgba(195, 255, 173, .92);
                --cpd-color-alpha-lime-1200: rgba(141, 255, 92, .84);
                --cpd-color-alpha-lime-1100: rgba(113, 253, 53, .74);
                --cpd-color-alpha-lime-1000: rgba(96, 252, 44, .66);
                --cpd-color-alpha-lime-900: rgba(84, 253, 38, .58);
                --cpd-color-alpha-lime-800: rgba(45, 253, 13, .45);
                --cpd-color-alpha-lime-700: #005c00;
                --cpd-color-alpha-lime-600: #004d00;
                --cpd-color-alpha-lime-500: #003d00;
                --cpd-color-alpha-lime-400: #002e00;
                --cpd-color-alpha-lime-300: #002900;
                --cpd-color-alpha-lime-200: #001f00;
                --cpd-color-alpha-lime-100: #001a00;
                --cpd-color-alpha-yellow-1400: #ffedb3;
                --cpd-color-alpha-yellow-1300: #feda58;
                --cpd-color-alpha-yellow-1200: rgba(253, 197, 13, .94);
                --cpd-color-alpha-yellow-1100: #dba100;
                --cpd-color-alpha-yellow-1000: #cc8b00;
                --cpd-color-alpha-yellow-900: #bd7b00;
                --cpd-color-alpha-yellow-800: #9e5c00;
                --cpd-color-alpha-yellow-700: rgba(133, 66, 0, .92);
                --cpd-color-alpha-yellow-600: rgba(117, 51, 0, .87);
                --cpd-color-alpha-yellow-500: #5c2300;
                --cpd-color-alpha-yellow-400: #4d1400;
                --cpd-color-alpha-yellow-300: #420900;
                --cpd-color-alpha-yellow-200: #380300;
                --cpd-color-alpha-yellow-100: #380000;
                --cpd-color-alpha-orange-1400: #ffeadb;
                --cpd-color-alpha-orange-1300: #ffd4b8;
                --cpd-color-alpha-orange-1200: hsla(26, 97%, 75%, .99);
                --cpd-color-alpha-orange-1100: rgba(253, 149, 63, .97);
                --cpd-color-alpha-orange-1000: rgba(254, 131, 16, .92);
                --cpd-color-alpha-orange-900: rgba(254, 116, 11, .85);
                --cpd-color-alpha-orange-800: rgba(255, 89, 0, .71);
                --cpd-color-alpha-orange-700: rgba(199, 40, 0, .74);
                --cpd-color-alpha-orange-600: #850400;
                --cpd-color-alpha-orange-500: #700000;
                --cpd-color-alpha-orange-400: #570000;
                --cpd-color-alpha-orange-300: #470000;
                --cpd-color-alpha-orange-200: #3d0000;
                --cpd-color-alpha-orange-100: #380000;
                --cpd-color-alpha-red-1400: #ffe8e6;
                --cpd-color-alpha-red-1300: #ffd3cc;
                --cpd-color-alpha-red-1200: #ffaea3;
                --cpd-color-alpha-red-1100: #ff857a;
                --cpd-color-alpha-red-1000: #ff645c;
                --cpd-color-alpha-red-900: #fd3d3a;
                --cpd-color-alpha-red-800: rgba(254, 37, 48, .81);
                --cpd-color-alpha-red-700: rgba(254, 11, 36, .6);
                --cpd-color-alpha-red-600: #850009;
                --cpd-color-alpha-red-500: #700000;
                --cpd-color-alpha-red-400: #5c0000;
                --cpd-color-alpha-red-300: #470000;
                --cpd-color-alpha-red-200: #3d0000;
                --cpd-color-alpha-red-100: #380000;
                --cpd-color-alpha-gray-1400: rgba(246, 249, 254, .95);
                --cpd-color-alpha-gray-1300: rgba(242, 247, 253, .89);
                --cpd-color-alpha-gray-1200: rgba(237, 244, 252, .79);
                --cpd-color-alpha-gray-1100: rgba(231, 240, 254, .68);
                --cpd-color-alpha-gray-1000: rgba(225, 238, 254, .61);
                --cpd-color-alpha-gray-900: rgba(225, 239, 254, .54);
                --cpd-color-alpha-gray-800: rgba(224, 237, 255, .41);
                --cpd-color-alpha-gray-700: rgba(231, 241, 253, .27);
                --cpd-color-alpha-gray-600: rgba(236, 239, 248, .2);
                --cpd-color-alpha-gray-500: rgba(244, 247, 250, .15);
                --cpd-color-alpha-gray-400: rgba(237, 231, 244, .1);
                --cpd-color-alpha-gray-300: rgba(233, 219, 240, .06);
                --cpd-color-alpha-gray-200: rgba(217, 195, 223, .04);
                --cpd-color-alpha-gray-100: rgba(216, 219, 223, .02);
                --cpd-color-pink-1400: #ffe8ed;
                --cpd-color-pink-1300: #ffd2dc;
                --cpd-color-pink-1200: #ffabbe;
                --cpd-color-pink-1100: #fe84a2;
                --cpd-color-pink-1000: #fa658f;
                --cpd-color-pink-900: #f4427d;
                --cpd-color-pink-800: #ce1865;
                --cpd-color-pink-700: #99114f;
                --cpd-color-pink-600: #7c0c41;
                --cpd-color-pink-500: #6d0036;
                --cpd-color-pink-400: #550024;
                --cpd-color-pink-300: #450018;
                --cpd-color-pink-200: #3c0012;
                --cpd-color-pink-100: #37000f;
                --cpd-color-fuchsia-1400: #f8e9f9;
                --cpd-color-fuchsia-1300: #f1d4f3;
                --cpd-color-fuchsia-1200: #e5b1e9;
                --cpd-color-fuchsia-1100: #d991de;
                --cpd-color-fuchsia-1000: #cf78d7;
                --cpd-color-fuchsia-900: #c560cf;
                --cpd-color-fuchsia-800: #aa36ba;
                --cpd-color-fuchsia-700: #7d2394;
                --cpd-color-fuchsia-600: #65177d;
                --cpd-color-fuchsia-500: #560f6f;
                --cpd-color-fuchsia-400: #46005e;
                --cpd-color-fuchsia-300: #37004e;
                --cpd-color-fuchsia-200: #2e0044;
                --cpd-color-fuchsia-100: #28003d;
                --cpd-color-purple-1400: #eeebff;
                --cpd-color-purple-1300: #dedaff;
                --cpd-color-purple-1200: #c4baff;
                --cpd-color-purple-1100: #ad9cfe;
                --cpd-color-purple-1000: #9e87fc;
                --cpd-color-purple-900: #9171f9;
                --cpd-color-purple-800: #7849ec;
                --cpd-color-purple-700: #5a27c6;
                --cpd-color-purple-600: #4a0db1;
                --cpd-color-purple-500: #3d009e;
                --cpd-color-purple-400: #2c0080;
                --cpd-color-purple-300: #22006a;
                --cpd-color-purple-200: #1c005a;
                --cpd-color-purple-100: #1a0055;
                --cpd-color-blue-1400: #e4eefe;
                --cpd-color-blue-1300: #cbdffc;
                --cpd-color-blue-1200: #a1c4f8;
                --cpd-color-blue-1100: #7aacf4;
                --cpd-color-blue-1000: #5e99f0;
                --cpd-color-blue-900: #4187eb;
                --cpd-color-blue-800: #0e67d9;
                --cpd-color-blue-700: #0b49ab;
                --cpd-color-blue-600: #083891;
                --cpd-color-blue-500: #062d80;
                --cpd-color-blue-400: #001e6f;
                --cpd-color-blue-300: #001264;
                --cpd-color-blue-200: #00095d;
                --cpd-color-blue-100: #00055a;
                --cpd-color-cyan-1400: #dbf2f5;
                --cpd-color-cyan-1300: #b8e5eb;
                --cpd-color-cyan-1200: #78d0dc;
                --cpd-color-cyan-1100: #21bacd;
                --cpd-color-cyan-1000: #02a7c6;
                --cpd-color-cyan-900: #0093be;
                --cpd-color-cyan-800: #0271aa;
                --cpd-color-cyan-700: #005188;
                --cpd-color-cyan-600: #003f75;
                --cpd-color-cyan-500: #003468;
                --cpd-color-cyan-400: #002559;
                --cpd-color-cyan-300: #001b4e;
                --cpd-color-cyan-200: #001448;
                --cpd-color-cyan-100: #014;
                --cpd-color-green-1400: #d9f4e7;
                --cpd-color-green-1300: #b5e8d1;
                --cpd-color-green-1200: #72d5ae;
                --cpd-color-green-1100: #1fc090;
                --cpd-color-green-1000: #17ac84;
                --cpd-color-green-900: #129a78;
                --cpd-color-green-800: #007a62;
                --cpd-color-green-700: #005a43;
                --cpd-color-green-600: #004832;
                --cpd-color-green-500: #003d29;
                --cpd-color-green-400: #002e1b;
                --cpd-color-green-300: #002513;
                --cpd-color-green-200: #001f0e;
                --cpd-color-green-100: #001c0b;
                --cpd-color-lime-1400: #daf6d0;
                --cpd-color-lime-1300: #b6eca3;
                --cpd-color-lime-1200: #77d94f;
                --cpd-color-lime-1100: #56c02c;
                --cpd-color-lime-1000: #47ad26;
                --cpd-color-lime-900: #389b20;
                --cpd-color-lime-800: #1d7c13;
                --cpd-color-lime-700: #005c00;
                --cpd-color-lime-600: #004a00;
                --cpd-color-lime-500: #003e00;
                --cpd-color-lime-400: #003000;
                --cpd-color-lime-300: #002600;
                --cpd-color-lime-200: #002000;
                --cpd-color-lime-100: #001b00;
                --cpd-color-yellow-1400: #ffedb1;
                --cpd-color-yellow-1300: #fedb58;
                --cpd-color-yellow-1200: #efbb0b;
                --cpd-color-yellow-1100: #db9f00;
                --cpd-color-yellow-1000: #cc8c00;
                --cpd-color-yellow-900: #bc7a00;
                --cpd-color-yellow-800: #9d5b00;
                --cpd-color-yellow-700: #7c3e02;
                --cpd-color-yellow-600: #682e03;
                --cpd-color-yellow-500: #5c2400;
                --cpd-color-yellow-400: #4c1400;
                --cpd-color-yellow-300: #410900;
                --cpd-color-yellow-200: #3a0300;
                --cpd-color-yellow-100: #360000;
                --cpd-color-orange-1400: #ffeadb;
                --cpd-color-orange-1300: #ffd5b9;
                --cpd-color-orange-1200: #fbb37e;
                --cpd-color-orange-1100: #f6913d;
                --cpd-color-orange-1000: #eb7a12;
                --cpd-color-orange-900: #da670d;
                --cpd-color-orange-800: #b94607;
                --cpd-color-orange-700: #972206;
                --cpd-color-orange-600: #830500;
                --cpd-color-orange-500: #710000;
                --cpd-color-orange-400: #580000;
                --cpd-color-orange-300: #470000;
                --cpd-color-orange-200: #3c0000;
                --cpd-color-orange-100: #380000;
                --cpd-color-red-1400: #ffe9e6;
                --cpd-color-red-1300: #ffd4cd;
                --cpd-color-red-1200: #ffaea4;
                --cpd-color-red-1100: #ff877c;
                --cpd-color-red-1000: #ff665d;
                --cpd-color-red-900: #fd3e3c;
                --cpd-color-red-800: #d1212a;
                --cpd-color-red-700: #9f0d1e;
                --cpd-color-red-600: #830009;
                --cpd-color-red-500: #710000;
                --cpd-color-red-400: #590000;
                --cpd-color-red-300: #470000;
                --cpd-color-red-200: #3e0000;
                --cpd-color-red-100: #370000;
                --cpd-color-gray-1400: #ebeef2;
                --cpd-color-gray-1300: #d9dee4;
                --cpd-color-gray-1200: #bdc3cc;
                --cpd-color-gray-1100: #a3aab4;
                --cpd-color-gray-1000: #9199a4;
                --cpd-color-gray-900: #808994;
                --cpd-color-gray-800: #656c76;
                --cpd-color-gray-700: #4a4f55;
                --cpd-color-gray-600: #3c3f44;
                --cpd-color-gray-500: #323539;
                --cpd-color-gray-400: #26282d;
                --cpd-color-gray-300: #1d1f24;
                --cpd-color-gray-200: #181a1f;
                --cpd-color-gray-100: #14171b;
                --cpd-color-theme-bg: #101317
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-semantic {
            .cpd-theme-dark.cpd-theme-dark {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300)
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: dark) {
        @layer cpd-semantic {
            :root {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300)
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-base {
            .cpd-theme-dark-hc.cpd-theme-dark-hc {
                --cpd-color-alpha-pink-1400: #fff0f3;
                --cpd-color-alpha-pink-1300: #ffebef;
                --cpd-color-alpha-pink-1200: #ffccd7;
                --cpd-color-alpha-pink-1100: #ffbdcb;
                --cpd-color-alpha-pink-1000: #ffa3b9;
                --cpd-color-alpha-pink-900: #ff94ad;
                --cpd-color-alpha-pink-800: rgba(253, 43, 120, .95);
                --cpd-color-alpha-pink-700: rgba(254, 27, 121, .76);
                --cpd-color-alpha-pink-600: rgba(253, 18, 119, .58);
                --cpd-color-alpha-pink-500: rgba(251, 4, 115, .46);
                --cpd-color-alpha-pink-400: #61002d;
                --cpd-color-alpha-pink-300: #570024;
                --cpd-color-alpha-pink-200: #470019;
                --cpd-color-alpha-pink-100: #3d0012;
                --cpd-color-alpha-fuchsia-1400: rgba(253, 242, 253, .99);
                --cpd-color-alpha-fuchsia-1300: rgba(253, 236, 254, .98);
                --cpd-color-alpha-fuchsia-1200: rgba(252, 215, 254, .95);
                --cpd-color-alpha-fuchsia-1100: rgba(250, 206, 253, .93);
                --cpd-color-alpha-fuchsia-1000: rgba(250, 190, 254, .9);
                --cpd-color-alpha-fuchsia-900: rgba(249, 179, 255, .88);
                --cpd-color-alpha-fuchsia-800: rgba(244, 103, 254, .78);
                --cpd-color-alpha-fuchsia-700: rgba(230, 64, 252, .68);
                --cpd-color-alpha-fuchsia-600: rgba(216, 47, 254, .54);
                --cpd-color-alpha-fuchsia-500: rgba(210, 31, 255, .44);
                --cpd-color-alpha-fuchsia-400: rgba(90, 0, 117, .85);
                --cpd-color-alpha-fuchsia-300: #45005c;
                --cpd-color-alpha-fuchsia-200: #36004d;
                --cpd-color-alpha-fuchsia-100: #2d0042;
                --cpd-color-alpha-purple-1400: #f7f5ff;
                --cpd-color-alpha-purple-1300: #eeebff;
                --cpd-color-alpha-purple-1200: #dbd6ff;
                --cpd-color-alpha-purple-1100: #cec7ff;
                --cpd-color-alpha-purple-1000: #c2b8ff;
                --cpd-color-alpha-purple-900: #b7a8ff;
                --cpd-color-alpha-purple-800: rgba(144, 107, 255, .97);
                --cpd-color-alpha-purple-700: rgba(127, 73, 253, .9);
                --cpd-color-alpha-purple-600: rgba(113, 43, 253, .76);
                --cpd-color-alpha-purple-500: rgba(105, 13, 253, .67);
                --cpd-color-alpha-purple-400: #34008f;
                --cpd-color-alpha-purple-300: #2d0080;
                --cpd-color-alpha-purple-200: #22006b;
                --cpd-color-alpha-purple-100: #1d005c;
                --cpd-color-alpha-blue-1400: #f1f6fe;
                --cpd-color-alpha-blue-1300: #e6effe;
                --cpd-color-alpha-blue-1200: rgba(200, 222, 254, .99);
                --cpd-color-alpha-blue-1100: rgba(184, 212, 255, .98);
                --cpd-color-alpha-blue-1000: rgba(158, 197, 255, .97);
                --cpd-color-alpha-blue-900: rgba(139, 185, 253, .97);
                --cpd-color-alpha-blue-800: rgba(52, 136, 254, .91);
                --cpd-color-alpha-blue-700: rgba(13, 113, 253, .81);
                --cpd-color-alpha-blue-600: rgba(6, 101, 254, .64);
                --cpd-color-alpha-blue-500: rgba(1, 90, 254, .53);
                --cpd-color-alpha-blue-400: rgba(0, 43, 143, .82);
                --cpd-color-alpha-blue-300: #001e70;
                --cpd-color-alpha-blue-200: #001366;
                --cpd-color-alpha-blue-100: #00095c;
                --cpd-color-alpha-cyan-1400: rgba(241, 253, 254, .98);
                --cpd-color-alpha-cyan-1300: rgba(225, 251, 254, .96);
                --cpd-color-alpha-cyan-1200: rgba(190, 245, 254, .91);
                --cpd-color-alpha-cyan-1100: rgba(164, 244, 254, .88);
                --cpd-color-alpha-cyan-1000: rgba(123, 239, 254, .84);
                --cpd-color-alpha-cyan-900: rgba(82, 237, 254, .81);
                --cpd-color-alpha-cyan-800: #008ebd;
                --cpd-color-alpha-cyan-700: #006da3;
                --cpd-color-alpha-cyan-600: #00538a;
                --cpd-color-alpha-cyan-500: #003f75;
                --cpd-color-alpha-cyan-400: #002d61;
                --cpd-color-alpha-cyan-300: #00265c;
                --cpd-color-alpha-cyan-200: #001b4d;
                --cpd-color-alpha-cyan-100: #001447;
                --cpd-color-alpha-green-1400: rgba(237, 253, 245, .98);
                --cpd-color-alpha-green-1300: rgba(226, 253, 241, .96);
                --cpd-color-alpha-green-1200: rgba(191, 253, 225, .9);
                --cpd-color-alpha-green-1100: rgba(164, 254, 215, .86);
                --cpd-color-alpha-green-1000: rgba(117, 255, 200, .81);
                --cpd-color-alpha-green-900: rgba(64, 252, 186, .78);
                --cpd-color-alpha-green-800: rgba(18, 253, 194, .54);
                --cpd-color-alpha-green-700: #00755e;
                --cpd-color-alpha-green-600: #005c45;
                --cpd-color-alpha-green-500: #004732;
                --cpd-color-alpha-green-400: #003824;
                --cpd-color-alpha-green-300: #002e1b;
                --cpd-color-alpha-green-200: #002412;
                --cpd-color-alpha-green-100: #001f0e;
                --cpd-color-alpha-lime-1400: rgba(237, 254, 231, .98);
                --cpd-color-alpha-lime-1300: rgba(225, 253, 216, .97);
                --cpd-color-alpha-lime-1200: rgba(193, 254, 169, .91);
                --cpd-color-alpha-lime-1100: rgba(164, 253, 129, .88);
                --cpd-color-alpha-lime-1000: rgba(123, 254, 62, .83);
                --cpd-color-alpha-lime-900: rgba(116, 254, 52, .78);
                --cpd-color-alpha-lime-800: rgba(77, 254, 37, .55);
                --cpd-color-alpha-lime-700: rgba(35, 255, 10, .42);
                --cpd-color-alpha-lime-600: #005c00;
                --cpd-color-alpha-lime-500: #004d00;
                --cpd-color-alpha-lime-400: #003800;
                --cpd-color-alpha-lime-300: #002e00;
                --cpd-color-alpha-lime-200: #002900;
                --cpd-color-alpha-lime-100: #001f00;
                --cpd-color-alpha-yellow-1400: #fff4d1;
                --cpd-color-alpha-yellow-1300: #ffedb3;
                --cpd-color-alpha-yellow-1200: #fed634;
                --cpd-color-alpha-yellow-1100: rgba(254, 207, 22, .97);
                --cpd-color-alpha-yellow-1000: rgba(254, 196, 6, .92);
                --cpd-color-alpha-yellow-900: #e6ac00;
                --cpd-color-alpha-yellow-800: #b37100;
                --cpd-color-alpha-yellow-700: #995700;
                --cpd-color-alpha-yellow-600: rgba(133, 66, 0, .92);
                --cpd-color-alpha-yellow-500: rgba(117, 51, 0, .87);
                --cpd-color-alpha-yellow-400: #571e00;
                --cpd-color-alpha-yellow-300: #4d1400;
                --cpd-color-alpha-yellow-200: #420900;
                --cpd-color-alpha-yellow-100: #380300;
                --cpd-color-alpha-orange-1400: #fff2eb;
                --cpd-color-alpha-orange-1300: #ffeadb;
                --cpd-color-alpha-orange-1200: #fed1b3;
                --cpd-color-alpha-orange-1100: #fdc196;
                --cpd-color-alpha-orange-1000: rgba(255, 177, 117, .98);
                --cpd-color-alpha-orange-900: rgba(253, 160, 88, .98);
                --cpd-color-alpha-orange-800: rgba(254, 114, 6, .81);
                --cpd-color-alpha-orange-700: rgba(250, 83, 0, .7);
                --cpd-color-alpha-orange-600: rgba(199, 40, 0, .74);
                --cpd-color-alpha-orange-500: #850400;
                --cpd-color-alpha-orange-400: #600;
                --cpd-color-alpha-orange-300: #570000;
                --cpd-color-alpha-orange-200: #470000;
                --cpd-color-alpha-orange-100: #3d0000;
                --cpd-color-alpha-red-1400: #fff3f0;
                --cpd-color-alpha-red-1300: #ffe8e6;
                --cpd-color-alpha-red-1200: #ffcec7;
                --cpd-color-alpha-red-1100: #ffbfb8;
                --cpd-color-alpha-red-1000: #ffa89e;
                --cpd-color-alpha-red-900: #ff988f;
                --cpd-color-alpha-red-800: rgba(255, 46, 49, .96);
                --cpd-color-alpha-red-700: rgba(255, 36, 47, .77);
                --cpd-color-alpha-red-600: rgba(254, 11, 36, .6);
                --cpd-color-alpha-red-500: #850009;
                --cpd-color-alpha-red-400: #600;
                --cpd-color-alpha-red-300: #5c0000;
                --cpd-color-alpha-red-200: #470000;
                --cpd-color-alpha-red-100: #3d0000;
                --cpd-color-alpha-gray-1400: rgba(251, 253, 254, .97);
                --cpd-color-alpha-gray-1300: rgba(246, 249, 254, .95);
                --cpd-color-alpha-gray-1200: rgba(241, 246, 253, .88);
                --cpd-color-alpha-gray-1100: rgba(240, 247, 255, .82);
                --cpd-color-alpha-gray-1000: rgba(240, 247, 255, .76);
                --cpd-color-alpha-gray-900: rgba(236, 244, 254, .72);
                --cpd-color-alpha-gray-800: rgba(220, 234, 254, .51);
                --cpd-color-alpha-gray-700: rgba(223, 235, 251, .39);
                --cpd-color-alpha-gray-600: rgba(231, 241, 253, .27);
                --cpd-color-alpha-gray-500: rgba(236, 239, 248, .2);
                --cpd-color-alpha-gray-400: rgba(225, 228, 239, .13);
                --cpd-color-alpha-gray-300: rgba(237, 231, 244, .1);
                --cpd-color-alpha-gray-200: rgba(233, 219, 240, .06);
                --cpd-color-alpha-gray-100: rgba(217, 195, 223, .04);
                --cpd-color-pink-1400: #fff1f4;
                --cpd-color-pink-1300: #ffe8ed;
                --cpd-color-pink-1200: #ffccd7;
                --cpd-color-pink-1100: #ffbbca;
                --cpd-color-pink-1000: #ffa4b9;
                --cpd-color-pink-900: #ff92ac;
                --cpd-color-pink-800: #f12c75;
                --cpd-color-pink-700: #c51761;
                --cpd-color-pink-600: #99114f;
                --cpd-color-pink-500: #7c0c41;
                --cpd-color-pink-400: #61002d;
                --cpd-color-pink-300: #550024;
                --cpd-color-pink-200: #450018;
                --cpd-color-pink-100: #3c0012;
                --cpd-color-fuchsia-1400: #fbf1fb;
                --cpd-color-fuchsia-1300: #f8e9f9;
                --cpd-color-fuchsia-1200: #f0cff2;
                --cpd-color-fuchsia-1100: #eac0ed;
                --cpd-color-fuchsia-1000: #e3abe7;
                --cpd-color-fuchsia-900: #dd9de3;
                --cpd-color-fuchsia-800: #c153cb;
                --cpd-color-fuchsia-700: #a233b3;
                --cpd-color-fuchsia-600: #7d2394;
                --cpd-color-fuchsia-500: #65177d;
                --cpd-color-fuchsia-400: #4f0368;
                --cpd-color-fuchsia-300: #46005e;
                --cpd-color-fuchsia-200: #37004e;
                --cpd-color-fuchsia-100: #2e0044;
                --cpd-color-purple-1400: #f5f3ff;
                --cpd-color-purple-1300: #eeebff;
                --cpd-color-purple-1200: #dad5ff;
                --cpd-color-purple-1100: #cec7ff;
                --cpd-color-purple-1000: #c0b5ff;
                --cpd-color-purple-900: #b6a7ff;
                --cpd-color-purple-800: #8b66f8;
                --cpd-color-purple-700: #7343e6;
                --cpd-color-purple-600: #5a27c6;
                --cpd-color-purple-500: #4a0db1;
                --cpd-color-purple-400: #350090;
                --cpd-color-purple-300: #2c0080;
                --cpd-color-purple-200: #22006a;
                --cpd-color-purple-100: #1c005a;
                --cpd-color-blue-1400: #eff5fe;
                --cpd-color-blue-1300: #e4eefe;
                --cpd-color-blue-1200: #c5dbfc;
                --cpd-color-blue-1100: #b2cffa;
                --cpd-color-blue-1000: #9ac0f8;
                --cpd-color-blue-900: #89b5f6;
                --cpd-color-blue-800: #337fe9;
                --cpd-color-blue-700: #0e61d1;
                --cpd-color-blue-600: #0b49ab;
                --cpd-color-blue-500: #083891;
                --cpd-color-blue-400: #032677;
                --cpd-color-blue-300: #001e6f;
                --cpd-color-blue-200: #001264;
                --cpd-color-blue-100: #00095d;
                --cpd-color-cyan-1400: #eaf7f9;
                --cpd-color-cyan-1300: #dbf2f5;
                --cpd-color-cyan-1200: #afe2e9;
                --cpd-color-cyan-1100: #93d9e2;
                --cpd-color-cyan-1000: #6bccd9;
                --cpd-color-cyan-900: #46c3d2;
                --cpd-color-cyan-800: #008aba;
                --cpd-color-cyan-700: #006ca4;
                --cpd-color-cyan-600: #005188;
                --cpd-color-cyan-500: #003f75;
                --cpd-color-cyan-400: #002d61;
                --cpd-color-cyan-300: #002559;
                --cpd-color-cyan-200: #001b4e;
                --cpd-color-cyan-100: #001448;
                --cpd-color-green-1400: #e9f8f1;
                --cpd-color-green-1300: #d9f4e7;
                --cpd-color-green-1200: #ace6cc;
                --cpd-color-green-1100: #8fddbc;
                --cpd-color-green-1000: #61d2a6;
                --cpd-color-green-900: #37c998;
                --cpd-color-green-800: #109173;
                --cpd-color-green-700: #00745c;
                --cpd-color-green-600: #005a43;
                --cpd-color-green-500: #004832;
                --cpd-color-green-400: #003622;
                --cpd-color-green-300: #002e1b;
                --cpd-color-green-200: #002513;
                --cpd-color-green-100: #001f0e;
                --cpd-color-lime-1400: #e9f9e3;
                --cpd-color-lime-1300: #daf6d0;
                --cpd-color-lime-1200: #afe99a;
                --cpd-color-lime-1100: #92e175;
                --cpd-color-lime-1000: #6ad639;
                --cpd-color-lime-900: #5eca2f;
                --cpd-color-lime-800: #31941d;
                --cpd-color-lime-700: #187611;
                --cpd-color-lime-600: #005c00;
                --cpd-color-lime-500: #004a00;
                --cpd-color-lime-400: #003700;
                --cpd-color-lime-300: #003000;
                --cpd-color-lime-200: #002600;
                --cpd-color-lime-100: #002000;
                --cpd-color-yellow-1400: #fff4d0;
                --cpd-color-yellow-1300: #ffedb1;
                --cpd-color-yellow-1200: #fed632;
                --cpd-color-yellow-1100: #f7c816;
                --cpd-color-yellow-1000: #ebb607;
                --cpd-color-yellow-900: #e3aa00;
                --cpd-color-yellow-800: #b47200;
                --cpd-color-yellow-700: #985600;
                --cpd-color-yellow-600: #7c3e02;
                --cpd-color-yellow-500: #682e03;
                --cpd-color-yellow-400: #541d00;
                --cpd-color-yellow-300: #4c1400;
                --cpd-color-yellow-200: #410900;
                --cpd-color-yellow-100: #3a0300;
                --cpd-color-orange-1400: #fff2ea;
                --cpd-color-orange-1300: #ffeadb;
                --cpd-color-orange-1200: #fed0b1;
                --cpd-color-orange-1100: #fdc197;
                --cpd-color-orange-1000: #faad73;
                --cpd-color-orange-900: #f89d58;
                --cpd-color-orange-800: #d15f0b;
                --cpd-color-orange-700: #b44007;
                --cpd-color-orange-600: #972206;
                --cpd-color-orange-500: #830500;
                --cpd-color-orange-400: #650000;
                --cpd-color-orange-300: #580000;
                --cpd-color-orange-200: #470000;
                --cpd-color-orange-100: #3c0000;
                --cpd-color-red-1400: #fff2ef;
                --cpd-color-red-1300: #ffe9e6;
                --cpd-color-red-1200: #ffcfc8;
                --cpd-color-red-1100: #ffbdb5;
                --cpd-color-red-1000: #ffa79d;
                --cpd-color-red-900: #ff968c;
                --cpd-color-red-800: #f52f33;
                --cpd-color-red-700: #c81e28;
                --cpd-color-red-600: #9f0d1e;
                --cpd-color-red-500: #830009;
                --cpd-color-red-400: #640000;
                --cpd-color-red-300: #590000;
                --cpd-color-red-200: #470000;
                --cpd-color-red-100: #3e0000;
                --cpd-color-gray-1400: #f2f5f7;
                --cpd-color-gray-1300: #ebeef2;
                --cpd-color-gray-1200: #d5dae1;
                --cpd-color-gray-1100: #c8ced5;
                --cpd-color-gray-1000: #b8bfc7;
                --cpd-color-gray-900: #acb4bd;
                --cpd-color-gray-800: #79818d;
                --cpd-color-gray-700: #606770;
                --cpd-color-gray-600: #4a4f55;
                --cpd-color-gray-500: #3c3f44;
                --cpd-color-gray-400: #2b2e33;
                --cpd-color-gray-300: #26282d;
                --cpd-color-gray-200: #1d1f24;
                --cpd-color-gray-100: #181a1f;
                --cpd-color-theme-bg: #101317
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: dark) and (prefers-contrast: more) {
        @layer cpd-base {
            :root {
                --cpd-color-alpha-pink-1400: #fff0f3;
                --cpd-color-alpha-pink-1300: #ffebef;
                --cpd-color-alpha-pink-1200: #ffccd7;
                --cpd-color-alpha-pink-1100: #ffbdcb;
                --cpd-color-alpha-pink-1000: #ffa3b9;
                --cpd-color-alpha-pink-900: #ff94ad;
                --cpd-color-alpha-pink-800: rgba(253, 43, 120, .95);
                --cpd-color-alpha-pink-700: rgba(254, 27, 121, .76);
                --cpd-color-alpha-pink-600: rgba(253, 18, 119, .58);
                --cpd-color-alpha-pink-500: rgba(251, 4, 115, .46);
                --cpd-color-alpha-pink-400: #61002d;
                --cpd-color-alpha-pink-300: #570024;
                --cpd-color-alpha-pink-200: #470019;
                --cpd-color-alpha-pink-100: #3d0012;
                --cpd-color-alpha-fuchsia-1400: rgba(253, 242, 253, .99);
                --cpd-color-alpha-fuchsia-1300: rgba(253, 236, 254, .98);
                --cpd-color-alpha-fuchsia-1200: rgba(252, 215, 254, .95);
                --cpd-color-alpha-fuchsia-1100: rgba(250, 206, 253, .93);
                --cpd-color-alpha-fuchsia-1000: rgba(250, 190, 254, .9);
                --cpd-color-alpha-fuchsia-900: rgba(249, 179, 255, .88);
                --cpd-color-alpha-fuchsia-800: rgba(244, 103, 254, .78);
                --cpd-color-alpha-fuchsia-700: rgba(230, 64, 252, .68);
                --cpd-color-alpha-fuchsia-600: rgba(216, 47, 254, .54);
                --cpd-color-alpha-fuchsia-500: rgba(210, 31, 255, .44);
                --cpd-color-alpha-fuchsia-400: rgba(90, 0, 117, .85);
                --cpd-color-alpha-fuchsia-300: #45005c;
                --cpd-color-alpha-fuchsia-200: #36004d;
                --cpd-color-alpha-fuchsia-100: #2d0042;
                --cpd-color-alpha-purple-1400: #f7f5ff;
                --cpd-color-alpha-purple-1300: #eeebff;
                --cpd-color-alpha-purple-1200: #dbd6ff;
                --cpd-color-alpha-purple-1100: #cec7ff;
                --cpd-color-alpha-purple-1000: #c2b8ff;
                --cpd-color-alpha-purple-900: #b7a8ff;
                --cpd-color-alpha-purple-800: rgba(144, 107, 255, .97);
                --cpd-color-alpha-purple-700: rgba(127, 73, 253, .9);
                --cpd-color-alpha-purple-600: rgba(113, 43, 253, .76);
                --cpd-color-alpha-purple-500: rgba(105, 13, 253, .67);
                --cpd-color-alpha-purple-400: #34008f;
                --cpd-color-alpha-purple-300: #2d0080;
                --cpd-color-alpha-purple-200: #22006b;
                --cpd-color-alpha-purple-100: #1d005c;
                --cpd-color-alpha-blue-1400: #f1f6fe;
                --cpd-color-alpha-blue-1300: #e6effe;
                --cpd-color-alpha-blue-1200: rgba(200, 222, 254, .99);
                --cpd-color-alpha-blue-1100: rgba(184, 212, 255, .98);
                --cpd-color-alpha-blue-1000: rgba(158, 197, 255, .97);
                --cpd-color-alpha-blue-900: rgba(139, 185, 253, .97);
                --cpd-color-alpha-blue-800: rgba(52, 136, 254, .91);
                --cpd-color-alpha-blue-700: rgba(13, 113, 253, .81);
                --cpd-color-alpha-blue-600: rgba(6, 101, 254, .64);
                --cpd-color-alpha-blue-500: rgba(1, 90, 254, .53);
                --cpd-color-alpha-blue-400: rgba(0, 43, 143, .82);
                --cpd-color-alpha-blue-300: #001e70;
                --cpd-color-alpha-blue-200: #001366;
                --cpd-color-alpha-blue-100: #00095c;
                --cpd-color-alpha-cyan-1400: rgba(241, 253, 254, .98);
                --cpd-color-alpha-cyan-1300: rgba(225, 251, 254, .96);
                --cpd-color-alpha-cyan-1200: rgba(190, 245, 254, .91);
                --cpd-color-alpha-cyan-1100: rgba(164, 244, 254, .88);
                --cpd-color-alpha-cyan-1000: rgba(123, 239, 254, .84);
                --cpd-color-alpha-cyan-900: rgba(82, 237, 254, .81);
                --cpd-color-alpha-cyan-800: #008ebd;
                --cpd-color-alpha-cyan-700: #006da3;
                --cpd-color-alpha-cyan-600: #00538a;
                --cpd-color-alpha-cyan-500: #003f75;
                --cpd-color-alpha-cyan-400: #002d61;
                --cpd-color-alpha-cyan-300: #00265c;
                --cpd-color-alpha-cyan-200: #001b4d;
                --cpd-color-alpha-cyan-100: #001447;
                --cpd-color-alpha-green-1400: rgba(237, 253, 245, .98);
                --cpd-color-alpha-green-1300: rgba(226, 253, 241, .96);
                --cpd-color-alpha-green-1200: rgba(191, 253, 225, .9);
                --cpd-color-alpha-green-1100: rgba(164, 254, 215, .86);
                --cpd-color-alpha-green-1000: rgba(117, 255, 200, .81);
                --cpd-color-alpha-green-900: rgba(64, 252, 186, .78);
                --cpd-color-alpha-green-800: rgba(18, 253, 194, .54);
                --cpd-color-alpha-green-700: #00755e;
                --cpd-color-alpha-green-600: #005c45;
                --cpd-color-alpha-green-500: #004732;
                --cpd-color-alpha-green-400: #003824;
                --cpd-color-alpha-green-300: #002e1b;
                --cpd-color-alpha-green-200: #002412;
                --cpd-color-alpha-green-100: #001f0e;
                --cpd-color-alpha-lime-1400: rgba(237, 254, 231, .98);
                --cpd-color-alpha-lime-1300: rgba(225, 253, 216, .97);
                --cpd-color-alpha-lime-1200: rgba(193, 254, 169, .91);
                --cpd-color-alpha-lime-1100: rgba(164, 253, 129, .88);
                --cpd-color-alpha-lime-1000: rgba(123, 254, 62, .83);
                --cpd-color-alpha-lime-900: rgba(116, 254, 52, .78);
                --cpd-color-alpha-lime-800: rgba(77, 254, 37, .55);
                --cpd-color-alpha-lime-700: rgba(35, 255, 10, .42);
                --cpd-color-alpha-lime-600: #005c00;
                --cpd-color-alpha-lime-500: #004d00;
                --cpd-color-alpha-lime-400: #003800;
                --cpd-color-alpha-lime-300: #002e00;
                --cpd-color-alpha-lime-200: #002900;
                --cpd-color-alpha-lime-100: #001f00;
                --cpd-color-alpha-yellow-1400: #fff4d1;
                --cpd-color-alpha-yellow-1300: #ffedb3;
                --cpd-color-alpha-yellow-1200: #fed634;
                --cpd-color-alpha-yellow-1100: rgba(254, 207, 22, .97);
                --cpd-color-alpha-yellow-1000: rgba(254, 196, 6, .92);
                --cpd-color-alpha-yellow-900: #e6ac00;
                --cpd-color-alpha-yellow-800: #b37100;
                --cpd-color-alpha-yellow-700: #995700;
                --cpd-color-alpha-yellow-600: rgba(133, 66, 0, .92);
                --cpd-color-alpha-yellow-500: rgba(117, 51, 0, .87);
                --cpd-color-alpha-yellow-400: #571e00;
                --cpd-color-alpha-yellow-300: #4d1400;
                --cpd-color-alpha-yellow-200: #420900;
                --cpd-color-alpha-yellow-100: #380300;
                --cpd-color-alpha-orange-1400: #fff2eb;
                --cpd-color-alpha-orange-1300: #ffeadb;
                --cpd-color-alpha-orange-1200: #fed1b3;
                --cpd-color-alpha-orange-1100: #fdc196;
                --cpd-color-alpha-orange-1000: rgba(255, 177, 117, .98);
                --cpd-color-alpha-orange-900: rgba(253, 160, 88, .98);
                --cpd-color-alpha-orange-800: rgba(254, 114, 6, .81);
                --cpd-color-alpha-orange-700: rgba(250, 83, 0, .7);
                --cpd-color-alpha-orange-600: rgba(199, 40, 0, .74);
                --cpd-color-alpha-orange-500: #850400;
                --cpd-color-alpha-orange-400: #600;
                --cpd-color-alpha-orange-300: #570000;
                --cpd-color-alpha-orange-200: #470000;
                --cpd-color-alpha-orange-100: #3d0000;
                --cpd-color-alpha-red-1400: #fff3f0;
                --cpd-color-alpha-red-1300: #ffe8e6;
                --cpd-color-alpha-red-1200: #ffcec7;
                --cpd-color-alpha-red-1100: #ffbfb8;
                --cpd-color-alpha-red-1000: #ffa89e;
                --cpd-color-alpha-red-900: #ff988f;
                --cpd-color-alpha-red-800: rgba(255, 46, 49, .96);
                --cpd-color-alpha-red-700: rgba(255, 36, 47, .77);
                --cpd-color-alpha-red-600: rgba(254, 11, 36, .6);
                --cpd-color-alpha-red-500: #850009;
                --cpd-color-alpha-red-400: #600;
                --cpd-color-alpha-red-300: #5c0000;
                --cpd-color-alpha-red-200: #470000;
                --cpd-color-alpha-red-100: #3d0000;
                --cpd-color-alpha-gray-1400: rgba(251, 253, 254, .97);
                --cpd-color-alpha-gray-1300: rgba(246, 249, 254, .95);
                --cpd-color-alpha-gray-1200: rgba(241, 246, 253, .88);
                --cpd-color-alpha-gray-1100: rgba(240, 247, 255, .82);
                --cpd-color-alpha-gray-1000: rgba(240, 247, 255, .76);
                --cpd-color-alpha-gray-900: rgba(236, 244, 254, .72);
                --cpd-color-alpha-gray-800: rgba(220, 234, 254, .51);
                --cpd-color-alpha-gray-700: rgba(223, 235, 251, .39);
                --cpd-color-alpha-gray-600: rgba(231, 241, 253, .27);
                --cpd-color-alpha-gray-500: rgba(236, 239, 248, .2);
                --cpd-color-alpha-gray-400: rgba(225, 228, 239, .13);
                --cpd-color-alpha-gray-300: rgba(237, 231, 244, .1);
                --cpd-color-alpha-gray-200: rgba(233, 219, 240, .06);
                --cpd-color-alpha-gray-100: rgba(217, 195, 223, .04);
                --cpd-color-pink-1400: #fff1f4;
                --cpd-color-pink-1300: #ffe8ed;
                --cpd-color-pink-1200: #ffccd7;
                --cpd-color-pink-1100: #ffbbca;
                --cpd-color-pink-1000: #ffa4b9;
                --cpd-color-pink-900: #ff92ac;
                --cpd-color-pink-800: #f12c75;
                --cpd-color-pink-700: #c51761;
                --cpd-color-pink-600: #99114f;
                --cpd-color-pink-500: #7c0c41;
                --cpd-color-pink-400: #61002d;
                --cpd-color-pink-300: #550024;
                --cpd-color-pink-200: #450018;
                --cpd-color-pink-100: #3c0012;
                --cpd-color-fuchsia-1400: #fbf1fb;
                --cpd-color-fuchsia-1300: #f8e9f9;
                --cpd-color-fuchsia-1200: #f0cff2;
                --cpd-color-fuchsia-1100: #eac0ed;
                --cpd-color-fuchsia-1000: #e3abe7;
                --cpd-color-fuchsia-900: #dd9de3;
                --cpd-color-fuchsia-800: #c153cb;
                --cpd-color-fuchsia-700: #a233b3;
                --cpd-color-fuchsia-600: #7d2394;
                --cpd-color-fuchsia-500: #65177d;
                --cpd-color-fuchsia-400: #4f0368;
                --cpd-color-fuchsia-300: #46005e;
                --cpd-color-fuchsia-200: #37004e;
                --cpd-color-fuchsia-100: #2e0044;
                --cpd-color-purple-1400: #f5f3ff;
                --cpd-color-purple-1300: #eeebff;
                --cpd-color-purple-1200: #dad5ff;
                --cpd-color-purple-1100: #cec7ff;
                --cpd-color-purple-1000: #c0b5ff;
                --cpd-color-purple-900: #b6a7ff;
                --cpd-color-purple-800: #8b66f8;
                --cpd-color-purple-700: #7343e6;
                --cpd-color-purple-600: #5a27c6;
                --cpd-color-purple-500: #4a0db1;
                --cpd-color-purple-400: #350090;
                --cpd-color-purple-300: #2c0080;
                --cpd-color-purple-200: #22006a;
                --cpd-color-purple-100: #1c005a;
                --cpd-color-blue-1400: #eff5fe;
                --cpd-color-blue-1300: #e4eefe;
                --cpd-color-blue-1200: #c5dbfc;
                --cpd-color-blue-1100: #b2cffa;
                --cpd-color-blue-1000: #9ac0f8;
                --cpd-color-blue-900: #89b5f6;
                --cpd-color-blue-800: #337fe9;
                --cpd-color-blue-700: #0e61d1;
                --cpd-color-blue-600: #0b49ab;
                --cpd-color-blue-500: #083891;
                --cpd-color-blue-400: #032677;
                --cpd-color-blue-300: #001e6f;
                --cpd-color-blue-200: #001264;
                --cpd-color-blue-100: #00095d;
                --cpd-color-cyan-1400: #eaf7f9;
                --cpd-color-cyan-1300: #dbf2f5;
                --cpd-color-cyan-1200: #afe2e9;
                --cpd-color-cyan-1100: #93d9e2;
                --cpd-color-cyan-1000: #6bccd9;
                --cpd-color-cyan-900: #46c3d2;
                --cpd-color-cyan-800: #008aba;
                --cpd-color-cyan-700: #006ca4;
                --cpd-color-cyan-600: #005188;
                --cpd-color-cyan-500: #003f75;
                --cpd-color-cyan-400: #002d61;
                --cpd-color-cyan-300: #002559;
                --cpd-color-cyan-200: #001b4e;
                --cpd-color-cyan-100: #001448;
                --cpd-color-green-1400: #e9f8f1;
                --cpd-color-green-1300: #d9f4e7;
                --cpd-color-green-1200: #ace6cc;
                --cpd-color-green-1100: #8fddbc;
                --cpd-color-green-1000: #61d2a6;
                --cpd-color-green-900: #37c998;
                --cpd-color-green-800: #109173;
                --cpd-color-green-700: #00745c;
                --cpd-color-green-600: #005a43;
                --cpd-color-green-500: #004832;
                --cpd-color-green-400: #003622;
                --cpd-color-green-300: #002e1b;
                --cpd-color-green-200: #002513;
                --cpd-color-green-100: #001f0e;
                --cpd-color-lime-1400: #e9f9e3;
                --cpd-color-lime-1300: #daf6d0;
                --cpd-color-lime-1200: #afe99a;
                --cpd-color-lime-1100: #92e175;
                --cpd-color-lime-1000: #6ad639;
                --cpd-color-lime-900: #5eca2f;
                --cpd-color-lime-800: #31941d;
                --cpd-color-lime-700: #187611;
                --cpd-color-lime-600: #005c00;
                --cpd-color-lime-500: #004a00;
                --cpd-color-lime-400: #003700;
                --cpd-color-lime-300: #003000;
                --cpd-color-lime-200: #002600;
                --cpd-color-lime-100: #002000;
                --cpd-color-yellow-1400: #fff4d0;
                --cpd-color-yellow-1300: #ffedb1;
                --cpd-color-yellow-1200: #fed632;
                --cpd-color-yellow-1100: #f7c816;
                --cpd-color-yellow-1000: #ebb607;
                --cpd-color-yellow-900: #e3aa00;
                --cpd-color-yellow-800: #b47200;
                --cpd-color-yellow-700: #985600;
                --cpd-color-yellow-600: #7c3e02;
                --cpd-color-yellow-500: #682e03;
                --cpd-color-yellow-400: #541d00;
                --cpd-color-yellow-300: #4c1400;
                --cpd-color-yellow-200: #410900;
                --cpd-color-yellow-100: #3a0300;
                --cpd-color-orange-1400: #fff2ea;
                --cpd-color-orange-1300: #ffeadb;
                --cpd-color-orange-1200: #fed0b1;
                --cpd-color-orange-1100: #fdc197;
                --cpd-color-orange-1000: #faad73;
                --cpd-color-orange-900: #f89d58;
                --cpd-color-orange-800: #d15f0b;
                --cpd-color-orange-700: #b44007;
                --cpd-color-orange-600: #972206;
                --cpd-color-orange-500: #830500;
                --cpd-color-orange-400: #650000;
                --cpd-color-orange-300: #580000;
                --cpd-color-orange-200: #470000;
                --cpd-color-orange-100: #3c0000;
                --cpd-color-red-1400: #fff2ef;
                --cpd-color-red-1300: #ffe9e6;
                --cpd-color-red-1200: #ffcfc8;
                --cpd-color-red-1100: #ffbdb5;
                --cpd-color-red-1000: #ffa79d;
                --cpd-color-red-900: #ff968c;
                --cpd-color-red-800: #f52f33;
                --cpd-color-red-700: #c81e28;
                --cpd-color-red-600: #9f0d1e;
                --cpd-color-red-500: #830009;
                --cpd-color-red-400: #640000;
                --cpd-color-red-300: #590000;
                --cpd-color-red-200: #470000;
                --cpd-color-red-100: #3e0000;
                --cpd-color-gray-1400: #f2f5f7;
                --cpd-color-gray-1300: #ebeef2;
                --cpd-color-gray-1200: #d5dae1;
                --cpd-color-gray-1100: #c8ced5;
                --cpd-color-gray-1000: #b8bfc7;
                --cpd-color-gray-900: #acb4bd;
                --cpd-color-gray-800: #79818d;
                --cpd-color-gray-700: #606770;
                --cpd-color-gray-600: #4a4f55;
                --cpd-color-gray-500: #3c3f44;
                --cpd-color-gray-400: #2b2e33;
                --cpd-color-gray-300: #26282d;
                --cpd-color-gray-200: #1d1f24;
                --cpd-color-gray-100: #181a1f;
                --cpd-color-theme-bg: #101317
            }
        }
    }
} @layer compound {
    @media screen {
        @layer cpd-semantic {
            .cpd-theme-dark-hc.cpd-theme-dark-hc {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300)
            }
        }
    }
} @layer compound {
    @media screen and (prefers-color-scheme: dark) and (prefers-contrast: more) {
        @layer cpd-semantic {
            :root {
                --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
                --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300)
            }
        }
    }
} ._alert_1bz08_19 {
      container-name: alert;
      container-type: inline-size;
      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;
      border: 1px solid;
      border-radius: 8px;
      gap: var(--cpd-space-3x);
      justify-content: start;
      padding: var(--cpd-space-4x)
  }

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

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

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

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

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

[data-type=success] :is(._title_1bz08_57,._icon_1bz08_57) {
    color: var(--cpd-color-green-900)
}

[data-type=critical] :is(._title_1bz08_57,._icon_1bz08_57) {
    color: var(--cpd-color-red-900)
}

[data-type=info] :is(._title_1bz08_57,._icon_1bz08_57) {
    color: var(--cpd-color-blue-900)
}

._alert_1bz08_19 p {
    margin: 0
}

._actions_1bz08_73 {
    -webkit-box-flex: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0;
    flex: 0;
    -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_1bz08_57 {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

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

    ._text-content_1bz08_53 {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%
    }
} ._font-body-xs-regular_yh5dq_21 {
      font: var(--cpd-font-body-xs-regular);
      letter-spacing: var(--cpd-font-letter-spacing-body-xs)
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

._typography_yh5dq_162 {
    -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)
}

._button_dyfp8_17 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 9999px;
    border-radius: var(--cpd-radius-pill-effect);
    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;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font: var(--cpd-font-body-md-semibold);
    gap: var(--cpd-space-2x);
    justify-content: center;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-property: color, background-color, border-color;
    transition-property: color, background-color, border-color
}

._button_dyfp8_17 > svg {
    -webkit-transition: color .1s;
    transition: color .1s
}

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

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

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

._button_dyfp8_17[data-size=lg]._has-icon_dyfp8_55 {
    -webkit-padding-start: var(--cpd-space-7x);
    padding-inline-start: var(--cpd-space-7x)
}

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

._button_dyfp8_17[data-size=sm]._has-icon_dyfp8_55 {
    -webkit-padding-start: var(--cpd-space-4x);
    padding-inline-start: var(--cpd-space-4x)
}

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

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

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

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

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

._button_dyfp8_17[data-kind=primary]._destructive_dyfp8_99 {
    background: var(--cpd-color-bg-critical-primary)
}

@media (hover) {
    ._button_dyfp8_17[data-kind=primary]._destructive_dyfp8_99:hover {
        background: var(--cpd-color-bg-critical-hovered)
    }
}

._button_dyfp8_17[data-kind=primary]._destructive_dyfp8_99:active, ._button_dyfp8_17[data-kind=primary]._destructive_dyfp8_99[aria-expanded=true] {
    background: var(--cpd-color-red-1100)
}

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

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

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

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

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

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

._button_dyfp8_17[data-kind=secondary]._destructive_dyfp8_99 > svg {
    color: var(--cpd-color-icon-critical-primary)
}

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

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

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

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

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

._button_dyfp8_17[data-kind=tertiary][aria-disabled=true] {

    /* !important to override destructive background */
    background: transparent !important;
    color: var(--cpd-color-text-disabled)
}

._button_dyfp8_17[data-kind=tertiary]._destructive_dyfp8_99 {
    color: var(--cpd-color-text-critical-primary)
}

@media (hover) {
    ._button_dyfp8_17[data-kind=tertiary]._destructive_dyfp8_99:hover {
        background: var(--cpd-color-bg-critical-subtle)
    }
}

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

._icon-button_16nk7_17 {
    --cpd-icon-button-indicator-border-size: calc(var(--cpd-icon-button-size) * 0.0625);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    aspect-ratio: 1/1;
    background: transparent;
    block-size: var(--cpd-space-8x);
    block-size: var(--cpd-icon-button-size);
    border: 0;
    border-radius: 50%;
    color: var(--cpd-color-icon-tertiary);
    cursor: pointer;
    inline-size: var(--cpd-space-8x);
    inline-size: var(--cpd-icon-button-size);
    line-height: 0px;
    padding: calc(var(--cpd-icon-button-size) * .125);
    position: relative
}

._icon-button_16nk7_17[aria-disabled=true] {
    color: var(--cpd-color-icon-disabled);
    cursor: not-allowed
}

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

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

@media (hover) {
    ._icon-button_16nk7_17:not([aria-disabled=true])[data-indicator]:is(:hover):before {
        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_16nk7_17:not([aria-disabled=true])[data-indicator]:is(:active):before {
    border: var(--cpd-icon-button-indicator-border-size) solid var(--cpd-color-bg-subtle-primary);
    inset-block-start: 0;
    inset-inline-end: 0
}

._indicator-icon_133tf_26 {
    aspect-ratio: 1/1;
    block-size: var(--cpd-space-8x);
    block-size: var(--cpd-icon-button-size);
    color: var(--cpd-color-icon-tertiary);
    inline-size: var(--cpd-space-8x);
    inline-size: var(--cpd-icon-button-size);
    position: relative
}

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

._indicator-icon_133tf_26[data-indicator] svg {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTAgMHYyNGgyNFY3LjY0MWE2IDYgMCAwIDEtMiAuMzYgNiA2IDAgMCAxLTYtNiA2IDYgMCAwIDEgLjM2LTJ6Ii8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTAgMHYyNGgyNFY3LjY0MWE2IDYgMCAwIDEtMiAuMzYgNiA2IDAgMCAxLTYtNiA2IDYgMCAwIDEgLjM2LTJ6Ii8+PC9zdmc+");
    -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_133tf_26[data-indicator]:before {
    background: var(--cpd-color-icon-primary);
    block-size: 33.333%;
    border-radius: 50%;
    content: "";
    inline-size: 33.3333%;
    inset-block-start: -8.3333%;
    inset-inline-end: -8.3333%;
    position: absolute
}

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

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

._avatar_mcap2_17 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: min(calc(var(--cpd-space-16x) * .5625), 60px);
    font-size: min(calc(var(--cpd-avatar-size) * .5625), 60px);
    line-height: var(--cpd-space-16x);
    line-height: var(--cpd-avatar-size);
    text-align: center;
    text-transform: uppercase;
    speak: none;
    background: var(--cpd-color-bg-canvas-default);
    font-family: var(--cpd-font-family-sans);
    font-weight: 700;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

button._avatar_mcap2_17 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 0
}

button._avatar_mcap2_17:disabled {
    cursor: not-allowed
}

._avatar_mcap2_17, ._image_mcap2_50 {
    aspect-ratio: 1/1;
    border-radius: var(--cpd-avatar-radius);
    inline-size: var(--cpd-space-16x);
    inline-size: var(--cpd-avatar-size)
}

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

._avatar-imageless_mcap2_61 {
    background: var(--cpd-avatar-bg);
    color: var(--cpd-avatar-color)
}

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

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

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

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

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

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

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

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

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

._stacked-avatars_mcap2_111 ._avatar_mcap2_17 {
    float: inline-start
}

._stacked-avatars_mcap2_111 ._avatar_mcap2_17:not(:last-child) {
    -webkit-clip-path: url(#cpdAvatarClip);
    clip-path: url(#cpdAvatarClip)
}

._stacked-avatars_mcap2_111 > :not(:first-child) {
    -webkit-margin-start: calc(var(--cpd-space-16x) * -.2);
    margin-inline-start: calc(var(--cpd-space-16x) * -.2);
    -webkit-margin-start: calc(var(--cpd-avatar-size) * -.2);
    margin-inline-start: calc(var(--cpd-avatar-size) * -.2)
}

._clip-path_mcap2_130 {
    inset-inline-start: -9999px;
    position: fixed
}

._badge_qipht_17 {
    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;
    background: var(--cpd-color-gray-400);
    border-radius: 9999px;
    color: var(--cpd-color-text-secondary);
    padding: var(--cpd-space-1x) var(--cpd-space-3x)
}

._badge_qipht_17[data-kind=success] {
    background: var(--cpd-color-green-400);
    color: var(--cpd-color-green-900)
}

._badge_qipht_17[data-kind=critical] {
    background: var(--cpd-color-red-400);
    color: var(--cpd-color-red-900)
}

._menu_1x5h1_17 {
    background: var(--cpd-color-bg-canvas-default);
    border-radius: var(--cpd-space-3x);
    -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    inline-size: -webkit-fit-content;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    max-inline-size: 320px;
    outline: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary) !important;
    outline-offset: calc(var(--cpd-border-width-1) * -1);
    -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_1x5h1_1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(var(--cpd-space-3x));
        transform: translateY(var(--cpd-space-3x))
    }
}

@keyframes _slide-in_1x5h1_1 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(var(--cpd-space-3x));
        transform: translateY(var(--cpd-space-3x))
    }
}

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

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

._menu_1x5h1_17[data-state=open] {
    -webkit-animation: _slide-in_1x5h1_1 .18s;
    animation: _slide-in_1x5h1_1 .18s
}

._menu_1x5h1_17[data-state=closed] {
    -webkit-animation: _slide-out_1x5h1_1 .11s;
    animation: _slide-out_1x5h1_1 .11s
}

@-webkit-keyframes _fade-in_1x5h1_1 {
    0% {
        opacity: 0
    }
}

@keyframes _fade-in_1x5h1_1 {
    0% {
        opacity: 0
    }
}

@-webkit-keyframes _fade-out_1x5h1_1 {
    to {
        opacity: 0
    }
}

@keyframes _fade-out_1x5h1_1 {
    to {
        opacity: 0
    }
}

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

    ._menu_1x5h1_17[data-state=closed] {
        -webkit-animation-name: _fade-out_1x5h1_1;
        animation-name: _fade-out_1x5h1_1
    }
}

._title_1x5h1_83 {
    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: 0 var(--cpd-space-2x)
}

._bg_py3lt_17 {
    background: rgba(3, 12, 27, .528);
    inset: 0;
    position: fixed
}

._drawer_py3lt_26 {
    background: var(--cpd-color-bg-canvas-default);
    border-start-end-radius: 28px;
    border-start-end-radius: var(--border-radius);
    border-start-start-radius: 28px;
    border-start-start-radius: var(--border-radius);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    inset-block-end: 0;
    inset-inline: 0;
    padding-inline: max(0px, calc(50% - 260px));
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    --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_py3lt_26[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_py3lt_60 {
    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);
    -webkit-padding-before: calc(var(--content-inset-block-start) + var(--cpd-space-6x));
    padding-block-start: calc(var(--content-inset-block-start) + var(--cpd-space-6x));
    -webkit-padding-after: var(--cpd-space-12x);
    border-start-end-radius: var(--border-radius);
    border-start-start-radius: var(--border-radius);
    contain: paint;
    overflow: auto;
    padding-block-end: var(--cpd-space-12x);
    scrollbar-width: none;
    --cpd-separator-spacing: 0;
    --cpd-separator-inset: var(--cpd-space-4x)
}

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

._glass_1x9g9_17 {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: var(--cpd-color-alpha-gray-400);
    border-radius: var(--cpd-space-9x);
    outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
    outline-offset: calc(var(--cpd-border-width-1) * -1);
    padding: var(--cpd-space-3x)
}

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

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

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

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

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

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

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

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

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

._item_1gwvj_17 {
    display: grid;
    grid-template:"icon label ." auto "empty1 label empty2" auto/auto auto minmax(var(--cpd-space-2x), 1fr);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--cpd-color-bg-action-secondary-rest);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--cpd-color-text-secondary);
    inline-size: 100%;
    justify-items: end;
    min-inline-size: 200px;
    padding-block: var(--cpd-space-2x);
    padding-inline: var(--cpd-space-4x)
}

._item_1gwvj_17._interactive_1gwvj_36 {
    cursor: pointer
}

._item_1gwvj_17._no-label_1gwvj_40 {
    grid-template:"icon ." auto/auto 1fr
}

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

._item_1gwvj_17._no-label_1gwvj_40 ._icon_1gwvj_44, ._label_1gwvj_53 {
    -webkit-margin-end: var(--cpd-space-4x);
    margin-inline-end: var(--cpd-space-4x)
}

._label_1gwvj_53 {
    grid-area: label;
    text-align: start;
    word-break: break-word
}

._nav-hint_1gwvj_60 {
    display: none;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

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

._item_1gwvj_17[data-kind=primary] > ._label_1gwvj_53 {
    color: var(--cpd-color-text-primary)
}

._item_1gwvj_17[data-kind=primary] > ._icon_1gwvj_44 {
    color: var(--cpd-color-icon-primary)
}

._item_1gwvj_17[data-kind=primary] > ._nav-hint_1gwvj_60 {
    color: var(--cpd-color-icon-tertiary)
}

._item_1gwvj_17[data-kind=critical] > ._label_1gwvj_53 {
    color: var(--cpd-color-text-critical-primary)
}

._item_1gwvj_17[data-kind=critical] > ._icon_1gwvj_44, ._item_1gwvj_17[data-kind=critical] > ._nav-hint_1gwvj_60 {
    color: var(--cpd-color-icon-critical-primary)
}

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

    ._item_1gwvj_17._interactive_1gwvj_36[data-kind=critical]:hover {
        background: var(--cpd-color-bg-critical-subtle)
    }

    ._item_1gwvj_17._interactive_1gwvj_36:hover > ._nav-hint_1gwvj_60 {
        display: inline;
        display: initial
    }

    ._item_1gwvj_17._interactive_1gwvj_36:hover > ._nav-hint_1gwvj_60 ~ * {
        display: none
    }
}

._item_1gwvj_17._interactive_1gwvj_36[data-kind=primary]:active {
    background: var(--cpd-color-bg-action-secondary-pressed)
}

._item_1gwvj_17._interactive_1gwvj_36[data-kind=critical]:active {
    background: var(--cpd-color-bg-critical-subtle-hovered)
}

._item_1gwvj_17[data-kind]._disabled_1gwvj_119 {
    pointer-events: none
}

._item_1gwvj_17[data-kind]._disabled_1gwvj_119 > ._icon_1gwvj_44, ._item_1gwvj_17[data-kind]._disabled_1gwvj_119 > ._label_1gwvj_53, ._item_1gwvj_17[data-kind]._disabled_1gwvj_119 > ._nav-hint_1gwvj_60 {
    color: var(--cpd-color-text-disabled)
}

._search_qztja_17 {
    block-size: 36px;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    border-radius: 9999px;
    -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_qztja_17:hover {
        border-color: var(--cpd-color-border-interactive-hovered)
    }
}

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

._search_qztja_17:focus-within {
    border-color: currentcolor
}

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

@media (hover) {
    ._search_qztja_17:hover ._icon_qztja_46 {
        color: var(--cpd-color-icon-primary)
    }
}

._search_qztja_17:active ._icon_qztja_46 {
    color: var(--cpd-color-icon-primary)
}

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

._input_qztja_61::-webkit-input-placeholder {
    color: var(--cpd-color-text-placeholder)
}

._input_qztja_61::-moz-placeholder {
    color: var(--cpd-color-text-placeholder)
}

._input_qztja_61:-ms-input-placeholder {
    color: var(--cpd-color-text-placeholder)
}

._input_qztja_61::-ms-input-placeholder {
    color: var(--cpd-color-text-placeholder)
}

._input_qztja_61::placeholder {
    color: var(--cpd-color-text-placeholder)
}

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

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

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

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

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

@media (hover) {
    ._search_qztja_17:hover ._input_qztja_61::-webkit-input-placeholder {
        color: var(--cpd-color-text-secondary)
    }

    ._search_qztja_17:hover ._input_qztja_61::-moz-placeholder {
        color: var(--cpd-color-text-secondary)
    }

    ._search_qztja_17:hover ._input_qztja_61:-ms-input-placeholder {
        color: var(--cpd-color-text-secondary)
    }

    ._search_qztja_17:hover ._input_qztja_61::-ms-input-placeholder {
        color: var(--cpd-color-text-secondary)
    }

    ._search_qztja_17:hover ._input_qztja_61::placeholder {
        color: var(--cpd-color-text-secondary)
    }
}

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

._control_1qov4_22 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-padding-end: var(--cpd-space-12x) !important;
    min-inline-size: 0;
    padding-inline-end: var(--cpd-space-12x) !important
}

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

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

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

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

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

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

._control_9gon8_18 {
    background: var(--cpd-color-bg-canvas-default);
    border: 1px solid var(--cpd-color-border-interactive-primary);
    border-radius: .5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
    padding: var(--cpd-space-3x) var(--cpd-space-4x)
}

@media (hover) {
    ._control_9gon8_18:hover {
        border-color: var(--cpd-color-border-interactive-hovered);
        -webkit-box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15)
    }
}

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

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

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

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

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

._control_9gon8_18._enable-ligatures_9gon8_70 {
    -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)
}

._tooltip_svz44_17 {
    background: var(--cpd-color-alpha-gray-1400);
    border-radius: 4px;
    color: var(--cpd-color-text-on-solid-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font: var(--cpd-font-body-xs-medium);
    padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
    -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
}

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

._arrow_svz44_34 {
    fill: var(--cpd-color-alpha-gray-1400)
}

._container_9zyti_18 {
    --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(--cpd-space-3x);
    gap: var(--gap);
    position: relative
}

._control_9zyti_33 {
    all: unset;
    font-family: var(--cpd-font-family-mono), ui-monospace, monospace;
    font-weight: 700;
    inset: 0;
    letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);
    line-height: var(--digit-height);
    position: absolute;
    -webkit-padding-start: calc(var(--cpd-space-10x) / 2 - .5ch);
    padding-inline-start: calc(var(--cpd-space-10x) / 2 - .5ch);
    -webkit-margin-end: calc((var(--cpd-space-10x) + var(--cpd-space-3x)) * -1);
    margin-inline-end: calc((var(--cpd-space-10x) + var(--cpd-space-3x)) * -1)
}

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

@media (hover) {
    ._control_9zyti_33:hover ~ ._digit_9zyti_57 {
        border-color: var(--cpd-color-border-interactive-hovered);
        -webkit-box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15)
    }
}

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

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

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

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

._control_9zyti_33[data-invalid] ~ ._digit_9zyti_57 {
    border-color: var(--cpd-color-text-critical-primary)
}

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

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

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

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

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

._ui_1jek6_27 {
    border: 1px solid;
    border-color: var(--cpd-color-border-interactive-primary);
    border-radius: 4px;
    color: transparent;
    pointer-events: none
}

._ui_1jek6_27 svg {
    block-size: var(--size);
    inline-size: var(--size);
    margin: -1px
}

._input_1jek6_26:checked + ._ui_1jek6_27 {
    background-color: var(--cpd-color-bg-action-primary-rest);
    border-color: var(--cpd-color-bg-action-primary-rest);
    color: var(--cpd-color-icon-on-solid-primary)
}

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

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

._input_1jek6_26[readonly] {
    pointer-events: none
}

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

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

._input_1jek6_26[readonly]:checked + ._ui_1jek6_27 {
    color: var(--cpd-color-icon-secondary)
}

@media (hover) {
    ._input_1jek6_26:not([disabled],[readonly],:checked):hover + ._ui_1jek6_27 {
        border-color: var(--cpd-color-border-interactive-hovered);
        -webkit-box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15);
        color: var(--cpd-color-icon-quaternary)
    }

    ._input_1jek6_26:not([disabled],[readonly]):checked:hover + ._ui_1jek6_27 {
        background: var(--cpd-color-bg-action-primary-hovered);
        border-color: var(--cpd-color-bg-action-primary-hovered)
    }

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

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

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

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

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

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

._ui_bdln6_27 {
    border: 1px solid;
    border-color: var(--cpd-color-border-interactive-primary);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    pointer-events: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

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

._input_bdln6_26:checked + ._ui_bdln6_27 {
    background-color: var(--cpd-color-bg-action-primary-rest);
    border-color: var(--cpd-color-bg-action-primary-rest)
}

._input_bdln6_26:checked + ._ui_bdln6_27:after {
    background: var(--cpd-color-icon-on-solid-primary)
}

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

._input_bdln6_26[readonly] {
    pointer-events: none
}

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

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

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

._input_bdln6_26[readonly]:checked + ._ui_bdln6_27:after {
    background-color: var(--cpd-color-icon-secondary)
}

@media (hover) {
    ._input_bdln6_26:not([disabled],[readonly],:checked):hover + ._ui_bdln6_27 {
        border-color: var(--cpd-color-border-interactive-hovered);
        -webkit-box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15)
    }

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

    ._input_bdln6_26:not([disabled],[readonly]):checked:hover + ._ui_bdln6_27 {
        background: var(--cpd-color-bg-action-primary-hovered);
        border-color: var(--cpd-color-bg-action-primary-hovered)
    }

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

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

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

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

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

._container_ik1u1_18 > ._input_ik1u1_32 {
    cursor: pointer;
    margin: 0;
    opacity: 0
}

._container_ik1u1_18 > ._input_ik1u1_32[disabled] {
    cursor: not-allowed
}

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

._input_ik1u1_32:checked + ._ui_ik1u1_42 {
    background: var(--cpd-color-bg-action-primary-rest);
    border-color: var(--cpd-color-bg-action-primary-rest)
}

._ui_ik1u1_42:after {
    aspect-ratio: 1/1;
    background: var(--cpd-color-bg-action-primary-rest);
    block-size: 100%;
    border-radius: 50%;
    content: "";
    display: block;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -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;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out
}

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

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

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

:checked:active + ._ui_ik1u1_42 {
    background: var(--cpd-color-bg-action-primary-hovered);
    border-color: var(--cpd-color-bg-action-primary-hovered)
}

._input_ik1u1_32[readonly] {
    pointer-events: none
}

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

._input_ik1u1_32[readonly] + ._ui_ik1u1_42:after {
    background: var(--cpd-color-icon-secondary)
}

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

._input_ik1u1_32[disabled] + ._ui_ik1u1_42:after {
    background: var(--cpd-color-bg-action-primary-disabled)
}

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

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

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

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

@media (hover) {
    ._input_ik1u1_32:not(:checked,[disabled],[readonly]):hover + ._ui_ik1u1_42 {
        border-color: var(--cpd-color-border-interactive-hovered);
        -webkit-box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 1.2px 2.4px 0 rgba(0, 0, 0, .15)
    }
}

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

._root_578ve_24 {
    gap: var(--cpd-space-5x)
}

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

._field_578ve_34 {
    gap: var(--cpd-space-1x)
}

._inline-field_578ve_40 {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: var(--cpd-space-5x)
}

._inline-field-body_578ve_46, ._inline-field_578ve_40 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal
}

._inline-field-body_578ve_46 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column
}

._inline-field-control_578ve_52 {
    block-size: calc(var(--cpd-font-size-body-md) * var(--cpd-font-line-height-regular));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

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

._label_578ve_67[for] {
    cursor: pointer
}

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

._inline-field-body_578ve_46 ._label_578ve_67 {
    font: var(--cpd-font-body-md-regular)
}

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

._message_578ve_98 {
    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_578ve_104 {
    color: var(--cpd-color-text-secondary)
}

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

._inline-field-control_578ve_52:has(input[disabled]) ~ ._inline-field-body_578ve_46 ._message_578ve_98, :has(input[disabled]) ~ ._message_578ve_98, input[disabled] ~ ._message_578ve_98 {
    color: var(--cpd-color-text-disabled)
}

._message_578ve_98 > svg {
    display: inline-block;
    vertical-align: bottom;
    -webkit-margin-end: var(--cpd-space-2x);
    block-size: calc(1em * var(--cpd-font-line-height-regular));
    inline-size: calc(1em * var(--cpd-font-line-height-regular));
    margin-inline-end: var(--cpd-space-2x)
}

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

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

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

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

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

._content_1oa1y_17 {
    background: var(--cpd-color-bg-action-primary-rest);
    border-radius: var(--cpd-space-3x);
    -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1);
    display: grid;
    grid-template:"header button" auto "description button" auto;
    max-inline-size: 320px;
    padding: var(--cpd-space-5x) var(--cpd-space-6x);
    -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_1oa1y_46 {
    color: var(--cpd-color-text-on-solid-primary);
    grid-area: header;
    margin: 0
}

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

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

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

:root {
    --cpd-radius-pill-effect: 9999px;
    --cpd-icon-button-size: var(--cpd-space-8x);
    --cpd-avatar-size: var(--cpd-space-16x);
    --cpd-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    --cpd-separator-spacing: var(--cpd-space-2x);
    --cpd-separator-inset: 0
}

body, html, input {
    color: var(--cpd-color-text-primary);
    font: var(--cpd-font-body-md-regular);
    -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)
}

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

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

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

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

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

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

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

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

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

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

.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate, .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas, .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
}

.mapboxgl-canvas-container.mapboxgl-touch-drag-pan, .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas, .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
}

.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas, .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
}

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

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

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

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

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

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

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

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

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

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

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

.mapboxgl-ctrl-group:not(:empty), .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 (-ms-high-contrast: active) {
    .mapboxgl-ctrl-group:not(:empty), .maplibregl-ctrl-group:not(:empty) {
        -webkit-box-shadow: 0 0 0 2px ButtonText;
        box-shadow: 0 0 0 2px ButtonText
    }
}

.mapboxgl-ctrl-group button, .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
}

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

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

@media (-ms-high-contrast: active) {
    .mapboxgl-ctrl-icon, .maplibregl-ctrl-icon {
        background-color: transparent
    }

    .mapboxgl-ctrl-group button + button, .maplibregl-ctrl-group button + button {
        border-top: 1px solid ButtonText
    }
}

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

.mapboxgl-ctrl-attrib-button:focus, .mapboxgl-ctrl-group button:focus, .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
}

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

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

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

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

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

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

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

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

.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon, .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'%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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon, .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'%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 (-ms-high-contrast: active) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon, .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'%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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon, .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'%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 (-ms-high-contrast: black-on-white) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon, .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'%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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon, .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'%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")
    }
}

.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon, .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'%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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon, .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'%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 (-ms-high-contrast: active) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon, .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'%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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon, .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'%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 (-ms-high-contrast: black-on-white) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon, .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'%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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon, .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'%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")
    }
}

.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon, .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'%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 (-ms-high-contrast: active) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon, .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'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23999' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")
    }
}

@media (-ms-high-contrast: black-on-white) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon, .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'%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")
    }
}

.mapboxgl-ctrl button.mapboxgl-ctrl-terrain .mapboxgl-ctrl-icon, .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'%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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-terrain-enabled .mapboxgl-ctrl-icon, .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'%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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon, .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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon, .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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon, .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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon, .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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon, .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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon, .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")
}

.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon, .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 (-ms-high-contrast: active) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon, .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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon, .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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon, .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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon, .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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon, .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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon, .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 (-ms-high-contrast: black-on-white) {
    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon, .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")
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon, .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.mapboxgl-ctrl-logo, 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%3Cg fill-rule='evenodd' stroke-width='1.036'%3E%3Cpath fill='%23000' fill-opacity='.4' d='m8.166 16.146-.002.002a1.54 1.54 0 0 1-2.009 0l-.002-.002-.043-.034-.002-.002-.199-.162H4.377a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659H8.411l-.202.164zm-1.121-.905a.3.3 0 0 0 .113.023.3.3 0 0 0 .189-.07l.077-.063c.634-.508 4.672-3.743 4.672-7.575 0-2.55-2.215-4.625-4.938-4.625S2.221 5.006 2.221 7.556c0 3.225 2.86 6.027 4.144 7.137h.004l.04.038.484.4.077.063a1 1 0 0 0 .074.047zm-2.52-.548a17 17 0 0 1-1.183-1.315C2.187 11.942.967 9.897.967 7.555c0-3.319 2.855-5.88 6.192-5.88s6.193 2.561 6.193 5.881c0 2.34-1.22 4.387-2.376 5.822a17 17 0 0 1-1.182 1.315h.15a1.91 1.91 0 0 1 1.914 1.914v1.84a1.91 1.91 0 0 1-1.914 1.914H4.377a1.91 1.91 0 0 1-1.914-1.914v-1.84a1.91 1.91 0 0 1 1.914-1.914zm3.82-6.935c0 .692-.55 1.222-1.187 1.222s-1.185-.529-1.185-1.222.548-1.222 1.185-1.222c.638 0 1.186.529 1.186 1.222zm-1.186 2.477c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477zm2.048 7.71H5.114v-.838h4.093z'/%3E%3Cpath fill='%23e1e3e9' d='M2.222 7.555c0-2.55 2.214-4.625 4.937-4.625s4.938 2.075 4.938 4.625c0 3.832-4.038 7.068-4.672 7.575l-.077.063a.3.3 0 0 1-.189.07.3.3 0 0 1-.188-.07l-.077-.063c-.634-.507-4.672-3.743-4.672-7.575m4.937 2.68c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477z'/%3E%3Cpath fill='%23fff' d='M4.377 15.948a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659zm4.83 1.16H5.114v.838h4.093z'/%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.mapboxgl-ctrl-logo.mapboxgl-compact, a.maplibregl-ctrl-logo.maplibregl-compact {
    width: 14px
}

@media (-ms-high-contrast: active) {
    a.mapboxgl-ctrl-logo, 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%3Cg fill-rule='evenodd' stroke-width='1.036'%3E%3Cpath fill='%23000' fill-opacity='.4' d='m8.166 16.146-.002.002a1.54 1.54 0 0 1-2.009 0l-.002-.002-.043-.034-.002-.002-.199-.162H4.377a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659H8.411l-.202.164zm-1.121-.905a.3.3 0 0 0 .113.023.3.3 0 0 0 .189-.07l.077-.063c.634-.508 4.672-3.743 4.672-7.575 0-2.55-2.215-4.625-4.938-4.625S2.221 5.006 2.221 7.556c0 3.225 2.86 6.027 4.144 7.137h.004l.04.038.484.4.077.063a1 1 0 0 0 .074.047zm-2.52-.548a17 17 0 0 1-1.183-1.315C2.187 11.942.967 9.897.967 7.555c0-3.319 2.855-5.88 6.192-5.88s6.193 2.561 6.193 5.881c0 2.34-1.22 4.387-2.376 5.822a17 17 0 0 1-1.182 1.315h.15a1.91 1.91 0 0 1 1.914 1.914v1.84a1.91 1.91 0 0 1-1.914 1.914H4.377a1.91 1.91 0 0 1-1.914-1.914v-1.84a1.91 1.91 0 0 1 1.914-1.914zm3.82-6.935c0 .692-.55 1.222-1.187 1.222s-1.185-.529-1.185-1.222.548-1.222 1.185-1.222c.638 0 1.186.529 1.186 1.222zm-1.186 2.477c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477zm2.048 7.71H5.114v-.838h4.093z'/%3E%3Cpath fill='%23e1e3e9' d='M2.222 7.555c0-2.55 2.214-4.625 4.937-4.625s4.938 2.075 4.938 4.625c0 3.832-4.038 7.068-4.672 7.575l-.077.063a.3.3 0 0 1-.189.07.3.3 0 0 1-.188-.07l-.077-.063c-.634-.507-4.672-3.743-4.672-7.575m4.937 2.68c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477z'/%3E%3Cpath fill='%23fff' d='M4.377 15.948a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659zm4.83 1.16H5.114v.838h4.093z'/%3E%3C/g%3E%3C/svg%3E")
    }
}

@media (-ms-high-contrast: black-on-white) {
    a.mapboxgl-ctrl-logo, 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%3Cg fill-rule='evenodd' stroke-width='1.036'%3E%3Cpath fill='%23000' fill-opacity='.4' d='m8.166 16.146-.002.002a1.54 1.54 0 0 1-2.009 0l-.002-.002-.043-.034-.002-.002-.199-.162H4.377a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659H8.411l-.202.164zm-1.121-.905a.3.3 0 0 0 .113.023.3.3 0 0 0 .189-.07l.077-.063c.634-.508 4.672-3.743 4.672-7.575 0-2.55-2.215-4.625-4.938-4.625S2.221 5.006 2.221 7.556c0 3.225 2.86 6.027 4.144 7.137h.004l.04.038.484.4.077.063a1 1 0 0 0 .074.047zm-2.52-.548a17 17 0 0 1-1.183-1.315C2.187 11.942.967 9.897.967 7.555c0-3.319 2.855-5.88 6.192-5.88s6.193 2.561 6.193 5.881c0 2.34-1.22 4.387-2.376 5.822a17 17 0 0 1-1.182 1.315h.15a1.91 1.91 0 0 1 1.914 1.914v1.84a1.91 1.91 0 0 1-1.914 1.914H4.377a1.91 1.91 0 0 1-1.914-1.914v-1.84a1.91 1.91 0 0 1 1.914-1.914zm3.82-6.935c0 .692-.55 1.222-1.187 1.222s-1.185-.529-1.185-1.222.548-1.222 1.185-1.222c.638 0 1.186.529 1.186 1.222zm-1.186 2.477c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477zm2.048 7.71H5.114v-.838h4.093z'/%3E%3Cpath fill='%23e1e3e9' d='M2.222 7.555c0-2.55 2.214-4.625 4.937-4.625s4.938 2.075 4.938 4.625c0 3.832-4.038 7.068-4.672 7.575l-.077.063a.3.3 0 0 1-.189.07.3.3 0 0 1-.188-.07l-.077-.063c-.634-.507-4.672-3.743-4.672-7.575m4.937 2.68c1.348 0 2.442-1.11 2.442-2.478S8.507 5.28 7.159 5.28 4.72 6.39 4.72 7.758s1.092 2.477 2.44 2.477z'/%3E%3Cpath fill='%23fff' d='M4.377 15.948a.657.657 0 0 0-.659.659v1.84a.657.657 0 0 0 .659.659h5.565a.657.657 0 0 0 .659-.659v-1.84a.657.657 0 0 0-.659-.659zm4.83 1.16H5.114v.838h4.093z'/%3E%3C/g%3E%3C/svg%3E")
    }
}

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

@media screen {
    .mapboxgl-ctrl-attrib.mapboxgl-compact, .maplibregl-ctrl-attrib.maplibregl-compact {
        background-color: #fff;
        border-radius: 12px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        margin: 10px;
        min-height: 20px;
        padding: 2px 24px 2px 0;
        position: relative
    }

    .mapboxgl-ctrl-attrib.mapboxgl-compact-show, .maplibregl-ctrl-attrib.maplibregl-compact-show {
        padding: 2px 28px 2px 8px;
        visibility: visible
    }

    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show, .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show, .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
    }

    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner, .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
        display: none
    }

    .mapboxgl-ctrl-attrib-button, .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
    }

    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button, .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button, .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button, .maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button {
        left: 0
    }

    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button, .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner, .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button, .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
        display: block
    }

    .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button, .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
        background-color: rgb(0 0 0/5%)
    }

    .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after, .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact:after {
        bottom: 0;
        right: 0
    }

    .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after, .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact:after {
        right: 0;
        top: 0
    }

    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after, .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact:after {
        left: 0;
        top: 0
    }

    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after, .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact:after {
        bottom: 0;
        left: 0
    }
}

@media screen and (-ms-high-contrast: active) {
    .mapboxgl-ctrl-attrib.mapboxgl-compact:after, .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 (-ms-high-contrast: black-on-white) {
    .mapboxgl-ctrl-attrib.mapboxgl-compact:after, .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")
    }
}

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

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

.mapboxgl-attrib-empty, .maplibregl-attrib-empty {
    display: none
}

.mapboxgl-ctrl-scale, .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
}

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

.mapboxgl-popup-anchor-top, .mapboxgl-popup-anchor-top-left, .mapboxgl-popup-anchor-top-right, .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
}

.mapboxgl-popup-anchor-bottom, .mapboxgl-popup-anchor-bottom-left, .mapboxgl-popup-anchor-bottom-right, .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
}

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

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

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

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

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .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
}

.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip, .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
}

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

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .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
}

.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip, .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
}

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

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

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

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

.mapboxgl-popup-content, .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
}

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

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

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

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

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

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

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

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

.mapboxgl-marker, .maplibregl-marker {
    left: 0;
    position: absolute;
    top: 0;
    will-change: transform
}

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

.mapboxgl-user-location-dot:before, .maplibregl-user-location-dot:before {
    -webkit-animation: maplibregl-user-location-dot-pulse 2s infinite;
    animation: maplibregl-user-location-dot-pulse 2s infinite;
    background-color: #1da1f2;
    border-radius: 50%;
    content: "";
    height: 15px;
    position: absolute;
    width: 15px
}

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

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

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

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

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

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

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

.mapboxgl-boxzoom, .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);
    bottom: 0;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.4em;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    line-height: 1.2;
    opacity: 0;
    padding: 1rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: opacity 1s ease 1s;
    transition: opacity 1s ease 1s
}

.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),(max-width: 480px) {
    .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message {
        display: none
    }

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

:root {
    font-size: 10px;
    --container-border-width: 8px;
    --container-gap-width: 8px;
    --transition-short: 0.1s;
    --transition-standard: 0.3s;
    --buttons-dialog-gap-row: 8px;
    --buttons-dialog-gap-column: 8px;
    --MBody-border-radius: 8px;
    --dialog-zIndex-wrapper-default: 4000;
    --dialog-zIndex-static-background: 4009;
    --dialog-zIndex-static: calc(var(--dialog-zIndex-static-background) + 1);
    --dialog-zIndex-standard-background: calc(var(--dialog-zIndex-static) + 1);
    --dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1)
}

#matrixchat {
    contain: strict
}

#mx_ContextualMenu_Container, #mx_Dialog_Container, #mx_Dialog_StaticContainer, #mx_PersistedElement_container {
    isolation: isolate
}

[class^=cpd-theme][class^=cpd-theme] {
    --cpd-font-family-sans: var(--font-family, "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji")
}

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

html {
    height: 100%;
    overflow: hidden;
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

body {
    background-color: var(--timeline-background-color);
    border: 0;
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    letter-spacing: var(--cpd-font-letter-spacing-body-md);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

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

.error, .text-error, .text-warning, .warning {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.text-success {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.text-muted {
    color: #a1b2d1
}

.text-primary {
    color: var(--timeline-text-color)
}

.text-secondary {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_Verified {
    color: #0dbd8b
}

.mx_Untrusted {
    color: #ff5b55
}

b {
    font-weight: 700
}

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

a:hover, a:link, a:visited {
    color: var(--primary-color)
}

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

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

input[type=search].mx_textinput_icon.mx_textinput_search, input[type=text].mx_textinput_icon.mx_textinput_search {
    background-image: url(../../img/feather-customised/search-input.5d69fb5.svg)
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
    display: none
}

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

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

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

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

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

input[type=password], input[type=text], textarea {
    background-color: transparent;
    color: var(--timeline-text-color)
}

textarea {
    color: var(--timeline-text-color)
}

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

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

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

summary {
    cursor: pointer
}

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

.mx_Dialog .mx_textinput > input[type=search], .mx_Dialog .mx_textinput > input[type=text], .mx_MatrixChat_wrapper .mx_textinput > input[type=search], .mx_MatrixChat_wrapper .mx_textinput > input[type=text] {
    border: none;
    -webkit-box-flex: 1;
    color: var(--timeline-text-color);
    -ms-flex: 1;
    flex: 1
}

.mx_Dialog .mx_textinput, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], .mx_MatrixChat_wrapper .mx_textinput, .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_MatrixChat_wrapper :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text] {
    background-color: transparent;
    border: 1px solid var(--secondary-hairline-color);
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #61708b;
    display: block;
    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 .mx_textinput input::-webkit-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::-webkit-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::-webkit-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-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 :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::-webkit-input-placeholder {
    color: var(--cpd-color-text-placeholder)
}

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

.mx_Dialog .mx_textinput input:-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]:-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]:-ms-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input:-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 :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]:-ms-input-placeholder {
    color: var(--cpd-color-text-placeholder)
}

.mx_Dialog .mx_textinput input::-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::-ms-input-placeholder, .mx_Dialog :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::-ms-input-placeholder, .mx_MatrixChat_wrapper .mx_textinput input::-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 :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::-ms-input-placeholder {
    color: var(--cpd-color-text-placeholder)
}

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

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

#mx_theme_accentColor {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

#mx_theme_secondaryAccentColor {
    color: var(--roomlist-background-color)
}

.mx_Dialog_wrapper {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4000;
    z-index: var(--dialog-zIndex-wrapper-default);
    -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, .mx_Dialog_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_Dialog_border {
    max-height: calc(100% - var(--cpd-space-12x));
    position: relative;
    z-index: 4012;
    z-index: var(--dialog-zIndex-standard);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_Dialog_lightbox .mx_Dialog_border {
    display: contents
}

.mx_Dialog {
    background-color: var(--timeline-background-color);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--timeline-text-secondary-color);
    font-size: .9375rem;
    overflow-y: auto;
    padding: var(--cpd-space-8x) var(--cpd-space-10x);
    position: relative
}

.mx_Dialog_staticWrapper .mx_Dialog {
    contain: content;
    z-index: 4010;
    z-index: var(--dialog-zIndex-static)
}

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

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

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

.mx_Dialog .markdown-body code {
    white-space: pre-wrap
}

.mx_Dialog .markdown-body pre {
    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
}

.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 {
    color: inherit;
    font-family: inherit !important
}

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

.mx_Dialog .markdown-body a {
    color: var(--primary-color)
}

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

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

.mx_Dialog_background {
    background-color: var(--sidebar-color-50pct);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4011;
    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 {
    opacity: .4
}

.mx_Dialog_lightbox .mx_Dialog_background {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: mx_Dialog_lightbox_background_keyframes;
    animation-name: mx_Dialog_lightbox_background_keyframes;
    background-color: #000;
    opacity: .85
}

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

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

.mx_Dialog_title.danger {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_Dialog_header {
    padding: 0;
    position: relative;
    -webkit-padding-end: 20px;
    margin-bottom: var(--cpd-space-2x);
    padding-inline-end: 20px
}

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

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

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

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

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

.mx_Dialog_content {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    margin: 24px 0 68px;
    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 {
    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;
    -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);
    margin-inline-start: auto;
    row-gap: 8px;
    row-gap: var(--buttons-dialog-gap-row)
}

.mx_Dialog_buttons .mx_Dialog_buttons_row button {
    margin: 0 !important
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton), .mx_Dialog input[type=submit], .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type=submit] {
    background-color: var(--cpd-color-bg-action-primary-rest);
    border: 0;
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: var(--cpd-font-body-md-regular);
    padding: 7px 1.5em;
    vertical-align: middle;
    width: auto
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):not(:focus-visible), .mx_Dialog input[type=submit]:not(:focus-visible), .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(:focus-visible), .mx_Dialog_buttons input[type=submit]:not(:focus-visible) {
    outline: none
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton), .mx_Dialog input[type=submit], .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type=submit] {
    background-color: transparent;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    color: var(--cpd-color-text-primary);
    font-family: inherit;
    font-weight: var(--cpd-font-weight-semibold);
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 8px;
    margin-right: var(--buttons-dialog-gap-column)
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):last-child {
    margin-right: 0
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):focus, .mx_Dialog input[type=submit]:focus, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.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):not([class|=maplibregl]), .mx_Dialog input[type=submit].mx_Dialog_primary, .mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type=submit].mx_Dialog_primary {
    background-color: var(--cpd-color-bg-action-primary-rest);
    border-color: var(--cpd-color-bg-action-primary-rest);
    color: var(--cpd-color-text-on-solid-primary);
    min-width: 156px
}

.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]), .mx_Dialog input[type=submit].danger, .mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type=submit].danger {
    background-color: var(--cpd-color-bg-critical-primary);
    border: 1px solid var(--cpd-color-bg-critical-primary);
    color: var(--cpd-color-text-on-solid-primary)
}

.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]), .mx_Dialog input[type=submit].warning {
    border: 1px solid var(--cpd-color-border-critical-subtle);
    color: var(--cpd-color-text-critical-primary)
}

.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):disabled, .mx_Dialog input[type=submit]:disabled, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled, .mx_Dialog_buttons input[type=submit]:disabled {
    background-color: var(--timeline-text-secondary-color);
    border: 1px solid var(--timeline-text-secondary-color);
    opacity: .7
}

.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog_border {
    display: contents
}

.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
    block-size: auto;
    border-radius: 8px;
    -webkit-box-shadow: none;
    box-shadow: none;
    inline-size: auto;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 8px
}

.mx_GeneralButton {
    background-color: var(--cpd-color-bg-action-primary-rest);
    border: 0;
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: var(--cpd-font-body-md-regular);
    padding: 7px 1.5em;
    vertical-align: middle;
    width: auto
}

.mx_GeneralButton:not(:focus-visible) {
    outline: none
}

.mx_GeneralButton {
    display: inline;
    margin: auto
}

.mx_TextInputDialog_label {
    padding-bottom: 12px;
    text-align: left
}

.mx_TextInputDialog_input {
    background-color: var(--timeline-background-color);
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    color: var(--timeline-text-color);
    font-size: .9375rem;
    padding: 9px
}

.mx_button_row {
    margin-top: 69px
}

.mx_Username_color1 {
    color: var(--cpd-color-text-decorative-1)
}

.mx_Username_color2 {
    color: var(--cpd-color-text-decorative-2)
}

.mx_Username_color3 {
    color: var(--cpd-color-text-decorative-3)
}

.mx_Username_color4 {
    color: var(--cpd-color-text-decorative-4)
}

.mx_Username_color5 {
    color: var(--cpd-color-text-decorative-5)
}

.mx_Username_color6 {
    color: var(--cpd-color-text-decorative-6)
}

.mx_AppPermission, .mx_AppWarning {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    text-align: center;
    -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
}

.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;
    border-bottom: 1px solid #21262c;
    border-bottom: 1px solid var(--system, #21262c);
    cursor: pointer;
    padding: 12px 0
}

.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;
    border: 2px solid #5c56f5;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex: 0 0;
    flex: 0 0;
    margin-right: 8px
}

.mx_BeaconListItem_info {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    width: 0;
    -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 {
    margin-bottom: 8px;
    padding: 0 !important
}

.mx_BeaconListItem_status .mx_BeaconStatus_label {
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_BeaconListItem_lastUpdated {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .625rem
}

.mx_BeaconListItem_interactions, .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
}

.mx_BeaconStatus {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--color);
    font-size: .75rem;
    justify-content: flex-start;
    padding: 8px
}

.mx_BeaconStatus_Loading, .mx_BeaconStatus_Stopped {
    --color: var(--tertiary-content, #edf3ff)
}

.mx_BeaconStatus_Active, .mx_BeaconStatus_Error {
    --color: var(--timeline-text-color)
}

.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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: .875rem;
    overflow: hidden;
    padding-right: 8px;
    white-space: nowrap
}

.mx_BeaconStatus_description .mx_BeaconStatus_description_status {
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_BeaconStatus_expiryTime {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_BeaconStatus_label {
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_BeaconStatusTooltip {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 38px;
    max-width: 150px;
    padding-top: 8px;
    position: absolute;
    top: 42px
}

.mx_BeaconStatusTooltip_inner {
    background: var(--timeline-background-color);
    border-radius: 4px;
    -webkit-box-shadow: 4px 4px 12px 0 #181b21;
    box-shadow: 4px 4px 12px 0 #181b21;
    height: 100%;
    position: relative
}

.mx_BeaconViewDialog_wrapper .mx_Dialog {
    contain: unset;
    padding: 0;
    position: static
}

.mx_BeaconViewDialog {
    height: calc(80vh - .5px);
    overflow: hidden;
    position: relative;
    width: calc(80vw - .5px)
}

.mx_BeaconViewDialog .mx_Dialog_header {
    margin: 0;
    padding: 0;
    position: static
}

.mx_BeaconViewDialog .mx_Dialog_header .mx_Dialog_title {
    display: none
}

.mx_BeaconViewDialog .mx_Dialog_header .mx_Dialog_cancelButton {
    background-color: #edf3ff;
    height: 20px;
    position: fixed;
    right: 5vw;
    top: 5vh;
    width: 20px;
    z-index: 4010
}

.mx_BeaconViewDialog_map {
    border-radius: 8px;
    height: 80vh;
    width: 80vw
}

.mx_BeaconViewDialog_mapFallbackMessage {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin-bottom: 16px
}

.mx_BeaconViewDialog_viewListButton {
    left: 24px;
    position: absolute;
    top: 24px
}

.mx_DialogOwnBeaconStatus {
    bottom: 32px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 50%;
    margin-left: -150px;
    position: absolute;
    width: 300px;
    -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;
    background: var(--timeline-background-color);
    border-radius: 8px;
    -webkit-box-shadow: 4px 4px 12px 0 #181b21;
    box-shadow: 4px 4px 12px 0 #181b21;
    justify-content: stretch;
    padding: 0 12px
}

.mx_DialogOwnBeaconStatus_avatarIcon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0;
    flex: 0 0;
    height: 32px;
    margin: 8px 0;
    width: 32px
}

.mx_DialogOwnBeaconStatus_avatar {
    -webkit-box-flex: 0;
    border: 2px solid #5c56f5;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex: 0 0;
    flex: 0 0;
    margin: 8px 0
}

.mx_DialogOwnBeaconStatus_status {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    padding-right: 0
}

.mx_DialogSidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 265px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: var(--timeline-background-color);
    -webkit-box-shadow: 0 4px 4px #181b21;
    box-shadow: 0 4px 4px #181b21;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 16px
}

.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;
    color: var(--timeline-text-color);
    -ms-flex: 0 0;
    flex: 0 0;
    margin-bottom: 16px
}

.mx_DialogSidebar .mx_DialogSidebar_header .mx_DialogSidebar_closeButtonIcon {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    height: 12px
}

.mx_DialogSidebar .mx_DialogSidebar_list {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    overflow: auto;
    width: 100%
}

.mx_DialogSidebar_noResults {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-md-regular)
}

.mx_LeftPanelLiveShareWarning {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: .625rem;
    padding: 4px;
    text-align: center;
    width: 100%;
    z-index: 1
}

.mx_LeftPanelLiveShareWarning__error {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

.mx_LiveTimeRemaining {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem
}

.mx_OwnBeaconStatus_button {
    margin-left: 8px
}

.mx_EventTile[data-layout=bubble] .mx_OwnBeaconStatus_button {
    -ms-flex-item-align: start;
    align-self: start
}

.mx_OwnBeaconStatus_destructiveButton {
    color: #ff5b55 !important;
    color: var(--alert, #ff5b55) !important;
    font-weight: var(--cpd-font-weight-semibold) !important
}

.mx_RoomLiveShareWarning {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -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;
    background-color: #21262c;
    background-color: var(--system, #21262c);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--timeline-text-color);
    cursor: pointer;
    padding: 12px 16px
}

.mx_RoomLiveShareWarning_icon {
    height: 32px;
    margin-right: 8px;
    width: 32px
}

.mx_RoomLiveShareWarning_label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: .9375rem
}

.mx_RoomLiveShareWarning_spinner {
    margin-right: 16px
}

.mx_RoomLiveShareWarning_closeButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 0 16px;
    padding: 0
}

.mx_RoomLiveShareWarning_stopButton {
    margin-left: 16px
}

.mx_RoomLiveShareWarning_closeButtonIcon {
    height: 1.125rem;
    padding: 4px
}

.mx_ShareLatestLocation_icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    height: 13px;
    width: 13px
}

.mx_CopyableText.mx_ShareLatestLocation_copy .mx_CopyableText_copyButton {
    height: 13px;
    margin-left: 8px !important;
    position: relative;
    top: -1px;
    width: 13px
}

.mx_CopyableText.mx_ShareLatestLocation_copy .mx_CopyableText_copyButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    height: 13px;
    width: 13px
}

.mx_StyledLiveBeaconIcon {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    background-color: #5c56f5;
    border: 2px solid #5c56f5;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    flex-shrink: 0;
    padding: 2px
}

.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    border-color: #ff5b55;
    border-color: var(--alert, #ff5b55)
}

.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
    background-color: #6f7882;
    background-color: var(--quaternary-content, #6f7882);
    border-color: #6f7882;
    border-color: var(--quaternary-content, #6f7882)
}

.mx_KebabContextMenu_icon {
    color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    width: 24px
}

.mx_PollDetailHeader {
    font-size: .9375rem !important
}

.mx_PollDetailHeader_icon {
    height: 15px;
    margin-right: 8px;
    vertical-align: middle;
    width: 15px
}

.mx_PollListItem {
    width: 100%
}

.mx_PollListItem_content {
    display: grid;
    width: 100%;
    -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;
    color: var(--timeline-text-color);
    cursor: pointer;
    grid-template-columns:auto auto auto;
    grid-template-rows:auto
}

.mx_PollListItem_icon {
    color: #6f7882;
    color: var(--quaternary-content, #6f7882);
    height: 14px;
    padding-left: 8px;
    width: 14px
}

.mx_PollListItem_question {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_PollListItemEnded {
    width: 100%
}

.mx_PollListItemEnded_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    color: var(--timeline-text-color);
    cursor: pointer;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_PollListItemEnded_title {
    display: grid;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-gap: 8px;
    grid-template-columns:-webkit-min-content 1fr -webkit-min-content;
    grid-template-columns:min-content 1fr min-content;
    grid-template-rows:auto
}

.mx_PollListItemEnded_icon {
    color: #6f7882;
    color: var(--quaternary-content, #6f7882);
    height: 14px;
    padding-left: 8px;
    width: 14px
}

.mx_PollListItemEnded_date {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem
}

.mx_PollListItemEnded_question {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_PollListItemEnded_answers {
    display: grid;
    grid-gap: 8px;
    margin-top: 12px
}

.mx_PollListItemEnded_voteCount {
    margin: 8px 0 0 6px
}

.mx_AppPermission {
    font-size: .75rem;
    overflow-y: scroll;
    width: 100%
}

.mx_AppPermission .mx_AppPermission_bolder {
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_AppPermission .mx_AppPermission_content {
    margin-block: auto
}

.mx_AppPermission .mx_AppPermission_content > div {
    margin-block: 12px
}

.mx_AppPermission .mx_AppPermission_content .mx_AppPermission_content_bolder {
    font-weight: var(--font-semi-bold)
}

.mx_AppPermission .mx_AppPermission_content .mx_TextWithTooltip_target--helpIcon {
    display: inline-block;
    height: .875rem;
    vertical-align: middle
}

.mx_AppPermission .mx_AppPermission_content .mx_TextWithTooltip_target--helpIcon .mx_Icon {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_Tooltip.mx_Tooltip--appPermission {
    background-color: var(--sidebar-color);
    border: none;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    padding: 6px 8px
}

.mx_Tooltip.mx_Tooltip--appPermission.mx_Tooltip--appPermission--dark .mx_Tooltip_chevron:after {
    border-right-color: var(--sidebar-color)
}

.mx_Tooltip.mx_Tooltip--appPermission ul {
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2px
}

.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 {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px rgba(23, 25, 28, .05);
    box-shadow: 0 1px 3px rgba(23, 25, 28, .05);
    left: auto;
    margin-top: 4px;
    padding: 12px;
    right: -12px;
    width: 232px
}

.mx_FilterDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight {
    background-color: transparent
}

.mx_FilterDropdown .mx_Dropdown_input {
    background-color: transparent;
    border-color: transparent;
    border-radius: 4px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    height: 24px
}

.mx_FilterDropdown .mx_Dropdown_input:focus, .mx_FilterDropdown .mx_Dropdown_input:hover {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-color: #6f7882;
    border-color: var(--quinary-content, #6f7882)
}

.mx_FilterDropdown .mx_Dropdown_arrow {
    background: #edf3ff;
    background: var(--secondary-content, #edf3ff)
}

.mx_FilterDropdown_option {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--timeline-text-color);
    font-size: .75rem;
    line-height: .9375rem;
    padding: 8px 0 8px 20px;
    position: relative;
    width: 100%
}

.mx_FilterDropdown_optionSelectedIcon {
    height: 14px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 14px
}

.mx_FilterDropdown_optionLabel {
    display: block;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_FilterDropdown_optionDescription {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin-top: 4px
}

.mx_FilterTabGroup {
    color: var(--timeline-text-color)
}

.mx_FilterTabGroup label {
    cursor: pointer;
    margin-right: 12px
}

.mx_FilterTabGroup label span {
    display: inline-block;
    line-height: 1.5rem
}

.mx_FilterTabGroup input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0
}

.mx_FilterTabGroup input[type=radio]:focus + span, .mx_FilterTabGroup input[type=radio]:hover + span {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_FilterTabGroup input[type=radio]:checked + span {
    -webkit-box-shadow: 0 1.5px 0 0 currentColor;
    box-shadow: 0 1.5px 0 0 currentColor;
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_LearnMore_button {
    margin-left: 4px
}

.mx_EnableLiveShare {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    -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;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 32px 16px;
    text-align: center
}

.mx_EnableLiveShare_heading {
    padding-top: 24px
}

.mx_EnableLiveShare_icon {
    height: 58px;
    width: 58px
}

.mx_EnableLiveShare_description {
    line-height: 1.25rem;
    margin-bottom: 32px;
    padding: 0 24px
}

.mx_EnableLiveShare_button {
    height: 48px;
    margin-top: 32px;
    width: 100%
}

.mx_LiveDurationDropdown {
    margin-bottom: 16px
}

.mx_LocationShareMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 460px;
    width: 375px;
    -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(--secondary-content, #edf3ff);
    --mx-map-error-icon-size: 58px
}

.mx_MapError.mx_MapError_isMinimised {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    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-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--panels, var(--cpd-color-gray-600));
    font-size: .75rem;
    line-height: 1rem;
    padding: 24px;
    --mx-map-error-icon-color: var(--alert, #ff5b55);
    --mx-map-error-icon-size: 26px
}

.mx_MapError.mx_MapError_isMinimised .mx_MapError_message {
    margin: 0;
    max-width: 275px
}

.mx_MapError.mx_MapError_isMinimised .mx_MapError_heading {
    font-size: inherit !important;
    font-weight: 400 !important;
    padding-top: 8px
}

.mx_MapError_message {
    margin: 16px 0 32px
}

.mx_MapError_heading {
    padding-top: 24px
}

.mx_MapError_icon {
    height: var(--mx-map-error-icon-size)
}

.mx_MapError_icon path {
    fill: 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;
    background-color: #21262c;
    background-color: var(--system, #21262c);
    position: relative;
    z-index: 0
}

.mx_MapFallback_bg {
    color: #6f7882;
    color: var(--quinary-content, #6f7882);
    left: 0;
    min-height: 100%;
    min-width: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1
}

.mx_MapFallback_icon {
    color: #6f7882;
    color: var(--quaternary-content, #6f7882);
    margin-bottom: 16px;
    width: 65px
}

.mx_Marker_defaultColor {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_Marker_border {
    background-color: currentColor;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2));
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2));
    height: 42px;
    width: 42px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_Marker_border:before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
    bottom: -4px;
    content: "";
    position: absolute
}

.mx_Marker_icon {
    color: #fff;
    height: 20px
}

.mx_ShareDialogButtons {
    height: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.mx_ShareDialogButtons_button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border: none;
    border-radius: 50%;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    height: 24px;
    line-height: inherit;
    margin: 0;
    opacity: .8;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 16px;
    width: 24px
}

.mx_ShareDialogButtons_button:focus, .mx_ShareDialogButtons_button:hover {
    opacity: 1
}

.mx_ShareDialogButtons_button.left {
    left: 16px
}

.mx_ShareDialogButtons_button.right {
    right: 16px
}

.mx_ShareDialogButtons_button-icon {
    height: 10px;
    margin-top: 3px
}

.mx_ShareType {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--timeline-text-color);
    padding: 60px 12px 32px
}

.mx_ShareType, .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
}

.mx_ShareType .mx_ShareType_wrapper_options {
    margin-top: 12px;
    row-gap: 12px;
    width: 100%
}

.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;
    background: none;
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 8px;
    color: var(--timeline-text-color);
    font-family: inherit;
    font-size: .9375rem;
    justify-content: flex-start;
    line-height: inherit;
    padding: 8px 20px
}

.mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:focus, .mx_ShareType .mx_ShareType_wrapper_options .mx_ShareType_option:hover {
    border-color: #0dbd8b;
    border-color: var(--accent, #0dbd8b)
}

.mx_ShareType_badge {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    border: 14px solid #0dbd8b;
    border: 14px solid var(--accent, #0dbd8b);
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    height: 60px;
    margin-bottom: 20px;
    width: 60px
}

.mx_ShareType_heading {
    padding-bottom: 32px;
    text-align: center
}

.mx_ShareType_option-icon {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 40px;
    margin-right: 12px;
    width: 40px;
    -webkit-box-flex: 0;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px
}

.mx_ShareType_option-icon.Own, .mx_ShareType_option-icon.Pin {
    border-color: #0dbd8b;
    border-color: var(--accent, #0dbd8b)
}

.mx_ShareType_option-icon.Pin {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    color: #fff;
    padding: 7px
}

.mx_ZoomButtons {
    bottom: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    right: 24px;
    -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;
    background: var(--timeline-background-color);
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    height: 24px;
    width: 24px
}

.mx_ZoomButtons .mx_ZoomButtons_button .mx_ZoomButtons_icon {
    color: var(--timeline-text-color);
    height: 10px;
    width: 10px
}

.mx_MBeaconBody {
    border-radius: 8px;
    border-radius: var(--MBody-border-radius);
    height: 220px;
    max-width: 325px;
    overflow: hidden;
    position: relative;
    width: 100%
}

.mx_MBeaconBody.mx_MBeaconBody_withoutMap {
    height: auto
}

.mx_MBeaconBody.mx_MBeaconBody_withoutMap .mx_MBeaconBody_chin {
    background-color: transparent;
    position: relative
}

.mx_MBeaconBody_withoutMapContent {
    background-color: var(--panels, var(--cpd-color-gray-600));
    border-radius: 4px
}

.mx_MBeaconBody_withoutMapInfoLastUpdated {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .625rem;
    margin-top: -8px;
    padding: 0 8px 8px 48px
}

.mx_MBeaconBody_map {
    cursor: pointer;
    height: 100%;
    width: 100%;
    z-index: 0
}

.mx_MBeaconBody_mapError, .mx_MBeaconBody_mapFallback {
    padding-bottom: 50px !important
}

.mx_MBeaconBody_mapErrorInteractive {
    cursor: pointer
}

.mx_MBeaconBody_mapFallback {
    cursor: default
}

.mx_MBeaconBody_chin {
    background-color: rgba(24, 27, 33, .85);
    bottom: 0;
    position: absolute;
    width: 100%
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line .mx_MBeaconBody {
    max-width: 100%;
    width: 450px
}

.mx_ReplyTile .mx_MBeaconBody {
    pointer-events: none
}

.mx_MediaProcessingError_Icon {
    margin-right: 4px;
    vertical-align: text-top
}

.mx_WidgetPip, .mx_WidgetPip_overlay {
    height: 220px;
    width: 320px
}

.mx_WidgetPip_overlay {
    border-radius: 8px;
    color: #edf3ff;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0
}

.mx_WidgetPip_footer, .mx_WidgetPip_header {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 60px;
    left: 0;
    position: absolute;
    -webkit-transition: opacity .15s ease;
    transition: opacity .15s ease;
    width: 100%
}

.mx_WidgetPip_overlay:not(:hover) .mx_WidgetPip_footer, .mx_WidgetPip_overlay:not(:hover) .mx_WidgetPip_header {
    opacity: 0
}

.mx_WidgetPip_header {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .9)), to(transparent));
    background: linear-gradient(rgba(0, 0, 0, .9), transparent);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    padding: 12px;
    top: 0
}

.mx_WidgetPip_backButton, .mx_WidgetPip_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_WidgetPip_backButton {
    height: 24px;
    -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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 8px;
    -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(transparent), to(rgba(0, 0, 0, .9)));
    background: linear-gradient(transparent, rgba(0, 0, 0, .9))
}

.mx_PollOption {
    background-color: var(--timeline-background-color);
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 8px;
    padding: 6px 12px
}

.mx_PollOption .mx_PollOption_endedOption, .mx_PollOption .mx_StyledRadioButton_content {
    margin-right: 0;
    padding-top: 2px
}

.mx_PollOption .mx_StyledRadioButton_spacer {
    display: none
}

.mx_PollOption, .mx_PollOption_live-option {
    cursor: pointer
}

.mx_PollOption_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.mx_PollOption_optionVoteCount {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    white-space: nowrap
}

.mx_PollOption_winnerIcon {
    color: var(--cpd-color-icon-accent-tertiary);
    height: 12px;
    margin-right: 4px;
    vertical-align: middle;
    width: 12px
}

.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)
}

.mx_PollOption_checked .mx_StyledRadioButton_checked input[type=radio]:checked + div {
    background-color: var(--cpd-color-icon-accent-tertiary);
    background-image: url(../../img/element-icons/check-white.9400525.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 12px;
    border-color: var(--cpd-color-icon-accent-tertiary);
    border-width: 2px
}

.mx_PollOption_checked .mx_StyledRadioButton_checked input[type=radio]:checked + div div {
    visibility: hidden
}

.mx_PollOption_checked, .mx_PollOption_ended {
    pointer-events: none
}

.mx_PollOption_popularityBackground {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 8px;
    height: 8px;
    margin-right: 12px;
    margin-top: 8px;
    width: 100%
}

.mx_PollOption_popularityBackground .mx_PollOption_popularityAmount {
    background-color: #6f7882;
    background-color: var(--quaternary-content, #6f7882);
    border-radius: 8px;
    height: 8px;
    width: 0
}

.mx_CurrentDeviceSection_deviceDetails {
    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;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    grid-template-columns:100%;
    justify-content: left
}

.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 {
    margin: 0 0 4px !important
}

.mx_DeviceDetailHeading_renameFormHeading {
    margin: 0
}

.mx_DeviceDetailHeading_renameFormError {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    display: block;
    padding-right: 4px
}

.mx_DeviceDetails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 16px;
    padding: 24px
}

.mx_DeviceDetails_section {
    border-bottom: 1px solid #6f7882;
    border-bottom: 1px solid var(--quinary-content, #6f7882);
    display: grid;
    margin-bottom: 20px;
    padding-bottom: 20px;
    grid-gap: 24px;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    grid-template-columns:100%;
    justify-content: left
}

.mx_DeviceDetails_section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0
}

.mx_DeviceDetails_sectionHeading {
    margin: 0
}

.mx_DeviceDetails_sectionHeading .mx_DeviceDetails_sectionSubheading {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: block;
    font-size: .75rem;
    line-height: .875rem;
    margin-top: 4px
}

.mx_DeviceDetails_metadataTable {
    border-spacing: 0;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-sm-regular);
    width: 100%
}

.mx_DeviceDetails_metadataTable th {
    font-weight: 400;
    text-align: left;
    text-transform: uppercase
}

.mx_DeviceDetails_metadataTable td {
    padding-top: 8px
}

.mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel {
    width: 160px
}

.mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue {
    color: var(--timeline-text-color)
}

.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 {
    background: transparent;
    border-radius: 4px;
    color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    height: 32px;
    width: 32px;
    --icon-transform: rotate(-90deg)
}

.mx_DeviceExpandDetailsButton:hover {
    background: #6f7882;
    background: var(--quinary-content, #6f7882)
}

.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
    --icon-transform: rotate(0deg);
    background: #21262c;
    background: var(--system, #21262c)
}

.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded:hover {
    background: #6f7882;
    background: var(--quinary-content, #6f7882)
}

.mx_DeviceExpandDetailsButton_icon {
    height: 16px;
    -webkit-transform: var(--icon-transform);
    transform: var(--icon-transform);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 16px
}

.mx_DeviceSecurityCard {
    width: 100%;
    -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;
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px
}

.mx_DeviceSecurityCard, .mx_DeviceSecurityCard_icon {
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_DeviceSecurityCard_icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    background-color: var(--background-color);
    color: var(--icon-color);
    height: 40px;
    justify-content: center;
    margin-right: 16px;
    width: 40px
}

.mx_DeviceSecurityCard_icon.Verified {
    --icon-color: #0dbd8b;
    --background-color: var(--cpd-color-green-300)
}

.mx_DeviceSecurityCard_icon.Unverified {
    --icon-color: #ff5b55;
    --background-color: var(--cpd-color-red-300)
}

.mx_DeviceSecurityCard_icon.Inactive {
    --icon-color: var(--secondary-content, #edf3ff);
    --background-color: var(--panels, var(--cpd-color-gray-600))
}

.mx_DeviceSecurityCard_content {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1
}

.mx_DeviceSecurityCard_heading {
    margin: 0 0 4px
}

.mx_DeviceSecurityCard_description {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-sm-regular);
    margin: 0
}

.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 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-sm-regular);
    margin-top: 4px
}

.mx_DeviceTile_inactiveIcon {
    height: 14px;
    margin-right: 8px;
    vertical-align: middle
}

.mx_DeviceTile_actions {
    display: grid;
    grid-gap: 8px;
    grid-auto-flow: column;
    margin-left: 8px
}

.mx_DeviceTypeIcon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 8px;
    padding: 0 8px 8px 0;
    position: relative
}

.mx_DeviceTypeIcon_deviceIconWrapper {
    --background-color: var(--panels, var(--cpd-color-gray-600));
    --icon-color: var(--secondary-content, #edf3ff);
    background-color: var(--panels, var(--cpd-color-gray-600));
    background-color: var(--background-color);
    border: 8px solid var(--background-color);
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #edf3ff;
    color: var(--icon-color);
    height: 40px;
    width: 40px
}

.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
    --background-color: var(--timeline-text-color);
    --icon-color: var(--timeline-background-color)
}

.mx_DeviceTypeIcon_deviceIcon {
    height: 24px;
    width: 24px
}

.mx_DeviceTypeIcon_verificationIcon {
    background-color: var(--timeline-background-color);
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 50%;
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--v-icon-color);
    height: 24px;
    padding: 4px;
    position: absolute;
    right: 0;
    width: 24px
}

.mx_DeviceTypeIcon_verificationIcon.verified {
    --v-icon-color: #0dbd8b
}

.mx_DeviceTypeIcon_verificationIcon.unverified {
    --v-icon-color: #ff5b55
}

.mx_FilteredDeviceList .mx_Dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 80px;
    flex: 1 0 80px
}

.mx_FilteredDeviceList_list {
    display: grid;
    list-style-type: none;
    grid-gap: 16px;
    margin: 0;
    padding: 0 16px
}

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

.mx_FilteredDeviceList_securityCard {
    margin-bottom: 32px
}

.mx_FilteredDeviceList_noResults {
    margin-bottom: 32px;
    text-align: center;
    width: 100%
}

.mx_FilteredDeviceList_headerButton {
    -ms-flex-negative: 0;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    flex-shrink: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 8px
}

.mx_FilteredDeviceList_deviceDetails {
    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;
    background-color: var(--panels, var(--cpd-color-gray-600));
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    gap: 16px;
    height: 48px;
    margin-bottom: 32px;
    padding: 0 16px;
    width: 100%
}

.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 .mx_Checkbox_background + div {
    -webkit-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
    margin-left: 16px !important
}

.mx_SettingsSubsection {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

.mx_SettingsSubsection_description {
    margin-top: 8px
}

.mx_SettingsSubsection_text {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    width: 100%
}

.mx_SettingsSubsection_content {
    display: grid;
    width: 100%;
    grid-gap: 8px;
    grid-template-columns:minmax(0, 1fr);
    justify-items: flex-start;
    margin-top: 24px
}

.mx_SettingsSubsection_content summary {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_SettingsSubsection_content details[open] summary {
    margin-bottom: 8px
}

.mx_SettingsSubsection_content.mx_SettingsSubsection_contentStretch {
    justify-items: stretch
}

.mx_SettingsSubsection_content.mx_SettingsSubsection_noHeading {
    margin-top: 0
}

.mx_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
}

.mx_QuickThemeSwitcher .mx_Dropdown {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    margin-left: auto;
    min-width: 100px
}

.mx_QuickThemeSwitcher .mx_Dropdown_menu {
    max-height: 70px
}

.mx_QuickThemeSwitcher_heading {
    display: inline-block;
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    margin: 0;
    text-transform: uppercase
}

.mx_Caption, .mx_QuickThemeSwitcher_heading {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_Caption {
    font: var(--cpd-font-body-sm-regular)
}

.mx_Caption.mx_Caption_error {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_Box--flex {
    -webkit-box-flex: initial;
    -ms-flex: initial;
    flex: initial;
    -webkit-box-flex: var(--mx-box-flex, unset);
    -ms-flex: var(--mx-box-flex, unset);
    flex: var(--mx-box-flex, unset)
}

.mx_Box--shrink {
    -ms-flex-negative: initial;
    flex-shrink: 1;
    -ms-flex-negative: var(--mx-box-shrink, unset);
    flex-shrink: var(--mx-box-shrink, unset)
}

.mx_Box--grow {
    -webkit-box-flex: initial;
    -ms-flex-positive: initial;
    flex-grow: 0;
    flex-grow: var(--mx-box-grow, unset)
}

.mx_Flex {
    display: inline;
    display: initial;
    display: var(--mx-flex-display, unset);
    -webkit-box-orient: initial;
    -webkit-box-direction: initial;
    -ms-flex-direction: initial;
    flex-direction: row;
    flex-direction: var(--mx-flex-direction, unset);
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: normal;
    -webkit-box-align: var(--mx-flex-align, unset);
    -ms-flex-align: var(--mx-flex-align, unset);
    align-items: var(--mx-flex-align, unset);
    -webkit-box-pack: initial;
    -ms-flex-pack: initial;
    justify-content: normal;
    -webkit-box-pack: var(--mx-flex-justify, unset);
    -ms-flex-pack: var(--mx-flex-justify, unset);
    gap: initial;
    gap: var(--mx-flex-gap, unset);
    justify-content: var(--mx-flex-justify, unset)
}

.mx_Icon {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mx_Icon_accent {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_Icon_bg-accent-light {
    background-color: var(--accent-color-300)
}

.mx_Icon_alert {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_Icon_circle-40 {
    border-radius: 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    height: 40px;
    padding: 0 12px;
    width: 40px
}

.mx_Icon_8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8px;
    flex: 0 0 8px;
    height: 8px;
    width: 8px
}

.mx_Icon_10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 10px;
    flex: 0 0 10px;
    height: 10px;
    width: 10px
}

.mx_Icon_12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12px;
    flex: 0 0 12px;
    height: 12px;
    width: 12px
}

.mx_Icon_16 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16px;
    flex: 0 0 16px;
    height: 16px;
    width: 16px
}

.mx_Icon_24 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
    height: 24px;
    width: 24px
}

.mx_Icon_32 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 32px;
    flex: 0 0 32px;
    height: 32px;
    width: 32px
}

.mx_SuccessDialog {
    text-align: center
}

.mx_SuccessDialog .mx_Icon {
    margin-bottom: 16px
}

.mx_SuccessDialog .mx_Dialog_header {
    margin: 0 0 16px;
    padding: 0
}

.mx_SuccessDialog .mx_Dialog_title {
    margin: 0
}

.mx_SuccessDialog .mx_Dialog_content {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin: 0 0 40px
}

.mx_SuccessDialog .mx_Dialog_buttons .mx_Dialog_buttons_row {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_SuccessDialog .mx_Dialog_buttons .mx_Dialog_buttons_row button.mx_Dialog_primary {
    height: 48px;
    min-width: 328px
}

html {
    scrollbar-color: hsla(0, 0%, 100%, .2) transparent
}

* {
    scrollbar-width: thin
}

::-webkit-scrollbar {
    height: 6px;
    width: 6px
}

::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 100%, .2);
    border-radius: 3px
}

.mx_AutoHideScrollbar:hover {
    scrollbar-color: hsla(0, 0%, 100%, .2) transparent
}

.mx_AutoHideScrollbar:hover::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 100%, .2)
}

.mx_AutoHideScrollbar {
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

.mx_AutoHideScrollbar::-webkit-scrollbar, .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: #edf3ff;
    fill: var(--secondary-content, #edf3ff)
}

.mx_AutocompleteInput_editor {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: border-color .25s;
    transition: border-color .25s
}

.mx_AutocompleteInput_editor > input {
    -webkit-box-flex: 1;
    border: none !important;
    color: var(--timeline-text-color) !important;
    -ms-flex: 1;
    flex: 1;
    font-weight: 400 !important;
    margin: 0 !important;
    min-width: 40%;
    padding: 8px 9px;
    resize: none
}

.mx_AutocompleteInput_editor > input::-webkit-input-placeholder {
    color: var(--timeline-text-color) !important;
    font-weight: 400 !important
}

.mx_AutocompleteInput_editor > input::-moz-placeholder {
    color: var(--timeline-text-color) !important;
    font-weight: 400 !important
}

.mx_AutocompleteInput_editor > input:-ms-input-placeholder {
    color: var(--timeline-text-color) !important;
    font-weight: 400 !important
}

.mx_AutocompleteInput_editor > input::-ms-input-placeholder {
    color: var(--timeline-text-color) !important;
    font-weight: 400 !important
}

.mx_AutocompleteInput_editor > input::placeholder {
    color: var(--timeline-text-color) !important;
    font-weight: 400 !important
}

.mx_AutocompleteInput_editor--focused {
    border-color: #0086e6;
    border-color: var(--links, #0086e6)
}

.mx_AutocompleteInput_editor--has-suggestions {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.mx_AutocompleteInput_editor_selection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 8px
}

.mx_AutocompleteInput_editor_selection_pill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--cpd-color-text-decorative-1);
    border-radius: 12px;
    color: #fff;
    font-size: .75rem;
    padding-left: 8px;
    padding-right: 8px
}

.mx_AutocompleteInput_editor_selection_remove_button {
    padding: 0 4px
}

.mx_AutocompleteInput_matches {
    background-color: var(--timeline-background-color);
    border: 1px solid #0086e6;
    border: 1px solid var(--links, #0086e6);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #e7e7e7;
    left: 0;
    position: absolute;
    right: 0;
    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;
    cursor: pointer;
    padding: 8px
}

.mx_AutocompleteInput_suggestion > * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx_AutocompleteInput_suggestion:hover {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.mx_AutocompleteInput_suggestion--selected {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882)
}

.mx_AutocompleteInput_suggestion--selected:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.mx_AutocompleteInput_suggestion_title {
    margin-right: 8px
}

.mx_AutocompleteInput_suggestion_description {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem
}

.mx_BackdropPanel {
    -webkit-filter: blur(var(--lp-background-blur));
    filter: blur(var(--lp-background-blur));
    height: 100vh;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%
}

.mx_BackdropPanel, .mx_BackdropPanel--image {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0
}

.mx_BackdropPanel--image {
    min-height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 0
}

.mx_CompatibilityPage {
    background-color: #e55;
    height: 100%;
    width: 100%
}

.mx_CompatibilityPage_box {
    background-color: #fcc;
    border: 1px solid;
    height: 300px;
    inset: 0;
    margin: auto;
    padding: 10px;
    position: absolute;
    width: 500px
}

.mx_ContextualMenu_wrapper {
    position: fixed;
    z-index: 5000
}

.mx_ContextualMenu_background {
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    width: 100%
}

.mx_ContextualMenu {
    background-color: var(--cpd-color-bg-canvas-default);
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
    border-radius: 12px;
    -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
    color: var(--timeline-text-color);
    position: absolute;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    z-index: 5001
}

.mx_ContextualMenu_right {
    right: 16px
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
    right: 8px
}

.mx_ContextualMenu_chevron_right {
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--timeline-background-color);
    border-top: 8px solid transparent;
    height: 0;
    position: absolute;
    right: -8px;
    top: 0;
    width: 0
}

.mx_ContextualMenu_left {
    left: 0
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
    left: 8px
}

.mx_ContextualMenu_chevron_left {
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--timeline-background-color);
    border-top: 8px solid transparent;
    height: 0;
    left: -8px;
    position: absolute;
    top: 0;
    width: 0
}

.mx_ContextualMenu_top {
    top: 0
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
    top: 8px
}

.mx_ContextualMenu_chevron_top {
    border-bottom: 8px solid var(--timeline-background-color);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    height: 0;
    left: 0;
    position: absolute;
    top: -8px;
    width: 0
}

.mx_ContextualMenu_bottom {
    bottom: 0
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
    bottom: 8px
}

.mx_ContextualMenu_chevron_bottom {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--timeline-background-color);
    bottom: -8px;
    height: 0;
    left: 0;
    position: absolute;
    width: 0
}

.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: #ff5b55;
    color: var(--alert, #ff5b55);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .75rem;
    gap: 8px;
    line-height: 1.2em;
    min-height: 2.4em
}

@-webkit-keyframes mx_FileDropTarget_animation {
    0% {
        opacity: 0
    }
    to {
        opacity: .95
    }
}

@keyframes mx_FileDropTarget_animation {
    0% {
        opacity: 0
    }
    to {
        opacity: .95
    }
}

.mx_FileDropTarget {
    background-color: var(--timeline-background-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.125rem;
    height: 100%;
    min-width: 0;
    opacity: .95;
    pointer-events: none;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 3000;
    -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: .5s;
    animation-duration: .5s
}

@-webkit-keyframes mx_FileDropTarget_image_animation {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes mx_FileDropTarget_image_animation {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.mx_FileDropTarget_image {
    -webkit-animation: mx_FileDropTarget_image_animation;
    animation: mx_FileDropTarget_image_animation;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    margin-bottom: 16px;
    width: 32px
}

.mx_FilePanel {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    overflow-y: auto
}

.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%
}

.mx_FilePanel .mx_EventTile_avatar, .mx_FilePanel .mx_RoomView_MessageList h2 {
    display: none
}

.mx_FilePanel .mx_EventTile {
    margin-top: 10px;
    padding-top: 0;
    word-break: break-word
}

.mx_FilePanel .mx_EventTile .mx_EventTile_line {
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

.mx_FilePanel .mx_EventTile .mx_MFileBody {
    line-height: 2.4rem
}

.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 8px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    color: #a1b2d1;
    font: var(--cpd-font-body-md-regular);
    justify-content: space-between
}

.mx_FilePanel .mx_EventTile .mx_MFileBody_download .mx_MImageBody_size {
    font: var(--cpd-font-body-md-regular);
    text-align: right;
    white-space: nowrap
}

.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
    -webkit-box-flex: 1;
    color: var(--timeline-text-secondary-color);
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink {
    text-decoration: none
}

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: -2px
}

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails .mx_DisambiguatedProfile {
    color: #a1b2d1
}

.mx_FilePanel .mx_EventTile .mx_EventTile_senderDetailsLink .mx_EventTile_senderDetails .mx_MessageTimestamp {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-sm-regular);
    text-align: right
}

.mx_FilePanel .mx_EventTile_line {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

.mx_FilePanel_empty:before {
    --maskImage: url(../../img/element-icons/room/files.ff2ae8d.svg)
}

.mx_GenericDropdownMenu_button {
    border-radius: 4px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    line-height: 1.5;
    padding: 3px 4px 3px 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx_GenericDropdownMenu_button:hover, .mx_GenericDropdownMenu_button[aria-expanded=true] {
    background: #6f7882;
    background: var(--quinary-content, #6f7882)
}

.mx_GenericDropdownMenu_button:before {
    background: currentColor;
    content: "";
    float: right;
    height: 18px;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 18px
}

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu {
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    -webkit-box-shadow: 0 1px 3px rgba(23, 25, 28, .05);
    box-shadow: 0 1px 3px rgba(23, 25, 28, .05);
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    padding-bottom: 10px;
    padding-top: 10px;
    position: static
}

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu_chevron_top {
    border-bottom-color: #6f7882;
    border-bottom-color: var(--quinary-content, #6f7882);
    left: auto;
    right: 22px
}

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_ContextualMenu_chevron_top:after {
    border: inherit;
    border-bottom-color: var(--timeline-background-color);
    content: "";
    left: -8px;
    position: absolute;
    top: 1px
}

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_divider {
    border-top: 1px solid #6f7882;
    border-top: 1px solid var(--quinary-content, #6f7882);
    display: block;
    height: 0;
    margin-left: 4px;
    margin-right: 19px
}

.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(--timeline-text-color);
    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: .9375rem
}

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item:hover {
    background-color: #343a46;
    background-color: var(--menu-selected-color, #343a46)
}

.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item[aria-checked=true]:before {
    background-color: var(--timeline-text-color);
    content: "";
    display: inline-block;
    height: 12px;
    margin-left: -20px;
    margin-right: 8px;
    -webkit-mask-image: url(../../img/feather-customised/check.bfca953.svg);
    mask-image: url(../../img/feather-customised/check.bfca953.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    vertical-align: middle;
    width: 12px
}

.mx_GenericErrorPage {
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_GenericErrorPage_box {
    background-color: #fcc;
    border: 1px solid #f22;
    display: inline;
    min-height: 125px;
    padding: 10px 10px 20px;
    width: 500px
}

.mx_HomePage {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
    width: 100%
}

.mx_HomePage_default {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center
}

.mx_HomePage_default .mx_HomePage_default_wrapper {
    margin: auto
}

.mx_HomePage_default img {
    height: 48px
}

.mx_HomePage_default h1 {
    font-size: 2rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.375;
    margin-bottom: 4px
}

.mx_HomePage_default h2 {
    color: #a1b2d1;
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5625rem;
    margin-top: 4px
}

.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 {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.25rem;
    margin: 20px;
    min-height: 132px;
    padding: 73px 8px 15px;
    position: relative;
    vertical-align: top;
    width: 160px;
    word-break: break-word
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:before {
    background-color: #fff;
    content: "";
    height: 40px;
    left: 60px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 20px;
    width: 40px
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_sendDm:before {
    -webkit-mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
    mask-image: url(../../img/element-icons/feedback.0bc9353.svg)
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_explore:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/explore.6738ed6.svg);
    mask-image: url(../../img/element-icons/roomlist/explore.6738ed6.svg)
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_createGroup:before {
    -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
    mask-image: url(../../img/element-icons/group-members.d86d751.svg)
}

.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;
    contain: layout paint;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 50%;
    position: relative
}

.mx_LeftPanel, .mx_LeftPanel_wrapper {
    --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%
}

.mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user {
    background-color: var(--roomlist-background-color);
    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: var(--roomlist-background-color);
    contain: content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer {
    background-color: var(--roomlist-background-color);
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    min-width: 0
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
    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 {
    padding: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer {
    margin: 12px 12px 0;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-box-flex: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -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%, #000));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%);
    mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, #000));
    mask-image: linear-gradient(90deg, transparent, #000 5%)
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_breadcrumbsContainer.mx_IndicatorScrollbar_rightOverflow {
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(#000), color-stop(95%, #000), to(transparent));
    -webkit-mask-image: linear-gradient(90deg, #000, #000 95%, transparent);
    mask-image: -webkit-gradient(linear, left top, right top, from(#000), color-stop(95%, #000), to(transparent));
    mask-image: linear-gradient(90deg, #000, #000 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%, #000), color-stop(95%, #000), to(transparent));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(5%, #000), color-stop(95%, #000), to(transparent));
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
    border-bottom: 1px solid #6f7882;
    border-bottom: 1px solid var(--quinary-content, #6f7882);
    margin: 0 12px;
    padding: 12px 0 8px;
    -ms-flex-negative: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-shrink: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer + .mx_RoomListHeader {
    margin-top: 12px
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton {
    background-color: var(--roomlist-highlights-color);
    border-radius: 8px;
    height: 32px;
    margin-left: 8px;
    position: relative;
    width: 32px
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 8px;
    -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-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 8px;
    width: 16px
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton {
    background-color: var(--roomlist-highlights-color);
    border-radius: 8px;
    height: 32px;
    margin-left: 8px;
    position: relative;
    width: 32px
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:before, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 8px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 8px;
    width: 16px
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff)
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton:hover:before, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover:before {
    background-color: var(--timeline-background-color)
}

.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(../../img/element-icons/clock.5fea538.svg);
    mask-image: url(../../img/element-icons/clock.5fea538.svg)
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_RoomListHeader:first-child {
    margin-top: 12px
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
    margin-top: 10px;
    overflow: hidden;
    padding-right: 2px;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0
}

.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 {
    height: 100%;
    position: relative
}

.mx_LeftPanel.mx_LeftPanel_minimized {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    min-width: 0;
    min-width: auto;
    width: auto !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 {
    -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 {
    background-color: transparent;
    margin-left: 0;
    margin-top: 8px
}

.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_MainSplit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100%;
    min-height: 0;
    min-width: 0
}

.mx_MainSplit > .mx_RightPanel_ResizeWrapper:hover .mx_ResizeHandle--horizontal:before {
    background-color: var(--timeline-text-color);
    border-radius: 4px;
    content: "";
    height: 64px;
    left: 50%;
    opacity: .8;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-150%, -50%);
    transform: translate(-150%, -50%);
    width: 4px
}

.mx_MatrixChat_splash {
    height: 100%;
    position: relative
}

.mx_MatrixChat_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 100%
}

.mx_MatrixToolbar {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    height: 40px;
    order: 1
}

.mx_MatrixChat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-height: 0
}

.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
    background-color: var(--timeline-background-color);
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    height: 100%;
    min-width: 0
}

.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
    position: relative
}

.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover:before {
    background-color: var(--timeline-text-color);
    border-radius: 4px;
    content: " ";
    height: 64px;
    left: 50%;
    opacity: .8;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 4px
}

.mx_MessagePanel_myReadMarker {
    border: 0;
    height: 0;
    margin: 0;
    padding: 0
}

.mx_MessagePanel_myReadMarker hr {
    border-bottom: 1px solid #0dbd8b;
    border-bottom: 1px solid var(--accent, #0dbd8b);
    border-top: 1px solid #0dbd8b;
    border-top: 1px solid var(--accent, #0dbd8b);
    margin-top: 0;
    opacity: 1;
    position: relative;
    top: -1px;
    -webkit-transition: width easeinsine .4s 1s, opacity easeinsine .4s 1s;
    transition: width easeinsine .4s 1s, opacity easeinsine .4s 1s;
    width: 99%;
    will-change: width;
    z-index: 1
}

.mx_NonUrgentToastContainer {
    bottom: 30px;
    left: 28px;
    position: absolute;
    z-index: 101
}

.mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast {
    background-color: #17191c;
    border-radius: 8px;
    color: #fff;
    font-size: .8125rem;
    margin-top: 8px;
    padding: 10px 12px;
    width: 320px
}

.mx_NotificationPanel_empty:before {
    --maskImage: url(../../img/element-icons/notifications.988ddb0.svg)
}

.mx_QuickSettingsButton {
    -webkit-box-flex: 0;
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    line-height: 32px;
    margin: 12px auto;
    min-height: 32px;
    min-width: 32px;
    position: relative
}

.mx_QuickSettingsButton.expanded {
    margin-left: 20px;
    padding-left: 44px;
    padding-right: 8px
}

.mx_QuickSettingsButton:before {
    background: #edf3ff;
    background: var(--secondary-content, #edf3ff);
    content: "";
    height: 32px;
    left: 0;
    -webkit-mask-image: url(../../icons/settings-solid.5cd4545.svg);
    mask-image: url(../../icons/settings-solid.5cd4545.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
    mask-size: 24px;
    position: absolute;
    width: 32px
}

.mx_QuickSettingsButton:not(.expanded):hover {
    background-color: #6f7882;
    background-color: var(--quaternary-content, #6f7882)
}

.mx_QuickSettingsButton:not(.expanded):hover:before {
    background-color: var(--timeline-text-color)
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
    contain: unset;
    min-width: 200px;
    padding: 16px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu > div > h2 {
    color: var(--cpd-color-text-secondary);
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5rem;
    margin: 0 0 16px
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_AccessibleButton_hasKind {
    display: block;
    margin-top: 4px
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu > div > h4 {
    color: var(--cpd-color-text-secondary);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    margin: 20px 0 12px;
    text-transform: uppercase
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_pinToSidebarHeading {
    padding-left: 24px;
    position: relative
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_Checkbox {
    margin-bottom: 8px
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_favouritesCheckbox .mx_Checkbox_background + div, .mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_peopleCheckbox .mx_Checkbox_background + div {
    color: var(--cpd-color-text-primary);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-left: 6px;
    padding-left: 22px;
    position: relative
}

.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu .mx_QuickSettingsButton_moreOptionsButton {
    color: var(--cpd-color-text-primary);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-bottom: 16px;
    margin-left: 22px;
    padding-left: 22px;
    position: relative
}

.mx_QuickSettingsButton_icon * {
    fill: #edf3ff;
    fill: var(--secondary-content, #edf3ff)
}

.mx_QuickSettingsButton_icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    height: 16px;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 16px
}

.mx_RightPanel {
    overflow-x: hidden;
    -webkit-box-flex: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: var(--cpd-color-bg-canvas-default);
    border-left: 1px solid var(--cpd-color-alpha-gray-400);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    contain: strict;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%
}

.mx_RightPanel .mx_RoomView_MessageList {
    padding: 14px 18px
}

.mx_RightPanel_threadsButton:before {
    -webkit-mask-image: url(../../img/element-icons/room/thread.239d10c.svg);
    mask-image: url(../../img/element-icons/room/thread.239d10c.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(../../img/element-icons/room/room-summary.50ea68e.svg);
    mask-image: url(../../img/element-icons/room/room-summary.50ea68e.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_MemberInfo, .mx_RightPanel .mx_MemberList {
    -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;
    margin: auto;
    order: 2
}

.mx_RightPanel_empty {
    margin-right: -28px
}

.mx_RightPanel_empty h2 {
    font-weight: 700;
    margin: 16px 0
}

.mx_RightPanel_empty h2, .mx_RightPanel_empty p {
    font: var(--cpd-font-body-md-regular)
}

.mx_RightPanel_empty:before {
    background-color: #a1b2d1;
    content: "";
    display: block;
    height: 42px;
    margin: 11px auto 29px;
    -webkit-mask-image: var(--maskImage);
    mask-image: var(--maskImage);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 42px
}

.mx_RoomSearch {
    -webkit-box-flex: 1;
    background-color: var(--roomlist-highlights-color);
    border: 1px solid transparent;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    height: 28px;
    min-width: 0;
    padding: 1px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

.mx_RoomSearch .mx_RoomSearch_icon {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    height: 16px;
    margin-bottom: 2px;
    margin-left: 7px;
    -webkit-mask: url(../../img/element-icons/roomlist/search.91a83f7.svg);
    mask: url(../../img/element-icons/roomlist/search.91a83f7.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_RoomSearch .mx_RoomSearch_spotlightTriggerText {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font: var(--cpd-font-body-sm-semibold);
    margin: 9px;
    min-width: 0;
    overflow: hidden
}

.mx_RoomSearch .mx_RoomSearch_shortcutPrompt {
    background-color: var(--roomlist-highlights-color);
    border-radius: 6px;
    color: var(--timeline-text-secondary-color);
    font-family: inherit;
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    margin-right: 6px;
    overflow: hidden;
    padding: 2px 4px;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.mx_RoomSearch.mx_RoomSearch_minimized {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    width: 32px
}

.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
    margin: 0 auto;
    padding: 1px;
    -ms-flex-item-align: center;
    align-self: center
}

.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_shortcutPrompt {
    display: none
}

.mx_RoomSearch:hover {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff)
}

.mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText {
    color: var(--timeline-background-color)
}

.mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt {
    background-color: var(--timeline-background-color);
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_RoomSearch:hover .mx_RoomSearch_icon {
    background-color: var(--timeline-background-color)
}

.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
    margin-left: 65px;
    min-height: 50px
}

.mx_RoomStatusBar_typingIndicatorAvatars {
    margin-top: -1px;
    text-align: left;
    width: 52px
}

.mx_RoomStatusBar_typingIndicatorRemaining {
    background-color: #ddd;
    border: 1px solid var(--timeline-background-color);
    border-radius: 40px;
    color: #acacac;
    display: inline-block;
    font-size: .8em;
    height: 24px;
    line-height: 1.5rem;
    position: absolute;
    text-align: center;
    vertical-align: top;
    width: 24px
}

.mx_RoomStatusBar_scrollDownIndicator {
    cursor: pointer;
    padding-left: 1px
}

.mx_RoomStatusBar_unreadMessagesBar {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    cursor: pointer;
    padding-top: 10px
}

.mx_RoomStatusBar_connectionLostBar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 19px;
    min-height: 58px
}

.mx_RoomStatusBar_unsentMessages > div[role=alert] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--roomlist-background-color);
    border-radius: 4px;
    margin: 12px;
    min-height: 70px;
    padding-left: 16px
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge {
    margin-right: 12px
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge {
    border-radius: 24px !important;
    height: 24px !important;
    width: 24px !important
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentBadge .mx_NotificationBadge .mx_NotificationBadge_count {
    font-size: 1rem !important
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentTitle {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    font-size: .9375rem
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentDescription {
    font-size: .75rem
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    color: #a1b2d1;
    flex-grow: 1;
    margin-right: 22px;
    text-align: right
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton {
    display: inline-block;
    padding: 5px 10px 5px 30px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:nth-child(2) {
    border-left: 1px solid #a1b2d1
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton:before {
    background-color: #a1b2d1;
    content: "";
    height: 18px;
    left: 10px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 18px
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentCancelAllBtn:before {
    -webkit-mask-image: url(../../img/element-icons/trashcan.2f78f2d.svg);
    mask-image: url(../../img/element-icons/trashcan.2f78f2d.svg)
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentRetry {
    padding-left: 34px
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_AccessibleButton.mx_RoomStatusBar_unsentRetry:before {
    -webkit-mask-image: url(../../img/element-icons/retry.8a39798.svg);
    mask-image: url(../../img/element-icons/retry.8a39798.svg)
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner {
    margin-right: 5px;
    top: 1px;
    vertical-align: middle
}

.mx_RoomStatusBar_unsentMessages .mx_RoomStatusBar_unsentButtonBar .mx_InlineSpinner + span {
    margin-right: 10px
}

.mx_RoomStatusBar_connectionLostBar svg {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle
}

.mx_RoomStatusBar_connectionLostBar_title {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_RoomStatusBar_connectionLostBar_desc {
    color: var(--timeline-text-color);
    font-size: .8125rem;
    opacity: .5;
    padding-bottom: 20px
}

.mx_RoomStatusBar_resend_link {
    color: var(--timeline-text-color) !important;
    cursor: pointer;
    text-decoration: underline !important
}

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

.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 {
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    contain: strict;
    justify-content: center
}

.mx_RoomView, .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;
    position: relative
}

.mx_RoomView {
    word-wrap: break-word;
    -ms-flex: 1;
    flex: 1
}

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

.mx_RoomView_auxPanel_hiddenHighlights {
    border-bottom: 1px solid var(--roomlist-separator-color);
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    cursor: pointer;
    padding: 10px 26px
}

.mx_RoomView_messagePanel {
    overflow-y: auto;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    overflow-anchor: none
}

.mx_RoomView_messagePanelSearchSpinner {
    -webkit-box-flex: 1;
    background-image: url(../../img/typing-indicator-2x.e13c259.gif);
    background-position: center 367px;
    background-repeat: no-repeat;
    background-size: 25px;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.mx_RoomView_messagePanelSearchSpinner:before {
    background-color: var(--timeline-text-secondary-color);
    content: "";
    height: 50px;
    left: 0;
    -webkit-mask: url(../../img/feather-customised/search-input.5d69fb5.svg);
    mask: url(../../img/feather-customised/search-input.5d69fb5.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 50px;
    mask-size: 50px;
    position: absolute;
    right: 0;
    top: 286px
}

.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_messagePanelSearchSpinner, .mx_RoomView_body .mx_RoomView_messagePanelSpinner {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

.mx_RoomView_body .mx_RoomView_timeline {
    position: relative;
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 4px;
    margin-right: calc(var(--container-gap-width) / 2)
}

.mx_RoomView_statusArea {
    width: 100%;
    -webkit-box-flex: 0;
    background-color: var(--timeline-background-color);
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    z-index: 1000
}

.mx_RoomView_statusArea_expanded {
    max-height: 100px
}

.mx_RoomView_statusAreaBox {
    margin: auto;
    min-height: 50px
}

.mx_RoomView_statusAreaBox_line {
    border-top: 1px solid var(--roomlist-separator-color);
    height: 1px;
    margin-left: 65px
}

.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 {
    color: inherit;
    text-decoration: none
}

.mx_RoomView_empty {
    font-size: .8125rem;
    margin-bottom: 80px;
    margin-right: 30px;
    padding: 0 24px;
    text-align: center
}

.mx_RoomView_MessageList {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0;
    padding: 18px;
    padding: var(--RoomView_MessageList-padding)
}

.mx_RoomView_MessageList li {
    clear: both
}

.mx_ScrollPanel .mx_RoomView_MessageList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -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_immersive .mx_LegacyRoomHeader_wrapper {
    border: initial
}

.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
    border: none;
    height: 0;
    margin-top: 2px
}

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

@-webkit-keyframes mx_Indicator_pulse {
    0% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
}

@keyframes mx_Indicator_pulse {
    0% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
}

@-webkit-keyframes mx_Indicator_pulse_shadow {
    0% {
        opacity: .7
    }
    70% {
        opacity: 0;
        -webkit-transform: scale(2.2);
        transform: scale(2.2)
    }
    to {
        opacity: 0
    }
}

@keyframes mx_Indicator_pulse_shadow {
    0% {
        opacity: .7
    }
    70% {
        opacity: 0;
        -webkit-transform: scale(2.2);
        transform: scale(2.2)
    }
    to {
        opacity: 0
    }
}

.mx_Indicator {
    -webkit-animation: mx_Indicator_pulse 2s infinite;
    animation: mx_Indicator_pulse 2s infinite;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    background: #ff5b55;
    background: var(--alert, #ff5b55);
    background: var(--RoomHeader-indicator-pulseColor);
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0 #ff5b55;
    box-shadow: 0 0 0 0 #ff5b55;
    -webkit-box-shadow: 0 0 0 0 var(--alert, #ff5b55);
    box-shadow: 0 0 0 0 var(--alert, #ff5b55);
    -webkit-box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
    box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
    height: 8px;
    height: var(--RoomHeader-indicator-dot-size);
    position: absolute;
    right: -3px;
    top: -3px;
    -webkit-transform: scale(1);
    transform: scale(1);
    width: 8px;
    width: var(--RoomHeader-indicator-dot-size)
}

.mx_Indicator:after {
    -webkit-animation-duration: inherit;
    animation-duration: inherit;
    -webkit-animation-iteration-count: inherit;
    animation-iteration-count: inherit;
    -webkit-animation-name: mx_Indicator_pulse_shadow;
    animation-name: mx_Indicator_pulse_shadow;
    background: inherit;
    border-radius: 50%;
    content: "";
    height: inherit;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: inherit
}

.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 {
    background-image: url(../../img/icons-close.18b3d80.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 16px;
    padding: 9px;
    width: 16px
}

.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 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    line-height: 1.5rem
}

.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;
    color: var(--timeline-text-color);
    font-size: .9375rem;
    gap: 12px;
    line-height: 1.5rem;
    margin-bottom: 12px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_header {
    font-weight: var(--cpd-font-weight-semibold);
    grid-column-start: 1;
    margin: 0
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    gap: 12px;
    grid-column-start: 2;
    min-height: 32px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_listHeader .mx_SpaceHierarchy_listHeader_buttons .mx_AccessibleButton {
    font-weight: 400;
    padding: 4px 12px
}

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

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_error {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.125rem;
    margin: 20px auto 12px;
    padding-left: 24px;
    position: relative;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_error:before {
    background-image: url(../../img/element-icons/warning-badge.203170a.svg);
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 16px;
    left: 0;
    position: absolute;
    width: 16px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > h3 {
    color: var(--timeline-text-color);
    display: inline;
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.375rem
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomCount > span {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-left: 8px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle {
    background-color: var(--timeline-background-color);
    border-radius: 4px;
    height: 16px;
    left: -1px;
    position: absolute;
    top: 10px;
    width: 16px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_toggle:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 0;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    width: 16px
}

.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 {
    padding-left: 12px;
    position: relative
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list {
    list-style: none;
    margin: 0;
    padding: 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 {
    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;
    padding: 8px 16px;
    position: relative
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item {
    display: grid;
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    grid-template-columns:20px auto;
    line-height: 1.125rem;
    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
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_avatar {
    grid-column: 1;
    grid-row: 1
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_name {
    grid-column: 2;
    grid-row: 1
}

.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 {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem;
    margin-left: 12px
}

.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 {
    left: 0;
    position: absolute;
    top: 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;
    padding-left: 16px;
    position: relative
}

.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 {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    content: "";
    height: 20px;
    left: -4px;
    -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.76b08f2.svg);
    mask-image: url(../../img/element-icons/roomlist/checkmark.76b08f2.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: -2px;
    width: 20px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_roomTile_item .mx_SpaceHierarchy_roomTile_info {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: -webkit-box;
    font: var(--cpd-font-body-md-regular);
    font-weight: 400;
    grid-column: 2;
    grid-row: 2;
    line-height: 1.125rem;
    -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 {
    display: inline-block;
    line-height: 1.5rem;
    padding: 4px 16px;
    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
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_Checkbox {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile .mx_SpaceHierarchy_actions .mx_Checkbox label {
    height: 16px;
    width: 16px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover {
    background-color: var(--sidebar-color)
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:focus-within .mx_AccessibleButton, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile:hover .mx_AccessibleButton {
    visibility: visible
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_list li.mx_SpaceHierarchy_roomTileWrapper .mx_SpaceHierarchy_roomTile.mx_SpaceHierarchy_joining .mx_AccessibleButton {
    padding: 4px 18px;
    visibility: visible
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_roomTile:before, .mx_SpaceRoomView_landing .mx_SpaceHierarchy_subspace_children:before {
    background-color: var(--sidebar-color);
    content: "";
    height: 100%;
    left: 6px;
    position: absolute;
    top: 0;
    width: 1px
}

.mx_SpaceRoomView_landing .mx_SpaceHierarchy_actions .mx_SpaceHierarchy_actionsText {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    font-weight: 400;
    line-height: .9375rem
}

.mx_SpaceRoomView_landing > hr {
    background-color: rgba(141, 151, 165, .2);
    border: none;
    height: 1px;
    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(--roomlist-highlights-color);
    --activeBorder-color: var(--timeline-text-color);
    --activeBorder-transparent-gap: 1px;
    --gutterSize: 14px;
    --height-nested: 24px;
    --height-topLevel: 32px;
    background-color: var(--sidebar-color);
    -webkit-box-flex: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_SpacePanel.collapsed {
    width: 68px
}

.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    border-radius: 50%;
    height: 18px;
    position: absolute;
    right: -8px;
    top: 19px;
    width: 18px
}

.mx_SpacePanel .mx_SpacePanel_toggleCollapse:before {
    background-color: var(--timeline-background-color);
    content: "";
    height: inherit;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    width: inherit
}

.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 {
    list-style: none;
    margin: 0;
    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 {
    margin: 0 -10px;
    padding: 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;
    cursor: pointer;
    padding: 4px 4px 4px 0;
    width: 100%
}

.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 {
    border: 3px solid var(--activeBorder-color);
    padding: var(--activeBorder-transparent-gap)
}

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_selectionWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 12px;
    min-width: 0;
    padding: 4px;
    width: calc(100% - 32px)
}

.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;
    display: block;
    -ms-flex: 1;
    flex: 1;
    font: var(--cpd-font-body-md-regular);
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_toggleCollapse {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    height: 20px;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    min-width: var(--gutterSize);
    padding: 10px 0;
    width: var(--gutterSize)
}

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
    border-radius: 8px;
    height: var(--height-topLevel);
    min-width: var(--height-topLevel);
    position: relative;
    width: var(--height-topLevel)
}

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
    content: "";
    height: var(--height-topLevel);
    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;
    position: absolute;
    top: 0;
    width: var(--height-topLevel)
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_videoRooms .mx_SpaceButton_icon {
    background-color: var(--roomlist-highlights-color)
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon:before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon:before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon:before, .mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_videoRooms .mx_SpaceButton_icon:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff)
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon:before {
    -webkit-mask-image: url(../../img/element-icons/home.e0e6ce5.svg);
    mask-image: url(../../img/element-icons/home.e0e6ce5.svg)
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.9dcb53a.svg);
    mask-image: url(../../img/element-icons/roomlist/favorite.9dcb53a.svg)
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon:before {
    -webkit-mask-image: url(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.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.90cb901.svg);
    mask-image: url(../../icons/video-call-solid.90cb901.svg)
}

.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_new .mx_SpaceButton_icon:before {
    background-color: var(--timeline-text-color);
    -webkit-mask-image: url(../../img/element-icons/plus.7b3d018.svg);
    mask-image: url(../../img/element-icons/plus.7b3d018.svg);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.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 {
    display: none;
    height: 20px;
    margin-bottom: auto;
    margin-top: auto;
    min-width: 20px;
    position: absolute;
    right: 4px;
    width: 20px
}

.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_menuButton:before {
    background: var(--timeline-text-color);
    content: "";
    height: 16px;
    left: 2px;
    -webkit-mask-image: url(../../img/element-icons/context-menu.2c3f393.svg);
    mask-image: url(../../img/element-icons/context-menu.2c3f393.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 3px;
    width: 16px
}

.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 {
    padding-left: 16px
}

.mx_SpacePanel .mx_SpaceButton_avatarWrapper {
    line-height: 0;
    position: relative
}

.mx_SpacePanel .mx_SpacePanel_badgeContainer {
    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 {
    background-clip: padding-box;
    margin: 0 2px
}

.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
    border: 3px solid var(--sidebar-color);
    margin: 0 -1px 0 0
}

.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char, .mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char {
    border: 2px solid var(--sidebar-color);
    margin: -5px -5px 0 0
}

.mx_SpacePanel .mx_SpaceButton:focus-within:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton, .mx_SpacePanel .mx_SpaceButton:hover: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:focus-within:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name, .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_hasMenuOpen:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name {
    max-width: calc(100% - 56px)
}

.mx_SpacePanel > .mx_AutoHideScrollbar {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 0 16px;
    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(180deg, transparent, #000 16px);
    mask-image: linear-gradient(180deg, transparent, #000 16px)
}

.mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_bottomOverflow {
    -webkit-mask-image: linear-gradient(0deg, transparent, hsla(0, 0%, 100%, .3) 4px, hsla(0, 0%, 100%, .55) 8px, hsla(0, 0%, 100%, .75) 12px, #000 16px);
    mask-image: linear-gradient(0deg, transparent, hsla(0, 0%, 100%, .3) 4px, hsla(0, 0%, 100%, .55) 8px, hsla(0, 0%, 100%, .75) 12px, #000 16px)
}

.mx_SpacePanel > .mx_AutoHideScrollbar.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16px), linear-gradient(0deg, transparent, hsla(0, 0%, 100%, .3) 4px, hsla(0, 0%, 100%, .55) 8px, hsla(0, 0%, 100%, .75) 12px, #000 16px);
    mask-image: linear-gradient(180deg, transparent, #000 16px), linear-gradient(0deg, transparent, hsla(0, 0%, 100%, .3) 4px, hsla(0, 0%, 100%, .55) 8px, hsla(0, 0%, 100%, .75) 12px, #000 16px);
    -webkit-mask-position: 0 0, 0 100%;
    mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: calc(100% - 10px) 50%, calc(100% - 10px) 50%;
    mask-size: calc(100% - 10px) 50%, calc(100% - 10px) 50%
}

.mx_SpacePanel .mx_UserMenu {
    border-bottom: 1px solid var(--cpd-color-alpha-gray-400);
    margin: 12px 14px 4px 18px;
    max-width: 226px;
    padding-bottom: 12px;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content
}

.mx_SpacePanel .mx_UserMenu .mx_UserMenu_userAvatar_BaseAvatar {
    display: block
}

.mx_SpacePanel_contextMenu {
    max-width: 360px
}

.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_header {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.125rem;
    margin: 12px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconHome:before {
    -webkit-mask-image: url(../../img/element-icons/home.e0e6ce5.svg);
    mask-image: url(../../img/element-icons/home.e0e6ce5.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(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg)
}

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconLeave:before {
    -webkit-mask-image: url(../../img/element-icons/leave.9cf503d.svg);
    mask-image: url(../../img/element-icons/leave.9cf503d.svg)
}

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconMembers:before {
    -webkit-mask-image: url(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.svg)
}

.mx_SpacePanel_contextMenu .mx_SpacePanel_iconPlus:before {
    -webkit-mask-image: url(../../img/element-icons/plus.7b3d018.svg);
    mask-image: url(../../img/element-icons/plus.7b3d018.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
}

.mx_SpacePanel_contextMenu .mx_SpacePanel_contextMenu_separatorLabel {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .625rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .75rem
}

.mx_SpacePanel_sharePublicSpace {
    margin: 0
}

.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 {
    color: var(--timeline-text-color);
    font-size: 1.5rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_description {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    margin-bottom: 24px;
    margin-top: 12px;
    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;
    text-align: right;
    width: var(--innerWidth)
}

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons .mx_AccessibleButton_hasKind {
    margin-left: 16px;
    padding: 8px 22px
}

.mx_SpaceRoomView .mx_MainSplit > div:first-child .mx_SpaceRoomView_buttons input.mx_AccessibleButton {
    border: none
}

.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 {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    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 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    margin: 24px 0 16px
}

.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;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    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 {
    cursor: pointer;
    display: inline-block
}

.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 {
    content: "";
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute
}

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    padding: 4px 18px 4px 40px
}

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_inviteButton:before {
    background: var(--cpd-color-icon-on-solid-primary);
    height: 16px;
    left: 8px;
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    -webkit-mask-size: 16px;
    mask-size: 16px;
    width: 16px
}

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton {
    height: 24px;
    width: 24px
}

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_infoBar .mx_SpaceRoomView_landing_infoBar_interactive .mx_SpaceRoomView_landing_settingsButton:before {
    background: #edf3ff;
    background: var(--tertiary-content, #edf3ff);
    height: 24px;
    left: 0;
    -webkit-mask-image: url(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    top: 0;
    width: 24px
}

.mx_SpaceRoomView .mx_SpaceRoomView_landing .mx_SpaceRoomView_landing_topic {
    font-size: .9375rem;
    margin-bottom: 16px;
    margin-top: 12px;
    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 {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.0625rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 20px 0;
    padding: 16px 32px 16px 72px;
    position: relative;
    width: 432px
}

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton > div {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    font-weight: 400;
    margin-top: 4px
}

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 24px;
    left: 20px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
    mask-size: 24px;
    position: absolute;
    top: 27px;
    width: 24px
}

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope > .mx_AccessibleButton:hover {
    border-color: var(--cpd-color-bg-interactive-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(--timeline-text-color)
}

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_justMeButton:before {
    -webkit-mask-image: url(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.svg)
}

.mx_SpaceRoomView .mx_SpaceRoomView_privateScope .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton:before {
    -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
    mask-image: url(../../img/element-icons/group-members.d86d751.svg)
}

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin-top: 28px
}

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton {
    display: inline-block;
    line-height: 24px;
    padding-left: 32px;
    position: relative
}

.mx_SpaceRoomView .mx_SpaceRoomView_inviteTeammates .mx_SpaceRoomView_inviteTeammates_buttons .mx_AccessibleButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 24px;
    left: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 0;
    width: 24px
}

.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 {
    background-color: var(--cpd-color-icon-primary);
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    mask-image: url(../../img/element-icons/room/invite.440bc20.svg)
}

.mx_SplashPage {
    height: 100%;
    position: relative
}

.mx_SplashPage:before {
    background-image: radial-gradient(53.85% 66.75% at 87.55% 0, rgba(144, 125, 237, .261) 0, rgba(204, 194, 255, 0) 100%), radial-gradient(41.93% 41.93% at 0 0, rgba(36, 45, 66, .28) 0, rgba(204, 194, 255, 0) 100%), radial-gradient(100% 100% at 0 0, rgba(204, 194, 255, .174) 0, hsla(0, 100%, 86%, 0) 100%), radial-gradient(106.35% 96.26% at 100% 0, rgba(204, 194, 255, .4) 0, rgba(174, 244, 229, 0) 100%);
    content: "";
    display: block;
    -webkit-filter: blur(8px);
    filter: blur(8px);
    inset: -9px;
    -webkit-mask: url(../../img/noise.8322d5a.png), -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, .9)), to(rgba(0, 0, 0, .2)));
    -webkit-mask: url(../../img/noise.8322d5a.png), linear-gradient(180deg, rgba(0, 0, 0, .9) 20%, rgba(0, 0, 0, .2));
    mask: url(../../img/noise.8322d5a.png), -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, .9)), to(rgba(0, 0, 0, .2)));
    mask: url(../../img/noise.8322d5a.png), linear-gradient(180deg, rgba(0, 0, 0, .9) 20%, rgba(0, 0, 0, .2));
    opacity: .6;
    position: absolute;
    z-index: -1
}

.mx_TabbedView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    inset: 0;
    margin: 8px 0 0;
    padding: 0 0 0 var(--cpd-space-8x)
}

.mx_TabbedView, .mx_TabbedView_tabsOnLeft {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_TabbedView_tabsOnLeft {
    position: absolute
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
    margin: 0;
    max-width: 220px;
    padding: 0;
    position: fixed;
    width: 220px
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
    margin-left: 280px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel:hover, .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
    color: #edf3ff
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel:hover .mx_TabbedView_maskedIcon:before, .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
    background-color: var(--cpd-color-icon-primary)
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
    background-color: var(--cpd-color-bg-subtle-secondary)
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon {
    height: 20px;
    margin-right: var(--cpd-space-3x);
    width: 20px
}

.mx_TabbedView_tabsOnLeft .mx_TabbedView_maskedIcon:before {
    height: 20px;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
    width: 20px
}

.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: 0;
    padding-right: 52px
}

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: 15px
}

.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, .mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_TabbedView_tabsOnTop .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon {
    height: 22px;
    margin-left: 0;
    margin-right: 8px;
    width: 22px
}

.mx_TabbedView_tabsOnTop .mx_TabbedView_maskedIcon:before {
    height: inherit;
    -webkit-mask-size: 22px;
    mask-size: 22px;
    width: inherit
}

.mx_TabbedView_tabLabels {
    color: #edf3ff
}

.mx_TabbedView_tabLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    font: var(--cpd-font-body-md-medium);
    min-block-size: 40px;
    padding-block: var(--cpd-space-2x);
    padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
    position: relative;
    -webkit-transition: color .1s, background-color .1s;
    transition: color .1s, background-color .1s;
    vertical-align: text-top
}

.mx_TabbedView_maskedIcon {
    display: inline-block
}

.mx_TabbedView_maskedIcon:before {
    background-color: var(--cpd-color-icon-secondary);
    content: "";
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.mx_TabbedView_tabLabel_text {
    vertical-align: middle
}

.mx_TabbedView_tabPanel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_TabbedView_tabPanel, .mx_TabbedView_tabPanelContent {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-height: 0
}

.mx_TabbedView_tabPanelContent {
    overflow: auto
}

.mx_ThreadsActivityCentre_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_ThreadsActivityCentreButton {
    border-radius: 8px;
    margin: 18px auto auto
}

.mx_ThreadsActivityCentreButton.expanded {
    background-color: transparent !important;
    margin-left: 21px
}

.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 {
    margin-right: 14px;
    min-width: 24px
}

.mx_ThreadsActivityCentreButton.expanded .mx_ThreadsActivityCentreButton_Text {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_ThreadsActivityCentreButton:not(.expanded):hover, .mx_ThreadsActivityCentreButton:not(.expanded):hover .mx_ThreadsActivityCentreButton_Icon {
    background-color: #6f7882;
    background-color: var(--quaternary-content, #6f7882);
    color: var(--timeline-text-color)
}

.mx_ThreadsActivityCentreButton .mx_ThreadsActivityCentreButton_Icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_ThreadsActivityCentre_rows {
    max-height: calc(100vh - 200px);
    overflow-y: scroll
}

.mx_ThreadsActivityCentre_rows .mx_ThreadsActivityCentreRow {
    height: 48px
}

.mx_ThreadsActivityCentre_rows .mx_ThreadsActivityCentreRow > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 202px
}

.mx_ThreadsActivityCentre_emptyCaption {
    font-size: 13px;
    padding-left: 16px;
    padding-right: 16px
}

.mx_ToastContainer {
    display: grid;
    grid-template-rows:1fr 14px 6px;
    left: 70px;
    padding: 4px;
    position: absolute;
    top: 0;
    z-index: 101
}

.mx_ToastContainer.mx_ToastContainer_stacked:before {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    content: "";
    grid-column: 1;
    grid-row: 2/4;
    margin: 0 4px
}

.mx_ToastContainer .mx_Toast_toast {
    background-color: var(--cpd-color-bg-canvas-default);
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
    border-radius: 12px;
    -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
    color: var(--timeline-text-color);
    display: grid;
    grid-column: 1;
    grid-row: 1/3;
    grid-template-columns:22px 1fr;
    overflow: hidden;
    grid-column-gap: 8px;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    grid-row-gap: 4px;
    padding: var(--cpd-space-3x);
    row-gap: 4px
}

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:after, .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon:before {
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    grid-column: 1;
    grid-row: 1;
    height: 22px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 22px
}

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification:after {
    background-color: var(--timeline-text-color);
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    mask-image: url(../../img/e2e/normal.ab42a7b.svg)
}

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_verification_warning:before {
    background-color: #fff;
    -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 {
    background-color: #ff5b55;
    -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
    mask-image: url(../../img/e2e/warning.71ffc83.svg)
}

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_secure_backup:after {
    background-color: var(--timeline-text-color);
    -webkit-mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
    mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg)
}

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon.mx_Toast_icon_labs:after {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    -webkit-mask-image: url(../../img/element-icons/flask.6aca159.svg);
    mask-image: url(../../img/element-icons/flask.6aca159.svg)
}

.mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_body, .mx_ToastContainer .mx_Toast_toast.mx_Toast_hasIcon .mx_Toast_title {
    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_description, .mx_ToastContainer .mx_Toast_toast .mx_Toast_title {
    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-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    width: 100%
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
    display: inline;
    font: var(--cpd-font-heading-sm-medium);
    font-weight: var(--cpd-font-weight-medium);
    margin: 0;
    width: auto
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_title .mx_Toast_title_countIndicator {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    line-height: 1.375rem;
    -webkit-margin-start: auto;
    margin-inline-start: auto
}

.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;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
    justify-content: flex-end
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_buttons .mx_AccessibleButton {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 96px
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
    font: var(--cpd-font-body-sm-regular);
    margin: 4px 0 11px;
    max-width: 272px;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_description a {
    text-decoration: none
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_detail {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_deviceID {
    font-size: .625rem
}

.mx_UploadBar {
    padding-left: 65px;
    padding-top: 5px;
    position: relative
}

.mx_UploadBar .mx_ProgressBar {
    width: calc(100% - 40px)
}

.mx_ThreadView .mx_UploadBar {
    padding-left: 0
}

.mx_UploadBar_filename {
    color: #a1b2d1;
    font-size: .9375rem;
    padding-left: 22px;
    padding-right: 38px;
    position: relative;
    vertical-align: middle
}

.mx_UploadBar_filename:before {
    background-color: #a1b2d1;
    content: "";
    height: 18px;
    left: 0;
    -webkit-mask-image: url(../../img/element-icons/upload.1018a2f.svg);
    mask-image: url(../../img/element-icons/upload.1018a2f.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    top: 0;
    width: 18px
}

.mx_UploadBar_cancel {
    background-color: #a1b2d1;
    height: 16px;
    margin-right: 16px;
    margin-top: 5px;
    -webkit-mask-image: url(../../img/icons-close.18b3d80.svg);
    mask-image: url(../../img/icons-close.18b3d80.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px
}

.mx_UserMenu {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mx_UserMenu, .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
}

.mx_UserMenu .mx_AccessibleButton .mx_UserMenu_userAvatarLive {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    border-radius: 6px;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 12px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 25px;
    position: absolute;
    top: 20px;
    width: 12px
}

.mx_UserMenu .mx_UserMenu_contextMenuButton {
    width: 100%
}

.mx_UserMenu .mx_UserMenu_name {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5rem;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_UserMenu .mx_UserMenu_dndBadge {
    border-radius: 50%;
    bottom: -2px;
    height: 16px;
    position: absolute;
    right: -7px;
    width: 16px
}

.mx_UserMenu .mx_UserMenu_dndBadge:before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    content: "";
    height: 16px;
    -webkit-mask-image: url(../../img/element-icons/roomlist/dnd.83b4a64.svg);
    mask-image: url(../../img/element-icons/roomlist/dnd.83b4a64.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 16px
}

.mx_IconizedContextMenu.mx_UserMenu_contextMenu {
    width: 258px
}

.mx_UserMenu_contextMenu.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_AccessibleButton {
    padding-bottom: 16px;
    padding-top: 16px
}

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name {
    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)
}

.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-heading-sm-regular);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.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 {
    background-color: #e3e8f0;
    border-radius: 32px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    margin-left: 8px;
    max-width: 32px;
    min-width: 32px;
    width: 32px;
    -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 {
    display: inline-block;
    padding-top: 0
}

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts > span {
    display: block;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header.mx_UserMenu_contextMenu_guestPrompts > span + span {
    margin-top: 8px
}

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
    display: block;
    height: 16px;
    width: 16px
}

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon:before {
    background: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    display: block;
    height: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 16px
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconHome:before {
    -webkit-mask-image: url(../../img/element-icons/home.e0e6ce5.svg);
    mask-image: url(../../img/element-icons/home.e0e6ce5.svg)
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconDnd:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/dnd.83b4a64.svg);
    mask-image: url(../../img/element-icons/roomlist/dnd.83b4a64.svg)
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconDndOff:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/dnd-cross.2cf7314.svg);
    mask-image: url(../../img/element-icons/roomlist/dnd-cross.2cf7314.svg)
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconBell:before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
    mask-image: url(../../img/element-icons/notifications.988ddb0.svg)
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconLock:before {
    -webkit-mask-image: url(../../img/element-icons/security.fa860ea.svg);
    mask-image: url(../../img/element-icons/security.fa860ea.svg)
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconSettings:before {
    -webkit-mask-image: url(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg)
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconMessage:before {
    -webkit-mask-image: url(../../img/element-icons/feedback.0bc9353.svg);
    mask-image: url(../../img/element-icons/feedback.0bc9353.svg)
}

.mx_UserMenu_contextMenu .mx_UserMenu_iconSignOut:before {
    -webkit-mask-image: url(../../img/element-icons/leave.9cf503d.svg);
    mask-image: url(../../img/element-icons/leave.9cf503d.svg)
}

.mx_UserMenu_CustomStatusSection {
    margin: 0 12px 8px
}

.mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field.mx_UserMenu_CustomStatusSection_field_hasQuery .mx_UserMenu_CustomStatusSection_clear {
    display: block
}

.mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_input {
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    border-radius: 8px;
    width: 100%
}

.mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_input:focus + .mx_UserMenu_CustomStatusSection_clear {
    display: block
}

.mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_clear {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 50%;
    display: none;
    height: 16px;
    margin-right: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 16px
}

.mx_UserMenu_CustomStatusSection .mx_UserMenu_CustomStatusSection_field > .mx_UserMenu_CustomStatusSection_clear:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: inherit;
    -webkit-mask-image: url(../../img/feather-customised/x.c543757.svg);
    mask-image: url(../../img/feather-customised/x.c543757.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 12px;
    mask-size: 12px;
    position: absolute;
    width: inherit
}

.mx_UserMenu_CustomStatusSection > p {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem;
    margin: 4px 0
}

.mx_UserMenu_CustomStatusSection .mx_AccessibleButton_kind_primary_outline {
    display: block
}

.mx_ViewSource pre {
    font-size: .75rem;
    padding: .5em 1em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap
}

.mx_ViewSource .mx_ViewSource_header {
    border-bottom: 1px solid #6f7882;
    border-bottom: 1px solid var(--quinary-content, #6f7882);
    font-family: monospace;
    margin-bottom: 12px;
    padding-bottom: 12px
}

.mx_ViewSource .mx_ViewSource_header .mx_CopyableText {
    word-break: break-all
}

.mx_ViewSource .mx_ViewSource_heading {
    color: var(--timeline-text-color);
    font-size: 1.0625rem;
    font-weight: 400;
    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 {
    height: 24px;
    margin-right: 4px;
    position: relative;
    width: 24px
}

.mx_CompleteSecurity_heroIcon {
    height: 128px;
    margin: 0 auto;
    position: relative;
    width: 128px
}

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

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

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

.mx_CompleteSecurity_skip {
    position: absolute;
    right: 24px
}

.mx_CompleteSecurity_body {
    font-size: .9375rem
}

.mx_CompleteSecurity_waiting {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff)
}

.mx_CompleteSecurity_actionRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 1.75rem
}

.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
    -webkit-margin-start: 18px;
    margin-inline-start: 18px
}

.mx_CompleteSecurity_actionRow .mx_AccessibleButton.warning {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_ConfirmSessionLockTheftView {
    height: 100%;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_ConfirmSessionLockTheftView, .mx_ConfirmSessionLockTheftView_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_ConfirmSessionLockTheftView_body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 400px
}

.mx_Login_submit {
    background-color: var(--cpd-color-bg-action-primary-rest);
    border: 0;
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: var(--cpd-font-body-md-regular);
    padding: 7px 1.5em;
    vertical-align: middle;
    width: auto
}

.mx_Login_submit:not(:focus-visible) {
    outline: none
}

.mx_Login_submit {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: var(--cpd-font-weight-semibold);
    margin-bottom: 24px;
    margin-top: 24px;
    text-align: center;
    width: 100%
}

.mx_Login_submit:disabled {
    cursor: default;
    opacity: .3
}

.mx_Login_loader {
    display: inline;
    left: 8px;
    position: relative;
    top: 2px
}

.mx_Login_loader .mx_Spinner {
    display: inline
}

.mx_Login_loader .mx_Spinner img {
    height: 16px;
    width: 16px
}

.mx_Login_error {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 12px;
    text-align: center
}

.mx_Login_error.mx_Login_serverError {
    font-weight: 400;
    text-align: left
}

.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
    color: #ff8d13
}

.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(--timeline-text-color)
}

.mx_Login_type_container .mx_Field {
    margin: 0
}

.mx_Login_type_label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_Login_underlinedServerName {
    border-bottom: 1px dashed #0dbd8b;
    border-bottom: 1px dashed var(--accent, #0dbd8b);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

div.mx_AccessibleButton_kind_link.mx_Login_forgot {
    display: block;
    margin-top: 24px
}

div.mx_AccessibleButton_kind_link.mx_Login_forgot.mx_AccessibleButton_disabled {
    cursor: not-allowed
}

.mx_Login_spinner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 14px
}

.mx_Login_fullWidthButton {
    margin-bottom: 16px;
    width: 100%
}

.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;
    height: 100%;
    justify-content: center;
    width: 100%
}

.mx_LoginSplashView_migrationProgress .mx_ProgressBar {
    border-radius: 8px;
    height: 8px;
    width: 600px
}

.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 {
    bottom: 30px;
    position: absolute;
    text-align: center;
    width: 100%
}

.mx_LoginSplashView_syncError {
    background-color: #df2a8b;
    border-radius: 5px;
    color: #fff;
    display: table;
    left: 50%;
    padding: 30px;
    position: absolute;
    top: 100px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.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 {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular)
}

.mx_Register_mainContent p.secondary {
    color: var(--timeline-text-secondary-color)
}

.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;
    border-top: 1px solid rgba(141, 151, 165, .2);
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px
}

.mx_Register_footerActions > * {
    -ms-flex-preferred-size: content;
    flex-basis: content
}

.mx_SessionLockStolenView h1 {
    font-size: 2rem;
    font-weight: var(--cpd-font-weight-semibold);
    text-align: center
}

.mx_SessionLockStolenView h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    text-align: center
}

.mx_SetupEncryptionBody_reset {
    color: var(--timeline-text-secondary-color);
    margin-top: .875rem
}

.mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link.mx_AccessibleButton_kind_link_inline {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_MediaBody.mx_AudioPlayer_container {
    padding: 16px 12px 12px
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_PlayPauseButton {
    margin-right: 8px
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo > * {
    display: block
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo .mx_AudioPlayer_mediaName {
    color: var(--timeline-text-color);
    font-size: .9375rem;
    line-height: .9375rem;
    overflow: hidden;
    padding-bottom: 4px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_primaryContainer .mx_AudioPlayer_mediaInfo .mx_AudioPlayer_byline {
    font-size: .75rem;
    line-height: .75rem
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_SeekBar {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
    min-width: 2.625rem;
    padding-left: 4px;
    text-align: justify;
    white-space: nowrap
}

.mx_PlayPauseButton {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 32px;
    height: 32px;
    min-height: 32px;
    min-width: 32px;
    position: relative;
    width: 32px
}

.mx_PlayPauseButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute
}

.mx_PlayPauseButton.mx_PlayPauseButton_disabled:before {
    opacity: .5
}

.mx_PlayPauseButton.mx_PlayPauseButton_play:before {
    height: 16px;
    left: 12px;
    -webkit-mask-image: url(../../img/element-icons/play.1b76a00.svg);
    mask-image: url(../../img/element-icons/play.1b76a00.svg);
    top: 8px;
    width: 13px
}

.mx_PlayPauseButton.mx_PlayPauseButton_pause:before {
    height: 12px;
    left: 11px;
    -webkit-mask-image: url(../../img/element-icons/pause.9c2f319.svg);
    mask-image: url(../../img/element-icons/pause.9c2f319.svg);
    top: 10px;
    width: 10px
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 11px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    contain: content
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle, .mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform {
    min-width: 0
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar {
    background-color: #6f7882;
    background-color: var(--quaternary-content, #6f7882);
    height: 100%;
    -webkit-transform: scaleY(max(.05, var(--barHeight)));
    transform: scaleY(max(.05, var(--barHeight)))
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    -webkit-transition: background-color .25s ease;
    transition: background-color .25s ease
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_Clock {
    min-width: 2.625rem;
    padding-left: 8px;
    padding-right: 6px;
    width: 2.625rem
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle {
    display: inline-block;
    margin-left: 8px;
    margin-right: 6px;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 30px
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_Waveform {
    left: 0;
    top: 0
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar {
    background: none;
    height: 30px;
    left: 0;
    position: absolute;
    top: -2px
}

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

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-webkit-slider-thumb {
    background-color: transparent;
    height: 10px;
    width: 10px
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-thumb {
    background-color: transparent;
    height: 10px;
    width: 10px
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle + .mx_Clock {
    padding: 0;
    text-align: right
}

.mx_SeekBar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #6f7882;
    background: var(--quaternary-content, #6f7882);
    cursor: pointer;
    height: 1px;
    outline: none;
    position: relative;
    width: 100%
}

.mx_SeekBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    border-radius: 8px;
    cursor: pointer;
    height: 8px;
    width: 8px
}

.mx_SeekBar::-moz-range-thumb {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    height: 8px;
    width: 8px
}

.mx_SeekBar:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scaleX(var(--fillTo));
    transform: scaleX(var(--fillTo));
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    width: 100%
}

.mx_SeekBar::-moz-range-progress {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    height: 1px
}

.mx_SeekBar:disabled {
    opacity: .5
}

.mx_SeekBar:after {
    bottom: -6px;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: -6px
}

.mx_Waveform {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 30px;
    position: relative;
    top: 1px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

.mx_Waveform .mx_Waveform_bar {
    border: 1px solid transparent;
    border-radius: 2px;
    margin-left: 1px;
    margin-right: 1px;
    max-height: 100%;
    min-height: 0;
    width: 0
}

.mx_AuthBody {
    background-color: var(--timeline-background-color);
    border-radius: 0 4px 4px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--timeline-text-secondary-color);
    font-size: .75rem;
    padding: 25px 60px;
    width: 500px
}

.mx_AuthBody b {
    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 {
    color: var(--timeline-text-color);
    font-size: 1.5rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin-top: 8px
}

.mx_AuthBody h2 {
    color: var(--timeline-text-secondary-color);
    font: var(--cpd-font-body-md-semibold)
}

.mx_AuthBody h2.mx_AuthBody_centered {
    text-align: center
}

.mx_AuthBody a:hover, .mx_AuthBody a:link, .mx_AuthBody a:visited {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    text-decoration: none
}

.mx_AuthBody fieldset {
    display: block
}

.mx_AuthBody .mx_AuthBody_icon {
    width: 40px
}

.mx_AuthBody .mx_AuthBody_lockIcon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    height: 32px;
    margin-bottom: -3px
}

.mx_AuthBody .mx_AuthBody_text {
    margin-bottom: 48px;
    margin-top: 0
}

.mx_AuthBody input[type=password], .mx_AuthBody input[type=text] {
    color: var(--timeline-text-color)
}

.mx_AuthBody .mx_Field label {
    color: var(--timeline-text-secondary-color)
}

.mx_AuthBody .mx_Field input, .mx_AuthBody .mx_Field select {
    background-color: var(--timeline-background-color);
    color: var(--timeline-text-color)
}

.mx_AuthBody .mx_Field input:not(:-moz-placeholder-shown) + label, .mx_AuthBody .mx_Field textarea:not(:-moz-placeholder-shown) + label {
    background-color: var(--timeline-background-color)
}

.mx_AuthBody .mx_Field input:not(:-ms-input-placeholder) + label, .mx_AuthBody .mx_Field textarea:not(:-ms-input-placeholder) + label {
    background-color: var(--timeline-background-color)
}

.mx_AuthBody .mx_Field input:focus + label, .mx_AuthBody .mx_Field input:not(:placeholder-shown) + label, .mx_AuthBody .mx_Field select + label, .mx_AuthBody .mx_Field textarea:focus + label, .mx_AuthBody .mx_Field textarea:not(:placeholder-shown) + label, .mx_AuthBody .mx_Field_labelAlwaysTopLeft label {
    background-color: var(--timeline-background-color)
}

.mx_AuthBody input.error {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_AuthBody .mx_Login_submit {
    height: 32px;
    margin-top: 16px
}

.mx_AuthBody .mx_ErrorMessage {
    margin-bottom: 12px;
    margin-top: 2px
}

.mx_AuthBody .mx_Field input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mx_AuthBody .mx_Field_select:before {
    background-color: var(--timeline-text-color)
}

.mx_AuthBody .mx_Dropdown {
    color: var(--timeline-text-color)
}

.mx_AuthBody .mx_Dropdown_arrow {
    background: var(--timeline-text-color)
}

.mx_AuthBody .mx_Dropdown_menu {
    background-color: var(--timeline-background-color)
}

.mx_AuthBody .mx_Dropdown_menu .mx_Dropdown_option_highlight {
    background-color: #ddd
}

.mx_AuthBody.mx_AuthBody_forgot-password {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    min-height: 600px;
    padding: 50px 32px
}

.mx_AuthBody.mx_AuthBody_forgot-password h1 {
    margin: 24px 0
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_button-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_Login_submit {
    font-weight: var(--cpd-font-weight-semibold);
    margin: 0 0 16px
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_text {
    margin-bottom: 32px
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_text p {
    margin: 0 0 8px
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_sign-in-instead-button {
    font-weight: var(--cpd-font-weight-semibold);
    padding: 4px
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AuthBody_fieldRow {
    margin-bottom: 24px
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AccessibleButton.mx_AccessibleButton_hasKind {
    background: none
}

.mx_AuthBody.mx_AuthBody_forgot-password .mx_AccessibleButton.mx_AccessibleButton_hasKind:disabled {
    cursor: default;
    opacity: .4
}

.mx_AuthBody_did-not-receive {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    gap: 8px
}

.mx_AuthBody_did-not-receive, .mx_AuthBody_resend-button {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_AuthBody_resend-button {
    border-radius: 8px;
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    gap: 4px;
    padding: 4px
}

.mx_AuthBody_resend-button:hover {
    background-color: #21262c;
    background-color: var(--system, #21262c)
}

.mx_AuthBody_emailPromptIcon {
    width: 57px
}

.mx_AuthBody_emailPromptIcon--shifted {
    margin-bottom: -17px;
    position: relative;
    top: -17px;
    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;
    padding-top: 28px;
    text-align: center
}

.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title {
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-top: 16px
}

.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_title .mx_InlineSpinner img {
    margin-right: 5px;
    vertical-align: sub
}

.mx_AuthBody_paddedFooter .mx_AuthBody_paddedFooter_subtitle {
    font-size: .625rem;
    line-height: .875rem;
    margin-top: 8px
}

.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;
        max-width: 500px;
        padding: 10px;
        width: auto
    }
}

.mx_AuthFooter {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .8)));
    background: linear-gradient(transparent, rgba(0, 0, 0, .8));
    font: var(--cpd-font-body-md-regular);
    opacity: .72;
    padding: 20px 0;
    text-align: center;
    width: 100%
}

.mx_AuthFooter a:hover, .mx_AuthFooter a:link, .mx_AuthFooter a:visited {
    color: #fff;
    margin: 0 22px
}

.mx_AuthHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 25px;
    width: 206px
}

@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 {
    width: 100%
}

@media only screen and (max-width: 480px) {
    .mx_AuthHeaderLogo {
        display: none
    }
}

.mx_AuthPage {
    min-height: 100%;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: #2e3649;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    overflow: auto
}

.mx_AuthPage, .mx_AuthPage_modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_AuthPage_modal {
    background-color: var(--timeline-background-color-50pct);
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .33);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .33);
    margin: 100px auto auto
}

@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 {
    background-color: var(--timeline-background-color);
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--timeline-text-color);
    padding: 20px;
    width: 600px
}

.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:hover, .mx_CompleteSecurityBody a:link, .mx_CompleteSecurityBody a:visited {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    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;
    height: 100%
}

.mx_CountryDropdown_option, .mx_CountryDropdown_shortOption {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_CountryDropdown_option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_InteractiveAuthEntryComponents .mx_InteractiveAuthEntryComponents_termsSubmit {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 5px;
    margin-top: 20px;
    width: 100%
}

.mx_InteractiveAuthEntryComponents_msisdnWrapper {
    text-align: center
}

.mx_InteractiveAuthEntryComponents_msisdnEntry {
    border: 1px solid #c7c7c7;
    border: 1px solid var(--strong-input-border-color, #c7c7c7);
    border-radius: 3px;
    font-size: 200%;
    font-weight: 700;
    width: 6em
}

.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b)
}

.mx_InteractiveAuthEntryComponents_msisdnSubmit {
    margin-bottom: 5px;
    margin-top: 4px
}

.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
    background-color: var(--timeline-text-secondary-color);
    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
}

.mx_InteractiveAuthEntryComponents_emailWrapper .mx_AccessibleButton_kind_link_inline {
    display: inline-block !important
}

.mx_InteractiveAuthEntryComponents_emailWrapper .mx_AccessibleButton_kind_link_inline .mx_Spinner {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    vertical-align: middle !important;
    width: auto !important
}

.mx_AuthBody_language {
    width: 100%
}

.mx_AuthBody_language .mx_Dropdown_input {
    border: none;
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-semibold);
    width: auto
}

.mx_AuthBody_language .mx_Dropdown_arrow {
    background: var(--timeline-text-color)
}

.mx_LoginWithQRSection p {
    margin-bottom: 16px;
    margin-top: 0
}

.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 .mx_LoginWithQR_separator {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator:after, .mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator:before {
    content: "";
    -webkit-box-flex: 1;
    border-bottom: 1px solid #6f7882;
    border-bottom: 1px solid var(--quinary-content, #6f7882);
    -ms-flex: 1;
    flex: 1
}

.mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator:not(:empty):before {
    margin-right: 1em
}

.mx_AuthPage .mx_LoginWithQR .mx_LoginWithQR_separator:not(:empty):after {
    margin-left: 1em
}

.mx_AuthPage .mx_LoginWithQR {
    font-size: .9375rem
}

.mx_UserSettingsDialog .mx_LoginWithQR .mx_AccessibleButton + .mx_AccessibleButton {
    margin-left: 12px
}

.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 li {
    line-height: 1.8
}

.mx_UserSettingsDialog .mx_LoginWithQR .mx_QRCode {
    margin: 28px 0
}

.mx_UserSettingsDialog .mx_LoginWithQR .mx_LoginWithQR_buttons {
    text-align: center
}

.mx_LoginWithQR, .mx_UserSettingsDialog .mx_LoginWithQR .mx_LoginWithQR_qrWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_LoginWithQR {
    min-height: 350px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_LoginWithQR .mx_LoginWithQR_centreTitle h1 {
    text-align: center
}

.mx_LoginWithQR h1 > svg.normal {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_LoginWithQR h1 > svg.error {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_LoginWithQR h1 > svg.success {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_LoginWithQR h1 > svg {
    height: 1.3em;
    margin-right: 8px;
    vertical-align: middle
}

.mx_LoginWithQR .mx_LoginWithQR_confirmationDigits {
    color: var(--timeline-text-color);
    font-size: 1.5rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 48px auto;
    text-align: center
}

.mx_LoginWithQR .mx_LoginWithQR_confirmationAlert {
    border: 1px solid #6f7882;
    border: 1px solid var(--quaternary-content, #6f7882);
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.5em;
    padding: 8px
}

.mx_LoginWithQR .mx_LoginWithQR_confirmationAlert svg {
    height: 30px
}

.mx_LoginWithQR .mx_LoginWithQR_separator {
    margin: 1em 0
}

.mx_LoginWithQR ol {
    list-style-position: inside;
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

.mx_LoginWithQR ol li::marker {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.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 {
    background-color: var(--cpd-color-bg-subtle-secondary);
    border-radius: 28px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 28px;
    padding: 4px
}

.mx_LoginWithQR .mx_LoginWithQR_BackButton svg {
    height: 100%
}

.mx_LoginWithQR .mx_LoginWithQR_breadcrumbs {
    color: var(--cpd-color-text-secondary);
    font-size: .8125rem
}

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

.mx_LoginWithQR .mx_QRCode {
    border-radius: 8px
}

.mx_LoginWithQR .mx_LoginWithQR_spinner, .mx_LoginWithQR .mx_QRCode {
    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;
    -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;
    border: 0;
    border-radius: "2px";
    height: 4px;
    position: absolute;
    top: -12px;
    width: 100%
}

progress.mx_PassphraseField_progress::-moz-progress-bar {
    border-radius: "2px"
}

progress.mx_PassphraseField_progress::-webkit-progress-bar, progress.mx_PassphraseField_progress::-webkit-progress-value {
    border-radius: "2px"
}

progress.mx_PassphraseField_progress {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

progress.mx_PassphraseField_progress::-moz-progress-bar {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

progress.mx_PassphraseField_progress::-webkit-progress-value {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

progress.mx_PassphraseField_progress[value="2"], progress.mx_PassphraseField_progress[value="3"] {
    color: var(--cpd-color-text-decorative-5)
}

progress.mx_PassphraseField_progress[value="2"]::-moz-progress-bar, progress.mx_PassphraseField_progress[value="3"]::-moz-progress-bar {
    background-color: var(--cpd-color-text-decorative-5)
}

progress.mx_PassphraseField_progress[value="2"]::-webkit-progress-value, progress.mx_PassphraseField_progress[value="3"]::-webkit-progress-value {
    background-color: var(--cpd-color-text-decorative-5)
}

progress.mx_PassphraseField_progress[value="4"] {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

progress.mx_PassphraseField_progress[value="4"]::-moz-progress-bar {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

progress.mx_PassphraseField_progress[value="4"]::-webkit-progress-value {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.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 {
    margin-bottom: 10px;
    width: 160px
}

button.mx_BaseAvatar {
    font-family: inherit;
    line-height: inherit
}

.mx_DecoratedRoomAvatar, .mx_ExtraTile {
    contain: content;
    line-height: 0;
    position: relative
}

.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-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
    border-radius: 50%;
    bottom: 6.25%;
    height: 25%;
    position: absolute;
    right: 6.25%;
    width: 25%
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon:before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon:before {
    border-radius: 8px;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    width: 100%
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe:before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe:before {
    background: #edf3ff;
    background: var(--secondary-content, #edf3ff);
    -webkit-mask-image: url(../../img/globe.0408a7a.svg);
    mask-image: url(../../img/globe.0408a7a.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_offline:before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_offline:before {
    background-color: #e3e8f0
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_online:before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_online:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_away:before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_away:before {
    background-color: #d9b072
}

.mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_busy:before, .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_busy:before {
    background-color: #ff5b55
}

.mx_DecoratedRoomAvatar .mx_NotificationBadge, .mx_DecoratedRoomAvatar .mx_RoomTile_badgeContainer, .mx_ExtraTile .mx_NotificationBadge, .mx_ExtraTile .mx_RoomTile_badgeContainer {
    height: 18px;
    position: absolute;
    right: 0;
    top: 0;
    width: 18px
}

.mx_WidgetAvatar {
    border-radius: 4px
}

.mx_BetaCard {
    background-color: var(--panels, var(--cpd-color-gray-600));
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    padding: 24px
}

.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 {
    color: var(--timeline-text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.375rem;
    margin: 4px 0 14px;
    -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: .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
}

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_buttons .mx_AccessibleButton:first-child {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_refreshWarning {
    font-size: .625rem;
    margin-top: 8px;
    text-align: center
}

.mx_BetaCard .mx_BetaCard_columns .mx_BetaCard_columns_description .mx_BetaCard_faq {
    font: var(--cpd-font-body-xs-regular);
    margin-top: 20px
}

.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 {
    border-radius: 4px;
    height: 100%;
    max-width: 300px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag {
    color: var(--timeline-text-color);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin: 16px 0 0
}

.mx_BetaCard .mx_BetaCard_relatedSettings .mx_SettingsFlag .mx_SettingsFlag_microcopy {
    font: var(--cpd-font-body-sm-regular);
    margin-top: 4px
}

.mx_BetaCard_betaPill {
    background-color: var(--primary-color);
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 15px;
    padding: 4px 10px;
    text-transform: uppercase;
    vertical-align: text-bottom;
    word-break: keep-all
}

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

.mx_IconizedContextMenu {
    margin: 0;
    min-width: 146px;
    padding: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList > * {
    padding-left: 20px;
    padding-right: 20px
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_label {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_optionList_notFirst, .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:nth-child(n+2) {
    border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400)
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_IconizedContextMenu_item:first-child {
    border-radius: 8px 8px 0 0
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_IconizedContextMenu_item:last-child {
    border-radius: 0 0 8px 8px
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child {
    border-radius: 8px
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item {
    color: var(--timeline-text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font: var(--cpd-font-body-md-regular);
    padding-bottom: 12px;
    padding-top: 12px;
    text-decoration: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item:focus-visible, .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item:hover {
    background-color: var(--cpd-color-bg-action-secondary-hovered)
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item.mx_AccessibleButton_disabled {
    cursor: not-allowed;
    opacity: .5
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon, .mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item img {
    max-width: 16px;
    min-width: 16px;
    width: 16px
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_IconizedContextMenu_item span.mx_IconizedContextMenu_label {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    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 {
    height: 16px;
    position: relative;
    width: 16px
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_icon:before {
    background-color: var(--cpd-color-icon-primary);
    content: "";
    height: inherit;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: inherit
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_item {
    color: #ff5b55 !important;
    color: var(--alert, #ff5b55) !important
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red .mx_IconizedContextMenu_icon:before {
    background-color: var(--cpd-color-icon-critical-primary)
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red {
    color: #ff5b55 !important;
    color: var(--alert, #ff5b55) !important
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon:before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_item, .mx_IconizedContextMenu .mx_IconizedContextMenu_active.mx_IconizedContextMenu_item {
    color: #0dbd8b !important;
    color: var(--accent, #0dbd8b) !important
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_active .mx_IconizedContextMenu_icon:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_IconizedContextMenu.mx_IconizedContextMenu_compact .mx_IconizedContextMenu_optionList > * {
    padding: 8px 16px 8px 12px
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_checked, .mx_IconizedContextMenu .mx_IconizedContextMenu_unchecked {
    margin-left: 16px;
    margin-right: -5px
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_developerTools:before {
    -webkit-mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg);
    mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg)
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_checked:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.76b08f2.svg);
    mask-image: url(../../img/element-icons/roomlist/checkmark.76b08f2.svg)
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_unchecked:before {
    content: normal
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_sublabel {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    margin-left: 20px
}

.mx_IconizedContextMenu_item.mx_IconizedContextMenu_itemDestructive {
    color: #ff5b55 !important;
    color: var(--alert, #ff5b55) !important
}

.mx_LegacyCallContextMenu_item {
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    vertical-align: center;
    width: 205px
}

.mx_MessageContextMenu .mx_IconizedContextMenu_icon {
    display: block;
    height: 16px;
    width: 16px
}

.mx_MessageContextMenu .mx_IconizedContextMenu_icon:before {
    content: "";
    display: block;
    height: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 16px
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconCollapse:before {
    -webkit-mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg);
    mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconReport:before {
    -webkit-mask-image: url(../../img/element-icons/warning-badge.203170a.svg);
    mask-image: url(../../img/element-icons/warning-badge.203170a.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconLink:before {
    -webkit-mask-image: url(../../img/element-icons/link.e24e5a8.svg);
    mask-image: url(../../img/element-icons/link.e24e5a8.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(../../img/element-icons/check-white.9400525.svg);
    mask-image: url(../../img/element-icons/check-white.9400525.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconForward:before {
    -webkit-mask-image: url(../../img/element-icons/message/fwd.5170eae.svg);
    mask-image: url(../../img/element-icons/message/fwd.5170eae.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconRedact:before {
    -webkit-mask-image: url(../../img/element-icons/trashcan.2f78f2d.svg);
    mask-image: url(../../img/element-icons/trashcan.2f78f2d.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconResend:before {
    -webkit-mask-image: url(../../img/element-icons/retry.8a39798.svg);
    mask-image: url(../../img/element-icons/retry.8a39798.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconSource:before {
    -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.14db777.svg);
    mask-image: url(../../img/element-icons/room/format-bar/code.14db777.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconQuote:before {
    -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.72d307f.svg);
    mask-image: url(../../img/element-icons/room/format-bar/quote.72d307f.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconPin: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_MessageContextMenu .mx_MessageContextMenu_iconUnpin:before {
    -webkit-mask-image: url(../../img/element-icons/room/pin.c358af7.svg);
    mask-image: url(../../img/element-icons/room/pin.c358af7.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconCopy:before {
    height: 12px;
    left: 2px;
    -webkit-mask-image: url(../../img/element-icons/copy.4ee219c.svg);
    mask-image: url(../../img/element-icons/copy.4ee219c.svg);
    position: relative;
    top: 3px;
    width: 12px
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconEdit:before {
    -webkit-mask-image: url(../../img/element-icons/room/message-bar/edit.940a38c.svg);
    mask-image: url(../../img/element-icons/room/message-bar/edit.940a38c.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconReply:before {
    -webkit-mask-image: url(../../img/element-icons/room/message-bar/reply.b232084.svg);
    mask-image: url(../../img/element-icons/room/message-bar/reply.b232084.svg)
}

.mx_MessageContextMenu .mx_MessageContextMenu_iconReplyInThread:before {
    -webkit-mask-image: url(../../img/element-icons/message/thread.d1987ec.svg);
    mask-image: url(../../img/element-icons/message/thread.d1987ec.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(../../img/element-icons/roomlist/favorite.9dcb53a.svg);
    mask-image: url(../../img/element-icons/roomlist/favorite.9dcb53a.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(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.svg)
}

.mx_RoomGeneralContextMenu_iconFiles:before {
    -webkit-mask-image: url(../../img/element-icons/room/files.ff2ae8d.svg);
    mask-image: url(../../img/element-icons/room/files.ff2ae8d.svg)
}

.mx_RoomGeneralContextMenu_iconPins:before {
    -webkit-mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
    mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg)
}

.mx_RoomGeneralContextMenu_iconWidgets:before {
    -webkit-mask-image: url(../../img/element-icons/room/apps.931b680.svg);
    mask-image: url(../../img/element-icons/room/apps.931b680.svg)
}

.mx_RoomGeneralContextMenu_iconSettings:before {
    -webkit-mask-image: url(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg)
}

.mx_RoomGeneralContextMenu_iconExport:before {
    -webkit-mask-image: url(../../img/element-icons/export.2d0320e.svg);
    mask-image: url(../../img/element-icons/export.2d0320e.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(../../img/element-icons/link.e24e5a8.svg);
    mask-image: url(../../img/element-icons/link.e24e5a8.svg)
}

.mx_RoomGeneralContextMenu_iconInvite:before {
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    mask-image: url(../../img/element-icons/room/invite.440bc20.svg)
}

.mx_RoomGeneralContextMenu_iconSignOut:before {
    -webkit-mask-image: url(../../img/element-icons/leave.9cf503d.svg);
    mask-image: url(../../img/element-icons/leave.9cf503d.svg)
}

.mx_RoomNotificationContextMenu_iconBell:before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
    mask-image: url(../../img/element-icons/notifications.988ddb0.svg)
}

.mx_RoomNotificationContextMenu_iconBellDot:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg);
    mask-image: url(../../img/element-icons/roomlist/notifications-default.63a2b44.svg)
}

.mx_RoomNotificationContextMenu_iconBellMentions:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg);
    mask-image: url(../../img/element-icons/roomlist/notifications-dm.6739542.svg)
}

.mx_RoomNotificationContextMenu_iconBellCrossed:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg);
    mask-image: url(../../img/element-icons/roomlist/notifications-off.0b8adcc.svg)
}

.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 {
    margin: 0 0 15px;
    -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
}

.mx_AddExistingToSpace .mx_AddExistingToSpace_section:not(:first-child) {
    margin-top: 24px
}

.mx_AddExistingToSpace .mx_AddExistingToSpace_section > h3 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    margin: 0
}

.mx_AddExistingToSpace .mx_AddExistingToSpace_section .mx_AccessibleButton_kind_link {
    font-size: .75rem;
    line-height: .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;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    flex-grow: 1;
    font-size: .75rem;
    line-height: .9375rem
}

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer > span .mx_ProgressBar {
    border-radius: 8px;
    height: 8px;
    width: 100%
}

.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 {
    color: var(--timeline-text-color);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-top: 8px
}

.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 {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.125rem
}

.mx_AddExistingToSpace .mx_AddExistingToSpace_footer .mx_AddExistingToSpace_error .mx_AddExistingToSpace_errorCaption {
    color: var(--timeline-text-color);
    font-size: .75rem;
    line-height: .9375rem;
    margin-top: 4px
}

.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 {
    background-color: var(--timeline-text-color);
    content: "";
    height: 18px;
    left: 0;
    -webkit-mask-image: url(../../img/element-icons/retry.8a39798.svg);
    mask-image: url(../../img/element-icons/retry.8a39798.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 18px
}

.mx_AddExistingToSpaceDialog {
    color: var(--timeline-text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 480px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 80vh;
    min-height: 0
}

.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-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    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;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    -ms-flex: initial;
    flex: initial;
    font-size: .9375rem;
    height: auto;
    line-height: 1.5rem
}

.mx_SubspaceSelector .mx_Dropdown_input > .mx_Dropdown_option .mx_BaseAvatar {
    display: none
}

.mx_SubspaceSelector .mx_Dropdown_input .mx_Dropdown_menu .mx_SubspaceSelector_dropdownOptionActive {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    padding-right: 32px;
    position: relative
}

.mx_SubspaceSelector .mx_Dropdown_input .mx_Dropdown_menu .mx_SubspaceSelector_dropdownOptionActive:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    content: "";
    height: 20px;
    -webkit-mask-image: url(../../img/element-icons/roomlist/checkmark.76b08f2.svg);
    mask-image: url(../../img/element-icons/roomlist/checkmark.76b08f2.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    right: 0;
    top: 8px;
    width: 20px
}

.mx_SubspaceSelector .mx_SubspaceSelector_onlySpace {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    line-height: 1.5rem
}

.mx_AddExistingToSpace_entry {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px
}

.mx_AddExistingToSpace_entry .mx_DecoratedRoomAvatar {
    margin-right: 12px
}

.mx_AddExistingToSpace_entry .mx_AddExistingToSpace_entry_name {
    font-size: .9375rem;
    line-height: 30px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_AddExistingToSpace_entry .mx_Checkbox {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_AnalyticsLearnMoreDialog {
    max-width: 500px
}

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_image_holder {
    background-image: url(../../img/element-shiny.f5a5e6e.svg);
    background-position: top;
    background-repeat: no-repeat;
    height: 112px;
    padding: 20px 0
}

.mx_AnalyticsLearnMoreDialog .mx_Dialog_content {
    margin-bottom: 0
}

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_copy {
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
    padding-bottom: 20px
}

.mx_AnalyticsLearnMoreDialog a {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    text-decoration: none
}

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_bullets {
    padding-left: 0
}

.mx_AnalyticsLearnMoreDialog .mx_AnalyticsLearnMore_bullets li {
    background: url(../../img/tick-circle.605de0c.svg) no-repeat;
    list-style-type: none;
    padding: 2px 0 20px 32px;
    vertical-align: middle
}

.mx_AppDownloadDialog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    color: var(--timeline-text-color);
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px
}

.mx_AppDownloadDialog.mx_Dialog_fixedWidth {
    width: 640px
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_desktop {
    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
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_mobile {
    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
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app {
    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-preferred-size: 50%;
    flex-basis: 50%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_QRCode {
    background: #fff;
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 4px;
    padding: 24px;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_QRCode .mx_VerificationQRCode {
    height: 144px;
    width: 144px;
    -ms-interpolation-mode: nearest-neighbor;
    border-radius: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_AppDownloadDialog_info {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_AppDownloadDialog_links {
    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_AppDownloadDialog .mx_AppDownloadDialog_mobile .mx_AppDownloadDialog_app .mx_AppDownloadDialog_links .mx_AccessibleButton svg {
    height: 40px
}

.mx_AppDownloadDialog .mx_AppDownloadDialog_legal p {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem;
    margin: 0
}

.mx_BugReportDialog .mx_BugReportDialog_download .mx_AccessibleButton_kind_link {
    margin-right: 18px
}

.mx_BulkRedactDialog .mx_BulkRedactDialog_checkboxMicrocopy, .mx_BulkRedactDialog .mx_Checkbox {
    line-height: 1.25rem
}

.mx_BulkRedactDialog .mx_BulkRedactDialog_checkboxMicrocopy {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin-left: 26px
}

.mx_ChangelogDialog_content {
    max-height: 300px;
    overflow: auto
}

.mx_ChangelogDialog_li {
    padding: .2em
}

.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
    color: var(--timeline-text-color);
    padding: 0
}

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

.mx_CompoundDialog .mx_CompoundDialog_header h1 {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 0
}

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

.mx_CompoundDialog .mx_CompoundDialog_cancelButton:hover {
    background-color: var(--cpd-color-bg-subtle-primary)
}

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

.mx_CompoundDialog .mx_CompoundDialog_cancelButton {
    position: absolute;
    right: var(--cpd-space-4x);
    top: 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;
    height: 516px;
    max-height: 80%;
    max-width: 100%;
    min-height: 0;
    width: 544px
}

.mx_ScrollableBaseDialog .mx_CompoundDialog_footer {
    -webkit-box-shadow: 0 -4px 4px rgba(0, 0, 0, .05);
    box-shadow: 0 -4px 4px rgba(0, 0, 0, .05);
    z-index: 1
}

.mx_ConfirmSpaceUserActionDialog_wrapper .mx_Dialog {
    padding: 24px 32px
}

.mx_ConfirmSpaceUserActionDialog, .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
}

.mx_ConfirmSpaceUserActionDialog {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 520px;
    width: 440px
}

.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 {
    background-color: var(--roomlist-background-color);
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem;
    padding: 12px 8px 12px 42px;
    position: relative
}

.mx_ConfirmSpaceUserActionDialog .mx_ConfirmSpaceUserActionDialog_warning:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 10px;
    -webkit-mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: calc(50% - 8px);
    width: 16px
}

.mx_ConfirmUserActionDialog .mx_Dialog_content .mx_ConfirmUserActionDialog_user {
    margin-bottom: 24px;
    min-height: 48px
}

.mx_ConfirmUserActionDialog_avatar {
    float: left;
    margin-right: 20px
}

.mx_ConfirmUserActionDialog_name {
    font-size: 1.125rem;
    padding-top: 2px
}

.mx_ConfirmUserActionDialog_userId {
    font-size: .8125rem
}

.mx_ConfirmUserActionDialog_reasonField {
    background-color: var(--timeline-background-color);
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular)
}

.mx_CreateRoomDialog_details {
    margin-top: 15px
}

.mx_CreateRoomDialog_details .mx_CreateRoomDialog_details_summary {
    color: var(--cpd-color-text-primary);
    cursor: pointer;
    font-weight: var(--cpd-font-weight-semibold);
    list-style: none;
    text-decoration: underline;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.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 {
    padding-bottom: 12px;
    text-align: left
}

.mx_CreateRoomDialog_input_container {
    padding-right: 20px
}

.mx_CreateRoomDialog_input {
    background-color: var(--timeline-background-color);
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    color: var(--timeline-text-color);
    font-size: .9375rem;
    padding: 9px;
    width: 100%
}

.mx_CreateRoomDialog_aliasContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 24px 0 10px
}

.mx_CreateRoomDialog_aliasContainer .mx_RoomAliasField {
    margin: 0
}

.mx_CreateRoomDialog.mx_Dialog_fixedWidth {
    width: 450px
}

.mx_CreateRoomDialog .mx_Dialog_content {
    margin-bottom: 40px
}

.mx_CreateRoomDialog .mx_Field_input label, .mx_CreateRoomDialog p {
    color: #a1b2d1
}

.mx_CreateRoomDialog .mx_SettingsFlag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_CreateRoomDialog .mx_SettingsFlag_label {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    font-weight: var(--cpd-font-weight-semibold);
    min-width: 0
}

.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 {
    font-size: .75rem;
    margin: 0 85px 0 0
}

.mx_CreateRoomDialog_labelledCheckbox {
    color: #a1b2d1;
    margin-top: var(--cpd-space-6x)
}

.mx_CreateSubspaceDialog, .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 {
    color: var(--timeline-text-color);
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    min-height: 0;
    width: 480px
}

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_CreateSubspaceDialog_betaNotice {
    background-color: var(--roomlist-background-color);
    border-radius: 8px;
    padding: 12px 16px
}

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_CreateSubspaceDialog_betaNotice .mx_BetaCard_betaPill {
    margin-right: 8px;
    vertical-align: middle
}

.mx_CreateSubspaceDialog .mx_CreateSubspaceDialog_content .mx_JoinRuleDropdown + p {
    color: #a1b2d1;
    font-size: .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;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    flex-grow: 1;
    font-size: .75rem;
    line-height: .9375rem
}

.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_DeactivateAccountDialog .mx_Dialog_content {
    margin-bottom: 30px
}

.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
    width: 300px
}

.mx_DevtoolsDialog_wrapper .mx_Dialog, .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
}

.mx_DevtoolsDialog_wrapper .mx_Dialog_fixedWidth {
    max-height: 100%;
    min-height: 0
}

.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 {
    border-bottom: 1px solid #e5e5e5;
    clear: both
}

.mx_DevTools_inputRow {
    display: table-row
}

.mx_DevTools_inputLabelCell {
    display: table-cell;
    font-weight: 700;
    padding-right: 24px
}

.mx_DevTools_textarea {
    font-size: .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 #ccc;
    border-radius: 3px;
    font-family: Inconsolata,, Apple Color Emoji, Segoe UI Emoji, Courier, monospace, Noto Color Emoji;
    font-family: var(--font-family-monospace, "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji");
    margin-bottom: 6px;
    padding: 1px 5px
}

.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: #666
}

.mx_DevTools_VerificationRequest dd:empty:after {
    content: "(empty)"
}

.mx_DevTools_VerificationRequest dt {
    font-weight: 700;
    grid-column-start: 1
}

.mx_DevTools_VerificationRequest dt:after {
    content: ":"
}

.mx_DevTools_SettingsExplorer table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%
}

.mx_DevTools_SettingsExplorer table th {
    border-bottom: 1px solid #0dbd8b;
    border-bottom: 1px solid var(--accent, #0dbd8b);
    text-align: left
}

.mx_DevTools_SettingsExplorer table td, .mx_DevTools_SettingsExplorer table th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 360px
}

.mx_DevTools_SettingsExplorer table td + td, .mx_DevTools_SettingsExplorer table th + th {
    width: auto
}

.mx_DevTools_SettingsExplorer table tr:hover {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_mutable {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_immutable {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_edit {
    float: right;
    margin-right: 16px
}

.mx_DevTools_SettingsExplorer .mx_DevTools_SettingsExplorer_warning {
    border: 2px solid #ff5b55;
    border: 2px solid var(--alert, #ff5b55);
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 4px
}

.mx_DevTools_SettingsExplorer_setting {
    color: #0086e6 !important;
    color: var(--links, #0086e6) !important
}

.mx_ExportDialog .mx_ExportDialog_subheading {
    color: var(--timeline-text-color);
    display: block;
    font-family: Nunito,, Apple Color Emoji, Segoe UI Emoji, Arial, Helvetica, sans-serif, Noto Color Emoji;
    font-family: var(--font-family, "Nunito", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "Noto Color Emoji");
    font-size: 1rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin-bottom: 12px;
    margin-top: 18px
}

.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(--timeline-text-secondary-color)
}

.mx_ExportDialog.mx_ExportDialog_Exporting .mx_StyledRadioButton input[type=radio]:checked + div {
    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_Exporting .mx_Checkbox input[type=checkbox]:checked + label > .mx_Checkbox_background {
    background: var(--timeline-text-secondary-color);
    border-color: var(--timeline-text-secondary-color)
}

.mx_ExportDialog .mx_ExportDialog_progress .mx_Dialog_buttons {
    margin-left: 18px;
    margin-top: 0
}

.mx_ExportDialog .mx_ExportDialog_progress .mx_Spinner {
    height: auto;
    width: auto;
    -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-bottom: 5px;
    margin-top: 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 {
    border-color: #e7e7e7;
    margin: 24px 0
}

.mx_FeedbackDialog .mx_Dialog_content {
    margin-bottom: 24px
}

.mx_FeedbackDialog .mx_Dialog_content > h2 {
    margin-bottom: 32px
}

.mx_FeedbackDialog .mx_FeedbackDialog_section {
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 8px;
    padding: 12px 52px 12px 68px;
    position: relative
}

.mx_FeedbackDialog .mx_FeedbackDialog_section + .mx_FeedbackDialog_section {
    margin-top: 16px
}

.mx_FeedbackDialog .mx_FeedbackDialog_section > h3 {
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.375rem;
    margin-bottom: 8px;
    margin-top: 0
}

.mx_FeedbackDialog .mx_FeedbackDialog_section > p {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin: 8px 0 0
}

.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_FeedbackDialog_section_microcopy {
    font-size: .75rem;
    line-height: .9375rem
}

.mx_FeedbackDialog .mx_FeedbackDialog_section .mx_AccessibleButton_kind_link, .mx_FeedbackDialog .mx_FeedbackDialog_section a {
    text-decoration: underline
}

.mx_FeedbackDialog .mx_FeedbackDialog_section:after, .mx_FeedbackDialog .mx_FeedbackDialog_section:before {
    content: "";
    height: 40px;
    left: 16px;
    position: absolute;
    top: 12px;
    width: 40px
}

.mx_FeedbackDialog .mx_FeedbackDialog_section:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    border-radius: 8px
}

.mx_FeedbackDialog .mx_FeedbackDialog_section:after {
    background: #fff;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
    mask-size: 24px
}

.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 {
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 20px;
    margin-bottom: 24px;
    margin-top: 12px;
    -webkit-transition: font-size 1s, border .5s;
    transition: font-size 1s, border .5s;
    vertical-align: top
}

.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(--icon-button-color, var(--cpd-color-icon-tertiary));
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    margin: 5px;
    text-align: center;
    width: 40px
}

.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 {
    border-color: var(--cpd-color-bg-action-primary-rest);
    font-size: 24px
}

.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 {
    color: var(--timeline-text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 520px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 80vh;
    min-height: 0
}

.mx_ForwardDialog > h3 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    margin: 0 0 6px
}

.mx_ForwardDialog > .mx_ForwardDialog_preview {
    max-height: 30%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow-y: auto
}

.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile[data-layout=bubble] {
    margin-top: 20px
}

.mx_ForwardDialog > .mx_ForwardDialog_preview div {
    pointer-events: none
}

.mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_unencrypted, .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_e2eIcon_warning, .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_EventTile_msgOption, .mx_ForwardDialog > .mx_ForwardDialog_preview .mx_MFileBody_download {
    display: none
}

.mx_ForwardDialog > hr {
    border: none;
    border-top: 1px solid #e7e7e7;
    margin: 12px 0;
    width: 100%
}

.mx_ForwardDialog > .mx_ForwardList {
    display: contents
}

.mx_ForwardDialog > .mx_ForwardList .mx_SearchBox {
    margin: 0 0 15px;
    -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;
    border-radius: 8px;
    height: 32px;
    justify-content: space-between;
    padding: 6px
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry.mx_ForwardList_entry_active, .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry:hover {
    background-color: var(--sidebar-color)
}

.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_detail, .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_name {
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_name {
    font-size: .9375rem
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_roomButton .mx_ForwardList_entry_detail {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem;
    margin-left: 8px
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton {
    margin-left: 12px;
    position: relative
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
    visibility: hidden
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_ForwardList_sendIcon, .mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_NotificationBadge {
    position: absolute
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton .mx_NotificationBadge {
    background-color: #fff
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sending .mx_ForwardList_sendIcon {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    height: 14px;
    -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
}

.mx_ForwardDialog > .mx_ForwardList .mx_ForwardList_results .mx_ForwardList_entry .mx_ForwardList_sendButton.mx_ForwardList_sent .mx_ForwardList_sendIcon {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    height: 14px;
    -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
}

.mx_GenericFeatureFeedbackDialog .mx_GenericFeatureFeedbackDialog_subheading {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    line-height: 1.25rem;
    margin-bottom: 24px
}

.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;
    margin: 8px 45px 0 0
}

.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
    -webkit-box-flex: 1;
    background-color: var(--roomlist-background-color);
    border-radius: 4px;
    -ms-flex: 1;
    flex: 1;
    min-height: 25px;
    width: 100%;
    -webkit-padding-start: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    padding-inline-start: 8px
}

.mx_InviteDialog_addressBar .mx_InviteDialog_editor .mx_InviteDialog_userTile {
    display: inline-block;
    margin: 6px 6px 0 0;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content
}

.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type=text] {
    font: var(--cpd-font-body-md-regular);
    height: 24px;
    line-height: 1.5rem;
    margin: 6px 0 !important;
    -webkit-padding-start: 12px;
    border: 0 !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 40%;
    outline: 0 !important;
    padding-inline-start: 12px;
    resize: none;
    -webkit-box-flex: 1 !important;
    color: var(--timeline-text-color) !important;
    -ms-flex: 1 !important;
    flex: 1 !important
}

.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
    min-width: 48px;
    -webkit-margin-start: 10px;
    height: 25px;
    line-height: 1.5625rem;
    margin-inline-start: 10px
}

.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
    height: 20px;
    width: 20px;
    -webkit-margin-start: 5px;
    display: inline-block;
    margin-inline-start: 5px;
    vertical-align: middle
}

.mx_InviteDialog_section {
    padding-bottom: 4px
}

.mx_InviteDialog_section h3 {
    color: #a1b2d1;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase
}

.mx_InviteDialog_section > p {
    margin: 0
}

.mx_InviteDialog_section > span {
    color: var(--timeline-text-color)
}

.mx_InviteDialog_section .mx_InviteDialog_section_showMore {
    display: block;
    margin: 7px 18px
}

.mx_InviteDialog_section_hidden_suggestions_disclaimer {
    font: var(--cpd-font-body-md-regular);
    padding: 8px 0 16px
}

.mx_InviteDialog_section_hidden_suggestions_disclaimer > span {
    color: var(--timeline-text-color);
    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 {
    color: #a1b2d1;
    font-size: .75rem;
    font-weight: 700;
    margin: 12px 0;
    text-transform: uppercase
}

.mx_InviteDialog_footer .mx_CopyableText.mx_CopyableText_border {
    margin-bottom: 0;
    width: auto
}

.mx_InviteDialog_footer .mx_CopyableText.mx_CopyableText_border > a {
    text-decoration: none;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_InviteDialog_userTile {
    -webkit-margin-end: 8px;
    margin-inline-end: 8px
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
    background-color: var(--cpd-color-bg-success-subtle);
    border-radius: 12px;
    color: var(--timeline-text-color);
    display: inline-block;
    height: 24px;
    line-height: 1.5rem;
    padding-inline: 8px;
    vertical-align: middle
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_SearchResultAvatar {
    border-radius: 20px;
    left: -5px;
    position: relative;
    top: 2px
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name, .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill img.mx_SearchResultAvatar {
    vertical-align: top
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_SearchResultAvatar_threepidAvatar {
    background-color: #fff
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
    display: inline-block;
    -webkit-margin-start: 4px;
    margin-inline-start: 4px;
    vertical-align: middle
}

.mx_InviteDialog_other {
    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;
    overflow: hidden;
    white-space: pre-wrap
}

.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 {
    margin-top: 12px;
    padding-bottom: 0
}

.mx_InviteDialog_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden
}

.mx_InviteDialog_transfer {
    width: auto
}

.mx_InviteDialog_transfer .mx_InviteDialog_content {
    height: 430px;
    overflow: visible;
    width: 496px
}

.mx_InviteDialog_transfer .mx_InviteDialog_content .mx_TabbedView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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_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 {
    margin-top: 16px;
    margin-inline: auto;
    width: 224px
}

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
    border-inline: 0;
    border-radius: 0;
    border-top: 0;
    border-color: #6f7882;
    border-color: var(--quaternary-content, #6f7882);
    margin-top: 0
}

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
    border-color: #0dbd8b;
    border-color: var(--accent, #0dbd8b)
}

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField input {
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
    padding-top: 0
}

.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField .mx_Field_postfix {
    border-left: none
}

.mx_InviteDialog_dialPad .mx_DialPad {
    -webkit-column-gap: 48px;
    -moz-column-gap: 48px;
    column-gap: 48px;
    margin-inline: auto;
    row-gap: 16px
}

.mx_InviteDialog_transferConsultConnect {
    border-top: 1px solid #6f7882;
    border-top: 1px solid var(--quinary-content, #6f7882);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-inline: -24px;
    padding-top: 16px;
    padding-inline: 24px;
    -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 {
    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(--roomlist-background-color);
    border-radius: 4px
}

.mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_selected {
    background-color: var(--cpd-color-bg-success-subtle);
    border-radius: 36px
}

.mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_selected:before {
    background-color: var(--timeline-text-color);
    content: "";
    grid-column: 1;
    grid-row: 1;
    height: 24px;
    left: 6px;
    -webkit-mask-image: url(../../img/feather-customised/check.bfca953.svg);
    mask-image: url(../../img/feather-customised/check.bfca953.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    position: absolute;
    top: 6px;
    width: 24px
}

.mx_InviteDialog_tile.mx_InviteDialog_tile--room .mx_InviteDialog_tile--room_time {
    -webkit-margin-start: auto;
    color: #a1b2d1;
    font-size: .75rem;
    margin-inline-start: auto;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.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;
    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 {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    font-size: .9375rem;
    grid-column-start: 2;
    grid-row-start: 2
}

.mx_InviteDialog_tile * {
    vertical-align: middle
}

.mx_InviteDialog_tile .mx_InviteDialog_tile--room_selected, .mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack {
    display: inline-block;
    height: 36px;
    position: relative;
    width: 36px
}

.mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack {
    grid-column-start: 1;
    grid-row-start: 1
}

.mx_InviteDialog_tile .mx_InviteDialog_tile_avatarStack > * {
    left: 0;
    position: absolute;
    top: 0
}

.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column-start: 2;
    grid-row-start: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    align-self: center;
    -ms-flex-flow: column;
    flex-flow: column;
    -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 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_name {
    color: var(--timeline-text-color);
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId {
    color: #a1b2d1;
    font-size: .75rem
}

.mx_InviteDialog_multiInviterError > h4 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5rem
}

.mx_InviteDialog_identityServer {
    margin-top: 1em
}

.mx_InviteDialog_oneThreepid {
    font-size: .75rem;
    margin: 8px 0
}

.mx_JoinRuleDropdown {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    margin-bottom: 8px
}

.mx_JoinRuleDropdown .mx_Dropdown_option {
    font: var(--cpd-font-body-md-regular);
    height: 32px;
    line-height: 2rem;
    min-height: 32px
}

.mx_JoinRuleDropdown .mx_Dropdown_option > div {
    padding-left: 30px;
    position: relative
}

.mx_JoinRuleDropdown .mx_Dropdown_option > div:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 6px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    top: 8px;
    width: 16px
}

.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(../../img/element-icons/lock.998ae1f.svg);
    mask-image: url(../../img/element-icons/lock.998ae1f.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    padding: 1px
}

.mx_JoinRuleDropdown .mx_JoinRuleDropdown_public:before {
    -webkit-mask-image: url(../../img/globe.0408a7a.svg);
    mask-image: url(../../img/globe.0408a7a.svg);
    -webkit-mask-size: 12px;
    mask-size: 12px
}

.mx_JoinRuleDropdown .mx_JoinRuleDropdown_restricted:before {
    -webkit-mask-image: url(../../img/element-icons/group-members.d86d751.svg);
    mask-image: url(../../img/element-icons/group-members.d86d751.svg);
    -webkit-mask-size: contain;
    mask-size: contain
}

.mx_JoinRuleDropdown .mx_JoinRuleDropdown_icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    left: 6px;
    position: absolute;
    top: 8px
}

.mx_LeaveSpaceDialog_wrapper .mx_Dialog {
    padding: 24px 32px
}

.mx_LeaveSpaceDialog_wrapper .mx_Dialog, .mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 520px;
    width: 440px
}

.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 {
    background-color: var(--roomlist-background-color);
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem;
    margin: 12px 0 0;
    padding: 12px 8px 12px 42px;
    position: relative
}

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content .mx_LeaveSpaceDialog_section_warning:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 10px;
    -webkit-mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: calc(50% - 8px);
    width: 16px
}

.mx_LeaveSpaceDialog_wrapper .mx_Dialog .mx_LeaveSpaceDialog .mx_Dialog_content > p {
    color: var(--timeline-text-color)
}

.mx_LocationViewDialog_wrapper .mx_Dialog {
    padding: 0
}

.mx_LocationViewDialog {
    height: calc(80vh - .5px);
    overflow: hidden;
    width: calc(80vw - .5px)
}

.mx_LocationViewDialog .mx_Dialog_header {
    margin: 0;
    padding: 0;
    position: static
}

.mx_LocationViewDialog .mx_Dialog_header .mx_Dialog_title {
    display: none
}

.mx_LocationViewDialog .mx_Dialog_cancelButton {
    left: var(--cpd-space-4x);
    position: absolute;
    top: var(--cpd-space-4x);
    z-index: 4010
}

.mx_LocationViewDialog_map {
    border-radius: 8px;
    height: 80vh;
    width: 80vw
}

.mx_LogoutDialog_ExportKeyAdvanced {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_ManageRestrictedJoinRuleDialog, .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 {
    color: var(--timeline-text-color);
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 60vh;
    min-height: 0;
    width: 480px
}

.mx_ManageRestrictedJoinRuleDialog .mx_SearchBox {
    margin: 0 0 15px;
    -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 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    margin: 0
}

.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 {
    font-size: .9375rem;
    line-height: 30px;
    margin: 0 8px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_ManageRestrictedJoinRuleDialog_entry_description {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem;
    margin-top: 8px
}

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section .mx_ManageRestrictedJoinRuleDialog_entry .mx_Checkbox {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_spaces .mx_BaseAvatar {
    margin-right: 12px
}

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_info {
    background-color: var(--roomlist-background-color);
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem;
    margin: 12px 0;
    padding: 8px 8px 8px 42px;
    position: relative
}

.mx_ManageRestrictedJoinRuleDialog .mx_ManageRestrictedJoinRuleDialog_section_info:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 10px;
    -webkit-mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: calc(50% - 8px);
    width: 16px
}

.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;
    margin-left: auto;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.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: #ff5b55;
    color: var(--alert, #ff5b55);
    text-align: center
}

.mx_MessageEditHistoryDialog_edits {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    list-style-type: none;
    padding: 0
}

.mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_deletion, .mx_MessageEditHistoryDialog_edits span.mx_EditHistoryMessage_insertion {
    padding: 0 2px
}

.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_deletion {
    background-color: rgba(255, 76, 85, .1);
    color: #ff4c55;
    text-decoration: line-through
}

.mx_MessageEditHistoryDialog_edits .mx_EditHistoryMessage_insertion {
    background-color: rgba(26, 169, 123, .1);
    color: #1aa97b;
    text-decoration: underline
}

.mx_MessageEditHistoryDialog_edits .mx_EventTile {
    padding-top: 0
}

.mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_MessageTimestamp {
    left: 0;
    position: absolute;
    text-align: center
}

.mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_EventTile_line {
    line-height: var(--EventTile_group_line-line-height);
    padding-bottom: var(--EventTile_group_line-spacing-block-end);
    padding-left: var(--EventTile_group_line-spacing-inline-start);
    padding-top: var(--EventTile_group_line-spacing-block-start)
}

.mx_MessageEditHistoryDialog_edits .mx_EventTile .mx_EventTile_line .mx_EventTile_content {
    margin-right: 0
}

.mx_MessageEditHistoryDialog_edits .mx_EventTile:before {
    border-radius: 4px;
    bottom: -1px;
    content: "";
    left: -10px;
    position: absolute;
    right: -10px;
    top: -1px;
    z-index: -1
}

.mx_MessageEditHistoryDialog_edits .mx_EventTile:hover:before {
    background: #1c2026;
    background: var(--eventbubble-bg-hover, #1c2026)
}

.mx_MessageEditHistoryDialog_edits .mx_MessageActionBar .mx_AccessibleButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-padding-start: 8px;
    padding-inline-start: 8px;
    -webkit-padding-end: 8px;
    font-size: .9375rem;
    padding-inline-end: 8px
}

.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning {
    margin-bottom: 24px
}

.mx_ModalWidgetDialog .mx_ModalWidgetDialog_warning > img {
    margin-right: 8px;
    vertical-align: middle
}

.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 {
    border: 0;
    border-radius: 8px;
    height: 450px;
    width: 100%
}

.mx_PollCreateDialog .mx_PollCreateDialog_busy {
    background-color: rgba(24, 27, 33, .85);
    inset: 0;
    position: absolute;
    z-index: 1
}

.mx_PollCreateDialog h2 {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5rem;
    margin-bottom: 8px;
    margin-top: 0
}

.mx_PollCreateDialog h2:nth-child(n+2) {
    margin-top: 20px
}

.mx_PollCreateDialog p {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_PollCreateDialog .mx_PollCreateDialog_option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 16px;
    margin-top: 11px
}

.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 {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    margin-left: 12px;
    position: relative;
    width: 20px
}

.mx_PollCreateDialog .mx_PollCreateDialog_option .mx_PollCreateDialog_removeOption:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 8px;
    left: 6px;
    -webkit-mask: url(../../img/element-icons/x-8px.1715293.svg);
    mask: url(../../img/element-icons/x-8px.1715293.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    position: absolute;
    top: 6px;
    width: 8px
}

.mx_PollCreateDialog .mx_PollCreateDialog_addOption {
    margin-bottom: 40px;
    padding: 0
}

.mx_PollCreateDialog .mx_AccessibleButton_disabled {
    opacity: .4
}

.mx_RegistrationEmailPromptDialog {
    width: 417px
}

.mx_RegistrationEmailPromptDialog .mx_Dialog_content {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    margin-bottom: 24px
}

.mx_RegistrationEmailPromptDialog .mx_Dialog_primary {
    width: 100%
}

.mx_RoomSettingsDialog_settingsIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg)
}

.mx_RoomSettingsDialog_voiceIcon:before {
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg)
}

.mx_RoomSettingsDialog_securityIcon:before {
    -webkit-mask-image: url(../../img/element-icons/security.fa860ea.svg);
    mask-image: url(../../img/element-icons/security.fa860ea.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 {
    -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 {
    margin: 0 auto;
    overflow: hidden;
    padding-right: 80px;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
    -webkit-mask: url(../../img/feather-customised/image.ba8601f.svg);
    mask: url(../../img/feather-customised/image.ba8601f.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 36px;
    mask-size: 36px
}

.mx_RoomSettingsDialog_BridgeList {
    padding: 0
}

.mx_RoomSettingsDialog_BridgeList li {
    list-style-type: none
}

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem {
    border-color: var(--roomlist-separator-color);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding: 5px
}

.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, .mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon span {
    border: 1px solid var(--roomlist-separator-color);
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.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 {
    background: var(--roomlist-separator-color);
    height: 48px;
    width: 48px
}

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon img {
    border-color: var(--roomlist-separator-color);
    border-width: 1px
}

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_icon .mx_RoomSettingsDialog_protocolIcon span {
    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 {
    color: var(--timeline-text-color);
    font-size: 16pt;
    margin-top: 0
}

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_workspace_channel_details {
    color: var(--timeline-text-color);
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_workspace_channel_details .mx_RoomSettingsDialog_channel {
    -webkit-margin-start: 5px;
    margin-inline-start: 5px
}

.mx_RoomSettingsDialog_BridgeList li.mx_RoomSettingsDialog_BridgeList_listItem .mx_RoomSettingsDialog_column_data .mx_RoomSettingsDialog_metadata {
    color: #a1b2d1;
    margin-bottom: 0;
    overflow-y: visible;
    padding: 0;
    text-overflow: ellipsis;
    white-space: normal
}

.mx_RoomUpgradeDialog {
    padding-right: 70px
}

.mx_RoomUpgradeWarningDialog {
    max-width: 38vw;
    width: 38vw
}

.mx_RoomUpgradeWarningDialog .mx_RoomUpgradeWarningDialog_progress .mx_ProgressBar {
    border-radius: 8px;
    height: 8px;
    width: 100%
}

.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 {
    color: var(--timeline-text-color);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-top: 8px
}

.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
    font-weight: 700
}

.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_ToggleSwitch {
    display: inline-block;
    float: right;
    margin-left: 8px;
    vertical-align: middle
}

.mx_RoomUpgradeWarningDialog .mx_SettingsFlag .mx_SettingsFlag_label {
    display: inline-block;
    vertical-align: middle
}

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content {
    color: var(--timeline-text-color);
    padding-right: 85px
}

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content hr {
    border-color: var(--timeline-text-color);
    border-bottom: none;
    opacity: .1
}

.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 {
    color: #a1b2d1;
    display: inline-block;
    line-height: 24px;
    vertical-align: top;
    width: 115px
}

.mx_ServerOfflineDialog .mx_ServerOfflineDialog_content .mx_ServerOfflineDialog_content_context .mx_ServerOfflineDialog_content_context_timeline {
    display: inline-block;
    width: calc(100% - 155px)
}

.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 {
    margin-top: 8px;
    position: relative
}

.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)
}

.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 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 468px
}

.mx_ServerPickerDialog .mx_Dialog_content {
    margin-bottom: 0
}

.mx_ServerPickerDialog .mx_Dialog_content > p {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-md-regular);
    margin: 16px 0
}

.mx_ServerPickerDialog .mx_Dialog_content > p:first-of-type {
    margin-bottom: 40px
}

.mx_ServerPickerDialog .mx_Dialog_content > p:last-of-type {
    margin: 0 24px 24px
}

.mx_ServerPickerDialog .mx_Dialog_content > h2 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 16px 0 16px 8px
}

.mx_ServerPickerDialog .mx_Dialog_content > a {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    margin-left: 8px
}

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserverRadio input[type=radio] + div {
    margin-bottom: auto;
    margin-top: auto
}

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver {
    border-left: none;
    border-radius: 0;
    border-radius: initial;
    border-right: none;
    border-top: none
}

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > input {
    padding-left: 0
}

.mx_ServerPickerDialog .mx_ServerPickerDialog_otherHomeserver > label {
    margin-left: 0
}

.mx_ServerPickerDialog .mx_AccessibleButton_kind_primary {
    margin: 0 8px;
    padding: 15px 18px;
    width: calc(100% - 64px)
}

.mx_SetEmailDialog_email_input {
    background-color: var(--timeline-background-color);
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    color: rgba(74, 74, 74, .9);
    font-size: .9375rem;
    margin-bottom: 10px;
    max-width: 280px;
    padding: 9px;
    width: 100%
}

.mx_SetEmailDialog_email_input:focus {
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none
}

.mx_RoomSettingsDialog, .mx_SpacePreferencesDialog, .mx_SpaceSettingsDialog, .mx_UserSettingsDialog {
    height: 80vh;
    max-width: 980px;
    width: 90vw
}

.mx_RoomSettingsDialog .mx_TabbedView, .mx_SpacePreferencesDialog .mx_TabbedView, .mx_SpaceSettingsDialog .mx_TabbedView, .mx_UserSettingsDialog .mx_TabbedView {
    top: 90px
}

.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab, .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab, .mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 580px;
    padding-right: 100px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 100px
}

.mx_ShareDialog hr {
    border-color: var(--timeline-text-secondary-color);
    margin-bottom: 25px;
    margin-top: 25px
}

.mx_ShareDialog .mx_ShareDialog_content {
    margin: 10px 0
}

.mx_ShareDialog .mx_ShareDialog_content .mx_CopyableText {
    width: auto
}

.mx_ShareDialog .mx_ShareDialog_content .mx_CopyableText > a {
    text-decoration: none;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ShareDialog_split {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.mx_ShareDialog_qrcode_container {
    float: left;
    height: 256px;
    margin-right: 64px;
    width: 256px
}

.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
    width: 299px
}

.mx_ShareDialog_social_container {
    display: inline-block
}

.mx_ShareDialog_social_icon {
    display: inline-grid;
    margin-bottom: 10px;
    margin-right: 10px
}

.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
    margin-bottom: 2px
}

.mx_SlashCommandHelpDialog .mx_Dialog_content {
    margin-bottom: 34px;
    margin-top: 12px
}

.mx_SpacePreferencesDialog {
    height: 400px;
    width: 700px
}

.mx_SpacePreferencesDialog > h4 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5rem;
    margin: -12px 0 0
}

.mx_SpacePreferencesDialog .mx_TabbedView {
    top: 80px
}

.mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab {
    min-width: 0;
    min-width: auto
}

.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(--timeline-text-color)
}

.mx_SpaceSettingsDialog .mx_SpaceSettings_errorText {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    margin-bottom: 28px
}

.mx_SpaceSettingsDialog .mx_ToggleSwitch {
    display: inline-block;
    margin-left: 16px;
    vertical-align: middle
}

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_SettingsTab_section_caption {
    margin-bottom: 20px;
    margin-top: 12px
}

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton {
    margin-bottom: 4px;
    margin-top: 8px
}

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton .mx_StyledRadioButton_content {
    color: var(--timeline-text-color);
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.125rem
}

.mx_SpaceSettingsDialog .mx_SettingsTab_section .mx_StyledRadioButton + span {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    line-height: 1.125rem;
    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(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg)
}

.mx_SpaceSettingsDialog .mx_TabbedView_tabLabel .mx_SpaceSettingsDialog_visibilityIcon:before {
    -webkit-mask-image: url(../../img/element-icons/eye.e715558.svg);
    mask-image: url(../../img/element-icons/eye.e715558.svg)
}

.mx_SpotlightDialog_wrapper .mx_Dialog_border {
    display: contents
}

.mx_SpotlightDialog_wrapper .mx_Dialog {
    border-radius: 8px;
    contain: unset;
    height: 60%;
    overflow-y: visible;
    overflow-y: initial;
    padding: 0;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt {
    background-color: var(--timeline-background-color);
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    left: 50%;
    line-height: .9375rem;
    padding: 8px;
    position: absolute;
    top: -60px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt kbd {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 6px;
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0 4px;
    padding: 2px 4px;
    vertical-align: middle
}

.mx_SpotlightDialog {
    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
}

.mx_SpotlightDialog .mx_Dialog_header {
    display: none
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox {
    border: none;
    border-bottom: 1px solid #21262c;
    border-bottom: 1px solid var(--system, #21262c);
    border-radius: 8px 8px 0 0;
    margin: 0;
    padding: 12px 16px
}

.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;
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 8px;
    color: var(--timeline-text-color);
    margin-right: 8px;
    padding: 4px 8px 4px 37px;
    position: relative;
    vertical-align: middle
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 18px;
    left: 8px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 18px
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter.mx_SpotlightDialog_filterPeople:before {
    -webkit-mask-image: url(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.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 {
    background: #21262c;
    background: var(--system, #21262c);
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin-left: 8px;
    position: relative;
    text-align: center;
    width: 16px
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 8px;
    left: 50%;
    -webkit-mask-image: url(../../img/cancel-small.599ba74.svg);
    mask-image: url(../../img/cancel-small.599ba74.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 8px
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > input {
    background-color: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    display: block;
    font-size: .9375rem;
    font-weight: 400;
    height: 32px;
    line-height: 1.5rem;
    padding: 0;
    width: 100%
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_Spinner {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    height: auto;
    margin-left: 16px;
    width: auto
}

.mx_SpotlightDialog #mx_SpotlightDialog_content {
    height: 100%;
    overflow-y: auto;
    padding: 16px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content ul {
    margin: 0;
    padding: 0
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > .mx_SpotlightDialog_sectionHeader > h4, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    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;
    margin-right: 1px;
    overflow-x: hidden;
    white-space: nowrap
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option {
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--timeline-text-color);
    display: inline-block;
    font-size: .75rem;
    height: 58px;
    line-height: .9375rem;
    min-width: 58px;
    overflow: hidden;
    padding: 4px;
    text-align: center;
    text-overflow: ellipsis;
    width: 58px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option .mx_DecoratedRoomAvatar {
    margin: 0 9px 4px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option + .mx_SpotlightDialog_option {
    margin-left: 16px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected=true] {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882)
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option {
    border-radius: 8px;
    color: var(--timeline-text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .9375rem;
    line-height: 1.5rem;
    padding: 6px 4px;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .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_hiddenResults .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_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .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_hiddenResults .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_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_AccessibleButton {
    margin: 2px 4px;
    padding: 4px 20px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option.mx_SpotlightDialog_result_multiline .mx_SpotlightDialog_enterPrompt {
    margin-right: 8px;
    margin-top: 9px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_BaseAvatar, .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_SpotlightDialog_metaspaceResult, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_BaseAvatar, .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_SpotlightDialog_metaspaceResult, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_BaseAvatar, .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_SpotlightDialog_metaspaceResult, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_BaseAvatar, .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_SpotlightDialog_metaspaceResult {
    height: 24px;
    margin-right: 8px;
    width: 24px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_BaseAvatar .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_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_BaseAvatar .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_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_BaseAvatar .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_SpotlightDialog_metaspaceResult .mx_BaseAvatar, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_BaseAvatar .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_SpotlightDialog_metaspaceResult .mx_BaseAvatar {
    height: inherit;
    width: inherit
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .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_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .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_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomName {
    color: var(--timeline-text-color);
    font-size: .9375rem;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomHeader .mx_SpotlightDialog_result_publicRoomAlias {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_result_publicRoomDetails .mx_SpotlightDialog_result_publicRoomDescription {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    line-height: 1.25rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_NotificationBadge, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_NotificationBadge {
    margin-left: 8px
}

.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, .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_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_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--notifications {
    display: none;
    height: 20px;
    margin-bottom: auto;
    margin-top: auto;
    min-width: 20px;
    position: relative;
    width: 20px
}

.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, .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_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_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 {
    background: #edf3ff;
    background: var(--tertiary-content, #edf3ff);
    content: "";
    height: 16px;
    left: 2px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 2px;
    width: 16px
}

.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, .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_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_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 {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff)
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option .mx_SpotlightDialog_option--menu:before {
    -webkit-mask-image: url(../../img/element-icons/context-menu.2c3f393.svg);
    mask-image: url(../../img/element-icons/context-menu.2c3f393.svg)
}

.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], .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_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_results .mx_SpotlightDialog_option:hover, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected=true] {
    background-color: #21262c;
    background-color: var(--system, #21262c)
}

.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, .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_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_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 {
    display: block
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .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_recentSearches .mx_SpotlightDialog_option[aria-selected=true] .mx_SpotlightDialog_enterPrompt, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option[aria-selected=true] .mx_SpotlightDialog_enterPrompt {
    display: inline-block
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink {
    margin-top: 8px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton {
    margin: 0;
    padding: 3px 8px 3px 28px;
    position: relative
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_createRoom .mx_AccessibleButton:before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton:before {
    background: var(--cpd-color-icon-primary);
    content: "";
    display: block;
    height: 16px;
    left: 8px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 16px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_inviteLink .mx_AccessibleButton:before {
    -webkit-mask-image: url(../../img/element-icons/link.e24e5a8.svg);
    mask-image: url(../../img/element-icons/link.e24e5a8.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_explorePublicRooms, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicSpaces, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat {
    padding-left: 32px;
    position: relative
}

.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_joinRoomAlias:before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat:before, .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 24px;
    left: 4px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 24px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat:before {
    -webkit-mask-image: url(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.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_otherSearches_messageSearchText {
    font-size: .9375rem;
    line-height: 1.5rem
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_otherSearches_messageSearchIcon {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    display: inline-block;
    height: 24px;
    -webkit-mask-image: url(../../img/element-icons/room/search-inset.7a9a2eb.svg);
    mask-image: url(../../img/element-icons/room/search-inset.7a9a2eb.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: text-bottom;
    width: 24px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem;
    margin-left: 8px;
    margin-right: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    float: right;
    font-size: .75rem;
    line-height: .9375rem
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 6px;
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    display: none;
    font-family: inherit;
    font-size: .75rem;
    font-weight: inherit;
    line-height: .9375rem;
    margin-right: 4px;
    padding: 2px 4px
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_home-space {
    -webkit-mask-image: url(../../img/element-icons/home.e0e6ce5.svg);
    mask-image: url(../../img/element-icons/home.e0e6ce5.svg)
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_favourites-space {
    -webkit-mask-image: url(../../img/element-icons/roomlist/favorite.9dcb53a.svg);
    mask-image: url(../../img/element-icons/roomlist/favorite.9dcb53a.svg)
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_metaspaceResult.mx_SpotlightDialog_metaspaceResult_people-space {
    -webkit-mask-image: url(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.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_TermsDialog_forIntegrationManager .mx_Dialog_border {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 70%;
    width: 60%
}

.mx_TermsDialog_termsTableHeader {
    font-weight: 700;
    text-align: left
}

.mx_TermsDialog_termsTable {
    font-size: .75rem;
    width: 100%
}

.mx_TermsDialog_service, .mx_TermsDialog_summary {
    padding-right: 10px
}

.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;
    gap: 8px;
    justify-content: flex-end
}

.mx_UploadConfirmDialog_fileIcon {
    margin-right: 5px
}

.mx_UploadConfirmDialog_previewOuter {
    text-align: center
}

.mx_UploadConfirmDialog_previewInner {
    display: inline-block;
    text-align: left
}

.mx_UploadConfirmDialog_imagePreview {
    border: 1px solid var(--cpd-color-icon-tertiary);
    border-radius: 4px;
    max-height: 300px;
    max-width: 100%
}

.mx_UserSettingsDialog_settingsIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg)
}

.mx_UserSettingsDialog_appearanceIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings/appearance.90cad21.svg);
    mask-image: url(../../img/element-icons/settings/appearance.90cad21.svg)
}

.mx_UserSettingsDialog_voiceIcon:before {
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg)
}

.mx_UserSettingsDialog_bellIcon:before {
    -webkit-mask-image: url(../../img/element-icons/notifications.988ddb0.svg);
    mask-image: url(../../img/element-icons/notifications.988ddb0.svg)
}

.mx_UserSettingsDialog_preferencesIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings/preference.dd3ae3c.svg);
    mask-image: url(../../img/element-icons/settings/preference.dd3ae3c.svg)
}

.mx_UserSettingsDialog_keyboardIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings/keyboard.67e29b9.svg);
    mask-image: url(../../img/element-icons/settings/keyboard.67e29b9.svg)
}

.mx_UserSettingsDialog_sidebarIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings/sidebar.5dcb382.svg);
    mask-image: url(../../img/element-icons/settings/sidebar.5dcb382.svg)
}

.mx_UserSettingsDialog_securityIcon:before {
    -webkit-mask-image: url(../../img/element-icons/security.fa860ea.svg);
    mask-image: url(../../img/element-icons/security.fa860ea.svg)
}

.mx_UserSettingsDialog_sessionsIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings/devices.9771113.svg);
    mask-image: url(../../img/element-icons/settings/devices.9771113.svg)
}

.mx_UserSettingsDialog_helpIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings/help.96dda0b.svg);
    mask-image: url(../../img/element-icons/settings/help.96dda0b.svg)
}

.mx_UserSettingsDialog_labsIcon:before {
    -webkit-mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg);
    mask-image: url(../../img/element-icons/settings/flask.40eebdf.svg)
}

.mx_UserSettingsDialog_mjolnirIcon:before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.d7b1970.svg);
    mask-image: url(../../img/element-icons/room/composer/emoji.d7b1970.svg)
}

.mx_VerifyEMailDialog {
    height: auto;
    top: 300px
}

.mx_VerifyEMailDialog .mx_Dialog {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    padding: 24px 24px 16px;
    text-align: center;
    width: 485px
}

.mx_VerifyEMailDialog .mx_Dialog h1 {
    font-size: 1.5rem;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_VerifyEMailDialog .mx_Dialog .mx_VerifyEMailDialog_text-light {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    line-height: 20px
}

.mx_VerifyEMailDialog .mx_Dialog .mx_AuthBody_did-not-receive {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 8px
}

.mx_VerifyEMailDialog .mx_Dialog .mx_Dialog_cancelButton {
    right: 10px
}

.mx_WidgetCapabilitiesPromptDialog .text-muted {
    font-size: .75rem
}

.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_content {
    margin-bottom: 16px
}

.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap {
    font-size: .9375rem;
    line-height: .9375rem;
    margin-top: 20px
}

.mx_WidgetCapabilitiesPromptDialog .mx_WidgetCapabilitiesPromptDialog_cap .mx_WidgetCapabilitiesPromptDialog_byline {
    color: #a1b2d1;
    font-size: .75rem;
    line-height: .75rem;
    margin-left: 26px
}

.mx_WidgetCapabilitiesPromptDialog .mx_Dialog_buttons {
    margin-top: 40px
}

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag {
    color: #a1b2d1;
    font-size: .75rem;
    line-height: calc(.875rem + 14px)
}

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch {
    height: .9375rem;
    width: 2rem
}

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
    left: calc(100% - .9375rem)
}

.mx_WidgetCapabilitiesPromptDialog .mx_SettingsFlag .mx_ToggleSwitch .mx_ToggleSwitch_ball {
    border-radius: .9375rem;
    height: .9375rem;
    width: .9375rem
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon:before {
    content: "";
    display: inline-block;
    height: 24px;
    width: 24px;
    -webkit-margin-end: 8px;
    background-color: var(--timeline-text-color);
    margin-inline-end: 8px;
    position: relative;
    top: 5px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon.mx_AccessSecretStorageDialog_resetBadge:before {
    background-color: transparent;
    background-image: url(../../img/element-icons/warning-badge.203170a.svg);
    background-size: 24px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon.mx_AccessSecretStorageDialog_secureBackupTitle:before {
    -webkit-mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg);
    mask-image: url(../../img/feather-customised/secure-backup.7e95b34.svg)
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_titleWithIcon.mx_AccessSecretStorageDialog_securePhraseTitle:before {
    -webkit-mask-image: url(../../img/feather-customised/secure-phrase.73fa1c2.svg);
    mask-image: url(../../img/feather-customised/secure-phrase.73fa1c2.svg)
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_passPhraseInput {
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    border-radius: 5px;
    width: 300px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_keyStatus {
    height: 30px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry .mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
    margin: 16px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyEntry .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
    display: none
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback:before {
    content: "";
    display: inline-block;
    height: 20px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    vertical-align: bottom;
    width: 20px;
    -webkit-margin-end: 5px;
    margin-inline-end: 5px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    -webkit-mask-image: url(../../img/feather-customised/check.bfca953.svg);
    mask-image: url(../../img/feather-customised/check.bfca953.svg)
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_AccessSecretStorageDialog_recoveryKeyFeedback.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid:before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    -webkit-mask-image: url(../../img/feather-customised/x.c543757.svg);
    mask-image: url(../../img/feather-customised/x.c543757.svg)
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    text-align: initial;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    gap: 14px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive {
    float: none
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive .mx_AccessSecretStorageDialog_reset {
    position: relative;
    -webkit-padding-start: 24px;
    font-weight: inherit;
    padding-inline-start: 24px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive .mx_AccessSecretStorageDialog_reset:before {
    background-image: url(../../img/element-icons/warning-badge.203170a.svg);
    background-size: contain;
    content: "";
    display: inline-block;
    height: 16px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 16px
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_additive .mx_AccessSecretStorageDialog_reset .mx_AccessSecretStorageDialog_reset_link {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_AccessSecretStorageDialog .mx_AccessSecretStorageDialog_primaryContainer .mx_Dialog_buttons .mx_Dialog_buttons_row {
    gap: 16px;
    -webkit-padding-start: 24px;
    padding-inline-start: 24px
}

.mx_CreateCrossSigningDialog {
    width: 560px
}

.mx_CreateCrossSigningDialog details .mx_AccessibleButton {
    margin: 1em 0
}

.mx_CreateCrossSigningDialog .mx_Dialog_title, .mx_CreateKeyBackupDialog .mx_Dialog_title {
    margin-bottom: 1em
}

.mx_CreateKeyBackupDialog_primaryContainer {
    padding: 20px
}

.mx_CreateKeyBackupDialog_primaryContainer:after {
    clear: both;
    content: "";
    display: block
}

.mx_CreateKeyBackupDialog_passPhraseContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.mx_CreateKeyBackupDialog_passPhraseInput {
    -webkit-box-flex: 0;
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    border-radius: 5px;
    -ms-flex: none;
    flex: none;
    margin-bottom: 1em;
    padding: 10px;
    width: 250px
}

.mx_CreateKeyBackupDialog_passPhraseMatch {
    margin-left: 20px
}

.mx_CreateKeyBackupDialog_recoveryKeyHeader {
    margin-bottom: 1em
}

.mx_CreateKeyBackupDialog_recoveryKeyContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_CreateKeyBackupDialog_recoveryKey {
    background-color: #22262e;
    color: var(--timeline-text-secondary-color);
    margin-right: 12px;
    padding: 20px;
    width: 262px
}

.mx_CreateKeyBackupDialog_recoveryKeyButtons {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap
}

.mx_CreateKeyBackupDialog details .mx_AccessibleButton {
    margin: 1em 0
}

.mx_CreateSecretStorageDialog {
    width: 560px
}

.mx_CreateSecretStorageDialog.mx_SuccessDialog {
    padding: 56px
}

.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;
    font-weight: var(--cpd-font-weight-semibold);
    min-width: 0
}

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

.mx_CreateSecretStorageDialog .mx_Dialog_title {
    margin-bottom: 1em
}

.mx_CreateSecretStorageDialog_titleWithIcon:before {
    background-color: var(--timeline-text-color);
    content: "";
    display: inline-block;
    height: 24px;
    margin-right: 8px;
    position: relative;
    top: 5px;
    width: 24px
}

.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_centeredBody, .mx_CreateSecretStorageDialog_centeredTitle {
    text-align: center
}

.mx_CreateSecretStorageDialog_primaryContainer {
    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 {
    clear: both;
    content: "";
    display: block
}

.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
    margin-bottom: 16px;
    padding: 11px
}

.mx_CreateSecretStorageDialog_optionTitle {
    color: var(--timeline-text-color);
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    padding-bottom: 10px
}

.mx_CreateSecretStorageDialog_optionIcon {
    background-color: var(--timeline-text-color);
    display: inline-block;
    height: 24px;
    margin-right: 8px;
    position: relative;
    top: 5px;
    width: 24px
}

.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: 0
}

.mx_CreateSecretStorageDialog_passPhraseMatch {
    margin-left: 20px;
    width: 200px
}

.mx_CreateSecretStorageDialog_recoveryKeyContainer {
    display: inline-block
}

.mx_CreateSecretStorageDialog_recoveryKey {
    background-color: #22262e;
    border-radius: 6px;
    color: var(--timeline-text-secondary-color);
    font-weight: 700;
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
    word-spacing: 1em
}

.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 {
    height: 20px;
    width: 20px
}

.mx_KeyBackupFailedDialog .mx_Dialog_title {
    margin-bottom: 32px
}

.mx_KeyBackupFailedDialog_title {
    padding-bottom: 10px;
    padding-left: 45px;
    position: relative
}

.mx_KeyBackupFailedDialog_title:before {
    background-color: var(--timeline-text-color);
    bottom: 0;
    content: "";
    left: 0;
    -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;
    position: absolute;
    right: 0;
    top: -6px
}

.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
    margin-top: 36px
}

.mx_RestoreKeyBackupDialog_keyStatus {
    height: 30px
}

.mx_RestoreKeyBackupDialog_primaryContainer {
    padding: 20px
}

.mx_RestoreKeyBackupDialog_passPhraseInput, .mx_RestoreKeyBackupDialog_recoveryKeyInput {
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    border-radius: 5px;
    padding: 10px;
    width: 300px
}

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

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--header {
    min-width: 160px;
    padding-bottom: 4px;
    padding-top: 12px
}

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item {
    padding-bottom: 4px;
    padding-top: 4px
}

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option.mx_GenericDropdownMenu_Option--item > .mx_GenericDropdownMenu_Option--label span:first-child {
    font-weight: 400
}

.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(--timeline-text-color)
}

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_Option > .mx_GenericDropdownMenu_Option--label span:not(:first-child) {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin-left: 4px
}

.mx_NetworkDropdown_wrapper .mx_ContextualMenu .mx_GenericDropdownMenu_divider {
    margin-bottom: 4px;
    margin-top: 4px
}

.mx_NetworkDropdown_addServer {
    font-size: .9375rem;
    font-weight: 400
}

.mx_NetworkDropdown_removeServer {
    background: #6f7882;
    background: var(--quinary-content, #6f7882);
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin-left: auto;
    position: relative;
    text-align: center;
    width: 16px
}

.mx_NetworkDropdown_removeServer:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 8px;
    left: 50%;
    -webkit-mask-image: url(../../img/cancel-small.599ba74.svg);
    mask-image: url(../../img/cancel-small.599ba74.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 8px
}

.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_content_inline, .mx_AccessibleButton.mx_AccessibleButton_disabled.mx_AccessibleButton_kind_danger_inline, .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_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_link_sm, .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 {
    opacity: .4
}

.mx_AccessibleButton.mx_AccessibleButton_hasKind {
    border-radius: 24px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 7px 18px;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    border: none;
    font: var(--cpd-font-body-md-semibold);
    justify-content: center;
    word-break: keep-all
}

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm, .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm, .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
    padding: 5px 12px
}

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
    background-color: var(--cpd-color-bg-action-primary-rest);
    color: var(--cpd-color-text-on-solid-primary)
}

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
    background-color: var(--cpd-color-bg-critical-primary);
    color: var(--cpd-color-text-on-solid-primary)
}

.mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
    color: var(--cpd-color-text-primary);
    font-weight: var(--cpd-font-weight-semibold);
    text-decoration: underline
}

.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(../../img/feather-customised/check.bfca953.svg);
    mask-image: url(../../img/feather-customised/check.bfca953.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(../../img/feather-customised/x.c543757.svg);
    mask-image: url(../../img/feather-customised/x.c543757.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 {
    height: 32px;
    padding: 0;
    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 {
    background-color: var(--cpd-color-bg-action-primary-rest);
    border: 1px solid var(--cpd-color-bg-action-primary-rest);
    color: var(--cpd-color-text-on-solid-primary)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline, .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline {
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    color: var(--cpd-color-text-primary)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_secondary {
    color: var(--cpd-color-text-primary);
    text-decoration: underline
}

.mx_AccessibleButton.mx_AccessibleButton_kind_secondary_content {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_danger, .mx_AccessibleButton.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
    background-color: var(--cpd-color-bg-critical-primary);
    color: var(--cpd-color-text-on-solid-primary)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_danger_outline {
    background-color: transparent;
    border: 1px solid var(--cpd-color-border-critical-subtle);
    color: var(--cpd-color-text-critical-primary)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
    border-color: var(--cpd-color-border-disabled);
    color: var(--cpd-color-text-disabled)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
    background-color: var(--cpd-color-bg-subtle-primary);
    color: var(--cpd-color-text-disabled)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_content_inline, .mx_AccessibleButton.mx_AccessibleButton_kind_danger_inline, .mx_AccessibleButton.mx_AccessibleButton_kind_link, .mx_AccessibleButton.mx_AccessibleButton_kind_link_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(--timeline-text-color)
}

.mx_AccessibleButton.mx_AccessibleButton_kind_content_inline, .mx_AccessibleButton.mx_AccessibleButton_kind_danger_inline, .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline {
    display: inline
}

.mx_AccessibleButton.mx_AccessibleButton_kind_cancel_sm, .mx_AccessibleButton.mx_AccessibleButton_kind_confirm_sm {
    border-radius: 100%;
    display: block;
    height: 16px;
    padding: 0;
    position: relative;
    width: 16px
}

.mx_AccessibleButton.mx_AccessibleButton_kind_cancel_sm:before, .mx_AccessibleButton.mx_AccessibleButton_kind_confirm_sm:before {
    background-color: #fff;
    content: "";
    display: block;
    inset: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 80%;
    mask-size: 80%;
    position: absolute
}

.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;
    max-width: 100%;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.mx_CopyableText.mx_CopyableText_border {
    border: 1px solid var(--timeline-text-secondary-color);
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow: auto;
    padding: 10px 0 10px 10px
}

.mx_CopyableText .mx_CopyableText_copyButton {
    -ms-flex-negative: 0;
    background-color: var(--timeline-background-color);
    cursor: pointer;
    display: block;
    flex-shrink: 0;
    height: 1em;
    padding-left: 12px;
    padding-right: 10px;
    position: sticky;
    right: 0;
    top: .15em;
    width: 1em
}

.mx_CopyableText .mx_CopyableText_copyButton:before {
    background-color: var(--timeline-text-color);
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 1em;
    -webkit-mask-image: url(../../img/element-icons/copy.4ee219c.svg);
    mask-image: url(../../img/element-icons/copy.4ee219c.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;
    width: 1em
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50%;
    -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 {
    border: 2px solid transparent;
    border-radius: 8px;
    margin: 4px;
    padding: 4px
}

.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:focus, .mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_thumbnail:hover {
    border-color: #0dbd8b;
    border-color: var(--accent, #0dbd8b)
}

.mx_desktopCapturerSourcePicker .mx_desktopCapturerSourcePicker_tab .mx_desktopCapturerSourcePicker_source .mx_desktopCapturerSourcePicker_source_name {
    margin: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_DialPadBackspaceButton {
    height: 28px;
    position: relative;
    width: 28px
}

.mx_DialPadBackspaceButton:before {
    background-color: #8d97a5;
    content: "";
    display: inline-block;
    height: inherit;
    left: 0;
    -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-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    position: absolute;
    top: 0;
    vertical-align: middle;
    width: inherit
}

.mx_Dropdown {
    color: var(--timeline-text-color);
    position: relative
}

.mx_Dropdown_disabled {
    opacity: .3
}

.mx_Dropdown_input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    border-radius: 8px;
    font: var(--cpd-font-body-sm-regular);
    position: relative;
    -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(--primary-color)
}

.mx_Dropdown_input.mx_AccessibleButton:focus {
    -webkit-filter: none;
    filter: none
}

.mx_Dropdown_arrow {
    background: var(--timeline-text-color);
    height: 6px;
    -webkit-mask: url(../../img/feather-customised/dropdown-arrow.12f4aa5.svg);
    mask: url(../../img/feather-customised/dropdown-arrow.12f4aa5.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    padding-right: 9px;
    width: 10px
}

.mx_Dropdown_option {
    height: 35px;
    line-height: 2.1875rem;
    padding: 0 8px
}

.mx_Dropdown_input > .mx_Dropdown_option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex: 1;
    flex: 1;
    -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 .mx_Dropdown_option_emoji, .mx_Dropdown_option img {
    margin: 5px;
    vertical-align: middle;
    width: 16px
}

.mx_Dropdown_option_emoji {
    font-size: 1rem;
    line-height: 1rem
}

input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
    border: 0;
    font-weight: 400;
    padding-bottom: 0;
    padding-top: 0;
    width: 60%
}

.mx_Dropdown_menu {
    background-color: var(--timeline-background-color);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    left: -1px;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    right: -1px;
    top: 100%;
    z-index: 2
}

.mx_Dropdown_menu .mx_Dropdown_option {
    height: auto;
    min-height: 35px
}

ul.mx_Dropdown_menu li.mx_Dropdown_option {
    list-style: none
}

.mx_Dropdown_menu .mx_Dropdown_option_highlight {
    background-color: #343a46;
    background-color: var(--focus-bg-color, #343a46)
}

.mx_Dropdown_searchPrompt {
    font-weight: 400;
    margin-bottom: 5px;
    margin-left: 5px
}

.mx_EditableItemList {
    margin-bottom: 10px;
    margin-top: 12px
}

.mx_EditableItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px
}

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

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

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

.mx_EditableItem_delete {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    height: 14px;
    margin-right: 5px;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    order: 3;
    vertical-align: middle;
    width: 14px
}

.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;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 14px)
}

.mx_EditableItemList_label {
    margin-bottom: 5px
}

.mx_ErrorBoundary {
    height: 100%;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_ErrorBoundary, .mx_ErrorBoundary_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_ErrorBoundary_body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 400px
}

.mx_ErrorBoundary_body .mx_AccessibleButton {
    margin-top: 5px
}

.mx_ExternalLink {
    color: #0086e6;
    color: var(--links, #0086e6)
}

.mx_ExternalLink_icon {
    background-color: currentColor;
    display: inline-block;
    height: .6875rem;
    margin-left: .3rem;
    -webkit-mask-image: url(../../img/external-link.8197a77.svg);
    mask-image: url(../../img/external-link.8197a77.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
    width: .6875rem
}

.mx_FacePile_more {
    --cpd-avatar-size: 28px;
    background-color: var(--panels, var(--cpd-color-gray-600));
    border-radius: 100%;
    display: inline-block;
    height: 28px;
    position: relative;
    width: 28px
}

.mx_FacePile_more:before {
    background: #edf3ff;
    background: var(--tertiary-content, #edf3ff);
    content: "";
    height: inherit;
    left: 0;
    -webkit-mask-image: url(../../img/element-icons/room/ellipsis.c7bfee4.svg);
    mask-image: url(../../img/element-icons/room/ellipsis.c7bfee4.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: 1
}

.mx_FacePile_summary {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font: var(--cpd-font-body-md-regular);
    line-height: 1.5rem;
    margin-left: 12px
}

.mx_Field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    border-radius: 8px;
    -ms-flex: 1;
    flex: 1;
    margin: 1em 0;
    min-width: 0;
    position: relative;
    -webkit-transition: border-color .25s;
    transition: border-color .25s
}

.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 {
    background-color: var(--timeline-background-color);
    border: none;
    border-radius: 8px;
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    padding: 8px 9px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.mx_Field select {
    -moz-appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis
}

.mx_Field_select:before {
    background-color: var(--timeline-text-color);
    content: "";
    height: 6px;
    -webkit-mask: url(../../img/feather-customised/dropdown-arrow.12f4aa5.svg);
    mask: url(../../img/feather-customised/dropdown-arrow.12f4aa5.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 15px;
    width: 10px;
    z-index: 1
}

.mx_Field:focus-within {
    border-color: var(--primary-color)
}

.mx_Field input:focus, .mx_Field select:focus, .mx_Field textarea:focus {
    outline: 0
}

.mx_Field input::-webkit-input-placeholder, .mx_Field textarea::-webkit-input-placeholder {
    color: transparent;
    -webkit-transition: color .25s ease-in 0s;
    transition: color .25s ease-in 0s
}

.mx_Field input::-moz-placeholder, .mx_Field textarea::-moz-placeholder {
    color: transparent;
    -moz-transition: color .25s ease-in 0s;
    transition: color .25s ease-in 0s
}

.mx_Field input:-ms-input-placeholder, .mx_Field textarea:-ms-input-placeholder {
    color: transparent;
    -ms-transition: color .25s ease-in 0s;
    transition: color .25s ease-in 0s
}

.mx_Field input::-ms-input-placeholder, .mx_Field textarea::-ms-input-placeholder {
    color: transparent;
    -ms-transition: color .25s ease-in 0s;
    transition: color .25s ease-in 0s
}

.mx_Field input::placeholder, .mx_Field textarea::placeholder {
    color: transparent;
    -webkit-transition: color .25s ease-in 0s;
    transition: color .25s ease-in 0s
}

.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 {
    color: var(--timeline-text-secondary-color);
    -webkit-transition: color .25s ease-in .1s;
    transition: color .25s ease-in .1s
}

.mx_Field input:placeholder-shown:focus::-moz-placeholder, .mx_Field textarea:placeholder-shown:focus::-moz-placeholder, .mx_Field.mx_Field_placeholderIsHint input::-moz-placeholder {
    color: var(--timeline-text-secondary-color);
    -moz-transition: color .25s ease-in .1s;
    transition: color .25s ease-in .1s
}

.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 {
    color: var(--timeline-text-secondary-color);
    -ms-transition: color .25s ease-in .1s;
    transition: color .25s ease-in .1s
}

.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 {
    color: var(--timeline-text-secondary-color);
    -ms-transition: color .25s ease-in .1s;
    transition: color .25s ease-in .1s
}

.mx_Field input:-moz-placeholder-shown:focus::placeholder, .mx_Field textarea:-moz-placeholder-shown:focus::placeholder {
    color: var(--timeline-text-secondary-color);
    -moz-transition: color .25s ease-in .1s;
    transition: color .25s ease-in .1s
}

.mx_Field input:-ms-input-placeholder:focus::placeholder, .mx_Field textarea:-ms-input-placeholder:focus::placeholder {
    color: var(--timeline-text-secondary-color);
    -ms-transition: color .25s ease-in .1s;
    transition: color .25s ease-in .1s
}

.mx_Field input:placeholder-shown:focus::placeholder, .mx_Field textarea:placeholder-shown:focus::placeholder, .mx_Field.mx_Field_placeholderIsHint input::placeholder {
    color: var(--timeline-text-secondary-color);
    -webkit-transition: color .25s ease-in .1s;
    transition: color .25s ease-in .1s
}

.mx_Field label {
    background-color: transparent;
    color: var(--cpd-color-text-secondary);
    font: var(--cpd-font-body-md-regular);
    left: 0;
    margin: 7px 8px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    padding: 2px;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: font-size .25s ease-out .1s, color .25s ease-out .1s, background-color .25s ease-out .1s, -webkit-transform .25s ease-out .1s;
    transition: font-size .25s ease-out .1s, color .25s ease-out .1s, background-color .25s ease-out .1s, -webkit-transform .25s ease-out .1s;
    transition: font-size .25s ease-out .1s, color .25s ease-out .1s, transform .25s ease-out .1s, background-color .25s ease-out .1s;
    transition: font-size .25s ease-out .1s, color .25s ease-out .1s, transform .25s ease-out .1s, background-color .25s ease-out .1s, -webkit-transform .25s ease-out .1s;
    white-space: nowrap
}

.mx_Field input:not(:-moz-placeholder-shown) + label, .mx_Field textarea:not(:-moz-placeholder-shown) + label {
    background-color: var(--timeline-background-color);
    font-size: .625rem;
    padding: 0 2px;
    pointer-events: auto;
    transform: translateY(-13px);
    -moz-transition: font-size .25s ease-out 0s, color .25s ease-out 0s, transform .25s ease-out 0s, background-color .25s ease-out 0s;
    transition: font-size .25s ease-out 0s, color .25s ease-out 0s, transform .25s ease-out 0s, background-color .25s ease-out 0s
}

.mx_Field input:not(:-ms-input-placeholder) + label, .mx_Field textarea:not(:-ms-input-placeholder) + label {
    background-color: var(--timeline-background-color);
    font-size: .625rem;
    padding: 0 2px;
    pointer-events: auto;
    transform: translateY(-13px);
    -ms-transition: font-size .25s ease-out 0s, color .25s ease-out 0s, transform .25s ease-out 0s, background-color .25s ease-out 0s;
    transition: font-size .25s ease-out 0s, color .25s ease-out 0s, transform .25s ease-out 0s, background-color .25s ease-out 0s
}

.mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field select + label, .mx_Field textarea:focus + label, .mx_Field textarea:not(:placeholder-shown) + label, .mx_Field_labelAlwaysTopLeft label {
    background-color: var(--timeline-background-color);
    font-size: .625rem;
    padding: 0 2px;
    pointer-events: auto;
    -webkit-transform: translateY(-13px);
    transform: translateY(-13px);
    -webkit-transition: font-size .25s ease-out 0s, color .25s ease-out 0s, background-color .25s ease-out 0s, -webkit-transform .25s ease-out 0s;
    transition: font-size .25s ease-out 0s, color .25s ease-out 0s, background-color .25s ease-out 0s, -webkit-transform .25s ease-out 0s;
    transition: font-size .25s ease-out 0s, color .25s ease-out 0s, transform .25s ease-out 0s, background-color .25s ease-out 0s;
    transition: font-size .25s ease-out 0s, color .25s ease-out 0s, transform .25s ease-out 0s, background-color .25s ease-out 0s, -webkit-transform .25s ease-out 0s
}

.mx_Field input:focus + label, .mx_Field select:focus + label, .mx_Field textarea:focus + label {
    color: var(--primary-color)
}

.mx_Field input:disabled, .mx_Field input:disabled + label, .mx_Field select:disabled, .mx_Field select:disabled + label, .mx_Field textarea:disabled, .mx_Field textarea:disabled + label {
    background-color: var(--timeline-background-color);
    color: var(--timeline-text-secondary-color)
}

.mx_Field_valid.mx_Field, .mx_Field_valid.mx_Field:focus-within {
    border-color: #0dbd8b;
    border-color: var(--accent, #0dbd8b)
}

.mx_Field_valid.mx_Field label, .mx_Field_valid.mx_Field:focus-within label {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_Field_invalid.mx_Field, .mx_Field_invalid.mx_Field:focus-within {
    border-color: #ff5b55;
    border-color: var(--alert, #ff5b55)
}

.mx_Field_invalid.mx_Field label, .mx_Field_invalid.mx_Field:focus-within label {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_Field_tooltip {
    width: 200px
}

.mx_Field_tooltip.mx_Field_valid {
    -webkit-animation: mx_fadeout 1s 2s forwards;
    animation: mx_fadeout 1s 2s forwards
}

.mx_Field .mx_Dropdown_input {
    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 var(--roomlist-separator-color);
    line-height: 1.875rem;
    margin-left: 63px
}

.mx_IRCLayout .mx_GenericEventListSummary .mx_GenericEventListSummary_spacer {
    line-height: var(--line-height)
}

.mx_GenericEventListSummary .mx_GenericEventListSummary_toggle {
    text-transform: lowercase
}

.mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_toggle, .mx_GenericEventListSummary[data-layout=irc] .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))
}

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

.mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_toggle[aria-expanded=true] {
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    -webkit-margin-end: var(--EventTile_bubble-margin-inline-end);
    margin-inline-end: var(--EventTile_bubble-margin-inline-end)
}

.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;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
    justify-content: space-between
}

.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 {
    clear: both;
    content: ""
}

.mx_GenericEventListSummary[data-layout=bubble]:hover:before {
    background: transparent
}

.mx_MatrixChat_useCompactLayout .mx_GenericEventListSummary {
    font-size: .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)
}

.mx_GenericEventListSummary .mx_EventTile {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-sm-regular)
}

.mx_GenericEventListSummary_unstyledList {
    list-style: none;
    padding: 0
}

.mx_TextualEvent.mx_GenericEventListSummary_summary {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font: var(--cpd-font-body-sm-regular)
}

.mx_GenericEventListSummary_avatars {
    display: inline-block;
    line-height: .75rem
}

.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
    cursor: pointer;
    margin-right: -4px
}

:root {
    --image-view-panel-height: 68px
}

.mx_ImageView {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_ImageView, .mx_ImageView_image_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.mx_ImageView_image_wrapper {
    pointer-events: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

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

.mx_ImageView_image.mx_ImageView_image_animating {
    -webkit-transition: -webkit-transform .2s ease 0s;
    transition: -webkit-transform .2s ease 0s;
    transition: transform .2s ease 0s;
    transition: transform .2s ease 0s, -webkit-transform .2s ease 0s
}

.mx_ImageView_image.mx_ImageView_image_animatingLoading {
    -webkit-transition: -webkit-transform .3s ease 0s;
    transition: -webkit-transform .3s ease 0s;
    transition: transform .3s ease 0s;
    transition: transform .3s ease 0s, -webkit-transform .3s ease 0s
}

.mx_ImageView_panel {
    height: 68px;
    height: var(--image-view-panel-height);
    width: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: mx_ImageView_panel_keyframes;
    animation-name: mx_ImageView_panel_keyframes;
    justify-content: space-between
}

.mx_ImageView_info_wrapper, .mx_ImageView_panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_ImageView_info_wrapper {
    padding-left: 32px;
    pointer-events: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    color: #fff;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0
}

.mx_ImageView_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 12px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_ImageView_info_sender {
    font-weight: 700
}

.mx_ImageView_title {
    color: #fff;
    font-size: .75rem;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    text-align: center
}

.mx_ImageView_title, .mx_ImageView_toolbar {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.mx_ImageView_toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 16px;
    pointer-events: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    gap: 14px;
    justify-content: flex-end
}

.mx_ImageView_button {
    display: block;
    padding: 5px
}

.mx_ImageView_button:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    display: block;
    height: 22px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 22px
}

.mx_ImageView_button_rotateCW:before {
    -webkit-mask-image: url(../../img/image-view/rotate-cw.22a8e66.svg);
    mask-image: url(../../img/image-view/rotate-cw.22a8e66.svg)
}

.mx_ImageView_button_rotateCCW:before {
    -webkit-mask-image: url(../../img/image-view/rotate-ccw.bc1b65b.svg);
    mask-image: url(../../img/image-view/rotate-ccw.bc1b65b.svg)
}

.mx_ImageView_button_zoomOut:before {
    -webkit-mask-image: url(../../img/image-view/zoom-out.4a741a1.svg);
    mask-image: url(../../img/image-view/zoom-out.4a741a1.svg)
}

.mx_ImageView_button_zoomIn:before {
    -webkit-mask-image: url(../../img/image-view/zoom-in.714cc54.svg);
    mask-image: url(../../img/image-view/zoom-in.714cc54.svg)
}

.mx_ImageView_button_download:before {
    -webkit-mask-image: url(../../img/image-view/download.e1f4f96.svg);
    mask-image: url(../../img/image-view/download.e1f4f96.svg)
}

.mx_ImageView_button_more:before {
    -webkit-mask-image: url(../../img/image-view/more.6adb72c.svg);
    mask-image: url(../../img/image-view/more.6adb72c.svg)
}

.mx_ImageView_button_close {
    background: #21262c;
    border-radius: 100%;
    padding: 0
}

.mx_ImageView_button_close:before {
    height: 32px;
    -webkit-mask-image: url(../../img/image-view/close.c2af4a8.svg);
    mask-image: url(../../img/image-view/close.c2af4a8.svg);
    -webkit-mask-size: 40%;
    mask-size: 40%;
    width: 32px
}

@media (prefers-reduced-motion) {
    .mx_ImageView_image_animating, .mx_ImageView_image_animatingLoading {
        -webkit-transition: none !important;
        transition: none !important
    }
}

.mx_InfoTooltip_icon {
    display: inline-block;
    height: 16px;
    width: 16px
}

.mx_InfoTooltip_icon:before {
    background-color: #a1b2d1;
    content: "";
    display: inline-block;
    height: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    vertical-align: middle;
    width: 16px
}

.mx_InfoTooltip_icon_info:before {
    -webkit-mask-image: url(../../img/element-icons/info.1d7ac3e.svg);
    mask-image: url(../../img/element-icons/info.1d7ac3e.svg)
}

.mx_InfoTooltip_icon_warning:before {
    -webkit-mask-image: url(../../img/element-icons/warning.af4c54e.svg);
    mask-image: url(../../img/element-icons/warning.af4c54e.svg)
}

.mx_InlineSpinner {
    display: inline
}

.mx_InlineSpinner img, .mx_InlineSpinner_icon {
    margin: 0 6px;
    vertical-align: -3px
}

.mx_InlineSpinner_icon {
    display: inline-block !important
}

.mx_InteractiveTooltip_wrapper {
    position: fixed;
    z-index: 3999
}

.mx_InteractiveTooltip {
    background-color: var(--timeline-background-color);
    border-radius: 8px;
    -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%);
    color: var(--timeline-text-color);
    position: absolute;
    z-index: 5001
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
    top: 10px
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
    left: 10px
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
    right: 10px
}

.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
    bottom: 10px
}

.mx_InteractiveTooltip_chevron_top {
    border-bottom: 8px solid var(--timeline-background-color);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    height: 0;
    left: calc(50% - 8px);
    position: absolute;
    top: -8px;
    width: 0
}

@supports ((-webkit-clip-path:polygon(0% 0%,100% 100%,0% 100%)) or (clip-path:polygon(0% 0%,100% 100%,0% 100%))) {
    .mx_InteractiveTooltip_chevron_top {
        background-color: inherit;
        border: none;
        border-radius: 0 0 0 3px;
        -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 100%, 0 100%);
        height: 16px;
        top: -5.65771px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        width: 16px
    }
}

.mx_InteractiveTooltip_chevron_bottom {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--timeline-background-color);
    bottom: -8px;
    height: 0;
    left: calc(50% - 8px);
    position: absolute;
    width: 0
}

@supports ((-webkit-clip-path:polygon(0% 0%,100% 100%,0% 100%)) or (clip-path:polygon(0% 0%,100% 100%,0% 100%))) {
    .mx_InteractiveTooltip_chevron_bottom {
        background-color: inherit;
        border: none;
        border-radius: 0 0 0 3px;
        bottom: -5.65771px;
        -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 100%, 0 100%);
        height: 16px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        width: 16px
    }
}

.mx_InviteReason {
    margin-bottom: 1em;
    position: relative
}

.mx_InviteReason .mx_InviteReason_reason {
    visibility: visible
}

.mx_InviteReason .mx_InviteReason_view {
    display: none;
    inset: 0;
    position: absolute;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    cursor: pointer
}

.mx_InviteReason .mx_InviteReason_view:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    height: 14px;
    margin-right: 8px;
    -webkit-mask-image: url(../../img/feather-customised/eye.d8df60a.svg);
    mask-image: url(../../img/feather-customised/eye.d8df60a.svg);
    width: 18px
}

.mx_InviteReason_hidden .mx_InviteReason_reason {
    visibility: hidden
}

.mx_InviteReason_hidden .mx_InviteReason_view, .mx_LabelledCheckbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_LabelledCheckbox {
    gap: 8px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.mx_LabelledCheckbox .mx_Checkbox {
    margin-top: 3px
}

.mx_LabelledCheckbox .mx_LabelledCheckbox_labels {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_LabelledCheckbox .mx_LabelledCheckbox_labels .mx_LabelledCheckbox_label {
    vertical-align: middle
}

.mx_LabelledCheckbox .mx_LabelledCheckbox_labels .mx_LabelledCheckbox_byline {
    color: #a1b2d1;
    display: block;
    font-size: .6875rem;
    padding-top: 4px
}

.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_Tooltip {
    display: inline-block;
    left: 72px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    z-index: auto
}

.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator {
    background-color: var(--timeline-background-color);
    border-radius: 50%;
    bottom: -6px;
    height: 26px;
    line-height: 0;
    position: absolute;
    right: -6px;
    width: 26px;
    z-index: 1
}

.mx_MiniAvatarUploader .mx_MiniAvatarUploader_indicator .mx_MiniAvatarUploader_cameraIcon {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    height: 100%;
    -webkit-mask-image: url(../../img/element-icons/camera.d1d1927.svg);
    mask-image: url(../../img/element-icons/camera.d1d1927.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    width: 100%;
    z-index: 2
}

.mx_MiniAvatarUploader_input {
    display: none
}

.mx_Pill {
    border-radius: 1rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    line-height: 1.0625rem;
    padding: .0625rem .4em;
    vertical-align: text-top;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--other-user-pill-bg-color, var(--cpd-color-bg-action-primary-rest)) !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--cpd-color-text-on-solid-primary) !important;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden
}

.mx_Pill > * {
    pointer-events: none
}

.mx_Pill.mx_AtRoomPill, .mx_Pill.mx_UserPill_me {
    background-color: var(--cpd-color-bg-critical-primary) !important
}

.mx_Pill:hover {
    background-color: var(--other-user-pill-bg-color, var(--cpd-color-bg-action-primary-hovered)) !important
}

.mx_Pill:active {
    background-color: var(--other-user-pill-bg-color, var(--cpd-color-bg-action-primary-pressed)) !important
}

.mx_Pill.mx_UserPill_me:hover {
    background-color: var(
            --cpd-color-bg-critical-hovered
    ) !important
}

.mx_Pill.mx_AtRoomPill:hover {
    background-color: var(--cpd-color-bg-critical-primary) !important;
    cursor: inherit
}

.mx_Pill .mx_BaseAvatar, .mx_Pill:before {
    -webkit-margin-start: -.3em;
    margin-inline-start: -.3em;
    -webkit-margin-end: .2em;
    margin-inline-end: .2em;
    min-width: 1rem
}

.mx_Pill .mx_Pill_text {
    min-width: 0
}

.mx_Pill .mx_Pill_text, a.mx_Pill {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

a.mx_Pill {
    text-decoration: none !important
}

.mx_Pill .mx_Pill_LinkIcon {
    background-color: #0467dd;
    border-radius: 50%;
    color: var(--timeline-background-color);
    padding: 1px
}

.mx_Pill .mx_Pill_LinkIcon, .mx_Pill .mx_Pill_UserIcon {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 16px;
    width: 16px
}

.mx_Pill .mx_Pill_UserIcon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_Pill.mx_SpacePill {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    padding-left: 4px
}

.mx_PowerSelector {
    width: 100%
}

.mx_PowerSelector .mx_Field input, .mx_PowerSelector .mx_Field select {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

progress.mx_ProgressBar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
    width: 60px
}

progress.mx_ProgressBar::-moz-progress-bar {
    border-radius: 6px
}

progress.mx_ProgressBar::-webkit-progress-bar, progress.mx_ProgressBar::-webkit-progress-value {
    border-radius: 6px
}

progress.mx_ProgressBar {
    color: var(--cpd-color-icon-accent-tertiary)
}

progress.mx_ProgressBar::-moz-progress-bar {
    background-color: var(--cpd-color-icon-accent-tertiary)
}

progress.mx_ProgressBar::-webkit-progress-value {
    background-color: var(--cpd-color-icon-accent-tertiary)
}

progress.mx_ProgressBar {
    background-color: #21262c
}

progress.mx_ProgressBar::-webkit-progress-bar {
    background-color: #21262c
}

progress.mx_ProgressBar ::-webkit-progress-value {
    -webkit-transition: width 1s;
    transition: width 1s
}

progress.mx_ProgressBar ::-moz-progress-bar {
    height: 0;
    padding-bottom: var(--value);
    padding-left: 15px;
    transform: rotate(-90deg) translateX(-15px);
    transform-origin: 0 0;
    -moz-transition: padding-bottom 1s;
    transition: padding-bottom 1s
}

.mx_QRCode img {
    border-radius: 8px
}

.mx_ReplyChain {
    border-left: 2px solid var(--username-color);
    border-radius: 2px;
    margin: 0;
    padding-left: 10px
}

.mx_ReplyChain .mx_ReplyChain_show.mx_AccessibleButton_kind_link_inline {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-weight: var(--cpd-font-weight-normal);
    text-decoration: inherit;
    -webkit-transition: color .15s ease;
    transition: color .15s ease;
    white-space: nowrap
}

.mx_ReplyChain .mx_ReplyChain_show.mx_AccessibleButton_kind_link_inline:hover {
    color: var(--timeline-text-color)
}

.mx_ReplyChain.mx_ReplyChain_color1 {
    --username-color: var(--cpd-color-text-decorative-1)
}

.mx_ReplyChain.mx_ReplyChain_color2 {
    --username-color: var(--cpd-color-text-decorative-2)
}

.mx_ReplyChain.mx_ReplyChain_color3 {
    --username-color: var(--cpd-color-text-decorative-3)
}

.mx_ReplyChain.mx_ReplyChain_color4 {
    --username-color: var(--cpd-color-text-decorative-4)
}

.mx_ReplyChain.mx_ReplyChain_color5 {
    --username-color: var(--cpd-color-text-decorative-5)
}

.mx_ReplyChain.mx_ReplyChain_color6 {
    --username-color: var(--cpd-color-text-decorative-6)
}

.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 {
    cursor: col-resize;
    margin: 0 -5px;
    padding: 0 5px
}

.mx_ResizeHandle.mx_ResizeHandle--horizontal > div {
    height: 100%;
    width: 1px
}

.mx_ResizeHandle.mx_ResizeHandle--vertical {
    margin: -5px 0;
    padding: 5px 0
}

.mx_ResizeHandle.mx_ResizeHandle--vertical > div {
    height: 1px
}

.mx_Markdown_BOLD {
    font-weight: 700
}

.mx_Markdown_ITALIC {
    font-style: italic
}

.mx_Markdown_CODE {
    background-color: rgba(0, 0, 0, .04);
    border-radius: 3px;
    font-size: 85%;
    margin: 0;
    padding: .2em 0
}

.mx_Markdown_HR {
    background: #e9e9e9;
    display: block
}

.mx_Markdown_STRIKETHROUGH {
    text-decoration: line-through
}

.mx_Emoji {
    font-size: max(1.125rem, 1em);
    vertical-align: bottom
}

.mx_RoomAliasField {
    -webkit-box-flex: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    max-width: 100%;
    min-width: 0
}

.mx_RoomAliasField input {
    padding-left: 0;
    padding-right: 0;
    width: 150px
}

.mx_RoomAliasField input::-webkit-input-placeholder {
    color: var(--timeline-text-secondary-color);
    font-weight: 400
}

.mx_RoomAliasField input::-moz-placeholder {
    color: var(--timeline-text-secondary-color);
    font-weight: 400
}

.mx_RoomAliasField input:-ms-input-placeholder {
    color: var(--timeline-text-secondary-color);
    font-weight: 400
}

.mx_RoomAliasField input::-ms-input-placeholder {
    color: var(--timeline-text-secondary-color);
    font-weight: 400
}

.mx_RoomAliasField input::placeholder {
    color: var(--timeline-text-secondary-color);
    font-weight: 400
}

.mx_RoomAliasField .mx_Field_postfix, .mx_RoomAliasField .mx_Field_prefix {
    border-left: none;
    border-right: none;
    color: var(--timeline-text-secondary-color);
    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 {
    max-width: calc(100% - 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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 {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    color: var(--timeline-text-color);
    display: inline-block;
    font: var(--cpd-font-body-md-semibold);
    padding: 7px 32px;
    position: relative;
    text-align: center;
    width: 100%
}

.mx_SSOButtons .mx_SSOButton > img {
    left: 8px;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: 4px
}

.mx_SSOButtons .mx_SSOButton:hover {
    background-color: var(--roomlist-highlights-color)
}

.mx_SSOButtons .mx_SSOButton_default {
    background-color: var(--timeline-background-color);
    border-color: #0dbd8b;
    border-color: var(--accent, #0dbd8b);
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_SSOButtons .mx_SSOButton_default.mx_SSOButton_primary {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    color: #fff
}

.mx_SSOButtons .mx_SSOButton_mini {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 50px;
    min-width: 50px;
    padding: 12px;
    width: 50px
}

.mx_SSOButtons .mx_SSOButton_mini > img {
    left: 12px;
    top: 12px
}

.mx_SSOButtons .mx_SSOButton_mini + .mx_SSOButton_mini {
    margin-left: 16px
}

.mx_SearchWarning {
    padding: 0 16px;
    text-align: center
}

.mx_SearchWarning > * {
    vertical-align: middle
}

.mx_SearchWarning > img {
    margin-right: 8px
}

.mx_ServerPicker {
    border-bottom: 1px solid rgba(141, 151, 165, .2);
    display: grid;
    font: var(--cpd-font-body-md-regular);
    grid-template-columns:auto -webkit-min-content;
    grid-template-columns:auto min-content;
    grid-template-rows:auto auto auto;
    margin-bottom: 14px;
    padding-bottom: 16px
}

.mx_ServerPicker > h2 {
    font-weight: var(--cpd-font-weight-semibold);
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 20px
}

.mx_ServerPicker .mx_ServerPicker_help {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    grid-column: 2;
    grid-row: 1;
    height: 20px;
    margin-left: auto;
    position: relative;
    text-align: center;
    width: 20px
}

.mx_ServerPicker .mx_ServerPicker_help:before {
    background: #fff;
    content: "";
    height: 24px;
    left: -2px;
    -webkit-mask-image: url(../../img/element-icons/i.cf33278.svg);
    mask-image: url(../../img/element-icons/i.cf33278.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: -2px;
    width: 24px
}

.mx_ServerPicker .mx_ServerPicker_server {
    color: var(--timeline-text-color);
    grid-column: 1;
    grid-row: 2;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_ServerPicker .mx_ServerPicker_change {
    grid-column: 2;
    grid-row: 2
}

.mx_ServerPicker .mx_ServerPicker_desc {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    grid-column: 1/2;
    grid-row: 3;
    margin-top: 4px
}

.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;
    margin-right: 8px;
    vertical-align: middle
}

.mx_SettingsFlag.mx_SettingsFlag_toggleInFront .mx_SettingsFlag_label {
    display: inline-block;
    vertical-align: middle
}

.mx_SettingsFlag_label {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    color: var(--timeline-text-color);
    -ms-flex-direction: column;
    flex-direction: column;
    padding-right: 10px;
    padding-top: 4px
}

.mx_SettingsFlag_microcopy {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-sm-regular);
    margin-top: 4px
}

.mx_SettingsFlag_microcopy code, .mx_SettingsFlag_microcopy pre {
    background-color: rgba(0, 0, 0, .04);
    font-family: Inconsolata,, Apple Color Emoji, Segoe UI Emoji, Courier, monospace, Noto Color Emoji !important;
    font-family: var(--font-family-monospace, "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji") !important
}

.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;
    height: 100%;
    justify-content: center;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_MatrixChat_middlePanel .mx_Spinner {
    height: auto
}

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

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

.mx_Spinner_icon {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-mask: url(../../img/spinner/spinner-background.0fe37e1.svg);
    mask: url(../../img/spinner/spinner-background.0fe37e1.svg);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%
}

.mx_Spinner_icon:before {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -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%
}

.mx_Checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.mx_Checkbox input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0
}

.mx_Checkbox input[type=checkbox] + label {
    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
}

.mx_Checkbox input[type=checkbox] + label > .mx_Checkbox_background {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    size: .5rem;
    border: 1px solid var(--cpd-color-border-interactive-primary);
    border-radius: .27rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mx_Checkbox input[type=checkbox] + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
    display: none;
    height: 100%;
    -webkit-mask-image: url(../../img/feather-customised/check.bfca953.svg);
    mask-image: url(../../img/feather-customised/check.bfca953.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 100%
}

.mx_Checkbox input[type=checkbox]:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
    display: block
}

.mx_Checkbox input[type=checkbox] + label > :not(.mx_Checkbox_background) {
    margin-left: 10px
}

.mx_Checkbox input[type=checkbox]:disabled + label {
    cursor: not-allowed
}

.mx_Checkbox input[type=checkbox]:focus-visible + label .mx_Checkbox_background {
    outline-color: Highlight;
    outline-style: solid;
    outline-width: 2px
}

@media (-webkit-min-device-pixel-ratio: 0) {
    .mx_Checkbox input[type=checkbox]:focus-visible + label .mx_Checkbox_background {
        outline-color: -webkit-focus-ring-color;
        outline-style: auto
    }
}

.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox] + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
    background: var(--cpd-color-icon-on-solid-primary)
}

.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox]:checked + label > .mx_Checkbox_background {
    background: var(--cpd-color-bg-accent-rest);
    border-color: var(--cpd-color-bg-accent-rest)
}

.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox]:checked:disabled + label > .mx_Checkbox_background {
    background: var(--cpd-color-bg-action-primary-disabled);
    border-color: var(--cpd-color-bg-action-primary-disabled)
}

.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
    background: var(--cpd-color-bg-accent-rest)
}

.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox]:checked + label > .mx_Checkbox_background {
    background: transparent;
    border-color: var(--cpd-color-bg-accent-rest)
}

.mx_StyledRadioButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    -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] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0
}

.mx_StyledRadioButton input[type=radio] + div {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    border: 1px solid var(--cpd-color-border-interactive-primary);
    border-radius: 1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 1rem;
    justify-content: center;
    margin-left: 2px;
    width: 1rem
}

.mx_StyledRadioButton input[type=radio] + div > div {
    border-radius: .5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: .5rem;
    width: .5rem
}

.mx_StyledRadioButton input[type=radio]:focus-visible + div {
    outline-color: Highlight;
    outline-style: solid;
    outline-width: 2px
}

@media (-webkit-min-device-pixel-ratio: 0) {
    .mx_StyledRadioButton input[type=radio]:focus-visible + div {
        outline-color: -webkit-focus-ring-color;
        outline-style: auto
    }
}

.mx_StyledRadioButton input[type=radio]:checked + div {
    border-color: var(--cpd-color-bg-accent-rest)
}

.mx_StyledRadioButton input[type=radio]:checked + div > div {
    background: var(--cpd-color-bg-accent-rest)
}

.mx_StyledRadioButton input[type=radio]:disabled + div, .mx_StyledRadioButton input[type=radio]:disabled + div + span {
    cursor: not-allowed;
    opacity: .5
}

.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(--roomlist-separator-color);
    border-radius: 8px
}

.mx_StyledRadioButton_checked {
    border-color: var(--cpd-color-bg-accent-rest)
}

.mx_SyntaxHighlight {
    background: none !important;
    color: var(--timeline-text-secondary-color) !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;
    -ms-flex-item-align: stretch;
    align-self: stretch
}

.mx_TagComposer .mx_TagComposer_input .mx_AccessibleButton, .mx_TagComposer .mx_TagComposer_input .mx_Field, .mx_TagComposer .mx_TagComposer_input .mx_Field input {
    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
}

.mx_TagComposer .mx_Tag {
    margin-right: 12px;
    margin-top: 12px
}

.mx_Tag {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: .9375rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #6f7882;
    background: var(--quinary-content, #6f7882);
    border-radius: 8px;
    color: var(--timeline-text-color);
    gap: 8px;
    padding: 8px
}

.mx_Tag > svg:first-child {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-transform-origin: center;
    transform-origin: center;
    width: 1em
}

.mx_Tag .mx_Tag_delete {
    background: #21262c;
    background: var(--system, #21262c);
    border-radius: 50%;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    height: 1.066666em;
    line-height: 1em;
    position: relative;
    text-align: center;
    width: 1.066666em
}

.mx_Tag .mx_Tag_delete svg {
    vertical-align: middle;
    width: .5em
}

.mx_TextWithTooltip_target {
    display: inline
}

.mx_TextWithTooltip_tooltip {
    display: none
}

.mx_ToggleSwitch {
    --ToggleSwitch-min-width: 2.75rem;
    background-color: var(--cpd-color-bg-canvas-disabled);
    border: 1px solid var(--cpd-color-border-disabled);
    border-radius: 1.5rem;
    cursor: not-allowed;
    height: 1.25rem;
    padding: 2px;
    -webkit-transition: background-color .2s ease-out .1s, border-color .2s ease-out .1s;
    transition: background-color .2s ease-out .1s, border-color .2s ease-out .1s;
    width: 2.75rem
}

.mx_ToggleSwitch.mx_ToggleSwitch_enabled {
    background-color: var(--cpd-color-bg-canvas-default);
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
    cursor: pointer
}

.mx_ToggleSwitch.mx_ToggleSwitch_enabled.mx_ToggleSwitch_on {
    background-color: var(--cpd-color-bg-accent-rest);
    border-color: var(--cpd-color-bg-accent-rest)
}

.mx_ToggleSwitch.mx_ToggleSwitch_enabled > .mx_ToggleSwitch_ball {
    background-color: var(--cpd-color-icon-secondary)
}

.mx_ToggleSwitch.mx_ToggleSwitch_on {
    background-color: var(--cpd-color-bg-action-primary-disabled);
    border-color: var(--cpd-color-bg-action-primary-disabled)
}

.mx_ToggleSwitch.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
    background-color: var(--cpd-color-icon-on-solid-primary);
    left: calc(100% - 1.25rem)
}

.mx_ToggleSwitch_ball {
    background-color: var(--cpd-color-bg-action-primary-disabled);
    border-radius: 1.25rem;
    height: 1.25rem;
    left: 0;
    position: relative;
    -webkit-transition: left .15s ease-out .1s, background-color .15s ease-out .1s;
    transition: left .15s ease-out .1s, background-color .15s ease-out .1s;
    width: 1.25rem
}

@-webkit-keyframes mx_fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes mx_fadein {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes mx_fadeout {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes mx_fadeout {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.mx_Tooltip_chevron {
    border-bottom: 7px solid transparent;
    border-right: 7px solid #000;
    border-top: 7px solid transparent;
    height: 0;
    left: -7px;
    position: absolute;
    top: calc(50% - 6px);
    width: 0
}

.mx_Tooltip_chevron:after {
    border-bottom: 6px solid transparent;
    border-right: 6px solid var(--timeline-background-color);
    border-top: 6px solid transparent;
    content: "";
    height: 0;
    left: 1px;
    position: absolute;
    top: -6px;
    width: 0
}

.mx_Tooltip {
    background-color: var(--cpd-color-alpha-gray-1400);
    border: 0;
    border-radius: 8px;
    color: var(--cpd-color-text-on-solid-primary);
    font-size: .75rem;
    font-weight: 500;
    line-height: .875rem;
    max-width: 300px;
    padding: 10px;
    pointer-events: none;
    position: fixed;
    text-align: center;
    word-break: break-word;
    z-index: 6000
}

.mx_Tooltip, .mx_Tooltip .mx_Tooltip_chevron {
    display: none
}

.mx_Tooltip.mx_Tooltip_visible {
    -webkit-animation: mx_fadein .2s forwards;
    animation: mx_fadein .2s forwards
}

.mx_Tooltip.mx_Tooltip_invisible {
    -webkit-animation: mx_fadeout .1s forwards;
    animation: mx_fadeout .1s forwards
}

.mx_Tooltip ol, .mx_Tooltip ul {
    text-align: start
}

.mx_Field_tooltip {
    background-color: var(--timeline-background-color);
    border: 1px solid #000;
    color: var(--timeline-text-color);
    text-align: inherit
}

.mx_Field_tooltip .mx_Tooltip_chevron {
    display: inline;
    display: initial
}

.mx_Tooltip_title {
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_Tooltip_sub {
    margin-top: 4px;
    opacity: .7
}

.mx_UseCaseSelection {
    display: grid;
    grid-template-rows:1fr 1fr -webkit-max-content 2fr;
    grid-template-rows:1fr 1fr max-content 2fr;
    height: 100%;
    grid-gap: 40px
}

.mx_UseCaseSelection .mx_UseCaseSelection_title {
    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
}

.mx_UseCaseSelection .mx_UseCaseSelection_title h1 {
    font-size: 2rem;
    font-weight: var(--cpd-font-weight-semibold);
    text-align: center
}

.mx_UseCaseSelection .mx_UseCaseSelection_info {
    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;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.mx_UseCaseSelection .mx_UseCaseSelection_info h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    text-align: center
}

.mx_UseCaseSelection .mx_UseCaseSelection_info h3 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    text-align: center
}

.mx_UseCaseSelection .mx_UseCaseSelection_options {
    display: grid;
    grid-template-columns:repeat(auto-fit, 232px);
    grid-gap: 32px;
    align-self: stretch;
    gap: 32px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_UseCaseSelection .mx_UseCaseSelection_skip {
    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: start;
    align-self: flex-start
}

.mx_UseCaseSelection_slideIn {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-name: mx_UseCaseSelection_slideInLong;
    animation-name: mx_UseCaseSelection_slideInLong;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    will-change: opacity
}

.mx_UseCaseSelection_slideInDelayed {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-name: mx_UseCaseSelection_slideInShort;
    animation-name: mx_UseCaseSelection_slideInShort;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    will-change: transform, opacity
}

.mx_UseCaseSelection_selected .mx_UseCaseSelection_slideIn, .mx_UseCaseSelection_selected .mx_UseCaseSelection_slideInDelayed {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-name: mx_UseCaseSelection_fadeOut;
    animation-name: mx_UseCaseSelection_fadeOut;
    will-change: opacity
}

@-webkit-keyframes mx_UseCaseSelection_slideInLong {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes mx_UseCaseSelection_slideInLong {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes mx_UseCaseSelection_slideInShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes mx_UseCaseSelection_slideInShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes mx_UseCaseSelection_fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes mx_UseCaseSelection_fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.mx_UseCaseSelectionButton {
    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;
    background: var(--timeline-background-color);
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 8px;
    padding: 24px 16px;
    position: relative;
    text-align: center;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: -webkit-box-shadow, -webkit-transform;
    transition-property: -webkit-box-shadow, -webkit-transform;
    transition-property: box-shadow, transform;
    transition-property: box-shadow, transform, -webkit-box-shadow, -webkit-transform
}

.mx_UseCaseSelectionButton .mx_UseCaseSelectionButton_icon {
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(172, 59, 168, .15)), to(rgba(172, 59, 168, .15))), #fff;
    background: linear-gradient(0deg, rgba(172, 59, 168, .15), rgba(172, 59, 168, .15)), #fff;
    border-radius: 14px;
    margin-bottom: 16px;
    padding: 8px
}

.mx_UseCaseSelectionButton .mx_UseCaseSelectionButton_icon:before {
    background: #1e1e1e;
    content: "";
    display: block;
    height: 22px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 22px
}

.mx_UseCaseSelectionButton .mx_UseCaseSelectionButton_icon.mx_UseCaseSelectionButton_messaging:before {
    -webkit-mask-image: url(../../img/element-icons/chat-bubble.d1c5d78.svg);
    mask-image: url(../../img/element-icons/chat-bubble.d1c5d78.svg)
}

.mx_UseCaseSelectionButton .mx_UseCaseSelectionButton_icon.mx_UseCaseSelectionButton_work:before {
    -webkit-mask-image: url(../../img/element-icons/view-community.0d3cd3f.svg);
    mask-image: url(../../img/element-icons/view-community.0d3cd3f.svg)
}

.mx_UseCaseSelectionButton .mx_UseCaseSelectionButton_icon.mx_UseCaseSelectionButton_community:before {
    -webkit-mask-image: url(../../img/globe.0408a7a.svg);
    mask-image: url(../../img/globe.0408a7a.svg)
}

.mx_UseCaseSelectionButton:focus, .mx_UseCaseSelectionButton:hover {
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
}

.mx_UseCaseSelectionButton .mx_UseCaseSelectionButton_selectedIcon {
    background: #0dbd8b;
    background: var(--accent, #0dbd8b);
    border-radius: 24px;
    opacity: 0;
    padding: 6px;
    position: absolute;
    right: -12px;
    top: -12px;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform
}

.mx_UseCaseSelectionButton .mx_UseCaseSelectionButton_selectedIcon:before {
    background: var(--timeline-background-color);
    content: "";
    display: block;
    height: 12px;
    -webkit-mask-image: url(../../img/element-icons/check-white.9400525.svg);
    mask-image: url(../../img/element-icons/check-white.9400525.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 12px
}

.mx_UseCaseSelectionButton.mx_UseCaseSelectionButton_selected {
    border: 2px solid #0dbd8b;
    border: 2px solid var(--accent, #0dbd8b);
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    padding: 23px 15px
}

.mx_UseCaseSelectionButton.mx_UseCaseSelectionButton_selected .mx_UseCaseSelectionButton_selectedIcon {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.mx_Validation {
    position: relative
}

.mx_Validation_details {
    margin: 0;
    padding-left: 20px
}

.mx_Validation_description + .mx_Validation_details {
    margin: 1em 0 0
}

.mx_Validation_detail {
    font-weight: 400;
    list-style: none;
    margin-bottom: .5em;
    position: relative
}

.mx_Validation_detail:last-child {
    margin-bottom: 0
}

.mx_Validation_detail:before {
    content: "";
    height: 14px;
    left: -18px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 0;
    width: 14px
}

.mx_Validation_detail.mx_Validation_valid {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_Validation_detail.mx_Validation_valid:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    -webkit-mask-image: url(../../img/feather-customised/check.bfca953.svg);
    mask-image: url(../../img/feather-customised/check.bfca953.svg)
}

.mx_Validation_detail.mx_Validation_invalid {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_Validation_detail.mx_Validation_invalid:before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    -webkit-mask-image: url(../../img/feather-customised/x.c543757.svg);
    mask-image: url(../../img/feather-customised/x.c543757.svg)
}

.mx_EmojiPicker {
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 450px;
    width: 340px;
    -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-color: rgba(0, 0, 0, .2) transparent;
    scrollbar-width: thin
}

.mx_EmojiPicker_header {
    border-bottom: 1px solid #616b7f;
    padding: 4px 8px 0
}

.mx_EmojiPicker_anchor {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    height: 38px;
    padding: 8px 8px 6px;
    width: 36px
}

.mx_EmojiPicker_anchor:not(:disabled) {
    cursor: pointer
}

.mx_EmojiPicker_anchor:not(:disabled):hover {
    background-color: #343a46;
    background-color: var(--focus-bg-color, #343a46);
    border-bottom: 2px solid #0dbd8b;
    border-bottom: 2px solid var(--accent, #0dbd8b)
}

.mx_EmojiPicker_anchor:before {
    background-color: var(--timeline-text-color);
    content: "";
    display: inline-block;
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 100%
}

.mx_EmojiPicker_anchor:disabled:before {
    background-color: #343a46;
    background-color: var(--focus-bg-color, #343a46)
}

.mx_EmojiPicker_anchor_activity:before {
    -webkit-mask-image: url(../../img/emojipicker/activity.b1bd2e6.svg);
    mask-image: url(../../img/emojipicker/activity.b1bd2e6.svg)
}

.mx_EmojiPicker_anchor_custom:before {
    -webkit-mask-image: url(../../img/emojipicker/custom.0b41026.svg);
    mask-image: url(../../img/emojipicker/custom.0b41026.svg)
}

.mx_EmojiPicker_anchor_flags:before {
    -webkit-mask-image: url(../../img/emojipicker/flags.90f18b0.svg);
    mask-image: url(../../img/emojipicker/flags.90f18b0.svg)
}

.mx_EmojiPicker_anchor_foods:before {
    -webkit-mask-image: url(../../img/emojipicker/foods.7be3b5f.svg);
    mask-image: url(../../img/emojipicker/foods.7be3b5f.svg)
}

.mx_EmojiPicker_anchor_nature:before {
    -webkit-mask-image: url(../../img/emojipicker/nature.8a9bfce.svg);
    mask-image: url(../../img/emojipicker/nature.8a9bfce.svg)
}

.mx_EmojiPicker_anchor_objects:before {
    -webkit-mask-image: url(../../img/emojipicker/objects.31b5fc3.svg);
    mask-image: url(../../img/emojipicker/objects.31b5fc3.svg)
}

.mx_EmojiPicker_anchor_people:before {
    -webkit-mask-image: url(../../img/emojipicker/people.0fb0422.svg);
    mask-image: url(../../img/emojipicker/people.0fb0422.svg)
}

.mx_EmojiPicker_anchor_places:before {
    -webkit-mask-image: url(../../img/emojipicker/places.87f4f91.svg);
    mask-image: url(../../img/emojipicker/places.87f4f91.svg)
}

.mx_EmojiPicker_anchor_recent:before {
    -webkit-mask-image: url(../../img/emojipicker/recent.ac61335.svg);
    mask-image: url(../../img/emojipicker/recent.ac61335.svg)
}

.mx_EmojiPicker_anchor_symbols:before {
    -webkit-mask-image: url(../../img/emojipicker/symbols.9e36ce6.svg);
    mask-image: url(../../img/emojipicker/symbols.9e36ce6.svg)
}

.mx_EmojiPicker_anchor_visible {
    border-bottom: 2px solid #0dbd8b;
    border-bottom: 2px solid var(--accent, #0dbd8b)
}

.mx_EmojiPicker_search {
    background-color: var(--timeline-background-color);
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 8px
}

.mx_EmojiPicker_search input {
    -webkit-box-flex: 1;
    border: none;
    border-radius: 4px 0;
    -ms-flex: 1;
    flex: 1;
    padding: 8px 12px
}

.mx_EmojiPicker_search button {
    background-color: inherit;
    border: none;
    margin: 0;
    padding: 8px;
    -ms-flex-item-align: center;
    align-self: center;
    height: 32px;
    width: 32px
}

.mx_EmojiPicker_search_clear {
    cursor: pointer
}

.mx_EmojiPicker_search_icon {
    margin: 8px;
    width: 16px
}

.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
    pointer-events: none
}

.mx_EmojiPicker_search_icon:after {
    background-color: var(--timeline-text-color);
    content: "";
    display: inline-block;
    height: 100%;
    -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%;
    width: 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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 12px;
    -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 {
    margin: 0;
    padding: 0;
    width: 304px
}

.mx_EmojiPicker_item_wrapper {
    cursor: pointer;
    display: inline-block;
    list-style: none;
    width: 38px
}

.mx_EmojiPicker_item_wrapper:focus-within {
    background-color: #343a46;
    background-color: var(--focus-bg-color, #343a46)
}

.mx_EmojiPicker_body .mx_EmojiPicker_item_wrapper[tabindex="0"] .mx_EmojiPicker_item {
    background-color: #343a46;
    background-color: var(--focus-bg-color, #343a46)
}

.mx_EmojiPicker_item {
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 1.25rem;
    height: 100%;
    padding: 5px;
    text-align: center;
    width: 100%
}

.mx_EmojiPicker_item:hover {
    background-color: #343a46;
    background-color: var(--focus-bg-color, #343a46)
}

.mx_EmojiPicker_item_selected {
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    color: rgba(0, 0, 0, .5);
    padding: 4px
}

.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
    font-size: 1rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 0
}

.mx_EmojiPicker_footer {
    border-top: 1px solid #616b7f;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 72px;
    -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-bottom: 1rem;
    padding-top: 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: var(--timeline-text-secondary-color);
    font: var(--cpd-font-body-md-regular);
    overflow-wrap: break-word
}

.mx_EmojiPicker_shortcode:after, .mx_EmojiPicker_shortcode:before {
    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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.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-attrib, .mx_LocationPicker #mx_LocationPicker_map .maplibregl-ctrl.maplibregl-ctrl-group {
    margin-right: 16px
}

.mx_LocationPicker #mx_LocationPicker_map .maplibregl-ctrl.maplibregl-ctrl-group {
    margin-top: 50px
}

.mx_LocationPicker #mx_LocationPicker_map .maplibregl-user-location-accuracy-circle, .mx_LocationPicker #mx_LocationPicker_map .maplibregl-user-location-dot {
    display: none
}

.mx_LocationPicker .mx_LocationPicker_footer {
    -webkit-box-flex: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0;
    flex: 0;
    padding: 16px;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    background-color: var(--roomlist-background-color);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    justify-content: stretch
}

.mx_LocationPicker_pinText {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 16px;
    width: 100%
}

.mx_LocationPicker_pinText span {
    background-color: var(--timeline-background-color);
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
    color: var(--timeline-text-color);
    font-size: .75rem;
    padding: 8px
}

.mx_LocationPicker_submitButton {
    height: 48px;
    width: 100%
}

.mx_CallEvent, .mx_CallEvent_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.mx_CallEvent {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    gap: 8px;
    max-width: 600px;
    min-height: 60px;
    padding: 12px
}

.mx_CallEvent > .mx_BaseAvatar, .mx_CallEvent > .mx_Icon {
    -ms-flex-item-align: start;
    align-self: flex-start
}

.mx_CallEvent > .mx_Icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin: 4px 0;
    padding: 0
}

.mx_CallEvent .mx_LiveContentSummary {
    font-size: .75rem
}

.mx_CallEvent {
    --facepile-background: var(--system, #21262c)
}

.mx_CallEvent_title {
    font-size: .9375rem;
    line-height: 24px
}

.mx_CallEvent_inactive .mx_CallEvent_title:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    height: 16px;
    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);
    -webkit-mask-size: 16px;
    mask-size: 16px;
    vertical-align: middle;
    width: 16px
}

.mx_CallEvent_active .mx_CallEvent_title {
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_CallEvent_columns {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    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-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 8px
}

.mx_CallEvent_details, .mx_TimelineCard .mx_CallEvent_columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_CallEvent_details {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    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: #a1b2d1;
    -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;
    color: inherit;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    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;
    background-color: var(--cpd-color-icon-secondary);
    height: 16px;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 16px
}

.mx_DecryptionFailureBody {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-style: italic
}

.mx_DisambiguatedProfile {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
    font: var(--cpd-font-body-md-semibold);
    -webkit-margin-end: 0;
    line-height: 1;
    margin-inline-end: 0
}

.mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
    -webkit-margin-start: 5px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: var(--cpd-font-size-body-sm);
    margin-inline-start: 5px
}

.mx_EventTileBubble {
    --EventTileBubble_margin-block: 10px;
    background-color: var(--roomlist-background-color);
    border-radius: 8px;
    -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;
    max-width: min(calc(100% - 92px), 600px);
    max-width: min(calc(100% - var(--MessageTimestamp-width) * 2), 600px);
    padding: 10px
}

.mx_EventTileBubble:after, .mx_EventTileBubble:before {
    content: "";
    grid-column: 1;
    grid-row: 1/3;
    height: 16px;
    inset: 0;
    margin-top: 4px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: relative;
    width: 16px
}

.mx_EventTileBubble .mx_EventTileBubble_subtitle, .mx_EventTileBubble .mx_EventTileBubble_title {
    grid-column: 2;
    min-inline-size: 50px;
    overflow-wrap: break-word
}

.mx_EventTileBubble .mx_EventTileBubble_title {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    grid-row: 1
}

.mx_EventTileBubble .mx_EventTileBubble_subtitle {
    font-size: .75rem;
    grid-row: 2
}

.mx_EventTileBubble .mx_MessageTimestamp {
    align-self: center;
    grid-column: 4;
    grid-row: 1/3;
    margin-left: 16px
}

.mx_HiddenBody {
    color: #a1b2d1;
    padding-left: 20px;
    position: relative;
    vertical-align: middle;
    white-space: pre-wrap
}

.mx_HiddenBody:before {
    background-color: #a1b2d1;
    content: "";
    height: 14px;
    left: 0;
    -webkit-mask-image: url(../../img/element-icons/hide.72c451b.svg);
    mask-image: url(../../img/element-icons/hide.72c451b.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 1px;
    width: 14px
}

.mx_JumpToDatePicker_form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 12px;
    padding-top: 12px
}

.mx_JumpToDatePicker_label {
    -ms-flex-item-align: center;
    align-self: center;
    font-size: .9375rem
}

.mx_JumpToDatePicker_datePicker {
    margin: 0 0 0 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;
    background-color: var(--roomlist-background-color);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    gap: 4px 0;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    justify-content: space-between;
    margin: 4px 0;
    padding: 12px 24px;
    position: relative;
    width: 65%
}

.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 {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 16px
}

.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_content_button_answer span: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_type_icon:before {
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg)
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_voice.mx_LegacyCallEvent_noAnswer .mx_LegacyCallEvent_type_icon:before, .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_voice.mx_LegacyCallEvent_rejected .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_content_button_answer span: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_type_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_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_video.mx_LegacyCallEvent_noAnswer .mx_LegacyCallEvent_type_icon:before, .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_video.mx_LegacyCallEvent_rejected .mx_LegacyCallEvent_type_icon:before {
    -webkit-mask-image: url(../../img/voip/declined-video.6800c36.svg);
    mask-image: url(../../img/voip/declined-video.6800c36.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(../../img/voip/missed-video.c6ff632.svg);
    mask-image: url(../../img/voip/missed-video.c6ff632.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;
    max-width: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.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;
    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;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-weight: 400
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon {
    height: 13px;
    margin-right: 5px;
    width: 13px
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_info .mx_LegacyCallEvent_info_basic .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 13px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 13px
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    gap: 12px;
    -webkit-margin-start: 42px;
    margin-inline-start: 42px;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    word-break: break-word
}

.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 {
    background-color: #fff;
    content: "";
    display: inline-block;
    margin-right: 8px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button {
    font-size: inherit;
    padding: 0 12px
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent .mx_LegacyCallEvent_content .mx_LegacyCallEvent_content_button span:before {
    height: 16px;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    width: 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: normal;
    gap: 4px 16px;
    height: auto;
    min-width: 290px
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow .mx_LegacyCallEvent_iconButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 16px;
    margin-right: 0;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 16px
}

.mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent.mx_LegacyCallEvent_narrow .mx_LegacyCallEvent_info {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: normal
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
    position: relative;
    right: 28px
}

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

.mx_MEmoteBody {
    white-space: pre-wrap
}

.mx_MEmoteBody_sender {
    cursor: pointer
}

.mx_MFileBody_download {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_MFileBody_download .mx_MFileBody_download_icon {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    display: inline-block;
    height: 12px;
    -webkit-mask-image: url(../../img/download.8869916.svg);
    mask-image: url(../../img/download.8869916.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 12px;
    mask-size: 12px;
    width: 12px
}

.mx_MFileBody_download a {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    cursor: pointer;
    text-decoration: none
}

.mx_MFileBody_download object {
    margin-left: -16px;
    margin-top: -4px;
    padding-right: 4px;
    pointer-events: none;
    vertical-align: middle
}

.mx_MFileBody_download iframe {
    border: none;
    height: 1.5em;
    margin: 0;
    padding: 0;
    width: 100%
}

.mx_MFileBody_info {
    cursor: pointer
}

.mx_MFileBody_info .mx_MFileBody_info_icon {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 20px;
    display: inline-block;
    height: 32px;
    margin-right: 12px;
    position: relative;
    vertical-align: middle;
    width: 32px
}

.mx_MFileBody_info .mx_MFileBody_info_icon:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 15px;
    left: 8px;
    -webkit-mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg);
    mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    position: absolute;
    top: 8px;
    width: 15px
}

.mx_MFileBody_info .mx_MFileBody_info_filename {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: calc(100% - 44px)
}

.mx_MImageBody_banner {
    background-color: rgba(0, 0, 0, .6);
    border-radius: 8px;
    border-radius: var(--MBody-border-radius);
    bottom: 4px;
    color: #fff;
    font-size: .9375rem;
    left: 4px;
    max-width: min(100%, 350px);
    overflow: hidden;
    padding: 4px;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.mx_MImageBody_placeholder {
    background-color: var(--timeline-background-color);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.mx_MImageBody_placeholder .mx_Blurhash > canvas {
    -webkit-animation: mx--anim-pulse 1.75s cubic-bezier(.4, 0, .6, 1) infinite;
    animation: mx--anim-pulse 1.75s cubic-bezier(.4, 0, .6, 1) infinite
}

.mx_MImageBody_thumbnail_container {
    border-radius: 8px;
    border-radius: var(--MBody-border-radius);
    contain: paint;
    overflow: hidden
}

.mx_MImageBody_thumbnail {
    display: block;
    height: 100%;
    width: 100%
}

.mx_MImageBody_gifLabel {
    background: rgba(0, 0, 0, .7);
    border: 2px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
    color: #fff;
    display: block;
    left: 14px;
    padding: 5px;
    pointer-events: none;
    position: absolute;
    top: 0
}

.mx_HiddenImagePlaceholder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    inset: 0;
    position: absolute;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    background-color: var(--roomlist-background-color);
    cursor: pointer;
    justify-content: center;
    text-align: center
}

.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span.mx_HiddenImagePlaceholder_eye {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    display: inline-block;
    height: 14px;
    margin-right: 8px;
    -webkit-mask-image: url(../../img/feather-customised/eye.d8df60a.svg);
    mask-image: url(../../img/feather-customised/eye.d8df60a.svg);
    width: 18px
}

.mx_HiddenImagePlaceholder .mx_HiddenImagePlaceholder_button span:not(.mx_HiddenImagePlaceholder_eye) {
    vertical-align: text-bottom
}

.mx_EventTile:hover .mx_HiddenImagePlaceholder {
    background-color: var(--timeline-background-color)
}

.mx_MImageReplyBody {
    -webkit-column-gap: 4px;
    -moz-column-gap: 4px;
    column-gap: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_MImageReplyBody .mx_MImageBody_thumbnail_container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.mx_EventTileBubble.mx_MJitsiWidgetEvent:before {
    background-color: #a1b2d1;
    -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
    mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg)
}

.mx_MLocationBody {
    max-width: 100%
}

.mx_MLocationBody .mx_MLocationBody_map {
    border-radius: 8px;
    border-radius: var(--MBody-border-radius);
    cursor: pointer;
    height: 300px;
    max-width: 100%;
    width: 450px;
    z-index: 0
}

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

.mx_ReplyTile .mx_MLocationBody {
    pointer-events: none
}

.mx_MNoticeBody {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    white-space: pre-wrap
}

.mx_MPollBody {
    margin-top: 8px
}

.mx_MPollBody h2 {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5rem;
    margin-bottom: 8px;
    margin-top: 0
}

.mx_MPollBody h2 .mx_MPollBody_edited {
    color: var(--timeline-text-color-50pct);
    font-size: .75rem;
    opacity: .6
}

.mx_MPollBody h2:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    height: 20px;
    left: 3px;
    margin-right: 12px;
    -webkit-mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
    mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: relative;
    top: 3px;
    width: 20px
}

.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;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    justify-content: start
}

.mx_MPollBody .mx_MPollBody_totalVotes .mx_Spinner {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    margin-left: 8px
}

.mx_ReplyTile .mx_MPollBody {
    pointer-events: none
}

.mx_MPollBody_allOptions {
    display: grid;
    grid-gap: 16px;
    margin-bottom: 8px;
    max-width: 550px
}

.mx_MPollEndBody_icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    height: 14px;
    margin-right: 8px;
    vertical-align: middle
}

.mx_MStickerBody_wrapper {
    padding: 12px 0
}

.mx_MStickerBody_hidden {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 220px;
    text-align: center;
    text-decoration: none;
    -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 {
    left: calc(50% - 40px);
    position: absolute;
    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%
}

.mx_MediaBody {
    background-color: var(--panels, var(--cpd-color-gray-600));
    border-radius: 12px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-md-regular);
    line-height: 1.5rem;
    max-width: 243px;
    padding: 6px 12px
}

.mx_MessageActionBar {
    --MessageActionBar-size-button: 28px;
    --MessageActionBar-size-box: 32px;
    --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
    --MessageActionBar-item-hover-borderRadius: 6px;
    --MessageActionBar-item-hover-zIndex: 1;
    background: var(--timeline-background-color);
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
    border-radius: 8px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    height: var(--MessageActionBar-size-box);
    line-height: 1.5rem;
    position: absolute;
    right: 8px;
    top: -32px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    visibility: hidden;
    z-index: 10
}

.mx_MessageActionBar:before {
    content: "";
    cursor: auto;
    height: calc(20px + 100%);
    left: -58px;
    position: absolute;
    top: -12px;
    width: calc(66px + 100%);
    z-index: -1
}

.mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_toggle ~ .mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type .mx_MessageActionBar:before {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.mx_EventTile_info .mx_ViewSourceEvent ~ .mx_MessageActionBar:before {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.mx_MessageActionBar > * {
    display: inline-block;
    margin: 2px;
    position: relative;
    white-space: nowrap
}

.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;
    color: var(--cpd-color-icon-secondary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--MessageActionBar-size-button);
    width: var(--MessageActionBar-size-button);
    -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: .75
}

.mx_MessageActionBar .mx_MessageActionBar_iconButton:hover {
    color: var(--cpd-color-icon-primary)
}

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_downloadButton {
    --MessageActionBar-icon-size: 14px
}

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton svg {
    display: none
}

.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_expandCollapseMessageButton {
    --MessageActionBar-icon-size: 12px
}

:root {
    --MessageTimestamp-width: 46px;
    --MessageTimestamp-max-width: 80px;
    --MessageTimestamp-color: #a1b2d1
}

.mx_MessageTimestamp {
    color: #a1b2d1;
    color: var(--MessageTimestamp-color);
    display: block;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-size: .625rem;
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: 46px;
    width: var(--MessageTimestamp-width)
}

.mx_MessageTimestamp_lateIcon {
    color: inherit;
    position: absolute;
    right: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.mx_MjolnirBody {
    opacity: .4
}

.mx_ReactionsRow {
    color: var(--timeline-text-color);
    margin: 6px 0
}

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
    display: inline-block;
    height: 24px;
    margin-left: 4px;
    margin-right: 4px;
    position: relative;
    vertical-align: middle;
    visibility: hidden;
    width: 24px
}

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 100%;
    -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);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    position: absolute;
    width: 100%
}

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
    visibility: visible
}

.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active:before, .mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover:before {
    background-color: var(--timeline-text-color)
}

.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
    visibility: visible
}

.mx_ReactionsRow_showAll {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff)
}

.mx_ReactionsRow_showAll.mx_AccessibleButton_kind_link_inline {
    font-size: .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(--timeline-text-color)
}

.mx_ReactionsRowButton {
    background-color: var(--secondary-hairline-color);
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 10px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    line-height: 1.25rem;
    padding: 1px 6px;
    -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:hover {
    border-color: #6f7882;
    border-color: var(--quinary-content, #6f7882)
}

.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
    background-color: var(--accent-color-300);
    border-color: var(--accent-color-800)
}

.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
    cursor: not-allowed
}

.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
    max-width: 100px;
    overflow: hidden;
    padding-right: 4px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_RedactedBody {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    padding-left: 20px;
    position: relative;
    vertical-align: middle;
    white-space: pre-wrap
}

.mx_RedactedBody:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 14px;
    left: 0;
    -webkit-mask-image: url(../../img/feather-customised/trash.custom.1dac3e5.svg);
    mask-image: url(../../img/feather-customised/trash.custom.1dac3e5.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 1px;
    width: 14px
}

.mx_RoomAvatarEvent_avatar {
    display: inline;
    position: relative;
    top: 3px
}

.mx_TextualEvent {
    line-height: normal;
    overflow-y: hidden
}

.mx_TextualEvent a {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    cursor: pointer
}

.mx_RoomView_searchResultsPanel .mx_TextualEvent {
    opacity: 1
}

.mx_TimelineSeparator {
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 4px 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--cpd-color-text-secondary);
    font: var(--cpd-font-body-md-regular)
}

.mx_TimelineSeparator > hr {
    -webkit-box-flex: 1;
    border: none;
    border-bottom: 1px solid var(--cpd-color-gray-400);
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    height: 0
}

.mx_UnknownBody {
    white-space: pre-wrap
}

.mx_EventTile_content.mx_ViewSourceEvent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .75rem;
    line-height: normal;
    opacity: .6;
    overflow-x: auto;
    width: 100%
}

.mx_EventTile_content.mx_ViewSourceEvent code, .mx_EventTile_content.mx_ViewSourceEvent pre {
    -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: 12px;
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    border-radius: 0;
    -webkit-mask-image: url(../../img/element-icons/maximise-expand.c678e40.svg);
    mask-image: url(../../img/element-icons/maximise-expand.c678e40.svg);
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: auto 12px;
    mask-size: auto 12px;
    -webkit-mask-size: auto var(--ViewSourceEvent_toggle-size);
    mask-size: auto var(--ViewSourceEvent_toggle-size);
    min-width: 12px;
    min-width: var(--ViewSourceEvent_toggle-size);
    visibility: hidden;
    width: 12px;
    width: 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);
    margin-bottom: 5px;
    -webkit-mask-image: url(../../img/element-icons/minimise-collapse.c9216fb.svg);
    mask-image: url(../../img/element-icons/minimise-collapse.c9216fb.svg);
    -webkit-mask-position: 0 bottom;
    mask-position: 0 bottom
}

.mx_EventTileBubble.mx_cryptoEvent {
    margin: var(--EventTileBubble_margin-block) auto
}

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon:before {
    background-color: #fff;
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 80%;
    mask-size: 80%
}

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon:after {
    background-color: #a1b2d1;
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    mask-image: url(../../img/e2e/normal.ab42a7b.svg)
}

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon_verified:after {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    -webkit-mask-image: url(../../img/e2e/verified.2ccf64e.svg);
    mask-image: url(../../img/e2e/verified.2ccf64e.svg)
}

.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon_warning:after {
    background-color: #ff5b55;
    -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
    mask-image: url(../../img/e2e/warning.71ffc83.svg)
}

.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_buttons, .mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_state {
    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 {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font-size: .75rem;
    margin: auto 0;
    overflow-wrap: break-word;
    padding: 10px 20px;
    text-align: center;
    width: 130px
}

.mx_PollHistory_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 600px;
    width: 100%;
    -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 {
    list-style: none;
    margin-block: 0;
    overflow: auto;
    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;
    margin: 32px 0;
    padding-right: 64px
}

.mx_PollHistoryList_list.mx_PollHistoryList_list_ENDED {
    grid-gap: 32px
}

.mx_PollHistoryList_noResults {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding: 0 64px;
    width: 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;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    justify-content: center;
    line-height: 1.5rem;
    text-align: center
}

.mx_PollHistoryList_noResults .mx_PollHistoryList_loadMorePolls {
    margin-top: 16px
}

.mx_PollHistoryList_loading {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    text-align: center
}

.mx_PollHistoryList_loading.mx_PollHistoryList_noResultsYet {
    margin: 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;
    -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 .mx_BaseCard_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_BaseCard .mx_BaseCard_header {
    border-bottom: 1px solid transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 64px;
    padding: var(--cpd-space-3x);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    gap: var(--cpd-space-2x);
    justify-content: space-between;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_BaseCard .mx_BaseCard_header > h2 {
    font: var(--cpd-font-body-sm-semibold);
    margin: 0 44px;
    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;
    height: 24px;
    justify-content: space-between;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_heading {
    color: var(--timeline-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option {
    height: var(--BaseCard_header-button-size);
    position: relative;
    width: var(--BaseCard_header-button-size)
}

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option:after {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    -webkit-mask-image: url(../../img/element-icons/message/overflow-large.f3afed8.svg);
    mask-image: url(../../img/element-icons/message/overflow-large.f3afed8.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    width: 100%
}

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option:hover:after {
    background-color: var(--timeline-text-color)
}

.mx_BaseCard .mx_AutoHideScrollbar {
    height: 100%;
    min-height: 0;
    width: 100%
}

.mx_BaseCard .mx_BaseCard_Group {
    margin: 20px 0 16px
}

.mx_BaseCard .mx_BaseCard_Group > * {
    margin-left: 12px;
    margin-right: 12px
}

.mx_BaseCard .mx_BaseCard_Group > h2 {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font: var(--cpd-font-body-sm-medium);
    margin: 12px
}

.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button {
    padding: 10px;
    -webkit-padding-start: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font: var(--cpd-font-heading-sm-medium);
    height: 20px;
    margin: 0;
    overflow: hidden;
    padding-inline-start: 12px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button .mx_BaseCard_Button_sublabel {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    margin-left: auto
}

.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button:hover {
    background-color: rgba(141, 151, 165, .1)
}

.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled {
    padding-right: 12px
}

.mx_BaseCard .mx_BaseCard_Group .mx_BaseCard_Button.mx_AccessibleButton_disabled:after {
    content: normal
}

.mx_BaseCard .mx_BaseCard_footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 4px;
    text-align: center;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
    background-color: rgba(141, 151, 165, .2);
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-md-semibold)
}

.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
    cursor: not-allowed
}

.mx_BaseCard_back, .mx_BaseCard_close {
    -ms-flex-negative: 0;
    background-color: var(--cpd-color-bg-subtle-secondary);
    border-radius: 50%;
    flex-shrink: 0;
    height: var(--BaseCard_header-button-size);
    position: relative;
    width: var(--BaseCard_header-button-size)
}

.mx_BaseCard_back:hover, .mx_BaseCard_close:hover {
    background-color: var(--cpd-color-bg-subtle-primary)
}

.mx_BaseCard_back:before, .mx_BaseCard_close:before {
    background-color: var(--cpd-color-icon-secondary);
    content: "";
    height: inherit;
    left: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    position: absolute;
    top: 0;
    width: inherit
}

.mx_BaseCard_back {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0
}

.mx_BaseCard_back:before {
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-size: 22px;
    mask-size: 22px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.mx_BaseCard_close {
    -webkit-box-ordinal-group: 1000;
    -ms-flex-order: 999;
    order: 999
}

.mx_BaseCard_close:before {
    -webkit-mask-image: url(../../icons/close.dce71fd.svg);
    mask-image: url(../../icons/close.dce71fd.svg)
}

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu {
    position: static
}

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu span:first-of-type {
    color: var(--timeline-text-color);
    font-size: inherit;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu {
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
    -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-sm-regular);
    padding-bottom: 10px;
    padding-top: 10px
}

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top {
    border-bottom-color: var(--cpd-color-border-interactive-secondary);
    left: auto;
    right: 22px
}

.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top:after {
    border: inherit;
    border-bottom-color: var(--cpd-color-bg-canvas-default);
    content: "";
    left: -8px;
    position: absolute;
    top: 1px
}

.mx_BaseCard_headerProp {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%
}

.mx_EncryptionInfo_spinner .mx_Spinner {
    margin-bottom: 15px;
    margin-top: 25px
}

.mx_EncryptionInfo_spinner {
    text-align: center
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty_wrapper .mx_PinnedMessagesCard_empty {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    margin: auto 40px;
    text-align: center
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty_wrapper .mx_PinnedMessagesCard_empty .mx_PinnedMessagesCard_MessageActionBar {
    cursor: inherit;
    margin: 0 auto;
    pointer-events: none;
    position: static;
    visibility: visible;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty_wrapper .mx_PinnedMessagesCard_empty .mx_PinnedMessagesCard_MessageActionBar:before {
    content: normal
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty_wrapper .mx_PinnedMessagesCard_empty .mx_PinnedMessagesCard_MessageActionBar .mx_MessageActionBar_optionsButton {
    background: var(--MessageActionBar-item-hover-background);
    border-radius: var(--MessageActionBar-item-hover-borderRadius);
    color: var(--cpd-color-icon-primary);
    z-index: var(--MessageActionBar-item-hover-zIndex)
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty_wrapper .mx_PinnedMessagesCard_empty .mx_PinnedMessagesCard_empty_header {
    color: var(--timeline-text-color);
    margin-block: 24px 20px
}

.mx_PinnedMessagesCard .mx_PinnedMessagesCard_empty_wrapper .mx_PinnedMessagesCard_empty > span {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    line-height: .9375rem
}

.mx_PinnedMessagesCard .mx_EventTile_body {
    word-break: break-word
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_container {
    margin: 20px var(--cpd-space-4x) 0;
    text-align: center
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_alias, .mx_RoomSummaryCard .mx_RoomSummaryCard_roomName {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_alias {
    text-overflow: ellipsis
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button {
    padding-left: 44px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_aboutGroup .mx_RoomSummaryCard_Button:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 24px;
    left: 10px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    top: 8px;
    width: 24px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    height: auto;
    padding: 0
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    padding: 10px 48px 10px 12px;
    text-overflow: ellipsis;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_icon_app span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--timeline-text-color)
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_maximiseToggle, .mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options, .mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    min-width: 24px;
    padding: 12px 4px;
    position: absolute;
    top: 0;
    width: 24px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_maximiseToggle:hover:after, .mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:hover:after, .mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:hover:after {
    background-color: rgba(141, 151, 165, .1);
    border-radius: 12px;
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 24px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_maximiseToggle:before, .mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before, .mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    position: absolute;
    width: 16px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_pinToggle {
    right: 8px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_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_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_maximiseToggle {
    right: 32px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_maximiseToggle:before {
    -webkit-mask-image: url(../../img/element-icons/maximise-expand.c678e40.svg);
    mask-image: url(../../img/element-icons/maximise-expand.c678e40.svg);
    -webkit-mask-size: 14px;
    mask-size: 14px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options {
    display: none;
    right: 56px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button .mx_RoomSummaryCard_app_options:before {
    -webkit-mask-image: url(../../img/element-icons/room/ellipsis.c7bfee4.svg);
    mask-image: url(../../img/element-icons/room/ellipsis.c7bfee4.svg)
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned:after {
    opacity: .2
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_pinned .mx_RoomSummaryCard_app_pinToggle:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_maximised:after {
    opacity: .2
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button.mx_RoomSummaryCard_Button_maximised .mx_RoomSummaryCard_app_maximiseToggle:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_icon_app {
    padding-right: 72px
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:hover .mx_RoomSummaryCard_app_options {
    display: inline;
    display: initial
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:before {
    content: normal
}

.mx_RoomSummaryCard .mx_RoomSummaryCard_appsGroup .mx_RoomSummaryCard_Button:after {
    pointer-events: none;
    top: 8px
}

.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
    font-size: .8125rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin-bottom: 12px;
    margin-top: 12px
}

.mx_RoomSummaryCard_badges {
    margin: var(--cpd-space-4x) 0
}

.mx_RoomSummaryCard_header {
    padding: 15px 12px
}

.mx_RoomSummaryCard_search input {
    border: 0 !important;
    cursor: pointer;
    margin: 0 !important
}

.mx_RoomSummaryCard_searchBtn {
    background: var(--cpd-color-bg-canvas-default);
    border: 1px solid var(--cpd-color-gray-400);
    border-radius: 50%;
    color: var(--cpd-color-icon-primary);
    cursor: pointer;
    height: 36px;
    padding: var(--cpd-space-2x);
    width: 36px
}

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

.mx_RoomSummaryCard_roomName {
    margin: 12px 0 4px
}

.mx_ThreadPanel {
    height: 100px;
    overflow: visible
}

.mx_ThreadPanel .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_heading {
    margin-right: auto
}

.mx_ThreadPanel .mx_BaseCard_header .mx_BaseCard_header_title .mx_AccessibleButton {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: 12px
}

.mx_ThreadPanel .mx_BaseCard_header .mx_BaseCard_header_title .mx_ThreadPanel_vertical_separator {
    border-left: 1px solid var(--cpd-color-gray-400);
    height: 16px;
    margin-left: var(--cpd-space-3x);
    margin-right: var(--cpd-space-1x)
}

.mx_ThreadPanel .mx_BaseCard_header .mx_BaseCard_header_title .mx_ThreadPanel_dropdown {
    border-radius: 4px;
    line-height: 1.5;
    padding: 3px 4px 3px 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx_ThreadPanel .mx_BaseCard_header .mx_BaseCard_header_title .mx_ThreadPanel_dropdown:hover, .mx_ThreadPanel .mx_BaseCard_header .mx_BaseCard_header_title .mx_ThreadPanel_dropdown[aria-expanded=true] {
    background: #6f7882;
    background: var(--quinary-content, #6f7882)
}

.mx_ThreadPanel .mx_BaseCard_header .mx_BaseCard_header_title .mx_ThreadPanel_dropdown:before {
    background: currentColor;
    content: "";
    float: right;
    height: 18px;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 18px
}

.mx_ThreadPanel .mx_AutoHideScrollbar, .mx_ThreadPanel .mx_RoomView_messagePanelSpinner {
    background-color: var(--timeline-background-color);
    border-radius: 8px;
    -webkit-padding-end: 0;
    height: 100%;
    overflow-y: scroll;
    padding-inline-end: 0
}

.mx_ThreadPanel .mx_EventTile[data-layout=group] .mx_MessageActionBar {
    right: 0;
    top: -36px;
    z-index: 10
}

.mx_ThreadPanel.mx_ThreadView {
    max-height: 100%
}

.mx_ThreadPanel.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
    min-height: 0;
    position: relative;
    -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
}

.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 {
    width: calc(100% + 6px)
}

.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 {
    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: var(--timeline-background-color);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 0 8px
}

.mx_ThreadPanel .mx_MessageTimestamp {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_ThreadPanel .mx_BaseCard_footer {
    font-size: .75rem;
    text-align: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    gap: 4px;
    justify-content: flex-end;
    padding-right: 8px;
    position: relative;
    top: 2px
}

.mx_ThreadPanel .mx_BaseCard_footer .mx_AccessibleButton_kind_link_inline {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_ThreadPanel_viewInRoom:before {
    -webkit-mask-image: url(../../img/element-icons/view-in-room.afeddb7.svg);
    mask-image: url(../../img/element-icons/view-in-room.afeddb7.svg)
}

.mx_ThreadPanel_copyLinkToThread:before {
    -webkit-mask-image: url(../../img/element-icons/link.e24e5a8.svg);
    mask-image: url(../../img/element-icons/link.e24e5a8.svg)
}

.mx_ThreadPanel_empty {
    background: var(--timeline-background-color);
    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;
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: center;
    left: 0;
    padding: 20px;
    position: absolute;
    top: 0;
    width: 100%
}

.mx_ThreadPanel_empty h2 {
    color: var(--timeline-text-color);
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin-bottom: 10px;
    margin-top: 24px
}

.mx_ThreadPanel_empty p {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    margin: 10px 0
}

.mx_ThreadPanel_empty button {
    background: none;
    border: none;
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    font-size: .9375rem
}

.mx_ThreadPanel_empty button:active, .mx_ThreadPanel_empty button:hover {
    cursor: pointer;
    text-decoration: underline
}

.mx_ThreadPanel_empty .mx_ThreadPanel_empty_tip {
    font-size: .75rem;
    line-height: .9375rem
}

.mx_ThreadPanel_empty .mx_ThreadPanel_empty_tip > b {
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_ThreadPanel_largeIcon {
    background: #21262c;
    background: var(--system, #21262c);
    border-radius: 50%;
    height: 28px;
    padding: 18px;
    width: 28px
}

.mx_ThreadPanel_largeIcon:after {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary)) !important;
    content: "";
    display: inline-block;
    height: 18px;
    height: inherit;
    -webkit-mask-image: url(../../img/element-icons/thread-summary.4b1ebec.svg);
    mask-image: url(../../img/element-icons/thread-summary.4b1ebec.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    min-width: 18px;
    width: inherit
}

.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(--timeline-highlights-color)
}

.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 {
    background-color: var(--timeline-text-color);
    content: "";
    display: inline-block;
    height: 12px;
    margin-right: 8px;
    -webkit-mask-image: url(../../img/feather-customised/check.bfca953.svg);
    mask-image: url(../../img/feather-customised/check.bfca953.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    vertical-align: middle;
    width: 12px
}

.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem :last-child {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_TimelineCard .mx_TimelineCard_timeline {
    overflow: hidden;
    position: relative;
    -webkit-box-flex: 1;
    border-radius: 8px;
    -ms-flex: 1;
    flex: 1
}

.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 {
    padding-right: 11px;
    position: relative
}

.mx_TimelineCard .mx_EventTile .mx_ThreadSummary:after {
    border-bottom: 1px solid #616b7f;
    bottom: -16px;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%
}

.mx_TimelineCard .mx_EventTile[data-layout=group], .mx_TimelineCard .mx_EventTile[data-layout=irc] {
    --TimelineCard_ReadReceiptGroup-inset-block-start: -6px
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_EventTile_line, .mx_TimelineCard .mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_line, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_EventTile_line, .mx_TimelineCard .mx_EventTile[data-layout=irc].mx_EventTile_info .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)
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .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=irc] .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_TimelineCard .mx_EventTile[data-layout=irc].mx_EventTile_info .mx_EventTile_line .mx_EventTile_e2eIcon {
    inset-inline-start: 8px
}

.mx_TimelineCard .mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_avatar, .mx_TimelineCard .mx_EventTile[data-layout=irc].mx_EventTile_info .mx_EventTile_avatar {
    inset-inline-start: 18px
}

.mx_TimelineCard .mx_EventTile[data-layout=group].mx_EventTile_info, .mx_TimelineCard .mx_EventTile[data-layout=irc].mx_EventTile_info {
    font: var(--cpd-font-body-sm-regular)
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_EventTile_avatar, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_EventTile_avatar {
    inset-inline-start: -3px
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_EventTile_msgOption, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_EventTile_msgOption {
    -webkit-margin-end: 0;
    margin-inline-end: 0
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_EventTile_msgOption .mx_ReadReceiptGroup, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
    top: var(--TimelineCard_ReadReceiptGroup-inset-block-start)
}

.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, .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 {
    -webkit-margin-start: var(--BaseCard_EventTile-spacing-inline);
    margin-inline-start: var(--BaseCard_EventTile-spacing-inline)
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_DisambiguatedProfile, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_DisambiguatedProfile {
    max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline))
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_ReplyTile .mx_DisambiguatedProfile, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_ReplyTile .mx_DisambiguatedProfile {
    -webkit-margin-start: 0;
    margin-inline-start: 0;
    max-width: none
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_MessageTimestamp, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_MessageTimestamp {
    font-size: .75rem;
    inset-inline: auto 0
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_ReactionsRow, .mx_TimelineCard .mx_EventTile[data-layout=irc] .mx_ReactionsRow {
    -webkit-margin-end: 8px;
    margin-inline-end: 8px
}

.mx_TimelineCard .mx_EventTile[data-layout=group] .mx_ThreadSummary, .mx_TimelineCard .mx_EventTile[data-layout=irc] .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_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
}

.mx_TimelineCard .mx_EventTile[data-layout=bubble].mx_EventTile_info .mx_MessageActionBar {
    inset-inline-end: 9px;
    inset-inline-end: calc(var(--container-gap-width) + 1px)
}

.mx_TimelineCard .mx_EventTile[data-layout=bubble] .mx_ReactionsRow {
    position: relative
}

.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=group] .mx_EventTile_line, .mx_TimelineCard .mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line, .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 {
    -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)
}

.mx_TimelineCard .mx_WhoIsTypingTile {
    margin-left: -12px
}

.mx_TimelineCard .mx_WhoIsTypingTile_avatars {
    -ms-flex-preferred-size: 48px;
    flex-basis: 48px
}

.mx_TimelineCard .mx_GenericEventListSummary_unstyledList .mx_EventTile[data-layout=bubble] .mx_ReadReceiptGroup, .mx_TimelineCard .mx_RoomView_MessageList .mx_EventTile[data-layout=bubble] .mx_ReadReceiptGroup {
    inset-inline-end: calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) * -1 + 14px);
    inset-inline-end: calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) * -1 + 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
}

.mx_UserInfo.mx_BaseCard {
    font-size: var(--cpd-font-size-body-sm);
    overflow-y: auto;
    padding-top: 0
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel {
    background-color: var(--roomlist-background-color);
    border-radius: 4px;
    cursor: pointer;
    margin: 9px;
    position: absolute;
    top: 0;
    z-index: 1
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_cancel div {
    background-color: #a1b2d1;
    height: 16px;
    -webkit-mask-image: url(../../img/minimise.86e5d8e.svg);
    mask-image: url(../../img/minimise.86e5d8e.svg);
    -webkit-mask-position: 7px center;
    mask-position: 7px center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    padding: 4px;
    width: 16px
}

.mx_UserInfo.mx_BaseCard h2 {
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 18px 0 0
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
    padding: 8px 16px
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) {
    padding-bottom: 0;
    padding-top: 16px
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) > :not(h3) {
    -webkit-margin-start: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-inline-start: 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 8px
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container .mx_UserInfo_container_verifyButton {
    margin-top: 8px
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_separator {
    border-bottom: 1px solid var(--cpd-color-alpha-gray-400)
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
    margin-bottom: 8px;
    padding-bottom: 0;
    padding-top: 0
}

.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: 24px 32px 0
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition {
    aspect-ratio: 1/1;
    margin: 0 auto;
    max-width: 30vh;
    -webkit-transition: .5s;
    transition: .5s
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition .mx_BaseAvatar {
    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 {
    height: 100%;
    width: 100%
}

.mx_UserInfo.mx_BaseCard h3 {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    font: var(--cpd-font-heading-sm-semibold);
    font-weight: var(--cpd-font-weight-semibold);
    margin: 4px 0;
    text-transform: uppercase
}

.mx_UserInfo.mx_BaseCard p {
    margin: 5px 0
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
    text-align: center
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.0625rem;
    line-height: 1.5625rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h2 .mx_E2EIcon {
    margin-top: 3px;
    -webkit-margin-end: 4px;
    margin-inline-end: 4px;
    min-width: 18px
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
    margin-top: 12px
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
    margin: 6px 0
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField, .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
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription {
    margin: 11px 0 12px
}

.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_field.mx_UserInfo_destructive {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
    display: -webkit-box;
    font: var(--cpd-font-body-sm-regular);
    font-size: .6875rem;
    line-height: 1rem;
    max-height: 3rem;
    opacity: .5;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    -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_devices .mx_UserInfo_device {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 8px 0
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_verified .mx_UserInfo_device_trusted {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device.mx_UserInfo_device_unverified .mx_UserInfo_device_trusted {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_device .mx_UserInfo_device_name {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0 5px;
    word-break: break-word
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_E2EIcon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 12px;
    margin: 0;
    width: 12px
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_devices .mx_UserInfo_expand {
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
    margin-bottom: 11px;
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: normal
}

.mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_UserInfo_avatar_transition {
    margin: 0 auto;
    max-width: 72px
}

.mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar {
    font-size: 2rem
}

.mx_VerificationPanel_reciprocate_section .mx_E2EIcon, .mx_VerificationPanel_verified_section .mx_E2EIcon {
    margin: 20px auto !important
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) > div > p {
    margin-bottom: 0;
    margin-top: 0
}

.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_UserInfo_wideButton, .mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationPanel_verifyByEmojiButton {
    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 {
    background-color: var(--cpd-color-bg-subtle-secondary);
    border-radius: 14px;
    cursor: pointer;
    height: 28px;
    position: relative;
    width: 28px
}

.mx_UserInfo.mx_BaseCard .mx_EncryptionPanel_cancel:hover {
    background-color: var(--cpd-color-bg-subtle-primary)
}

.mx_UserInfo.mx_BaseCard .mx_EncryptionPanel_cancel:before {
    background-color: var(--cpd-color-icon-secondary);
    content: "";
    height: 28px;
    -webkit-mask-image: url(../../icons/close.dce71fd.svg);
    mask-image: url(../../icons/close.dce71fd.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    position: absolute;
    width: 28px
}

.mx_UserInfo.mx_BaseCard .mx_EncryptionPanel_cancel {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 100
}

.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode {
    background: #fff;
    border-radius: 4px;
    margin: 0 auto !important;
    max-width: 100%;
    padding: 4px 4px 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode canvas {
    height: auto !important;
    max-width: 240px;
    width: 100% !important
}

.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%
}

.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions, .mx_Dialog .mx_VerificationPanel_QRPhase_startOptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText, .mx_Dialog .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    vertical-align: middle;
    width: 50px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption, .mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption {
    background-color: var(--roomlist-background-color);
    border-radius: 10px;
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    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;
    max-width: 310px;
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.mx_CompleteSecurity_body .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_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR, .mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas {
    background-color: #fff;
    border-radius: 4px;
    height: 220px !important;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    width: 220px !important
}

.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p, .mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p {
    font-weight: 700;
    margin-top: 0
}

.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText, .mx_Dialog .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
}

.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton, .mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton {
    float: right
}

.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton, .mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
    margin-left: 10px;
    padding: 7px 40px
}

.mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons, .mx_Dialog .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 {
    border: 0;
    height: 100%;
    max-width: none;
    width: auto !important
}

.mx_AliasSettings_localAddresses {
    color: var(--cpd-color-text-primary);
    cursor: pointer;
    font-weight: var(--cpd-font-weight-semibold);
    list-style: none;
    text-decoration: underline;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_AliasSettings_localAddresses::-webkit-details-marker {
    display: none
}

:root {
    --AppTile_mini-height: 220px
}

.mx_AppsDrawer {
    --minWidth: 240px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 8px;
    margin: var(--container-gap-width);
    margin-bottom: 0;
    margin-right: 4px;
    margin-right: calc(var(--container-gap-width) / 2);
    position: relative;
    -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 {
    display: block;
    height: 10px;
    position: relative;
    width: 100%
}

.mx_AppsDrawer .mx_AppsDrawer_resizer_container .mx_AppsDrawer_resizer_container_handle {
    bottom: 50% !important;
    cursor: ns-resize;
    height: 100% !important;
    position: absolute;
    width: 100% !important
}

.mx_AppsDrawer .mx_AppsDrawer_resizer_container .mx_AppsDrawer_resizer_container_handle:after {
    border-radius: 3px;
    bottom: 0;
    content: "";
    height: 4px;
    left: calc(50% - 32px);
    position: absolute;
    right: calc(50% - 32px)
}

.mx_AppsDrawer:hover .mx_AppsDrawer_resizer_container_handle:after {
    background: var(--timeline-text-color);
    opacity: .8
}

.mx_AppsDrawer:hover .mx_ResizeHandle--horizontal:before {
    background-color: var(--timeline-text-color);
    border-radius: 4px;
    content: "";
    height: 64px;
    left: 3px;
    opacity: .8;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4px
}

.mx_AppsDrawer .mx_AppTile {
    min-width: var(--minWidth);
    width: 50%
}

.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;
    min-width: var(--minWidth) !important;
    width: 0 !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;
    min-width: var(--minWidth) !important;
    width: 0 !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;
    height: 100%;
    justify-content: center;
    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-radius: 0 10px 10px 0;
    border-right-width: 8px;
    border-right-width: var(--container-border-width)
}

.mx_AppsContainer .mx_ResizeHandle--horizontal {
    position: relative
}

.mx_AppsContainer .mx_ResizeHandle--horizontal > div {
    width: 0
}

.mx_AppTile {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mx_AppTile, .mx_AppTileFullWidth {
    border: var(--container-border-width) solid var(--roomlist-background-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: var(--roomlist-background-color);
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_AppTileFullWidth {
    border-radius: 8px;
    margin: 0;
    padding: 0;
    width: 100% !important
}

.mx_AppTile_mini {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    -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 {
    height: 100%;
    width: 100%
}

.mx_AppTileMenuBar {
    background-color: var(--roomlist-background-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .75rem;
    margin: 0;
    -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;
    padding-bottom: 6px;
    padding-top: 3px;
    width: 100%
}

.mx_AppTileMenuBar .mx_AppTileMenuBar_title {
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_AppTileMenuBar .mx_AppTileMenuBar_title .mx_WidgetAvatar {
    margin-right: 12px
}

.mx_AppTileMenuBar .mx_AppTileMenuBar_title > :last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 9px;
    -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, .mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button {
    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;
    height: 24px;
    height: var(--size);
    margin: 0 4px;
    position: relative;
    width: 24px;
    width: var(--size);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button:hover:after {
    background-color: var(--roomlist-highlights-color);
    border-radius: 50%;
    content: "";
    height: var(--size);
    left: 0;
    position: absolute;
    top: 0;
    width: var(--size)
}

.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button .mx_Icon {
    color: #a1b2d1
}

.mx_AppTileBody {
    border-radius: 8px
}

.mx_AppTileBody .mx_AppTileBody_fadeInSpinner {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
    animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
    font-weight: 700;
    height: 100%;
    width: 100%
}

.mx_AppTileBody.mx_AppTileBody--large, .mx_AppTileBody.mx_AppTileBody--mini {
    height: var(--AppTileBody-height);
    overflow: hidden;
    width: 100%
}

.mx_AppTileBody.mx_AppTileBody--large iframe, .mx_AppTileBody.mx_AppTileBody--mini iframe {
    border: none;
    height: 100%;
    width: 100%
}

.mx_AppTileBody.mx_AppTileBody--large {
    --AppTileBody-height: 100%;
    background-color: #1a1d23
}

.mx_AppTileBody.mx_AppTileBody--large iframe {
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0
}

.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;
    background-color: #1a1d23 !important;
    height: 100%;
    position: relative
}

.mx_AppTileBody.mx_AppTileBody--loading iframe {
    display: none
}

.mx_AppTileBody.mx_AppTileBody--call {
    border-radius: 0
}

.mx_AppTileBody.mx_AppTileBody--call.mx_AppTileBody--mini {
    border-radius: 8px
}

.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 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.mx_Autocomplete {
    background: var(--timeline-background-color);
    border: 1px solid var(--roomlist-separator-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: clip;
    position: absolute;
    width: 100%;
    z-index: 1001;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-shadow: 0 -16px 32px tranparent;
    box-shadow: 0 -16px 32px tranparent;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_Autocomplete_ProviderSection {
    border-bottom: 1px solid var(--roomlist-separator-color);
    width: 100%
}

.mx_Autocomplete_Completion_block {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: 34px;
    padding: 0 12px;
    -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;
    color: var(--timeline-text-color)
}

.mx_Autocomplete_Completion_block * {
    margin: 0 3px
}

.mx_Autocomplete_Completion_pill {
    border-radius: 2rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2.125rem;
    padding: .4rem;
    -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;
    color: var(--timeline-text-color)
}

.mx_Autocomplete_Completion_pill > * {
    margin-right: .3rem
}

.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 {
    height: 100%;
    margin: 12px;
    max-height: 35vh;
    overflow-y: scroll
}

.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description, .mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover {
    background: var(--roomlist-background-color);
    outline: none
}

.mx_Autocomplete_provider_name {
    color: var(--timeline-text-color);
    font-weight: 400;
    margin: 12px;
    opacity: .4
}

.mx_AuxPanel {
    margin: 0 auto;
    min-width: 0;
    overflow: auto;
    width: 100%
}

.mx_BasicMessageComposer {
    position: relative
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child:before {
    color: var(--cpd-color-text-secondary);
    content: var(--placeholder);
    display: inline-block;
    height: 0;
    overflow: visible;
    pointer-events: none;
    white-space: nowrap;
    width: 0
}

@-webkit-keyframes visualbell {
    0% {
        background-color: #800
    }
    to {
        background-color: var(--timeline-background-color)
    }
}

.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
    -webkit-animation: visualbell .2s;
    animation: visualbell .2s
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
    overflow-x: hidden
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input .caretNode {
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill {
    cursor: inherit;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
    white-space: nowrap
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:hover {
    background-color: var(--other-user-pill-bg-color, var(--cpd-color-bg-action-primary-rest)) !important
}

.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, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:before {
    content: var(--avatar-letter);
    display: inline-block;
    height: 1rem;
    min-width: 1rem;
    width: 1rem;
    -webkit-margin-end: .24rem;
    background: var(--avatar-background), var(--timeline-background-color);
    background-repeat: no-repeat;
    background-size: 1rem;
    border-radius: 1rem;
    color: #fff;
    color: var(--avatar-color, #fff);
    font-size: .6275rem;
    font-weight: 400;
    line-height: 1rem;
    margin-inline-end: .24rem;
    text-align: center
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
    pointer-events: none
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
    height: 0;
    position: relative
}

.mx_JoinRuleDialog .mx_JoinRuleDialogButtons {
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 4px;
    margin-inline: 16px;
    padding: 12px
}

.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)
}

.mx_DecryptionFailureBar.mx_DecryptionFailureBar--withEnd .mx_DecryptionFailureBar_end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    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))
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-area: status;
    -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
}

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_status .mx_DecryptionFailureBar_start_status_icon {
    background-color: #ff5b55;
    height: var(--size-icon);
    -webkit-mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg);
    mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    min-width: var(--size-icon)
}

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_headline {
    align-self: center;
    font-size: 1rem;
    font-weight: var(--cpd-font-weight-semibold);
    grid-area: headline
}

.mx_DecryptionFailureBar .mx_DecryptionFailureBar_start .mx_DecryptionFailureBar_start_message {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    grid-area: message
}

.mx_E2EIcon {
    display: block;
    height: 16px;
    margin: 0 9px;
    position: relative;
    width: 16px
}

.mx_E2EIcon_normal:after, .mx_E2EIcon_normal:before, .mx_E2EIcon_verified:after, .mx_E2EIcon_verified:before, .mx_E2EIcon_warning:after, .mx_E2EIcon_warning:before {
    content: "";
    display: block;
    inset: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute
}

.mx_E2EIcon_bordered {
    background-color: var(--roomlist-background-color);
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.mx_E2EIcon_bordered:after {
    -webkit-mask-size: 75%;
    mask-size: 75%
}

.mx_E2EIcon_bordered:before {
    background: var(--cpd-color-bg-canvas-default);
    -webkit-mask-size: 60%;
    mask-size: 60%
}

.mx_E2EIcon_warning:after {
    background-color: #ff5b55;
    -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
    mask-image: url(../../img/e2e/warning.71ffc83.svg)
}

.mx_E2EIcon_normal:after {
    background-color: var(--cpd-color-icon-tertiary);
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    mask-image: url(../../img/e2e/normal.ab42a7b.svg)
}

.mx_E2EIcon_verified:after {
    background-color: #0dbd8b;
    -webkit-mask-image: url(../../img/e2e/verified.2ccf64e.svg);
    mask-image: url(../../img/e2e/verified.2ccf64e.svg)
}

.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;
    gap: 5px;
    max-width: 100%;
    padding: 3px;
    padding: 3px var(--EditMessageComposer-padding-inline);
    width: auto
}

.mx_EditMessageComposer .mx_BasicMessageComposer_input {
    background-color: var(--timeline-background-color);
    border: 1px solid var(--roomlist-separator-color);
    border-radius: 4px;
    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;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    gap: 5px;
    justify-content: flex-end;
    -webkit-margin-start: auto;
    margin-inline-start: auto
}

.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
    -webkit-box-flex: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex: 1;
    flex: 1;
    min-width: 100px
}

.mx_EmojiButton {
    --size: 26px;
    border-radius: 50%;
    cursor: pointer;
    height: 26px;
    height: var(--size);
    line-height: 26px;
    line-height: var(--size);
    padding-left: 26px;
    padding-left: var(--size);
    position: relative;
    width: auto
}

.mx_EmojiButton:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 20px;
    left: 3px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 3px;
    width: 20px;
    z-index: 2
}

.mx_EmojiButton:after {
    border-radius: 50%;
    content: "";
    height: var(--size);
    left: 0;
    position: absolute;
    top: 0;
    width: var(--size);
    z-index: 0
}

.mx_EmojiButton:hover:after {
    background: var(--cpd-color-bg-subtle-secondary)
}

.mx_EmojiButton:hover:before {
    background-color: var(--cpd-color-icon-secondary)
}

.mx_EmojiButton_highlight {
    background: var(--cpd-color-bg-subtle-primary)
}

.mx_EmojiButton_highlight:before {
    background-color: var(--cpd-color-icon-primary) !important
}

.mx_EmojiButton_icon:before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/emoji.d7b1970.svg);
    mask-image: url(../../img/element-icons/room/composer/emoji.d7b1970.svg)
}

.mx_MessageComposer_wysiwyg .mx_EmojiButton {
    --size: 26px;
    border-radius: 5px;
    cursor: pointer;
    height: 26px;
    height: var(--size);
    line-height: 26px;
    line-height: var(--size);
    padding-left: 26px;
    padding-left: var(--size);
    position: relative;
    width: auto
}

.mx_MessageComposer_wysiwyg .mx_EmojiButton:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 20px;
    left: 3px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 3px;
    width: 20px;
    z-index: 2
}

.mx_MessageComposer_wysiwyg .mx_EmojiButton:after {
    border-radius: 5px;
    content: "";
    height: var(--size);
    left: 0;
    position: absolute;
    top: 0;
    width: var(--size);
    z-index: 0
}

.mx_MessageComposer_wysiwyg .mx_EmojiButton:hover:after {
    background: var(--panels, var(--cpd-color-gray-600))
}

.mx_MessageComposer_wysiwyg .mx_EmojiButton:hover:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff)
}

.mx_EntityTile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--timeline-text-color);
    cursor: pointer
}

.mx_EntityTile .mx_E2EIcon {
    bottom: 2px;
    margin: 0;
    position: absolute;
    right: 7px
}

.mx_EntityTile:hover {
    padding-right: 30px;
    position: relative
}

.mx_EntityTile:hover:before {
    background-color: #a1b2d1;
    content: "";
    height: 16px;
    -webkit-mask: url(../../img/member_chevron.85a55f6.png);
    mask: url(../../img/member_chevron.85a55f6.png);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    right: -8px;
    top: calc(50% - 8px);
    width: 16px
}

.mx_EntityTile:not(.mx_EntityTile_unreachable) .mx_PresenceLabel {
    display: none
}

.mx_EntityTile:hover .mx_PresenceLabel {
    display: block
}

.mx_EntityTile_invite {
    display: table-cell;
    margin-left: 10px;
    vertical-align: middle;
    width: 26px
}

.mx_EntityTile_avatar {
    line-height: 0;
    padding: 4px 12px 4px 3px;
    position: relative
}

.mx_EntityTile_name {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    font: var(--cpd-font-body-md-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_EntityTile_details {
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_EntityTile_ellipsis .mx_EntityTile_name, .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
    color: var(--timeline-text-color);
    font-style: italic
}

.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, .mx_EntityTile_offline_beenactive .mx_EntityTile_name, .mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_name {
    opacity: .5
}

.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, .mx_EntityTile_offline_neveractive .mx_EntityTile_name, .mx_EntityTile_unknown .mx_EntityTile_avatar, .mx_EntityTile_unknown .mx_EntityTile_name, .mx_EntityTile_unreachable .mx_EntityTile_avatar, .mx_EntityTile_unreachable .mx_EntityTile_name {
    opacity: .25
}

.mx_EntityTile_subtext {
    font-size: .6875rem;
    opacity: .5;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap
}

.mx_EntityTile_power {
    -webkit-padding-start: 6px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .625rem;
    max-width: 6em;
    overflow: hidden;
    padding-inline-start: 6px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_EntityTile:hover .mx_EntityTile_power {
    display: none
}

.mx_RoomView_body[data-layout=bubble] .mx_MessageComposer, .mx_RoomView_body[data-layout=bubble] .mx_RoomView_statusArea, .mx_RoomView_body[data-layout=bubble] .mx_RoomView_timeline {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%
}

.mx_EventTile[data-layout=bubble], .mx_GenericEventListSummary[data-layout=bubble] {
    --avatarSize: 32px;
    --gutterSize: 11px;
    --cornerRadius: 12px;
    --maxWidth: 70%;
    --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 {
    max-width: 80px;
    max-width: var(--MessageTimestamp-max-width);
    width: auto
}

.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 {
    border: 4px solid var(--timeline-background-color);
    border-radius: 50%;
    line-height: 0;
    position: absolute;
    top: 6px;
    z-index: 9
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_avatar img {
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 3px var(--timeline-background-color);
    box-shadow: 0 0 0 3px var(--timeline-background-color)
}

.mx_EventTile[data-layout=bubble].mx_EventTile_highlight .mx_EventTile_avatar {
    border-color: var(--timeline-highlights-color)
}

.mx_EventTile[data-layout=bubble].mx_EventTile_highlight:before {
    background-color: var(--timeline-highlights-color)
}

.mx_EventTile[data-layout=bubble]:hover .mx_EventTile_avatar {
    border-color: #1c2026;
    border-color: var(--eventbubble-bg-hover, #1c2026)
}

.mx_EventTile[data-layout=bubble] .mx_EventTile {
    padding-top: 0
}

.mx_EventTile[data-layout=bubble]:before {
    border-radius: 4px;
    bottom: -1px;
    content: "";
    left: calc(var(--EventTile_bubble-margin-inline-start) * -1);
    position: absolute;
    right: calc(var(--EventTile_bubble-margin-inline-end) * -1);
    top: -1px;
    z-index: -1
}

.mx_EventTile[data-layout=bubble].mx_EventTile_selected:before, .mx_EventTile[data-layout=bubble]:hover:before {
    background: #1c2026;
    background: var(--eventbubble-bg-hover, #1c2026)
}

.mx_EventTile[data-layout=bubble].mx_EventTile_selected .mx_EventTile_avatar img, .mx_EventTile[data-layout=bubble]:hover .mx_EventTile_avatar img {
    -webkit-box-shadow: 0 0 0 3px #1c2026;
    box-shadow: 0 0 0 3px #1c2026;
    -webkit-box-shadow: 0 0 0 3px var(--eventbubble-bg-hover, #1c2026);
    box-shadow: 0 0 0 3px var(--eventbubble-bg-hover, #1c2026)
}

.mx_EventTile[data-layout=bubble] .mx_DisambiguatedProfile, .mx_EventTile[data-layout=bubble] .mx_EventTile_line {
    --EventBubbleTile_line-max-width: 70%;
    line-height: 1.125rem;
    max-width: 70%;
    max-width: var(--EventBubbleTile_line-max-width);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_EventTile[data-layout=bubble] > .mx_DisambiguatedProfile {
    white-space: normal
}

.mx_EventTile[data-layout=bubble] > .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
    white-space: nowrap;
    -webkit-margin-end: 5px;
    direction: ltr;
    margin-inline-end: 5px;
    unicode-bidi: embed
}

.mx_EventTile[data-layout=bubble] > .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
    -webkit-margin-start: 0;
    margin-inline-start: 0
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_senderDetails > .mx_DisambiguatedProfile, .mx_EventTile[data-layout=bubble] > .mx_DisambiguatedProfile {
    font-size: .9375rem;
    left: 2px;
    position: relative;
    top: -2px
}

.mx_EventTile[data-layout=bubble] .mx_MessageActionBar {
    top: -28px;
    z-index: 9
}

.mx_EventTile[data-layout=bubble] .mx_MediaBody {
    padding-right: 48px
}

.mx_EventTile[data-layout=bubble] .mx_MImageBody .mx_MImageBody_thumbnail_container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
    min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize))
}

.mx_EventTile[data-layout=bubble] .mx_LegacyCallEvent {
    background-color: transparent;
    background-color: initial;
    border: 1px solid #6f7882;
    border-color: var(--quinary-content, #6f7882)
}

.mx_EventTile[data-layout=bubble] .mx_ReactionsRow {
    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_MBeaconBody, .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_MLocationBody_map, .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 {
    border-bottom-right-radius: var(--cornerRadius) !important
}

.mx_EventTile[data-layout=bubble][data-self=false] .mx_EventTile_avatar {
    left: -36px
}

.mx_EventTile[data-layout=bubble][data-self=false] .mx_MessageActionBar {
    inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
    right: auto
}

.mx_EventTile[data-layout=bubble][data-self=false] .mx_ThreadSummary {
    -webkit-margin-start: calc(var(--gutterSize) * -1);
    margin-inline-start: calc(var(--gutterSize) * -1);
    -webkit-margin-end: auto;
    margin-inline-end: auto
}

.mx_EventTile[data-layout=bubble][data-self=false] .mx_ReactionsRow {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.mx_EventTile[data-layout=bubble][data-self=false] {
    --backgroundColor: var(--eventbubble-others-bg, #22262e)
}

.mx_EventTile[data-layout=bubble][data-self=true] .mx_EventTile_line {
    -webkit-margin-start: auto;
    border-bottom-left-radius: var(--cornerRadius);
    margin-inline-start: auto
}

.mx_EventTile[data-layout=bubble][data-self=true] .mx_EventTile_line .mx_MBeaconBody, .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_MLocationBody_map, .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 {
    border-bottom-left-radius: var(--cornerRadius) !important
}

.mx_EventTile[data-layout=bubble][data-self=true] .mx_EventTile_sticker {
    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(var(--gutterSize) * -1);
    margin-inline-end: calc(var(--gutterSize) * -1)
}

.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_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
}

.mx_EventTile[data-layout=bubble][data-self=true] .mx_EventTile_avatar {
    right: -38px;
    top: -19px
}

.mx_EventTile[data-layout=bubble][data-self=true] .mx_MediaBody {
    background: #14322e;
    background: var(--eventbubble-self-bg, #14322e)
}

.mx_EventTile[data-layout=bubble][data-self=true] .mx_MessageActionBar {
    inset-inline-end: 0
}

.mx_EventTile[data-layout=bubble][data-self=true] {
    --backgroundColor: var(--eventbubble-self-bg, #14322e)
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line {
    border-top-left-radius: var(--cornerRadius);
    border-top-right-radius: var(--cornerRadius);
    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);
    position: relative
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp, .mx_EventTile[data-layout=bubble] .mx_EventTile_line > a {
    bottom: 0;
    padding: 4px 8px;
    position: absolute;
    right: 0;
    z-index: 3
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MAudioBody, .mx_EventTile[data-layout=bubble] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MFileBody {
    max-width: 100%
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MVoiceMessageBody {
    min-width: 0
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line.mx_EventTile_mediaLine.mx_EventTile_image .mx_MessageTimestamp {
    background-color: rgba(0, 0, 0, .6);
    border-radius: 8px;
    border-radius: var(--MBody-border-radius);
    color: #fff;
    padding: 0 4px
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line.mx_EventTile_sticker .mx_MessageActionBar + .mx_MessageTimestamp, .mx_EventTile[data-layout=bubble] .mx_EventTile_line.mx_EventTile_sticker > a {
    left: 100%;
    right: auto
}

.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 {
    height: 100%;
    width: 100%
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
    position: static
}

.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;
    height: calc(1.125rem + 2px)
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_line .mx_MPollEndBody {
    width: 100%
}

.mx_EventTile[data-layout=bubble]:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
    background: var(--backgroundColor);
    padding: calc(var(--gutterSize) - 1px);
    padding-right: 60px
}

.mx_EventTile[data-layout=bubble]:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) .mx_EventTile_content {
    padding: 1px
}

.mx_EventTile[data-layout=bubble].mx_EventTile_continuation[data-self=false] .mx_EventTile_line {
    border-top-left-radius: 0
}

.mx_EventTile[data-layout=bubble].mx_EventTile_continuation[data-self=false] .mx_EventTile_line .mx_MBeaconBody, .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_MImageBody:before, .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_MVideoBody .mx_MVideoBody_container, .mx_EventTile[data-layout=bubble].mx_EventTile_continuation[data-self=false] .mx_EventTile_line .mx_MediaBody {
    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_MBeaconBody, .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_MImageBody:before, .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_MVideoBody .mx_MVideoBody_container, .mx_EventTile[data-layout=bubble].mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line .mx_MediaBody {
    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_MBeaconBody, .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_MImageBody:before, .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_MVideoBody .mx_MVideoBody_container, .mx_EventTile[data-layout=bubble].mx_EventTile_continuation[data-self=true] .mx_EventTile_line .mx_MediaBody {
    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_MBeaconBody, .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_MImageBody:before, .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_MVideoBody .mx_MVideoBody_container, .mx_EventTile[data-layout=bubble].mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line .mx_MediaBody {
    border-bottom-right-radius: var(--cornerRadius)
}

.mx_EventTile[data-layout=bubble].mx_EventTile_noSender .mx_EventTile_avatar {
    top: -19px
}

.mx_EventTile[data-layout=bubble][data-has-reply=true] > .mx_EventTile_line {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_EventTile[data-layout=bubble][data-has-reply=true] .mx_ReplyChain .mx_EventTile_reply {
    max-width: 90%;
    padding: 0
}

.mx_EventTile[data-layout=bubble][data-has-reply=true] .mx_ReplyChain .mx_EventTile_reply .mx_MessageActionBar + .mx_MessageTimestamp, .mx_EventTile[data-layout=bubble][data-has-reply=true] .mx_ReplyChain .mx_EventTile_reply > a {
    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 {
    max-width: 100%;
    width: 550px
}

.mx_EventTile[data-layout=bubble] .mx_MPollBody .mx_MPollBody_totalVotes {
    padding: 4px 0
}

.mx_EventTile[data-layout=bubble].mx_EventTile_bad:hover:before {
    background: transparent
}

.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_ReplyChain_wrapper, .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_ViewSourceEvent {
    min-width: 0
}

.mx_EventTile[data-layout=bubble].mx_EventTile_bad .mx_EventTile_line .mx_EventTile_e2eIcon {
    grid-area: shield;
    margin-bottom: auto;
    margin-top: auto
}

.mx_EventTile[data-layout=bubble].mx_EventTile_bad .mx_EventTile_line .mx_DecryptionFailureBody, .mx_EventTile[data-layout=bubble].mx_EventTile_bad .mx_EventTile_line .mx_UnknownBody {
    grid-area: body
}

.mx_EventTile[data-layout=bubble].mx_EventTile_bad .mx_EventTile_line .mx_ReplyChain_wrapper {
    grid-area: reply
}

.mx_EventTile[data-layout=bubble].mx_EventTile_bad.mx_EventTile_info .mx_EventTile_line {
    gap: 0 9px;
    -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_CallEvent_wrapper, .mx_EventTile[data-layout=bubble] .mx_LegacyCallEvent_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 {
    font-style: italic;
    padding-right: 60px
}

.mx_EventTile.mx_EventTile_noBubble[data-layout=bubble] .mx_EventTile_line.mx_EventTile_emote > a {
    -ms-flex-item-align: center;
    align-self: center;
    bottom: auto;
    font-style: normal;
    top: auto
}

.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 {
    display: none
}

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], .mx_EventTile.mx_EventTile_info[data-layout=bubble], .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px 0;
    -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_info, .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble] .mx_EventTile_line, .mx_EventTile.mx_EventTile_info[data-layout=bubble] .mx_EventTile_info, .mx_EventTile.mx_EventTile_info[data-layout=bubble] .mx_EventTile_line, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble] .mx_EventTile_info, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble] .mx_EventTile_line {
    margin: 0;
    min-width: 100%
}

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], .mx_EventTile.mx_EventTile_info[data-layout=bubble], .mx_EventTile.mx_EventTile_leftAlignedBubble[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_info[data-layout=bubble] .mx_EventTile_avatar, .mx_EventTile.mx_EventTile_leftAlignedBubble[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)
}

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble] .mx_EventTile_e2eIcon, .mx_EventTile.mx_EventTile_info[data-layout=bubble] .mx_EventTile_e2eIcon, .mx_EventTile.mx_EventTile_leftAlignedBubble[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;
    -ms-flex-item-align: center;
    align-self: center
}

.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp, .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble] .mx_EventTile_line > a, .mx_EventTile.mx_EventTile_info[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_leftAlignedBubble[data-layout=bubble] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble] .mx_EventTile_line > a, .mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp, .mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] .mx_EventTile_line > a {
    bottom: auto;
    left: -77px;
    right: auto;
    -ms-flex-item-align: center;
    align-self: center
}

.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_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_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_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_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_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_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, .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 {
    vertical-align: middle
}

.mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
    max-width: 100%;
    min-width: 0;
    width: 100%
}

.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 {
    margin-right: 0;
    padding: 2px 0
}

.mx_GenericEventListSummary[data-layout=bubble][data-expanded=true] .mx_EventTile_info .mx_MessageActionBar {
    inset-inline-end: 48px;
    inset-inline-start: auto
}

.mx_GenericEventListSummary[data-layout=bubble][data-expanded=true] .mx_EventTile_info .mx_ReadReceiptGroup {
    inset-inline-end: calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) * -1 + 60px)
}

.mx_GenericEventListSummary[data-layout=bubble][data-expanded=true] .mx_EventTile_info:before {
    inset-inline-end: 0
}

.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.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: 1.5rem;
    -ms-flex-negative: 0;
    clear: both;
    flex-shrink: 0;
    max-width: 100%;
    padding-top: 18px;
    position: relative
}

.mx_EventTile.mx_EventTile_info {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: var(--cpd-font-size-body-sm)
}

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

.mx_EventTile .mx_EventTile_receiptSending, .mx_EventTile .mx_EventTile_receiptSent {
    display: inline-block;
    height: 16px;
    position: relative;
    width: 16px
}

.mx_EventTile .mx_EventTile_receiptSending:before, .mx_EventTile .mx_EventTile_receiptSent:before {
    background-color: var(--cpd-color-icon-tertiary);
    content: "";
    height: 16px;
    left: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px
}

.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 {
    overflow: visible
}

.mx_EventTile .mx_EventTile_searchHighlight {
    border-radius: 5px;
    cursor: pointer;
    padding-inline: 2px
}

.mx_EventTile .mx_EventTile_searchHighlight, .mx_EventTile .mx_EventTile_searchHighlight a {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    color: #fff
}

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

.mx_EventTile .mx_DisambiguatedProfile {
    color: var(--timeline-text-color);
    display: inline-block;
    font: var(--cpd-font-body-md-regular);
    padding-bottom: 0;
    padding-top: 0
}

.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 {
    display: block;
    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: .4
}

.mx_EventTile.mx_EventTile_highlight, .mx_EventTile.mx_EventTile_highlight .markdown-body, .mx_EventTile.mx_EventTile_highlight .mx_EventTile_edited {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_EventTile.mx_EventTile_bubbleContainer {
    display: grid;
    grid-template-columns:1fr 100px
}

.mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_line {
    grid-column: 1/3;
    margin-right: 0;
    padding: 0 !important
}

.mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
    grid-column: 2
}

.mx_EventTile.mx_EventTile_bubbleContainer:hover .mx_EventTile_line {
    background-color: inherit !important
}

.mx_EventTile.mx_EventTile_isEditing .mx_MessageTimestamp {
    visibility: hidden
}

.mx_EventTile[data-layout=group], .mx_EventTile[data-layout=irc] {
    --selected-message-border-width: 4px;
    --EventTile-box-shadow-offset-x: calc(50px + var(--selected-message-border-width));
    --EventTile-box-shadow-spread-radius: -50px
}

.mx_EventTile[data-layout=group] .mx_EventTile_e2eIcon, .mx_EventTile[data-layout=irc] .mx_EventTile_e2eIcon {
    position: absolute
}

.mx_EventTile[data-layout=group] .mx_MImageBody .mx_MImageBody_thumbnail_container, .mx_EventTile[data-layout=irc] .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=group] .mx_EventTile_line, .mx_EventTile[data-layout=group] .mx_EventTile_reply, .mx_EventTile[data-layout=irc] .mx_EventTile_line, .mx_EventTile[data-layout=irc] .mx_EventTile_reply {
    border-radius: 8px;
    position: relative
}

.mx_EventTile[data-layout=group] .mx_EventTile_reply, .mx_EventTile[data-layout=irc] .mx_EventTile_reply {
    margin-right: 10px
}

.mx_EventTile[data-layout=group] .mx_EventTile_msgOption, .mx_EventTile[data-layout=irc] .mx_EventTile_msgOption {
    float: right;
    height: 1px;
    position: relative;
    text-align: right;
    width: 90px
}

.mx_EventTile[data-layout=group] .mx_EventTile_msgOption a, .mx_EventTile[data-layout=irc] .mx_EventTile_msgOption a {
    text-decoration: none
}

.mx_EventTile[data-layout=group].mx_EventTile_highlight .markdown-body .mx_EventTile_line, .mx_EventTile[data-layout=group].mx_EventTile_highlight .mx_EventTile_line, .mx_EventTile[data-layout=irc].mx_EventTile_highlight .markdown-body .mx_EventTile_line, .mx_EventTile[data-layout=irc].mx_EventTile_highlight .mx_EventTile_line {
    background-color: var(--timeline-highlights-color)
}

.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, .mx_EventTile[data-layout=group]: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=irc]:focus-visible:focus-within .mx_EventTile_line {
    background-color: var(--timeline-highlights-color)
}

.mx_EventTile[data-layout=group].mx_EventTile_isEditing > .mx_EventTile_line, .mx_EventTile[data-layout=group].mx_EventTile_selected > .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 {
    -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=group].mx_EventTile_info .mx_EventTile_e2eIcon, .mx_EventTile[data-layout=irc].mx_EventTile_info .mx_EventTile_e2eIcon {
    top: 0
}

.mx_EventTile[data-layout=group].mx_EventTile_continuation .mx_EventTile_line, .mx_EventTile[data-layout=irc].mx_EventTile_continuation .mx_EventTile_line {
    clear: both
}

.mx_EventTile[data-layout=group]:hover .mx_EventTile_line, .mx_EventTile[data-layout=irc]:hover .mx_EventTile_line {
    background-color: var(--timeline-highlights-color)
}

.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;
    --EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + var(--icon-width) + var(--right-padding) * 1);
    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 {
    min-width: 46px;
    min-width: var(--MessageTimestamp-width);
    text-decoration: none
}

.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_DisambiguatedProfile, .mx_EventTile[data-layout=irc] .mx_EventTile_avatar, .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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    order: 1;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_EventTile[data-layout=irc] .mx_EventTile_avatar > .mx_BaseAvatar, .mx_EventTile[data-layout=irc] .mx_EventTile_avatar > .mx_BaseAvatar > * {
    font-size: .625rem !important;
    height: .875rem !important;
    line-height: .9375rem !important;
    width: .875rem !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
}

.mx_EventTile[data-layout=irc] .mx_DisambiguatedProfile > .mx_DisambiguatedProfile_displayName {
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    width: 100%
}

.mx_EventTile[data-layout=irc] .mx_DisambiguatedProfile > .mx_DisambiguatedProfile_mxid {
    margin-left: 0;
    padding: 0 5px;
    visibility: collapse
}

.mx_EventTile[data-layout=irc] .mx_DisambiguatedProfile:hover {
    overflow: visible;
    z-index: 10
}

.mx_EventTile[data-layout=irc] .mx_DisambiguatedProfile:hover > .mx_DisambiguatedProfile_displayName {
    background-color: var(--timeline-highlights-color);
    border-radius: 8px 0 0 8px;
    display: inline;
    overflow: visible;
    padding-right: 8px
}

.mx_EventTile[data-layout=irc] .mx_DisambiguatedProfile:hover > .mx_DisambiguatedProfile_mxid {
    background-color: var(--timeline-highlights-color);
    opacity: 1;
    visibility: visible
}

.mx_EventTile[data-layout=irc] .mx_EventTile_e2eIcon {
    padding: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    background-position: 50%;
    flex-grow: 0
}

.mx_EventTile[data-layout=irc] .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_EventTile[data-layout=irc] .mx_EventTile_line .mx_MTextBody, .mx_EventTile[data-layout=irc] .mx_EventTile_line .mx_TextualEvent, .mx_EventTile[data-layout=irc] .mx_EventTile_line .mx_ViewSourceEvent {
    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_MTextBody, .mx_EventTile[data-layout=irc] .mx_EventTile_line .mx_TextualEvent {
    display: inline-block
}

.mx_EventTile[data-layout=irc] .mx_EventTile_line .mx_ReplyTile .mx_MTextBody {
    display: -webkit-box
}

.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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    order: 3;
    -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: -.3rem
}

.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 {
    left: var(--EventTile_irc_line_info-margin-inline-start);
    position: relative
}

.mx_EventTile[data-layout=irc] .mx_EventTileBubble.mx_cryptoEvent {
    left: auto
}

.mx_EventTile[data-layout=irc] .mx_ReplyTile .mx_EventTileBubble {
    left: auto
}

.mx_EventTile[data-layout=irc].mx_EventTile_isEditing > .mx_EventTile_line .mx_EditMessageComposer {
    -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);
    margin-right: var(--right-padding);
    padding-block: var(--EventTile_irc_line-padding-block);
    top: 0
}

.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_TextualEvent, .mx_EventTile[data-layout=irc].mx_EventTile_info .mx_ViewSourceEvent {
    line-height: 1.125rem;
    line-height: var(--irc-line-height)
}

.mx_EventTile[data-layout=irc].mx_EventTile_emote .mx_EventTile_avatar {
    margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding) * 1)
}

.mx_EventTile[data-layout=group] .mx_EventTile_avatar {
    left: 8px;
    top: 14px
}

.mx_EventTile[data-layout=group] .mx_EventTile_line, .mx_EventTile[data-layout=group] .mx_EventTile_reply {
    line-height: var(--EventTile_group_line-line-height);
    padding-bottom: var(--EventTile_group_line-spacing-block-end);
    padding-left: var(--EventTile_group_line-spacing-inline-start);
    padding-top: var(--EventTile_group_line-spacing-block-start)
}

.mx_EventTile[data-layout=group] .mx_EventTile_e2eIcon {
    height: var(--EventTile_group_line-line-height);
    inset: 0 0 0 44px;
    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 {
    inset-block-start: calc(-1.375rem - 3px)
}

.mx_EventTile[data-layout=group] .mx_MessageTimestamp {
    left: 0;
    position: absolute;
    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_ReactionsRow {
    margin: 4px 64px
}

.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] .mx_EventTile_line, .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 {
    margin-right: 80px;
    min-height: .875rem
}

.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout=group] .mx_ThreadSummary {
    max-width: min(calc(100% - 144px), 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 {
    height: 14px;
    inset-inline-start: 64px;
    top: auto
}

.mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_line {
    padding-block: 3px 2px;
    -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 {
    -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] {
    margin-left: var(--EventTile_bubble-margin-inline-start);
    margin-top: calc(var(--gutterSize) / 2);
    max-width: none;
    padding-top: 0
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
    inset-block-end: calc(.5625rem - 12px);
    inset-block-start: auto;
    inset-inline-end: calc(var(--ReadReceiptGroup_EventBubbleTile-spacing-end) * -1);
    position: absolute
}

.mx_EventTile[data-layout=bubble] .mx_EventTileBubble {
    max-width: 600px
}

.mx_EventTile[data-layout=bubble].mx_EventTile_continuation {
    margin-top: 2px
}

.mx_EventTile[data-layout=bubble].mx_EventTile_lastInSection {
    margin-bottom: calc(var(--gutterSize) / 2)
}

.mx_GenericEventListSummary[data-layout=group] .mx_EventTile_line .mx_RedactedBody, .mx_GenericEventListSummary[data-layout=irc] .mx_EventTile_line .mx_RedactedBody {
    line-height: 1
}

.mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line {
    padding-left: calc(var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + var(--right-padding) * 2)
}

.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 {
    -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 {
    margin-right: var(--EventTile_content-margin-inline-end);
    overflow-x: hidden;
    overflow-y: hidden
}

.mx_EventTile_content .mx_EventTile_edited, .mx_EventTile_content .mx_EventTile_pendingModeration {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline-block;
    font-size: .75rem;
    margin-left: 9px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx_EventTile_content .mx_EventTile_edited {
    cursor: pointer
}

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

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

.mx_EventTile_content .markdown-body code:not(pre *) {
    background-color: #2a3039;
    border: 1px solid #2a3039;
    border-radius: 4px;
    line-height: 1.375rem;
    margin-right: 2px;
    padding: 2px 0
}

.mx_EventTile_content .markdown-body code {
    white-space: pre-wrap
}

.mx_EventTile_content .markdown-body pre {
    overflow-x: overlay;
    overflow-y: visible
}

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

.mx_EventTile_content .markdown-body pre {
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882)
}

.mx_EventTile_content .markdown-body pre code {
    white-space: pre
}

.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 {
    color: inherit;
    font-family: inherit !important
}

.mx_EventTile_content .markdown-body h1, .mx_EventTile_content .markdown-body h2 {
    border-bottom: none !important;
    font-size: 1.5em
}

.mx_EventTile_content .markdown-body a {
    color: var(--primary-color)
}

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

.mx_EventTile_content .markdown-body ol ol, .mx_EventTile_content .markdown-body ul ol {
    list-style-type: revert
}

.mx_EventTile_content .markdown-body ul {
    list-style-type: disc
}

.mx_EventTile_spoiler {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit
}

.mx_EventTile_spoiler .mx_EventTile_spoiler_reason {
    color: #a1b2d1;
    font-size: .6875rem
}

.mx_EventTile_spoiler .mx_EventTile_spoiler_content {
    -webkit-filter: blur(5px) saturate(.1) sepia(1);
    filter: blur(5px) saturate(.1) sepia(1);
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}

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

.mx_EventTile_bigEmoji {
    font-size: 48px;
    line-height: 57px
}

.mx_EventTile_bigEmoji .mx_Emoji {
    font-size: inherit !important
}

.mx_EventTile_e2eIcon {
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 14px;
    position: relative;
    width: 14px
}

.mx_EventTile_e2eIcon:after, .mx_EventTile_e2eIcon:before {
    content: "";
    display: block;
    inset: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute
}

.mx_EventTile_e2eIcon:before {
    -webkit-mask-size: 80%;
    mask-size: 80%
}

.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_warning:after {
    background-color: #ff5b55;
    -webkit-mask-image: url(../../img/e2e/warning.71ffc83.svg);
    mask-image: url(../../img/e2e/warning.71ffc83.svg)
}

.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_normal:after {
    background-color: var(--cpd-color-icon-tertiary);
    -webkit-mask-image: url(../../img/e2e/normal.ab42a7b.svg);
    mask-image: url(../../img/e2e/normal.ab42a7b.svg)
}

.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_decryption_failure:after {
    background-color: var(--cpd-color-icon-tertiary);
    -webkit-mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg);
    mask-image: url(../../img/e2e/decryption-failure.d4a03e3.svg)
}

.mx_EventTile_body a:hover {
    text-decoration: underline
}

.mx_EventTile_body pre {
    border: 1px solid transparent
}

.mx_EventTile:focus-visible:focus-within .mx_EventTile_body pre, .mx_EventTile:hover .mx_EventTile_body pre {
    border: 1px solid #edf3ff;
    border: 1px solid var(--tertiary-content, #edf3ff)
}

.mx_EventTile_body.markdown-body img {
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: left top;
    object-position: left top
}

.mx_EventTile_clamp .mx_EventTile_body {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_EventTile_body .mx_EventTile_pre_container {
    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-bottom: 12px;
    padding-top: 12px
}

.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button {
    background-color: var(--timeline-text-color);
    height: 19px;
    position: absolute;
    right: 8px;
    top: 8px;
    visibility: hidden;
    width: 19px
}

.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(../../img/element-icons/copy.4ee219c.svg);
    mask-image: url(../../img/element-icons/copy.4ee219c.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 {
    color: gray;
    float: left;
    margin: 0 .5em 0 -1.5em
}

.mx_EventTile_lineNumbers span {
    display: block;
    padding-left: 1em;
    text-align: right
}

.mx_EventTile_button {
    cursor: pointer;
    display: inline-block
}

.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(../../img/element-icons/minimise-collapse.c9216fb.svg);
    mask-image: url(../../img/element-icons/minimise-collapse.c9216fb.svg)
}

.mx_EventTile_expandButton {
    -webkit-mask-image: url(../../img/element-icons/maximise-expand.c678e40.svg);
    mask-image: url(../../img/element-icons/maximise-expand.c678e40.svg)
}

.mx_EventTile_tileError {
    color: red;
    margin-right: 0;
    text-align: center
}

.mx_EventTile_tileError .mx_EventTile_line {
    margin-right: 0;
    padding-left: 0
}

.mx_EventTile_tileError .mx_EventTile_line span {
    padding: 4px 8px
}

.mx_EventTile_tileError a {
    margin-left: 1em
}

.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar, .mx_EventTile:focus-visible:focus-within .mx_MessageActionBar, .mx_EventTile:hover .mx_MessageActionBar, [data-whatinput=keyboard] .mx_EventTile:focus-within .mx_MessageActionBar {
    visibility: visible
}

.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput=keyboard] :focus-within):not(:focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
    -webkit-animation: none;
    animation: none
}

.mx_EventTile[data-shape=Notification], .mx_EventTile[data-shape=ThreadsList] {
    --topOffset: 12px;
    --leftOffset: 48px;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    margin: 13px 0 12px;
    margin: calc(var(--topOffset) + 1px) 0 var(--topOffset);
    padding: 8px 24px 8px 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_EventTile[data-shape=Notification]:after, .mx_EventTile[data-shape=Notification]:before, .mx_EventTile[data-shape=ThreadsList]:after, .mx_EventTile[data-shape=ThreadsList]:before {
    content: "";
    position: absolute
}

.mx_EventTile[data-shape=Notification]:after, .mx_EventTile[data-shape=ThreadsList]:after {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    height: 1px;
    inset: auto 24px calc(var(--topOffset) * -1 - 1px) calc(var(--leftOffset) + 8px);
    pointer-events: none
}

.mx_EventTile[data-shape=Notification]:before, .mx_EventTile[data-shape=ThreadsList]:before {
    inset: 0;
    pointer-events: none
}

.mx_EventTile[data-shape=Notification][data-notification=total]:before, .mx_EventTile[data-shape=ThreadsList][data-notification=total]:before {
    background-color: var(--cpd-color-icon-tertiary)
}

.mx_EventTile[data-shape=Notification][data-notification=highlight]:before, .mx_EventTile[data-shape=ThreadsList][data-notification=highlight]:before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

.mx_EventTile[data-shape=Notification]:last-child:after, .mx_EventTile[data-shape=ThreadsList]:last-child:after {
    content: normal
}

.mx_EventTile[data-shape=Notification]:last-child, .mx_EventTile[data-shape=ThreadsList]:last-child {
    margin-bottom: 0
}

.mx_EventTile[data-shape=Notification]:first-child, .mx_EventTile[data-shape=ThreadsList]:first-child {
    margin-top: 0
}

.mx_EventTile[data-shape=Notification] .mx_EventTile_avatar, .mx_EventTile[data-shape=ThreadsList] .mx_EventTile_avatar {
    inset: 8px auto auto 8px
}

.mx_EventTile[data-shape=Notification] .mx_EventTile_details, .mx_EventTile[data-shape=ThreadsList] .mx_EventTile_details {
    overflow: hidden
}

.mx_EventTile[data-shape=Notification] .mx_DisambiguatedProfile, .mx_EventTile[data-shape=ThreadsList] .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=Notification] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName, .mx_EventTile[data-shape=Notification] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid, .mx_EventTile[data-shape=ThreadsList] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName, .mx_EventTile[data-shape=ThreadsList] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis
}

.mx_EventTile[data-shape=Notification] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName, .mx_EventTile[data-shape=ThreadsList] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    max-width: 100%
}

.mx_EventTile[data-shape=Notification] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid, .mx_EventTile[data-shape=ThreadsList] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_EventTile[data-shape=Notification] .mx_EventTile_line, .mx_EventTile[data-shape=ThreadsList] .mx_EventTile_line {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 0;
    width: 100%;
    -webkit-padding-start: var(--leftOffset);
    padding-inline-start: var(--leftOffset)
}

.mx_EventTile[data-shape=Notification] .mx_MessageTimestamp, .mx_EventTile[data-shape=ThreadsList] .mx_MessageTimestamp {
    font-size: .75rem;
    margin-left: auto;
    overflow: hidden;
    position: static;
    text-overflow: ellipsis;
    width: auto
}

.mx_EventTile[data-shape=Notification]:hover, .mx_EventTile[data-shape=ThreadsList]:hover {
    background-color: var(--panels, var(--cpd-color-gray-600))
}

.mx_EventTile[data-shape=Notification][data-layout=group]:hover .mx_EventTile_line, .mx_EventTile[data-shape=ThreadsList][data-layout=group]:hover .mx_EventTile_line {
    background-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none
}

.mx_EventTile[data-shape=ThreadsList] .mx_ThreadPanel_replies {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font: var(--cpd-font-body-sm-regular);
    position: relative
}

.mx_EventTile[data-shape=ThreadsList] .mx_ThreadPanel_replies:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary)) !important;
    content: "";
    display: inline-block;
    height: 18px;
    -webkit-mask-image: url(../../img/element-icons/thread-summary.4b1ebec.svg);
    mask-image: url(../../img/element-icons/thread-summary.4b1ebec.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    min-width: 18px
}

.mx_EventTile[data-shape=ThreadsList] .mx_ThreadPanel_replies .mx_ThreadPanel_replies_amount {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-weight: var(--cpd-font-weight-semibold);
    padding: 0 12px 0 8px;
    position: relative;
    white-space: nowrap
}

.mx_EventTile[data-shape=ThreadsList] .mx_ThreadPanel_replies .mx_ThreadSummary_content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ThreadView {
    --ThreadView_group_spacing-start: 56px;
    --ThreadView_group_spacing-end: 8px
}

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

.mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
    height: 14px;
    margin-bottom: 0;
    margin-top: 0;
    position: absolute;
    top: 1.5px;
    width: 14px
}

.mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_line, .mx_ThreadView .mx_EventTile.mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line {
    -webkit-padding-start: 0;
    line-height: .75rem;
    padding-inline-start: 0
}

.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, .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 {
    font-size: .75rem;
    width: auto
}

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout=group], .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout=irc] {
    padding-top: 0
}

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout=group] .mx_EventTile_avatar, .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout=irc] .mx_EventTile_avatar {
    left: 56px;
    left: calc(var(--MessageTimestamp-width) + 10px);
    z-index: 9
}

.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout=group] .mx_MessageTimestamp, .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout=irc] .mx_MessageTimestamp {
    top: 2px
}

.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, .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=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=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 {
    -webkit-margin-start: 20px;
    margin-inline-start: 20px
}

.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_line .mx_EventTile_content, .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout=bubble] .mx_EventTile_line .mx_RedactedBody, .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 {
    -webkit-margin-start: calc(var(--ThreadView_group_spacing-start) + 20px);
    margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 20px)
}

.mx_ThreadView .mx_EventTile[data-layout=group], .mx_ThreadView .mx_EventTile[data-layout=irc] {
    -webkit-padding-before: 16px;
    padding-block-start: 16px
}

.mx_ThreadView .mx_EventTile[data-layout=group] .mx_EventTile_line, .mx_ThreadView .mx_EventTile[data-layout=group] .mx_ReactionsRow, .mx_ThreadView .mx_EventTile[data-layout=irc] .mx_EventTile_line, .mx_ThreadView .mx_EventTile[data-layout=irc] .mx_ReactionsRow {
    -webkit-margin-end: var(--ThreadView_group_spacing-end);
    margin-inline-end: var(--ThreadView_group_spacing-end)
}

.mx_ThreadView .mx_EventTile[data-layout=group] .mx_EventTile_line, .mx_ThreadView .mx_EventTile[data-layout=irc] .mx_EventTile_line {
    padding-block: var(--BaseCard_EventTile_line-padding-block);
    -webkit-padding-start: var(--ThreadView_group_spacing-start);
    padding-inline-start: var(--ThreadView_group_spacing-start)
}

.mx_ThreadView .mx_EventTile[data-layout=group] .mx_EventTile_line .mx_EventTile_content.mx_EditMessageComposer, .mx_ThreadView .mx_EventTile[data-layout=irc] .mx_EventTile_line .mx_EventTile_content.mx_EditMessageComposer {
    -webkit-padding-start: 0;
    padding-inline-start: 0
}

.mx_ThreadView .mx_EventTile[data-layout=group] .mx_ReactionsRow, .mx_ThreadView .mx_EventTile[data-layout=irc] .mx_ReactionsRow {
    -webkit-margin-start: var(--ThreadView_group_spacing-start);
    margin-inline-start: var(--ThreadView_group_spacing-start)
}

.mx_ThreadView .mx_EventTile[data-layout=group].mx_EventTile_continuation, .mx_ThreadView .mx_EventTile[data-layout=irc].mx_EventTile_continuation {
    -webkit-padding-before: 0;
    padding-block-start: 0
}

.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;
    -webkit-padding-start: 8px;
    padding-inline-start: 8px
}

.mx_ThreadView .mx_EventTile[data-layout=group] .mx_EventTile_senderDetails a {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    max-width: 100%;
    min-width: 0;
    min-width: auto;
    -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;
    top: 2px
}

.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(var(--BaseCard_EventTile-spacing-inline) * -1);
    z-index: auto
}

.mx_ThreadView .mx_EventTile[data-layout=bubble] .mx_ReactionsRow {
    position: relative
}

.mx_ThreadView .mx_EventTile[data-layout=bubble] .mx_EventTile_line.mx_EventTile_mediaLine {
    padding-block: 0;
    -webkit-padding-start: 0;
    max-width: var(--EventBubbleTile_line-max-width);
    padding-inline-start: 0
}

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

.mx_ThreadView .mx_GenericEventListSummary[data-layout=group] > .mx_EventTile_line, .mx_ThreadView .mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line {
    -webkit-padding-start: var(--ThreadView_group_spacing-start);
    padding-inline-start: var(--ThreadView_group_spacing-start);
    -webkit-padding-end: var(--ThreadView_group_spacing-end);
    padding-inline-end: var(--ThreadView_group_spacing-end)
}

.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 {
    font-size: .8125rem;
    padding-top: 0
}

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_avatar, .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_e2eIcon {
    margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
    top: 0
}

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

.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)
}

.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: 0
}

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout=group] .mx_DisambiguatedProfile {
    font-size: .8125rem
}

.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout=group] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
    inset-block-start: -2rem
}

.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 dl, .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 p, .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, .mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout=group] .mx_EventTile_content .markdown-body ul {
    margin-bottom: 4px
}

.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;
    gap: 8px;
    justify-content: space-between;
    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
}

@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: #a1b2d1;
    -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;
    --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
}

.mx_IRCLayout .mx_ReplyChain .mx_DisambiguatedProfile {
    background: transparent;
    width: auto;
    -webkit-box-ordinal-group: initial;
    -ms-flex-order: initial;
    order: 0;
    -ms-flex-negative: initial;
    flex-shrink: 1
}

.mx_IRCLayout .mx_ReplyChain .mx_EventTile_emote > .mx_EventTile_avatar {
    margin-left: 0
}

.mx_IRCLayout .mx_ReplyChain .mx_MessageTimestamp {
    width: auto
}

.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;
    cursor: col-resize;
    height: 100%;
    inset-inline-start: calc(46px + var(--icon-width) + var(--right-padding) + var(--name-width) + var(--right-padding));
    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));
    position: absolute;
    width: 15px;
    width: var(--resizer-width);
    z-index: 100
}

.mx_JumpToBottomButton {
    bottom: 12px;
    height: 50px;
    position: absolute;
    right: 24px;
    text-align: center;
    width: 38px;
    z-index: 1000
}

.mx_JumpToBottomButton_badge {
    background-color: var(--cpd-color-icon-secondary);
    border-radius: 16px;
    color: var(--cpd-color-text-on-solid-primary);
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    line-height: .875rem;
    padding: 0 4px;
    position: relative;
    text-align: center;
    top: -12px
}

.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
    background-color: var(--cpd-color-icon-critical-primary)
}

.mx_JumpToBottomButton_scrollDown {
    background: var(--timeline-background-color);
    border: 1.3px solid var(--cpd-color-icon-tertiary);
    border-radius: 19px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 38px;
    position: relative
}

.mx_JumpToBottomButton_scrollDown:before {
    background: var(--cpd-color-icon-tertiary);
    content: "";
    inset: 0;
    -webkit-mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg);
    mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg);
    -webkit-mask-position: center 6px;
    mask-position: center 6px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    position: absolute;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

:root {
    --RoomHeader-indicator-dot-size: 8px;
    --RoomHeader-indicator-dot-offset: -3px;
    --RoomHeader-indicator-pulseColor: var(--alert, #ff5b55)
}

.mx_LegacyRoomHeader {
    -webkit-box-flex: 0;
    background-color: var(--timeline-background-color);
    border-bottom: 1px solid var(--roomlist-separator-color);
    -ms-flex: 0 0 50px;
    flex: 0 0 50px
}

.mx_LegacyRoomHeader .mx_LegacyRoomHeader_icon {
    height: 12px;
    width: 12px
}

.mx_LegacyRoomHeader .mx_LegacyRoomHeader_icon.mx_LegacyRoomHeader_icon_video {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    height: 14px;
    -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: 100%;
    mask-size: 100%;
    width: 14px
}

.mx_LegacyRoomHeader .mx_LegacyRoomHeader_icon.mx_E2EIcon {
    height: 100%;
    margin: 0
}

.mx_LegacyRoomHeader .mx_CallDuration {
    font-size: .8125rem;
    margin-top: .0625rem
}

.mx_LegacyRoomHeader_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid var(--cpd-color-alpha-gray-400);
    min-width: 0;
    padding: 10px 20px 9px 16px
}

.mx_LegacyRoomHeader_wrapper .mx_InviteOnlyIcon_large {
    margin: 0
}

.mx_LegacyRoomHeader_wrapper .mx_BetaCard_betaPill {
    margin-right: 8px
}

.mx_LegacyRoomHeader_name {
    -webkit-box-flex: 0;
    color: var(--timeline-text-color);
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    font: var(--cpd-font-heading-sm-semibold);
    font-weight: var(--cpd-font-weight-semibold);
    min-height: 24px;
    overflow: hidden;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 3px;
    padding: 1px 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx_LegacyRoomHeader_name:hover {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882)
}

.mx_LegacyRoomHeader_name .mx_LegacyRoomHeader_nametext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_LegacyRoomHeader_name .mx_LegacyRoomHeader_chevron {
    -ms-flex-item-align: center;
    align-self: center;
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    height: 20px;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -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
}

.mx_LegacyRoomHeader_name.mx_LegacyRoomHeader_name--textonly {
    cursor: inherit
}

.mx_LegacyRoomHeader_name.mx_LegacyRoomHeader_name--textonly:hover {
    background-color: transparent;
    background-color: initial
}

.mx_LegacyRoomHeader_name[aria-expanded=true] {
    background-color: var(--cpd-color-alpha-gray-400)
}

.mx_LegacyRoomHeader_name[aria-expanded=true] .mx_LegacyRoomHeader_chevron {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.mx_LegacyRoomHeader_settingsHint {
    color: var(--timeline-text-color) !important
}

.mx_LegacyRoomHeader_searchStatus {
    font-weight: 400;
    opacity: .6
}

.mx_RoomTopic {
    cursor: pointer;
    position: relative
}

.mx_LegacyRoomHeader_topic {
    -webkit-box-flex: 1;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    -ms-flex: 1;
    flex: 1;
    font: var(--cpd-font-body-sm-regular);
    line-height: 1rem;
    max-height: 2rem;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box
}

.mx_LegacyRoomHeader_topic .mx_Emoji {
    font-size: inherit
}

.mx_LegacyRoomHeader_avatar {
    -webkit-box-flex: 0;
    cursor: pointer;
    -ms-flex: 0;
    flex: 0;
    margin: 0 7px;
    position: relative
}

.mx_LegacyRoomHeader_button {
    cursor: pointer;
    -webkit-box-flex: 0;
    border-radius: 100%;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 32px;
    margin-left: 1px;
    margin-right: 1px;
    position: relative;
    width: 32px
}

.mx_LegacyRoomHeader_button:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 24px;
    left: 4px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 4px;
    width: 24px
}

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

.mx_LegacyRoomHeader_button:hover:before {
    background-color: var(--cpd-color-icon-primary)
}

.mx_LegacyRoomHeader_button_unreadIndicator_bg {
    background: var(--timeline-background-color);
    border-radius: 50%;
    height: 8px;
    height: var(--RoomHeader-indicator-dot-size);
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 8px;
    width: var(--RoomHeader-indicator-dot-size)
}

.mx_LegacyRoomHeader_button_unreadIndicator, .mx_LegacyRoomHeader_button_unreadIndicator_bg {
    margin: 4px;
    position: absolute;
    right: -3px;
    right: var(--RoomHeader-indicator-dot-offset);
    top: -3px;
    top: var(--RoomHeader-indicator-dot-offset)
}

.mx_LegacyRoomHeader_button_unreadIndicator.mx_Indicator_highlight {
    background: var(--cpd-color-icon-critical-primary);
    -webkit-box-shadow: var(--cpd-color-icon-critical-primary);
    box-shadow: var(--cpd-color-icon-critical-primary)
}

.mx_LegacyRoomHeader_button_unreadIndicator.mx_Indicator_notification {
    background: var(--cpd-color-icon-success-primary);
    -webkit-box-shadow: var(--cpd-color-icon-success-primary);
    box-shadow: var(--cpd-color-icon-success-primary)
}

.mx_LegacyRoomHeader_button_unreadIndicator.mx_Indicator_activity {
    background: var(--cpd-color-icon-primary);
    -webkit-box-shadow: var(--cpd-color-icon-primary);
    box-shadow: var(--cpd-color-icon-primary)
}

.mx_LegacyRoomHeader_button--unread:before {
    background-color: var(--cpd-color-icon-tertiary) !important
}

.mx_LegacyRoomHeader_button--highlight:before {
    background-color: var(--cpd-color-icon-primary) !important
}

.mx_LegacyRoomHeader_forgetButton:before {
    -webkit-mask-image: url(../../img/element-icons/leave.9cf503d.svg);
    mask-image: url(../../img/element-icons/leave.9cf503d.svg);
    width: 26px
}

.mx_LegacyRoomHeader_appsButton:before {
    -webkit-mask-image: url(../../img/element-icons/room/apps.931b680.svg);
    mask-image: url(../../img/element-icons/room/apps.931b680.svg)
}

.mx_LegacyRoomHeader_appsButton_highlight:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_LegacyRoomHeader_searchButton: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_LegacyRoomHeader_inviteButton:before {
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    mask-image: url(../../img/element-icons/room/invite.440bc20.svg)
}

.mx_LegacyRoomHeader_voiceCallButton:before {
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px;
    mask-size: 20px
}

.mx_LegacyRoomHeader_videoCallButton: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_LegacyRoomHeader_freedomIcon:before, .mx_LegacyRoomHeader_layoutButton--freedom:before {
    -webkit-mask-image: url(../../img/element-icons/call/freedom.3785dd5.svg);
    mask-image: url(../../img/element-icons/call/freedom.3785dd5.svg)
}

.mx_LegacyRoomHeader_layoutButton--spotlight:before, .mx_LegacyRoomHeader_spotlightIcon:before {
    -webkit-mask-image: url(../../img/element-icons/call/spotlight.7864fc7.svg);
    mask-image: url(../../img/element-icons/call/spotlight.7864fc7.svg)
}

.mx_LegacyRoomHeader_closeButton:before {
    -webkit-mask-image: url(../../img/cancel.f8ee58c.svg);
    mask-image: url(../../img/cancel.f8ee58c.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px;
    mask-size: 20px
}

.mx_LegacyRoomHeader_closeButton:hover {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial
}

.mx_LegacyRoomHeader_closeButton:hover:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary))
}

.mx_LegacyRoomHeader_minimiseButton:before {
    -webkit-mask-image: url(../../img/element-icons/reduce.12b1369.svg);
    mask-image: url(../../img/element-icons/reduce.12b1369.svg)
}

.mx_LegacyRoomHeader_layoutMenu .mx_IconizedContextMenu_icon:before {
    background: var(--timeline-text-color);
    content: "";
    display: block;
    height: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    width: 16px
}

@media only screen and (max-width: 480px) {
    .mx_LegacyRoomHeader_wrapper {
        margin: 0;
        padding: 0
    }

    .mx_LegacyRoomHeader {
        overflow: hidden
    }
}

.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide {
    cursor: pointer;
    height: 18px;
    width: 18px
}

.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40px;
    flex: 0 0 40px;
    visibility: hidden
}

.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide:focus-visible:focus img, .mx_LinkPreviewGroup:hover .mx_LinkPreviewGroup_hide img {
    visibility: visible
}

.mx_LinkPreviewGroup > .mx_AccessibleButton {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    text-align: center
}

.mx_LinkPreviewWidget {
    -webkit-column-gap: 4px;
    -moz-column-gap: 4px;
    column-gap: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 16px 0 16px auto;
    -webkit-border-start: 2px solid #ddd;
    border-inline-start: 2px solid #ddd;
    border-radius: 2px;
    color: var(--timeline-text-secondary-color)
}

.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
    margin-bottom: 6px;
    margin-top: 6px
}

.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_caption, .mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_image {
    -webkit-margin-start: 16px;
    margin-inline-start: 16px;
    min-width: 0
}

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_image {
    -webkit-box-flex: 0;
    cursor: pointer;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    text-align: center
}

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_caption {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden
}

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_description, .mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal
}

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title {
    font-weight: 700;
    -webkit-line-clamp: 2
}

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title .mx_LinkPreviewWidget_siteName {
    font-weight: 400
}

.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_description {
    margin-top: 8px;
    word-wrap: break-word;
    -webkit-line-clamp: 3
}

.mx_LiveContentSummary {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_LiveContentSummary .mx_LiveContentSummary_text:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 4px;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    vertical-align: text-bottom;
    width: 16px
}

.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_video:before {
    -webkit-mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg);
    mask-image: url(../../img/element-icons/call/video-call.515f9f9.svg)
}

.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_LiveContentSummary .mx_LiveContentSummary_participants:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 2px;
    -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;
    vertical-align: text-bottom;
    width: 16px
}

.mx_MemberList {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 0
}

.mx_MemberList .mx_Spinner {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

.mx_MemberList .mx_SearchBox {
    margin-bottom: 5px
}

.mx_MemberList h2 {
    color: #edf3ff;
    font-size: .8125rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin-bottom: 4px;
    margin-top: 8px;
    padding-left: 3px;
    padding-right: 12px;
    text-transform: uppercase
}

.mx_MemberList .mx_AutoHideScrollbar {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0
}

.mx_MemberList_chevron {
    margin-top: -15px;
    position: absolute;
    right: 35px
}

.mx_MemberList_border {
    overflow-y: auto;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px
}

.mx_MemberList_query {
    height: 16px
}

.mx_MemberList_query[type=text] {
    font-size: .75rem
}

.mx_MemberList_wrapper {
    padding: 10px
}

.mx_MemberList_invite {
    margin: 0 var(--cpd-space-2x);
    width: calc(100% - var(--cpd-space-4x))
}

.mx_MessageComposer_wrapper {
    border-top: 1px solid var(--roomlist-separator-color);
    margin: auto;
    padding-left: 42px;
    padding-right: 16px;
    position: relative;
    vertical-align: middle
}

.mx_MessageComposer_replaced_wrapper {
    margin-left: auto;
    margin-right: auto
}

.mx_MessageComposer_replaced_valign {
    display: table-cell;
    height: 60px;
    vertical-align: middle
}

.mx_MessageComposer_roomReplaced_icon {
    float: left;
    height: 31px;
    margin-right: 20px;
    margin-top: 5px;
    width: 31px
}

.mx_MessageComposer_roomReplaced_header {
    font-weight: 700
}

.mx_MessageComposer_autocomplete_wrapper {
    height: 0;
    position: relative
}

.mx_MessageComposer_row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%
}

.mx_MessageComposer_actions, .mx_MessageComposer_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_MessageComposer_actions {
    gap: 6px
}

.mx_MessageComposer .mx_MessageComposer_avatar {
    left: 26px;
    position: absolute
}

.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
    display: block
}

.mx_MessageComposer_composecontrols {
    width: 100%
}

.mx_MessageComposer_e2eIconWrapper {
    height: 12px
}

.mx_MessageComposer_e2eIcon.mx_E2EIcon {
    height: 12px;
    left: 20px;
    margin-left: 3px;
    margin-right: 0;
    position: absolute;
    width: 12px
}

.mx_MessageComposer_noperm_error {
    color: var(--timeline-text-secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-style: italic;
    height: 60px;
    width: 100%;
    -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 {
    cursor: text
}

.mx_MessageComposer_input, .mx_MessageComposer_input_wrapper {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_MessageComposer_input {
    min-height: 60px;
    vertical-align: middle;
    -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, .04);
    border-radius: 3px;
    padding: 10px
}

.mx_MessageComposer_input textarea {
    background-color: var(--timeline-background-color);
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--timeline-text-color);
    display: block;
    font: var(--cpd-font-body-md-regular);
    margin-bottom: 6px;
    margin-top: 6px;
    max-height: 120px;
    outline: none;
    overflow: auto;
    padding: 0;
    resize: none;
    width: 100%
}

.mx_MessageComposer_input textarea::-moz-placeholder {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    line-height: 100%;
    opacity: 1
}

.mx_MessageComposer_input textarea::-webkit-input-placeholder {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_MessageComposer_editor {
    max-height: 120px;
    min-height: 19px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    word-break: break-word
}

.mx_MessageComposer_editor > :first-child {
    margin-top: 0 !important
}

.mx_MessageComposer_editor > :last-child {
    margin-bottom: 0 !important
}

.mx_MessageComposer_input_error {
    -webkit-animation: visualbell .2s;
    animation: visualbell .2s
}

.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;
    border-radius: 50%;
    cursor: pointer;
    height: 26px;
    height: var(--size);
    line-height: 26px;
    line-height: var(--size);
    padding-left: 26px;
    padding-left: var(--size);
    position: relative;
    width: auto
}

.mx_MessageComposer_button:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 20px;
    left: 3px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 3px;
    width: 20px;
    z-index: 2
}

.mx_MessageComposer_button:after {
    border-radius: 50%;
    content: "";
    height: var(--size);
    left: 0;
    position: absolute;
    top: 0;
    width: var(--size);
    z-index: 0
}

.mx_MessageComposer_button:hover:after {
    background: var(--cpd-color-bg-subtle-primary)
}

.mx_MessageComposer_button:hover:before {
    background-color: var(--cpd-color-icon-primary)
}

.mx_MessageComposer_button:last-child {
    margin-right: auto
}

.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu:after {
    background: var(--cpd-color-bg-subtle-primary)
}

.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu:before {
    background-color: var(--cpd-color-icon-primary);
    z-index: 2
}

.mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_wrapper {
    margin-bottom: 12px;
    margin-top: 6px;
    padding-left: 16px
}

.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: 40px
}

.mx_MessageComposer_wysiwyg .mx_MediaBody {
    padding-bottom: 4px;
    padding-top: 4px
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button {
    --size: 26px;
    border-radius: 5px;
    cursor: pointer;
    height: 26px;
    height: var(--size);
    line-height: 26px;
    line-height: var(--size);
    padding-left: 26px;
    padding-left: var(--size);
    position: relative;
    width: auto
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:before {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary));
    content: "";
    height: 20px;
    left: 3px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 3px;
    width: 20px;
    z-index: 2
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:after {
    border-radius: 5px;
    content: "";
    height: var(--size);
    left: 0;
    position: absolute;
    top: 0;
    width: var(--size);
    z-index: 0
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover:after {
    background: var(--panels, var(--cpd-color-gray-600))
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff)
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu:after {
    background: var(--accent-color-300)
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu:before {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    z-index: 2
}

.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled):before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

.mx_MessageComposer_upload:before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg);
    mask-image: url(../../img/element-icons/room/composer/attach.7eed7d0.svg)
}

.mx_MessageComposer_poll:before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg);
    mask-image: url(../../img/element-icons/room/composer/poll.a8ee2f3.svg)
}

.mx_MessageComposer_voiceMessage:before {
    -webkit-mask-image: url(../../img/element-icons/mic.cf0a544.svg);
    mask-image: url(../../img/element-icons/mic.cf0a544.svg)
}

.mx_MessageComposer_voiceBroadcast:before {
    -webkit-mask-image: url(../../img/element-icons/live.3af3890.svg);
    mask-image: url(../../img/element-icons/live.3af3890.svg)
}

.mx_MessageComposer_plain_text:before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/plain_text.ad262e9.svg);
    mask-image: url(../../img/element-icons/room/composer/plain_text.ad262e9.svg)
}

.mx_MessageComposer_rich_text:before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/rich_text.a74f6cc.svg);
    mask-image: url(../../img/element-icons/room/composer/rich_text.a74f6cc.svg)
}

.mx_MessageComposer_location:before {
    -webkit-mask-image: url(../../img/element-icons/room/composer/location.d0dc71f.svg);
    mask-image: url(../../img/element-icons/room/composer/location.d0dc71f.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(../../img/image-view/more.6adb72c.svg);
    mask-image: url(../../img/image-view/more.6adb72c.svg)
}

.mx_MessageComposer_sendMessage {
    background-color: var(--cpd-color-icon-accent-tertiary);
    border-radius: 100%;
    cursor: pointer;
    height: 32px;
    position: relative;
    width: 32px
}

.mx_MessageComposer_sendMessage:before {
    background-color: var(--cpd-color-icon-on-solid-primary);
    content: "";
    height: 16px;
    left: 9px;
    -webkit-mask-image: url(../../img/element-icons/send-message.4b52f53.svg);
    mask-image: url(../../img/element-icons/send-message.4b52f53.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 8px;
    width: 16px
}

.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
    min-height: 50px
}

.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
    height: 50px
}

.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 {
    background-color: var(--timeline-background-color);
    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
    border-radius: 8px;
    cursor: pointer;
    display: none;
    height: 32px;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 192px;
    z-index: 1000
}

.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
    display: block
}

.mx_MessageComposerFormatBar > * {
    display: inline-block;
    margin: 2px;
    position: relative;
    white-space: nowrap
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
    background: none;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 28px;
    vertical-align: middle;
    width: 28px
}

.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 {
    background-color: var(--cpd-color-icon-secondary);
    content: "";
    height: 100%;
    left: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    top: 0;
    width: 100%
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover:after {
    background-color: var(--cpd-color-icon-primary)
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconBold:after {
    -webkit-mask-image: url(../../img/element-icons/room/format-bar/bold.78873b8.svg);
    mask-image: url(../../img/element-icons/room/format-bar/bold.78873b8.svg)
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconItalic:after {
    -webkit-mask-image: url(../../img/element-icons/room/format-bar/italic.bc981b2.svg);
    mask-image: url(../../img/element-icons/room/format-bar/italic.bc981b2.svg)
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconStrikethrough:after {
    -webkit-mask-image: url(../../img/element-icons/room/format-bar/strikethrough.2c63d5c.svg);
    mask-image: url(../../img/element-icons/room/format-bar/strikethrough.2c63d5c.svg)
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconQuote:after {
    -webkit-mask-image: url(../../img/element-icons/room/format-bar/quote.72d307f.svg);
    mask-image: url(../../img/element-icons/room/format-bar/quote.72d307f.svg)
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconCode:after {
    -webkit-mask-image: url(../../img/element-icons/room/format-bar/code.14db777.svg);
    mask-image: url(../../img/element-icons/room/format-bar/code.14db777.svg)
}

.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_buttonIconInsertLink:after {
    -webkit-mask-image: url(../../img/element-icons/link.e24e5a8.svg);
    mask-image: url(../../img/element-icons/link.e24e5a8.svg);
    -webkit-mask-size: 18px;
    mask-size: 18px
}

.mx_MessageComposerFormatBar_buttonTooltip {
    font-size: .8125rem;
    font-weight: var(--cpd-font-weight-semibold);
    min-width: 54px;
    text-align: center;
    white-space: nowrap
}

.mx_MessageComposerFormatBar_buttonTooltip .mx_MessageComposerFormatBar_tooltipShortcut {
    font-size: .5625rem;
    opacity: .7
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    gap: 14px 12px;
    margin-top: 28px
}

.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
    display: inline-block;
    line-height: 1.5rem
}

.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton:not(.mx_AccessibleButton_kind_primary_outline):before {
    background-color: #fff;
    content: "";
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    vertical-align: text-bottom;
    width: 20px
}

.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 {
    font-size: 1.5rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin-top: 24px
}

.mx_NewRoomIntro > p {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    margin: 0
}

.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
    display: none
}

.mx_NotificationBadge.mx_NotificationBadge_visible {
    background-color: var(--roomlist-text-secondary-color);
    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_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
    background-color: var(--cpd-color-icon-primary);
    border-radius: 8px;
    height: 8px;
    width: 8px
}

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot .mx_NotificationBadge_count {
    display: none
}

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot.mx_NotificationBadge_level_notification {
    background-color: var(--cpd-color-icon-success-primary)
}

.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 {
    height: 16px;
    -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
}

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
    border-radius: 1rem;
    height: 1rem;
    width: 1rem
}

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
    border-radius: 1rem;
    height: 1rem;
    width: 1.625rem
}

.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
    color: var(--cpd-color-text-on-solid-primary);
    font-size: .625rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .875rem
}

.mx_PinnedEventTile {
    display: grid;
    grid-template-areas:"avatar name remove" "content content content" "footer footer footer";
    grid-template-columns:24px auto 24px;
    grid-template-rows:-webkit-max-content auto -webkit-max-content;
    grid-template-rows:max-content auto max-content;
    min-height: 40px;
    padding: 0 4px 12px;
    width: 100%;
    grid-row-gap: 12px;
    grid-column-gap: 8px
}

.mx_PinnedEventTile + .mx_PinnedEventTile {
    border-top: 1px solid #000;
    padding: 12px 4px
}

.mx_PinnedEventTile .mx_PinnedEventTile_footer, .mx_PinnedEventTile .mx_PinnedEventTile_message, .mx_PinnedEventTile .mx_PinnedEventTile_sender, .mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar, .mx_PinnedEventTile .mx_PinnedEventTile_unpinButton {
    min-width: 0
}

.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar {
    grid-area: avatar
}

.mx_PinnedEventTile .mx_PinnedEventTile_sender {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    grid-area: name;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton {
    border-radius: 8px;
    grid-area: remove;
    height: 24px;
    position: relative;
    visibility: hidden;
    width: 24px
}

.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:hover {
    background-color: var(--timeline-text-secondary-color)
}

.mx_PinnedEventTile .mx_PinnedEventTile_unpinButton:before {
    background: #edf3ff;
    background: var(--secondary-content, #edf3ff);
    content: "";
    height: inherit;
    -webkit-mask-image: url(../../img/image-view/close.c2af4a8.svg);
    mask-image: url(../../img/image-view/close.c2af4a8.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 8px;
    mask-size: 8px;
    position: absolute;
    width: inherit
}

.mx_PinnedEventTile .mx_PinnedEventTile_message {
    grid-area: content
}

.mx_PinnedEventTile .mx_PinnedEventTile_footer {
    font-size: .625rem;
    grid-area: footer;
    line-height: 12px
}

.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_PinnedEventTile_timestamp {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline;
    display: initial;
    width: auto
}

.mx_PinnedEventTile .mx_PinnedEventTile_footer .mx_AccessibleButton_kind_link {
    margin-left: 12px
}

.mx_PinnedEventTile:hover .mx_PinnedEventTile_unpinButton {
    visibility: visible
}

.mx_PresenceLabel {
    font-size: .6875rem;
    opacity: .5
}

.mx_ReadReceiptGroup {
    --ReadReceiptGroup_EventBubbleTile-spacing-end: 78px;
    display: inline-block;
    position: relative;
    -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;
    border-radius: 6px;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 16px;
    padding: 4px
}

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_button.mx_AccessibleButton:hover {
    background: var(--timeline-highlights-color)
}

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_remainder {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .6875rem;
    line-height: 1rem;
    margin-right: 4px
}

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container {
    display: block;
    height: 100%;
    position: relative
}

.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container .mx_BaseAvatar {
    border: 1px solid var(--timeline-background-color);
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 14px;
    position: absolute;
    -webkit-transition: left .1s ease-out, top .3s ease-out;
    transition: left .1s ease-out, top .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;
    width: 14px;
    will-change: left, top
}

.mx_ReadReceiptGroup_popup {
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: 300px;
    width: 220px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 12px;
    line-height: 15px;
    right: 0;
    text-align: left
}

.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;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 15px;
    margin: 16px 16px 8px;
    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;
    border-radius: 8px;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0 12px;
    padding: 4px
}

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:hover {
    background: #343a46;
    background: var(--menu-selected-color, #343a46)
}

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:last-child {
    margin-bottom: 8px
}

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_BaseAvatar {
    margin: 6px 8px;
    -ms-flex-item-align: center;
    align-self: center;
    justify-self: center;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name .mx_ReadReceiptGroup_secondary {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_ReadReceiptGroup_person--tooltip {
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ReplyPreview {
    background: var(--timeline-background-color);
    border: 1px solid var(--roomlist-separator-color);
    border-bottom: none;
    max-height: 50vh;
    overflow: auto
}

.mx_ReplyPreview .mx_ReplyPreview_section {
    border-bottom: 1px solid var(--roomlist-separator-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    padding: 8px 8px 0 0;
    row-gap: 8px
}

.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    color: var(--timeline-text-color);
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    font-weight: 400;
    justify-content: space-between;
    opacity: .4
}

.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel {
    background-color: var(--timeline-text-color);
    height: 18px;
    -webkit-mask: url(../../img/cancel.f8ee58c.svg);
    mask: url(../../img/cancel.f8ee58c.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 18px;
    mask-size: 18px;
    min-height: 18px;
    min-width: 18px;
    width: 18px
}

.mx_RoomView_body .mx_ReplyPreview {
    border-radius: 8px 8px 0 0;
    -webkit-box-shadow: 0 -16px 32px tranparent;
    box-shadow: 0 -16px 32px tranparent
}

.mx_ReplyTile {
    font: var(--cpd-font-body-md-regular);
    padding: 2px 0;
    position: relative
}

.mx_ReplyTile.mx_ReplyTile_audio .mx_MFileBody_info_icon:before {
    -webkit-mask-image: url(../../img/element-icons/speaker.65cebab.svg);
    mask-image: url(../../img/element-icons/speaker.65cebab.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 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: grid;
    grid-template:"sender" auto "message" auto/100%;
    text-decoration: none;
    -webkit-transition: color .15s ease;
    transition: color .15s ease;
    grid-gap: 2px;
    gap: 2px;
    max-width: 100%
}

.mx_ReplyTile > a:hover {
    color: var(--timeline-text-color)
}

.mx_ReplyTile .mx_RedactedBody {
    line-height: 1.125rem
}

.mx_ReplyTile .mx_HiddenBody, .mx_ReplyTile .mx_RedactedBody {
    padding: 4px 0 2px 20px
}

.mx_ReplyTile .mx_HiddenBody:before, .mx_ReplyTile .mx_RedactedBody:before {
    height: 13px;
    top: 3px;
    width: 13px
}

.mx_ReplyTile .mx_EventTile_content {
    display: -webkit-box;
    grid-area: message;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body.mx_EventTile_bigEmoji {
    font-size: .875rem !important;
    line-height: 1.375rem !important
}

.mx_ReplyTile .mx_EventTile_content .mx_EventTile_edited, .mx_ReplyTile .mx_EventTile_content .mx_EventTile_lineNumbers {
    display: none
}

.mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre {
    display: -webkit-box;
    overflow-x: scroll;
    overflow-y: hidden;
    text-overflow: ellipsis;
    -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 {
    gap: 4px;
    grid-template:"sender        message" auto/-webkit-max-content auto;
    grid-template:"sender        message" auto/max-content auto
}

.mx_ReplyTile .mx_ReplyTile_sender {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-area: sender;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px
}

.mx_ReplyTile .mx_ReplyTile_sender .mx_DisambiguatedProfile {
    display: inline-block;
    font: var(--cpd-font-body-md-regular);
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ReplyTile .mx_ReplyTile_sender .mx_BaseAvatar {
    line-height: 14px
}

.mx_RoomBreadcrumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -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
}

.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
    margin-right: 8px;
    width: 32px
}

.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
    -webkit-transform: translateX(-40px);
    transform: translateX(-40px)
}

.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform .64s cubic-bezier(.66, .02, .36, 1);
    transition: -webkit-transform .64s cubic-bezier(.66, .02, .36, 1);
    transition: transform .64s cubic-bezier(.66, .02, .36, 1);
    transition: transform .64s cubic-bezier(.66, .02, .36, 1), -webkit-transform .64s cubic-bezier(.66, .02, .36, 1)
}

.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
    font: var(--cpd-font-body-md-semibold);
    height: 32px;
    line-height: 32px
}

.mx_RoomBreadcrumbs_Tooltip {
    margin-left: -42px;
    margin-top: -42px
}

.mx_RoomCallBanner {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    background-color: #21262c;
    background-color: var(--system, #21262c);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--timeline-text-color);
    cursor: pointer;
    padding: 12px 16px
}

.mx_RoomCallBanner, .mx_RoomCallBanner_text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.mx_RoomCallBanner_text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-align: center
}

.mx_RoomCallBanner_label {
    color: var(--timeline-text-color);
    font-weight: var(--cpd-font-weight-semibold);
    padding-right: 8px
}

.mx_RoomCallBanner_label:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    vertical-align: middle;
    mask-position-y: center;
    height: 1.2em;
    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);
    width: 16px
}

.mx_RoomHeader {
    background-color: var(--timeline-background-color);
    border-bottom: 1px solid var(--cpd-color-alpha-gray-400);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 64px;
    padding: 0 var(--cpd-space-3x);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.mx_RoomHeader:hover {
    background-color: var(--cpd-color-gray-200)
}

.mx_RoomHeader_infoWrapper {
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    background: initial;
    border: initial;
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 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;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    cursor: pointer;
    gap: var(--cpd-space-3x);
    justify-content: flex-start;
    text-align: left
}

.mx_RoomHeader_info {
    padding-right: var(--cpd-space-13x)
}

.mx_RoomHeader_truncated {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all
}

.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_topic {
    height: 0;
    opacity: 0;
    -webkit-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
    -webkit-transition: all var(--transition-standard) ease .1s;
    transition: all var(--transition-standard) ease .1s
}

.mx_RoomHeader_topic .mx_Emoji {
    font-size: inherit
}

.mx_RoomHeader:hover .mx_RoomHeader_topic {
    height: 1.21875rem;
    opacity: 1
}

.mx_RoomHeader:hover .mx_RoomHeader_topic a:hover {
    text-decoration: underline
}

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

.mx_RoomHeader .mx_FacePile {
    background: var(--timeline-background-color);
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 9999px;
    cursor: pointer;
    gap: var(--cpd-space-2x);
    padding: var(--cpd-space-1-5x);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mx_RoomHeader .mx_FacePile > div {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_RoomHeader .mx_FacePile:hover {
    background: var(--cpd-color-bg-subtle-primary);
    color: var(--timeline-text-color)
}

.mx_RoomHeader .mx_BaseAvatar {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_RoomInfoLine {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline-block
}

.mx_RoomInfoLine:before {
    content: "";
    display: inline-block;
    height: 1.2em;
    mask-position-y: center;
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    margin-right: 6px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: text-bottom
}

.mx_RoomInfoLine.mx_RoomInfoLine_public:before {
    -webkit-mask-image: url(../../img/globe.0408a7a.svg);
    mask-image: url(../../img/globe.0408a7a.svg);
    -webkit-mask-size: 12px;
    mask-size: 12px;
    width: 12px
}

.mx_RoomInfoLine.mx_RoomInfoLine_private:before {
    -webkit-mask-image: url(../../img/element-icons/lock.998ae1f.svg);
    mask-image: url(../../img/element-icons/lock.998ae1f.svg);
    -webkit-mask-size: 10px;
    mask-size: 10px;
    width: 10px
}

.mx_RoomInfoLine.mx_RoomInfoLine_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);
    -webkit-mask-size: 16px;
    mask-size: 16px;
    width: 16px
}

.mx_RoomInfoLine .mx_RoomInfoLine_members {
    color: inherit;
    font-weight: inherit;
    text-decoration: inherit
}

.mx_RoomInfoLine .mx_RoomInfoLine_members:before {
    content: "·";
    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: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: var(--cpd-font-size-body-sm);
    margin: 0
}

.mx_RoomKnocksBar_link {
    margin-left: var(--cpd-space-3x)
}

.mx_RoomKnocksBar_action, .mx_RoomKnocksBar_avatar {
    -ms-flex-item-align: center;
    align-self: center;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_RoomKnocksBar_action + .mx_RoomKnocksBar_action {
    margin-left: var(--cpd-space-3x)
}

.mx_RoomKnocksBar_avatar + .mx_RoomKnocksBar_avatar {
    margin-left: calc(var(--cpd-space-4x) * -1)
}

.mx_RoomList {
    padding-right: 7px
}

.mx_RoomList_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_RoomList_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_RoomList_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_RoomList_iconAddExistingRoom:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/hash.9de9cf7.svg);
    mask-image: url(../../img/element-icons/roomlist/hash.9de9cf7.svg)
}

.mx_RoomList_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_RoomList_iconDialpad:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/dialpad.024cc1d.svg);
    mask-image: url(../../img/element-icons/roomlist/dialpad.024cc1d.svg)
}

.mx_RoomList_iconStartChat:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/member-plus.705de31.svg);
    mask-image: url(../../img/element-icons/roomlist/member-plus.705de31.svg)
}

.mx_RoomList_iconInvite:before {
    -webkit-mask-image: url(../../img/element-icons/room/share.6a6396f.svg);
    mask-image: url(../../img/element-icons/room/share.6a6396f.svg)
}

.mx_RoomListHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_RoomListHeader .mx_RoomListHeader_contextLessTitle, .mx_RoomListHeader .mx_RoomListHeader_contextMenuButton {
    font: var(--cpd-font-heading-sm-semibold);
    font-weight: var(--cpd-font-weight-semibold);
    margin-left: 8px;
    margin-right: auto;
    overflow: hidden;
    padding: 1px 24px 1px 4px;
    position: relative;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.mx_RoomListHeader .mx_RoomListHeader_contextMenuButton {
    border-radius: 6px
}

.mx_RoomListHeader .mx_RoomListHeader_contextMenuButton:hover {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882)
}

.mx_RoomListHeader .mx_RoomListHeader_contextMenuButton:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 20px;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    right: 0;
    top: 3px;
    width: 20px
}

.mx_RoomListHeader .mx_RoomListHeader_contextMenuButton[aria-expanded=true] {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882)
}

.mx_RoomListHeader .mx_RoomListHeader_contextMenuButton[aria-expanded=true]:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.mx_RoomListHeader .mx_RoomListHeader_plusButton {
    background-color: var(--roomlist-highlights-color);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;
    margin-left: 8px;
    margin-right: 12px;
    padding: 8px;
    position: relative;
    width: 32px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_RoomListHeader .mx_RoomListHeader_plusButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 16px;
    -webkit-mask-image: url(../../img/element-icons/roomlist/plus.6af83e4.svg);
    mask-image: url(../../img/element-icons/roomlist/plus.6af83e4.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 16px
}

.mx_RoomListHeader .mx_RoomListHeader_plusButton:hover {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff)
}

.mx_RoomListHeader .mx_RoomListHeader_plusButton:hover:before {
    background-color: var(--timeline-background-color)
}

.mx_RoomListHeader_iconInvite:before {
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    mask-image: url(../../img/element-icons/room/invite.440bc20.svg)
}

.mx_RoomListHeader_iconStartChat:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/member-plus.705de31.svg);
    mask-image: url(../../img/element-icons/roomlist/member-plus.705de31.svg)
}

.mx_RoomListHeader_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_RoomListHeader_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_RoomListHeader_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_RoomListHeader_iconPlus:before {
    -webkit-mask-image: url(../../img/element-icons/plus.7b3d018.svg);
    mask-image: url(../../img/element-icons/plus.7b3d018.svg)
}

.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;
    -webkit-align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: 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 .mx_RoomPreviewBar_message p, .mx_RoomPreviewBar h3 {
    word-break: break-all;
    word-break: break-word
}

.mx_RoomPreviewBar .mx_Spinner {
    height: auto;
    margin: 10px 10px 10px 0;
    width: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
    font-size: .75rem;
    line-height: 1.25rem
}

.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
    display: inline-block;
    vertical-align: middle
}

.mx_RoomPreviewBar_actions, .mx_RoomPreviewBar_message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_RoomPreviewBar_message {
    -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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    min-width: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
    margin: 4px
}

.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
    border-radius: 8px;
    margin: 8px;
    margin: var(--container-gap-width);
    margin-right: 4px;
    margin-right: calc(var(--container-gap-width) / 2);
    margin-top: 0
}

.mx_RoomPreviewBar_dialog {
    border-radius: 4px;
    -webkit-box-sizing: content;
    box-sizing: content;
    margin: auto;
    padding: 20px;
    text-align: center;
    width: 400px
}

.mx_RoomPreviewBar_dialog, .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
}

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

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
    margin-top: 12px
}

.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
    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;
    overflow: hidden;
    white-space: pre-wrap
}

.mx_RoomPreviewBar_inviter {
    font-weight: var(--cpd-font-weight-semibold)
}

a.mx_RoomPreviewBar_inviter {
    cursor: pointer;
    text-decoration: underline
}

.mx_RoomPreviewBar_icon {
    margin-right: 8px;
    vertical-align: text-top
}

.mx_RoomPreviewBar_fullWidth {
    width: 100%
}

.mx_RoomPreviewCard {
    margin: auto;
    padding: 32px 24px !important;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    flex-grow: 1;
    font: var(--cpd-font-body-md-regular);
    max-width: 480px;
    position: relative
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_notice {
    color: var(--timeline-text-color);
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5rem;
    margin-top: 24px;
    padding-left: 28px;
    position: relative
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_notice:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 1.5rem;
    left: 0;
    -webkit-mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    mask-image: url(../../img/element-icons/room/room-summary.50ea68e.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 20px
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .9375rem;
    margin-bottom: 20px
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div {
    margin-left: 8px
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_name {
    line-height: 1.125rem
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_mxid {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    border: 3px solid #21262c;
    border: 3px solid var(--system, #21262c);
    border-radius: 28px;
    height: 50px;
    left: -15.5px;
    position: relative;
    width: 50px
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video:before {
    background-color: #fff;
    content: "";
    height: 50px;
    -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-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 22px;
    mask-size: 22px;
    position: absolute;
    width: 50px
}

.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_BetaCard_betaPill {
    inset-block-start: 32px;
    inset-inline-end: 24px;
    position: absolute
}

.mx_RoomPreviewCard h1.mx_RoomPreviewCard_name {
    margin: 16px 0 !important
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin-top: 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_RoomSublist {
    margin-bottom: 4px;
    margin-left: 8px
}

.mx_RoomSublist.mx_RoomSublist_hidden {
    display: none
}

.mx_RoomSublist:not(.mx_RoomSublist_minimized) .mx_RoomSublist_headerContainer {
    height: auto
}

.mx_RoomSublist .mx_RoomSublist_headerContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    height: 24px;
    padding-bottom: 8px
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickableContainer {
    width: 100%
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    max-width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
    height: 32px;
    position: fixed;
    width: calc(100% - 15px)
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
    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_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge {
    margin-left: 8px
}

.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge {
    margin-right: 4px
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton, .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
    border-radius: 8px;
    height: 24px;
    margin-left: 8px;
    position: relative;
    width: 24px
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before, .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before {
    background: var(--cpd-color-icon-secondary);
    content: "";
    height: 16px;
    left: 4px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 4px;
    width: 16px
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover, .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover {
    background: var(--roomlist-highlights-color)
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
    margin: 0;
    visibility: hidden;
    width: 0
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before {
    -webkit-mask-image: url(../../img/element-icons/roomlist/plus.6af83e4.svg);
    mask-image: url(../../img/element-icons/roomlist/plus.6af83e4.svg)
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:before {
    -webkit-mask-image: url(../../img/element-icons/context-menu.2c3f393.svg);
    mask-image: url(../../img/element-icons/context-menu.2c3f393.svg)
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font: var(--cpd-font-body-sm-semibold);
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn {
    display: inline-block;
    height: 14px;
    margin-right: 6px;
    position: relative;
    width: 14px
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn:before {
    background-color: var(--cpd-color-icon-secondary);
    content: "";
    height: 18px;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 18px
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn.mx_RoomSublist_collapseBtn_collapsed:before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.mx_RoomSublist:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
    height: 24px
}

.mx_RoomSublist .mx_RoomSublist_resizeBox {
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative
}

.mx_RoomSublist .mx_RoomSublist_resizeBox, .mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    overflow: hidden
}

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: clip;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 4px);
    mask-image: linear-gradient(0deg, transparent, #000 4px);
    min-height: 0
}

.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
    min-height: 0;
    min-height: auto;
    overflow: visible
}

.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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 4px;
    flex: 0 0 4px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
    border-radius: 3px;
    bottom: 0 !important;
    cursor: ns-resize;
    height: 4px !important;
    max-width: 64px;
    position: relative !important
}

.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle, .mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle {
    background-color: var(--timeline-text-color);
    opacity: .8
}

.mx_RoomSublist .mx_RoomSublist_showNButton {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .8125rem;
    height: 24px;
    line-height: 1.125rem;
    padding-bottom: 4px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
    background: #edf3ff;
    background: var(--tertiary-content, #edf3ff);
    height: 18px;
    left: -1px;
    margin-left: 12px;
    margin-right: 16px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: relative;
    width: 18px
}

.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showLessButtonChevron, .mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showMoreButtonChevron {
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.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 {
    margin-left: 8px;
    visibility: visible;
    width: 24px
}

.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;
    max-width: 100%;
    order: 1
}

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    background-color: var(--roomlist-highlights-color);
    height: 32px !important; /* !important to override hover styles */
    margin-left: 0 !important; /* !important to override hover styles */
    margin-top: 8px;
    order: 2;
    visibility: visible;
    width: 32px !important /* !important to override hover styles */
}

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before {
    left: 8px;
    top: 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
}

.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 {
    background-color: var(--roomlist-background-color);
    border-radius: 0;
    bottom: 48px;
    height: 16px;
    position: absolute;
    right: 0;
    visibility: visible;
    width: 16px;
    z-index: 1
}

.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 {
    left: 0;
    top: 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
}

.mx_RoomSublist_contextMenu {
    padding: 20px 16px;
    width: 250px
}

.mx_RoomSublist_contextMenu hr {
    border: 1px solid var(--timeline-text-color);
    margin-bottom: 16px;
    margin-right: 16px;
    margin-top: 16px;
    opacity: .1
}

.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.25rem;
    margin-bottom: 4px
}

.mx_RoomSublist_contextMenu .mx_Checkbox, .mx_RoomSublist_contextMenu .mx_StyledRadioButton {
    margin-top: 8px
}

.mx_RoomSublist_skeletonUI {
    height: 240px;
    margin-left: 4px;
    position: relative
}

.mx_RoomSublist_skeletonUI:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#3e444c), to(#3e444c00));
    background: linear-gradient(180deg, #3e444c, #3e444c00);
    content: "";
    height: 100%;
    -webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.fde3810.svg);
    mask-image: url(../../img/element-icons/roomlist/skeleton-ui.fde3810.svg);
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    -webkit-mask-size: auto 48px;
    mask-size: auto 48px;
    position: absolute;
    width: 100%
}

.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
    margin-left: 10px;
    width: 32px
}

.mx_RoomTile {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    contain: content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--cpd-font-size-body-sm);
    margin-bottom: 4px;
    padding: 4px
}

.mx_RoomTile.mx_RoomTile_hasMenuOpen, .mx_RoomTile.mx_RoomTile_selected, .mx_RoomTile:focus-within, .mx_RoomTile:hover {
    background-color: var(--roomlist-highlights-color);
    border-radius: 8px
}

.mx_RoomTile .mx_DecoratedRoomAvatar, .mx_RoomTile .mx_RoomTile_avatarContainer {
    margin-right: 10px
}

.mx_RoomTile .mx_RoomTile_details {
    min-width: 0
}

.mx_RoomTile .mx_RoomTile_titleContainer {
    height: 32px;
    min-width: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    margin-right: 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    line-height: 1.25;
    position: relative;
    top: -1px
}

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle_text, .mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title {
    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
}

.mx_RoomTile .mx_RoomTile_notificationsButton {
    margin-left: 4px
}

.mx_RoomTile .mx_RoomTile_badgeContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 16px;
    margin: auto 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
    margin-right: 2px
}

.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
    margin-left: 5px;
    margin-right: 7px
}

.mx_RoomTile .mx_RoomTile_menuButton, .mx_RoomTile .mx_RoomTile_notificationsButton {
    display: none;
    height: 20px;
    margin-bottom: auto;
    margin-top: auto;
    min-width: 20px;
    position: relative;
    width: 20px
}

.mx_RoomTile .mx_RoomTile_menuButton:before, .mx_RoomTile .mx_RoomTile_notificationsButton:before {
    background: var(--cpd-color-icon-primary);
    content: "";
    height: 16px;
    left: 2px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 2px;
    width: 16px
}

.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
    display: block
}

.mx_RoomTile .mx_RoomTile_menuButton:before {
    -webkit-mask-image: url(../../img/element-icons/context-menu.2c3f393.svg);
    mask-image: url(../../img/element-icons/context-menu.2c3f393.svg)
}

.mx_RoomTile:not(.mx_RoomTile_minimized,.mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .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):hover .mx_RoomTile_badgeContainer {
    display: none;
    height: 0;
    width: 0
}

.mx_RoomTile:not(.mx_RoomTile_minimized,.mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .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):focus-within .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):hover .mx_RoomTile_menuButton, .mx_RoomTile:not(.mx_RoomTile_minimized,.mx_RoomTile_sticky):hover .mx_RoomTile_notificationsButton {
    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
}

.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(../../img/element-icons/roomlist/favorite.9dcb53a.svg);
    mask-image: url(../../img/element-icons/roomlist/favorite.9dcb53a.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(../../img/element-icons/room/members.bcfbe84.svg);
    mask-image: url(../../img/element-icons/room/members.bcfbe84.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconFiles:before {
    -webkit-mask-image: url(../../img/element-icons/room/files.ff2ae8d.svg);
    mask-image: url(../../img/element-icons/room/files.ff2ae8d.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconPins:before {
    -webkit-mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg);
    mask-image: url(../../img/element-icons/room/pin-upright.340b3b6.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconWidgets:before {
    -webkit-mask-image: url(../../img/element-icons/room/apps.931b680.svg);
    mask-image: url(../../img/element-icons/room/apps.931b680.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconSettings:before {
    -webkit-mask-image: url(../../img/element-icons/settings.6b0c052.svg);
    mask-image: url(../../img/element-icons/settings.6b0c052.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconExport:before {
    -webkit-mask-image: url(../../img/element-icons/export.2d0320e.svg);
    mask-image: url(../../img/element-icons/export.2d0320e.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconCopyLink:before {
    -webkit-mask-image: url(../../img/element-icons/link.e24e5a8.svg);
    mask-image: url(../../img/element-icons/link.e24e5a8.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconInvite:before {
    -webkit-mask-image: url(../../img/element-icons/room/invite.440bc20.svg);
    mask-image: url(../../img/element-icons/room/invite.440bc20.svg)
}

.mx_RoomTile_contextMenu .mx_RoomTile_iconSignOut:before {
    -webkit-mask-image: url(../../img/element-icons/leave.9cf503d.svg);
    mask-image: url(../../img/element-icons/leave.9cf503d.svg)
}

.mx_RoomUpgradeWarningBar {
    background-color: #22262e;
    max-height: 235px;
    overflow: scroll;
    padding-left: 20px;
    padding-right: 20px
}

.mx_RoomUpgradeWarningBar_wrapped {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    text-align: center;
    width: 100%;
    -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;
    -webkit-align-items: center;
    justify-content: center
}

.mx_RoomUpgradeWarningBar_header {
    font-weight: 700
}

.mx_RoomUpgradeWarningBar_body, .mx_RoomUpgradeWarningBar_header, .mx_RoomUpgradeWarningBar_upgradelink {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_RoomUpgradeWarningBar_upgradelink {
    text-decoration: underline
}

.mx_RoomUpgradeWarningBar_small {
    color: var(--timeline-text-secondary-color);
    font-size: 70%
}

.mx_SearchBar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 56px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid var(--roomlist-separator-color)
}

.mx_SearchBar .mx_SearchBar_input {
    --size-button-search: 37px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    margin-left: 22px;
    min-width: calc(7em + 37px);
    min-width: calc(7em + var(--size-button-search))
}

.mx_SearchBar .mx_SearchBar_input input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mx_SearchBar .mx_SearchBar_searchButton {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    cursor: pointer;
    height: var(--size-button-search);
    -webkit-mask: url(../../img/feather-customised/search-input.5d69fb5.svg);
    mask: url(../../img/feather-customised/search-input.5d69fb5.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: var(--size-button-search)
}

.mx_SearchBar .mx_SearchBar_buttons {
    display: inherit;
    min-width: 0
}

.mx_SearchBar .mx_SearchBar_button {
    border: 0;
    border-bottom: 2px solid #0dbd8b;
    border-bottom: 2px solid var(--accent, #0dbd8b);
    color: var(--timeline-text-color);
    cursor: pointer;
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 0 0 0 22px;
    padding: 5px;
    word-break: break-all
}

.mx_SearchBar .mx_SearchBar_unselected {
    border-color: transparent;
    color: #61708b
}

.mx_SearchBar .mx_SearchBar_cancel {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    cursor: pointer;
    margin: 0 12px 0 3px;
    -webkit-mask: url(../../img/cancel.f8ee58c.svg);
    mask: url(../../img/cancel.f8ee58c.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 14px;
    mask-size: 14px;
    padding: 9px
}

.mx_SendMessageComposer {
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    font: var(--cpd-font-body-md-regular);
    line-height: 1.125rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 6px;
    min-width: 0
}

.mx_SendMessageComposer, .mx_SendMessageComposer .mx_BasicMessageComposer {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.mx_SendMessageComposer .mx_BasicMessageComposer {
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 55px
}

.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input {
    margin: auto 0;
    max-height: 140px;
    overflow-y: auto;
    padding: 3px 0
}

.mx_SpaceScopeHeader {
    display: -webkit-box;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.mx_SpaceScopeHeader .mx_BaseAvatar {
    margin-right: var(--cpd-space-2x);
    vertical-align: middle
}

.mx_Stickers_content {
    overflow: hidden
}

.mx_Stickers_content_container {
    height: 300px;
    overflow: hidden
}

#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
    border-bottom: none;
    border-left: none;
    border-right: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: auto
}

#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
    padding: 0
}

#mx_persistedElement_stickerPicker iframe {
    height: 283px
}

.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 {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    cursor: pointer;
    display: inline
}

.mx_ThirdPartyMemberInfo {
    padding: var(--cpd-space-4x)
}

.mx_ThreadSummary, .mx_ThreadSummary_content {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_ThreadSummary, .mx_ThreadSummary_icon {
    margin-top: 8px
}

.mx_ThreadSummary {
    background-color: var(--panels, var(--cpd-color-gray-600));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
    min-width: 267px;
    padding-inline: 12px 16px;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    border: 1px solid var(--panels, var(--cpd-color-gray-600));
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    clear: both;
    font: var(--cpd-font-body-sm-regular);
    justify-content: flex-start;
    overflow: hidden
}

.mx_ThreadSummary .mx_ThreadSummary_chevron {
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, #21262c), to(#e1e6ec00));
    background: linear-gradient(270deg, #21262c 50%, #e1e6ec00);
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, var(--system, #21262c)), to(var(--system-transparent, #e1e6ec00)));
    background: linear-gradient(270deg, var(--system, #21262c) 50%, var(--system-transparent, #e1e6ec00) 100%);
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateX(60px);
    transform: translateX(60px);
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    width: 60px
}

.mx_ThreadSummary .mx_ThreadSummary_chevron:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 12px;
    -webkit-mask-image: url(../../img/compound/chevron-right-12px.bc5b8f9.svg);
    mask-image: url(../../img/compound/chevron-right-12px.bc5b8f9.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 12px
}

.mx_ThreadSummary:focus, .mx_ThreadSummary:hover {
    border-color: #6f7882;
    border-color: var(--quinary-content, #6f7882)
}

.mx_ThreadSummary:focus .mx_ThreadSummary_chevron, .mx_ThreadSummary:hover .mx_ThreadSummary_chevron {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.mx_ThreadSummary .mx_ThreadSummary_content, .mx_ThreadSummary .mx_ThreadSummary_replies_amount, .mx_ThreadSummary .mx_ThreadSummary_sender {
    line-height: var(--EventTile_ThreadSummary-line-height)
}

.mx_ThreadSummary .mx_ThreadSummary_content, .mx_ThreadSummary .mx_ThreadSummary_sender {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_ThreadSummary .mx_ThreadSummary_sender {
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_ThreadSummary .mx_ThreadSummary_content {
    margin-left: 4px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_ThreadSummary .mx_ThreadSummary_replies_amount {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-weight: var(--cpd-font-weight-semibold);
    padding: 0 12px 0 8px;
    position: relative;
    white-space: nowrap
}

.mx_MessagePanel_narrow .mx_ThreadSummary {
    max-width: 100%;
    min-width: 0;
    min-width: auto;
    width: auto
}

.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 {
    background-color: var(--icon-button-color, var(--cpd-color-icon-tertiary)) !important;
    content: "";
    display: inline-block;
    height: 18px;
    -webkit-mask-image: url(../../img/element-icons/thread-summary.4b1ebec.svg);
    mask-image: url(../../img/element-icons/thread-summary.4b1ebec.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    min-width: 18px;
    vertical-align: middle;
    -webkit-margin-end: 8px;
    margin-inline-end: 8px;
    margin-top: -2px
}

a.mx_ThreadSummary_icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_TopUnreadMessagesBar {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 38px;
    z-index: 1000
}

.mx_TopUnreadMessagesBar:after {
    background-color: var(--cpd-color-bg-canvas-default);
    border: 6px solid var(--cpd-color-icon-accent-tertiary);
    border-radius: 16px;
    content: "";
    height: 4px;
    left: 11px;
    pointer-events: none;
    position: absolute;
    top: -8px;
    width: 4px
}

.mx_TopUnreadMessagesBar_scrollUp {
    background: var(--timeline-background-color);
    border: 1.3px solid var(--cpd-color-icon-tertiary);
    border-radius: 19px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    height: 38px
}

.mx_TopUnreadMessagesBar_scrollUp:before {
    background: var(--cpd-color-icon-tertiary);
    content: "";
    height: 36px;
    -webkit-mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg);
    mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    position: absolute;
    width: 36px
}

.mx_TopUnreadMessagesBar_markAsRead {
    background: var(--timeline-background-color);
    border: 1.3px solid var(--cpd-color-icon-tertiary);
    border-radius: 10px;
    display: block;
    height: 18px;
    margin: 5px auto;
    width: 18px
}

.mx_TopUnreadMessagesBar_markAsRead:before {
    background: var(--cpd-color-icon-tertiary);
    content: "";
    height: 18px;
    -webkit-mask-image: url(../../img/cancel.f8ee58c.svg);
    mask-image: url(../../img/cancel.f8ee58c.svg);
    -webkit-mask-position: 4px 4px;
    mask-position: 4px 4px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 10px;
    mask-size: 10px;
    position: absolute;
    width: 18px
}

.mx_VoiceRecordComposerTile_stop {
    border: 2px solid #6f7882;
    border-radius: 32px;
    height: 28px;
    margin-right: 2px;
    position: relative;
    width: 28px
}

.mx_VoiceRecordComposerTile_stop:after {
    background-color: #ff4b55;
    border-radius: 2px;
    content: "";
    height: 14px;
    left: 7px;
    position: absolute;
    top: 7px;
    width: 14px
}

.mx_VoiceRecordComposerTile_delete {
    background-color: #6f7882;
    height: 24px;
    margin-right: 2px;
    -webkit-mask-image: url(../../img/element-icons/trashcan.2f78f2d.svg);
    mask-image: url(../../img/element-icons/trashcan.2f78f2d.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
    width: 24px
}

.mx_VoiceRecordComposerTile_uploadingState {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin-right: 10px
}

.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 {
    height: 32px;
    margin: 6px;
    position: relative
}

.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
    padding-left: 22px
}

.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
    -webkit-animation: recording-pulse 2s infinite;
    animation: recording-pulse 2s infinite;
    background-color: #ff4b55;
    border-radius: 10px;
    content: "";
    height: 10px;
    left: 12px;
    position: absolute;
    top: 17px;
    width: 10px
}

.mx_MessageComposer_wysiwyg .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording:before {
    top: 15px
}

@-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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -18px;
    padding-top: 18px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_WhoIsTypingTile_avatars {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 82px;
    flex: 0 0 82px;
    text-align: center
}

.mx_WhoIsTypingTile_avatars > :not(:first-child) {
    margin-left: -12px
}

.mx_WhoIsTypingTile_avatars .mx_BaseAvatar, .mx_WhoIsTypingTile_remainingAvatarPlaceholder {
    border: 1px solid var(--timeline-background-color);
    border-radius: 40px
}

.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    color: var(--timeline-text-color);
    display: inline-block;
    font-size: .8em;
    height: 24px;
    line-height: 1.5rem;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: 24px
}

.mx_WhoIsTypingTile_label {
    -webkit-box-flex: 1;
    color: var(--timeline-text-color-50pct);
    -ms-flex: 1;
    flex: 1;
    font: var(--cpd-font-body-md-semibold)
}

.mx_WhoIsTypingTile_label > span {
    background-image: url(../../img/typing-indicator-2x.e13c259.gif);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 25px;
    display: block;
    padding-bottom: 15px
}

.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;
    gap: 8px;
    max-width: 100%;
    padding: 8px 3px;
    padding: 8px var(--EditWysiwygComposer-padding-inline);
    width: auto
}

.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content {
    background-color: var(--timeline-background-color);
    border: 1px solid var(--roomlist-separator-color);
    border-radius: 4px;
    max-height: 200px;
    padding: 3px 6px
}

.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content:focus {
    border-color: var(--accent-color-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;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    gap: 5px;
    justify-content: flex-end;
    -webkit-margin-start: auto;
    margin-inline-start: auto
}

.mx_EditWysiwygComposer .mx_EditWysiwygComposer_buttons .mx_AccessibleButton {
    -webkit-box-flex: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex: 1;
    flex: 1;
    min-width: 100px
}

.mx_EditWysiwygComposer .mx_FormattingButtons_Button:first-child {
    margin-left: 0
}

.mx_SendWysiwygComposer {
    -webkit-box-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font: var(--cpd-font-body-md-regular);
    line-height: 1.125rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    gap: 8px;
    justify-content: center;
    margin-right: 13px
}

.mx_SendWysiwygComposer .mx_FormattingButtons {
    margin-left: 12px
}

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor {
    border: 1px solid #6f7882;
    border-color: var(--quinary-content, #6f7882);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 6px 11px 6px 12px;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 10px
}

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_E2EIcon {
    height: 12px;
    margin: 0 0 7px;
    width: 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-bottom: 3px;
    margin-top: 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;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 2px;
    min-height: 22px;
    width: 0
}

.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content {
    margin: auto 0;
    max-height: 22rem;
    overflow-y: auto
}

.mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor {
    border-color: #6f7882;
    border-color: var(--quaternary-content, #6f7882)
}

@keyframes visualbell {
    0% {
        background-color: #800
    }
    to {
        background-color: var(--timeline-background-color)
    }
}

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

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content .caretNode {
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content br:not(:only-child) {
    display: none
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content p {
    margin-bottom: 0;
    margin-top: 0;
    min-height: 1.375rem
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ol, .mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul {
    margin-bottom: 0;
    margin-top: 0;
    -webkit-padding-start: 28px;
    padding-inline-start: 28px
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul {
    list-style-type: disc
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content blockquote {
    border-left: 2px solid var(--cpd-color-border-interactive-primary);
    border-radius: 2px;
    color: #777;
    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 {
    background-color: #2a3039;
    border: 1px solid #2a3039;
    border-radius: 2px;
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-bottom: 0;
    margin-top: 0;
    padding: 8px 12px
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *) {
    background-color: #2a3039;
    border: 1px solid #2a3039;
    border-radius: 4px;
    font-family: Inconsolata,, Apple Color Emoji, Segoe UI Emoji, Courier, monospace, Noto Color Emoji !important;
    font-family: var(--font-family-monospace, "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji") !important;
    padding: 2px
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *):empty {
    border: initial;
    padding: initial
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type] {
    background-color: var(--other-user-pill-bg-color, var(--cpd-color-bg-action-primary-rest));
    border-radius: 1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--cpd-color-text-on-solid-primary);
    cursor: inherit;
    display: inline;
    line-height: 1.0625rem;
    max-width: 100%;
    overflow: hidden;
    padding: .0625rem .4em;
    position: relative;
    text-overflow: ellipsis;
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
    white-space: nowrap
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type]:before {
    background: var(--avatar-background), var(--timeline-background-color);
    content: var(--avatar-letter);
    display: inline-block;
    height: 1rem;
    line-height: 1rem;
    min-width: 1rem;
    text-align: center;
    width: 1rem;
    -webkit-margin-start: -.4rem;
    margin-inline-start: -.4rem;
    -webkit-margin-end: .24rem;
    background-repeat: no-repeat;
    background-size: 1rem;
    border-radius: 1rem;
    color: #fff;
    color: var(--avatar-color, #fff);
    font-size: .6275rem;
    font-weight: 700;
    margin-inline-end: .24rem;
    vertical-align: .12rem
}

.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content_placeholder:before {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    content: var(--placeholder);
    display: inline-block;
    height: 0;
    overflow: visible;
    pointer-events: none;
    white-space: nowrap;
    width: 0
}

.mx_WysiwygComposer_AutoCompleteWrapper {
    position: relative
}

.mx_WysiwygComposer_AutoCompleteWrapper > .mx_Autocomplete {
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 8px
}

.mx_FormattingButtons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    gap: 8px;
    justify-content: flex-start
}

.mx_FormattingButtons .mx_FormattingButtons_Button {
    --size: 28px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 28px;
    height: var(--size);
    width: 28px;
    width: var(--size);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    border-radius: 5px;
    justify-content: center
}

.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover {
    background: var(--panels, var(--cpd-color-gray-600))
}

.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover .mx_FormattingButtons_Icon {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_FormattingButtons .mx_FormattingButtons_active {
    background: var(--accent-color-300)
}

.mx_FormattingButtons .mx_FormattingButtons_active .mx_FormattingButtons_Icon {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_FormattingButtons .mx_FormattingButtons_disabled .mx_FormattingButtons_Icon {
    color: #6f7882;
    color: var(--quinary-content, #6f7882)
}

.mx_FormattingButtons .mx_FormattingButtons_Icon {
    --size: 16px;
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    height: 16px;
    height: var(--size);
    width: 16px;
    width: var(--size)
}

.mx_FormattingButtons_Tooltip {
    padding: 0 2px
}

.mx_FormattingButtons_Tooltip .mx_FormattingButtons_Tooltip_KeyboardShortcut {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff)
}

.mx_FormattingButtons_Tooltip .mx_FormattingButtons_Tooltip_KeyboardShortcut kbd {
    display: inline-block;
    font-family: Inter, sans-serif;
    font-size: 12px;
    margin-top: 2px;
    text-align: center;
    text-transform: capitalize
}

.mx_LinkModal {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 341px;
    max-width: 600px;
    padding: 32px
}

.mx_LinkModal, .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
}

.mx_LinkModal .mx_LinkModal_content {
    -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 {
    height: 90px;
    margin-top: 8px;
    min-width: 90px;
    position: relative;
    width: 90px
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_hover {
    inset: 0;
    line-height: 90px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    -webkit-transition: opacity .08s cubic-bezier(.46, .03, .52, .96);
    transition: opacity .08s cubic-bezier(.46, .03, .52, .96);
    -webkit-transition: opacity var(--hover-transition);
    transition: opacity var(--hover-transition)
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_hover > span {
    color: var(--timeline-text-color);
    font-weight: 500;
    position: relative
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_hover .mx_AvatarSetting_hoverBg {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 90px;
    inset: 0;
    opacity: .5;
    position: absolute
}

.mx_AvatarSetting_avatar.mx_AvatarSetting_avatar_hovering .mx_AvatarSetting_hover {
    opacity: 1
}

.mx_AvatarSetting_avatar:not(.mx_AvatarSetting_avatar_hovering) .mx_AvatarSetting_hover {
    opacity: 0
}

.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 {
    cursor: pointer;
    -o-object-fit: cover;
    object-fit: cover
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder, .mx_AvatarSetting_avatar > img {
    border-radius: 90px;
    cursor: pointer;
    display: block;
    height: 90px;
    width: inherit
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder:before {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    content: "";
    inset: 0;
    -webkit-mask: url(../../img/feather-customised/user.db9209f.svg);
    mask: url(../../img/feather-customised/user.db9209f.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 36px;
    mask-size: 36px;
    position: absolute
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    border-radius: 32px;
    bottom: 0;
    height: 32px;
    position: absolute;
    right: 0;
    width: 32px
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:before {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    content: "";
    display: block;
    height: 100%;
    -webkit-mask-image: url(../../img/feather-customised/edit.59e9512.svg);
    mask-image: url(../../img/feather-customised/edit.59e9512.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 55%;
    mask-size: 55%;
    width: 100%
}

.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
    background-color: #21262c;
    background-color: var(--system, #21262c)
}

.mx_CrossSigningPanel_statusList {
    border-spacing: 0
}

.mx_CrossSigningPanel_statusList th {
    text-align: start
}

.mx_CrossSigningPanel_statusList td, .mx_CrossSigningPanel_statusList th {
    padding: 0
}

.mx_CrossSigningPanel_statusList td:first-of-type, .mx_CrossSigningPanel_statusList th:first-of-type {
    -webkit-padding-end: 1em;
    padding-inline-end: 1em
}

.mx_CrossSigningPanel_buttonRow {
    margin: 1em 0
}

.mx_CrossSigningPanel_buttonRow :nth-child(n+1) {
    -webkit-margin-end: 10px;
    margin-inline-end: 10px
}

.mx_CrossSigningPanel_advanced {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_CryptographyPanel_sessionInfo {
    border-spacing: 0;
    padding: 0
}

.mx_CryptographyPanel_sessionInfo > tr {
    padding: 0;
    vertical-align: baseline
}

.mx_CryptographyPanel_sessionInfo > tr th {
    text-align: start
}

.mx_CryptographyPanel_sessionInfo > tr td, .mx_CryptographyPanel_sessionInfo > tr th {
    padding: 0 1em 0 0
}

.mx_CryptographyPanel_importExportButtons {
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    row-gap: 8px
}

.mx_FontScalingPanel_preview {
    --FontScalingPanel_preview-padding-block: 9px;
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 10px;
    display: flow-root;
    padding: 0 16px 9px;
    padding: 0 16px var(--FontScalingPanel_preview-padding-block) 16px;
    pointer-events: none
}

.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 {
    margin-bottom: var(--cpd-space-2x) !important;
    width: 120px
}

.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 {
    cursor: pointer;
    margin-right: 68px
}

.mx_ImageSizePanel_radios .mx_ImageSizePanel_size {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    height: 148px;
    margin-bottom: 14px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 221px;
    mask-size: 221px;
    width: 221px
}

.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;
    height: 70%;
    max-height: none;
    max-width: none;
    width: 60%
}

.mx_IntegrationManager .mx_Dialog {
    overflow: hidden;
    padding: 0
}

.mx_IntegrationManager iframe {
    background-color: #fff;
    border: 0;
    height: 100%;
    width: 100%
}

.mx_IntegrationManager h3 {
    margin-block: 20px
}

.mx_IntegrationManager .mx_IntegrationManager_error, .mx_IntegrationManager .mx_IntegrationManager_loading {
    text-align: center
}

.mx_IntegrationManager .mx_IntegrationManager_error h3 {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_JoinRuleSettings_upgradeRequired {
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    border-radius: 8px;
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    font-size: .75rem;
    line-height: .9375rem;
    margin-left: 16px;
    padding: 4px 16px
}

.mx_JoinRuleSettings_spacesWithAccess > h4 {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: .9375rem;
    text-transform: uppercase
}

.mx_JoinRuleSettings_spacesWithAccess > span {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline-block;
    font: var(--cpd-font-body-md-medium);
    line-height: 32px
}

.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 {
    color: var(--timeline-text-color);
    display: block;
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5rem;
    margin-left: 14px
}

.mx_JoinRuleSettings_radioButton + span {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline-block;
    font-size: .9375rem;
    line-height: 1.5rem;
    margin-bottom: 16px;
    margin-left: 34px
}

.mx_JoinRuleSettings_radioButton + span + .mx_StyledRadioButton {
    border-top: 1px solid #6f7882;
    border-top: 1px solid var(--quinary-content, #6f7882)
}

.mx_JoinRuleSettings_labelledCheckbox {
    font: var(--cpd-font-body-md-regular);
    margin-top: var(--cpd-space-2x)
}

.mx_KeyboardShortcut kbd {
    background-color: var(--timeline-background-color);
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px #c7c7c7;
    box-shadow: 0 2px #c7c7c7;
    display: inline-block;
    min-width: 20px;
    padding: 5px;
    text-align: center;
    text-transform: capitalize
}

.mx_LayoutSwitcher_RadioButtons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    color: var(--timeline-text-color);
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 24px;
    width: 100%
}

.mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-shrink: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    -ms-flex-preferred-size: 33%;
    border: 1px solid #6f7882;
    border: 1px solid var(--quinary-content, #6f7882);
    border-radius: 10px;
    flex-basis: 33%;
    min-width: 0
}

.mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton .mx_EventTile_msgOption, .mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton .mx_MessageActionBar {
    display: none
}

.mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton .mx_LayoutSwitcher_RadioButton_preview {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    pointer-events: none
}

.mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton .mx_LayoutSwitcher_RadioButton_preview .mx_EventTile[data-layout=bubble] .mx_EventTile_line {
    padding-right: 11px
}

.mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton .mx_StyledRadioButton {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding: 10px
}

.mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton .mx_EventTile_content {
    margin-right: 0
}

.mx_LayoutSwitcher_RadioButtons > .mx_LayoutSwitcher_RadioButton.mx_LayoutSwitcher_RadioButton_selected {
    border-color: var(--cpd-color-bg-accent-rest)
}

.mx_LayoutSwitcher_RadioButtons .mx_StyledRadioButton {
    border-top: 1px solid #6f7882;
    border-top: 1px solid var(--quinary-content, #6f7882)
}

.mx_LayoutSwitcher_RadioButtons .mx_StyledRadioButton_checked {
    background-color: var(--cpd-color-bg-subtle-secondary)
}

.mx_LayoutSwitcher_RadioButtons .mx_EventTile {
    margin: 0
}

.mx_LayoutSwitcher_RadioButtons .mx_EventTile[data-layout=bubble] {
    margin-right: 40px;
    -ms-flex-negative: 1;
    flex-shrink: 1
}

.mx_LayoutSwitcher_RadioButtons .mx_EventTile[data-layout=irc] > a {
    display: none
}

.mx_LayoutSwitcher_RadioButtons .mx_EventTile .mx_EventTile_line {
    max-width: 90%
}

.mx_NotificationPusherSettings .mx_NotificationPusherSettings_description {
    color: var(--timeline-text-color)
}

.mx_NotificationPusherSettings .mx_NotificationPusherSettings_detail {
    margin-bottom: 12px;
    margin-top: -4px
}

.mx_NotificationSettings2 .mx_SettingsSection_subSections {
    color: var(--timeline-text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 32px;
    -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 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0 2px;
    vertical-align: baseline
}

.mx_NotificationSettings2 .mx_SettingsSubsection_content {
    margin-top: 12px;
    grid-gap: 12px;
    justify-items: stretch;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch
}

.mx_NotificationSettings2 .mx_SettingsBanner {
    margin-bottom: 32px
}

.mx_NotificationSettings2 .mx_NotificationSettings2_flags {
    grid-gap: 4px
}

.mx_NotificationSettings2 .mx_StyledRadioButton_content {
    margin-left: 10px;
    margin-right: 10px
}

.mx_NotificationSettings2 .mx_TagComposer {
    margin-top: 16px
}

.mx_NotificationSettings2 .mx_TagComposer.mx_TagComposer_disabled {
    opacity: .7
}

.mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags {
    gap: 8px;
    margin-top: 16px
}

.mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag {
    background: var(--roomlist-highlights-color);
    border-radius: 18px;
    margin: 0;
    padding: 6px 12px
}

.mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag .mx_Tag_delete {
    background: #edf3ff;
    background: var(--tertiary-content, #edf3ff);
    color: #fff;
    -ms-flex-item-align: initial;
    align-self: auto
}

.mx_UserNotifSettings_grid {
    display: grid;
    grid-template-columns:auto repeat(3, 62px);
    place-items: center center;
    width: calc(100% + 12px);
    grid-gap: 8px
}

.mx_UserNotifSettings_grid .mx_StyledRadioButton {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_content, .mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_spacer {
    display: none
}

.mx_UserNotifSettings_grid .mx_SettingsSubsectionHeading {
    justify-self: start
}

.mx_UserNotifSettings_gridRow, .mx_UserNotifSettings_gridRowContainer {
    display: contents
}

.mx_UserNotifSettings_gridRowLabel {
    float: left;
    justify-self: start
}

.mx_UserNotifSettings_gridColumnLabel {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font: var(--cpd-font-body-sm-semibold)
}

.mx_UserNotifSettings_gridRowError {
    grid-column: 1/-1;
    justify-self: start;
    margin-top: -4px;
    padding-right: 30%
}

.mx_UserNotifSettings_floatingSection {
    margin-top: 40px
}

.mx_UserNotifSettings_floatingSection > div:first-child {
    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 {
    padding-right: 8px
}

.mx_UserNotifSettings_clearNotifsButton {
    margin-top: 8px
}

.mx_TagComposer {
    margin-top: 35px
}

.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_ProfileSettings {
    border-bottom: 1px solid #6f7882;
    border-bottom: 1px solid var(--quinary-content, #6f7882)
}

.mx_ProfileSettings .mx_ProfileSettings_avatarUpload {
    display: none
}

.mx_ProfileSettings .mx_ProfileSettings_profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mx_ProfileSettings .mx_ProfileSettings_profile .mx_ProfileSettings_profile_controls {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-margin-end: 54px;
    margin-inline-end: 54px
}

.mx_ProfileSettings .mx_ProfileSettings_profile .mx_ProfileSettings_profile_controls .mx_Field, .mx_ProfileSettings .mx_ProfileSettings_profile .mx_ProfileSettings_profile_controls .mx_ProfileSettings_profile_controls_topic {
    margin-top: 8px
}

.mx_ProfileSettings .mx_ProfileSettings_profile .mx_ProfileSettings_profile_controls .mx_ProfileSettings_profile_controls_topic > textarea {
    font-family: inherit;
    resize: vertical
}

.mx_ProfileSettings .mx_ProfileSettings_profile .mx_ProfileSettings_profile_controls .mx_ProfileSettings_profile_controls_topic.mx_ProfileSettings_profile_controls_topic--room textarea {
    min-height: 4em
}

.mx_ProfileSettings .mx_ProfileSettings_profile .mx_ProfileSettings_profile_controls .mx_ProfileSettings_profile_controls_userId {
    -webkit-margin-end: 20px;
    margin-inline-end: 20px
}

.mx_ProfileSettings .mx_ProfileSettings_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-4x);
    margin-bottom: 28px;
    margin-top: 10px
}

.mx_SecureBackupPanel_deviceName {
    font-style: italic
}

.mx_SecureBackupPanel_buttonRow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    margin: 1em 0;
    row-gap: 10px
}

.mx_SecureBackupPanel_buttonRow :nth-child(n+1) {
    -webkit-margin-end: 10px;
    margin-inline-end: 10px
}

.mx_SecureBackupPanel_statusList {
    border-spacing: 0
}

.mx_SecureBackupPanel_statusList th {
    text-align: start
}

.mx_SecureBackupPanel_statusList td, .mx_SecureBackupPanel_statusList th {
    padding: 0
}

.mx_SecureBackupPanel_statusList td:first-of-type, .mx_SecureBackupPanel_statusList th:first-of-type {
    -webkit-padding-end: 1em;
    padding-inline-end: 1em
}

.mx_SecureBackupPanel_advanced {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_SetIdServer {
    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;
    gap: 8px
}

.mx_SetIdServer .mx_Field {
    margin: 0;
    width: 100%
}

.mx_SetIdServer_tooltip {
    max-width: var(--SettingsTab_tooltip-max-width)
}

.mx_SetIntegrationManager .mx_SettingsFlag {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_SetIntegrationManager .mx_SettingsFlag .mx_SetIntegrationManager_heading_manager {
    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;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.mx_SetIntegrationManager .mx_SettingsFlag .mx_ToggleSwitch {
    -ms-flex-item-align: start;
    align-self: flex-start;
    min-width: var(--ToggleSwitch-min-width)
}

.mx_SettingsFieldset {
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.mx_SettingsFieldset_legend {
    color: var(--timeline-text-color);
    display: block;
    font: var(--cpd-font-heading-md-semibold);
    font-weight: var(--cpd-font-weight-semibold);
    margin-bottom: 10px;
    margin-top: 12px
}

.mx_SettingsFieldset_description {
    display: block;
    margin-bottom: 10px;
    margin-top: 0
}

.mx_SettingsFieldset_description p {
    margin-bottom: 0;
    margin-top: 10px
}

.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_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 {
    color: var(--timeline-text-color);
    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
}

.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--accent-color-200);
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: .4;
    padding: 1rem;
    width: 180px;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    font-weight: var(--cpd-font-weight-semibold);
    margin-right: 15px;
    margin-top: 10px
}

.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton > span {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton_enabled {
    opacity: 1
}

.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton_enabled.mx_ThemeSelector_light {
    background-color: #f3f8fd;
    color: #2e2f32
}

.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton_enabled.mx_ThemeSelector_dark {
    background-color: #25282e;
    color: #f3f8fd
}

.mx_UpdateCheckButton_summary {
    margin-left: 16px
}

.mx_SettingsBanner {
    background: #21262c;
    background: var(--system, #21262c);
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    -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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 16px;
    -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;
    color: var(--timeline-text-color)
}

.mx_SettingsSection a {
    color: #0086e6;
    color: var(--links, #0086e6)
}

.mx_SettingsSection_subSections {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    grid-gap: 32px;
    padding: 16px 0
}

.mx_SettingsTab {
    --SettingsTab_tooltip-max-width: 120px;
    color: var(--timeline-text-color)
}

.mx_SettingsTab a {
    color: #0086e6;
    color: var(--links, #0086e6)
}

.mx_SettingsTab 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
}

.mx_SettingsTab .mx_AccessibleButton {
    -ms-flex-item-align: start;
    align-self: flex-start;
    justify-self: flex-start
}

.mx_SettingsTab .mx_Field {
    margin: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.mx_SettingsTab_warningText {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_SettingsTab_subsectionText {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: block;
    font: var(--cpd-font-body-md-regular);
    margin-top: 10px;
    -webkit-margin-end: 80px;
    margin-inline-end: 80px;
    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 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    max-width: calc(100% - 3rem);
    vertical-align: middle
}

.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {
    float: inline-end
}

.mx_SettingsTab_section > p {
    -webkit-margin-end: 80px;
    margin-inline-end: 80px
}

.mx_SettingsTab_section.mx_SettingsTab_subsectionText .mx_SettingsFlag {
    -webkit-margin-end: 0 !important;
    margin-inline-end: 0 !important
}

.mx_SettingsTab_toggleWithDescription {
    margin-top: 24px
}

.mx_SettingsTab_sections {
    display: grid;
    grid-template-columns:1fr;
    grid-gap: 32px;
    padding-bottom: 16px
}

.mx_NotificationSettingsTab_notificationsSection {
    width: 360px
}

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    color: var(--timeline-text-color);
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    font-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.125rem;
    margin-top: 16px;
    padding-left: 8px;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 24px;
    left: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 24px
}

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton input + div {
    margin-top: 8px
}

.mx_NotificationSettingsTab_notificationsSection .mx_StyledRadioButton .mx_NotificationSettingsTab_microCopy {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    font-weight: 400;
    line-height: .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: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    margin-left: var(--cpd-space-1x)
}

.mx_PeopleRoomSettingsTab_userId {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: block;
    font-size: var(--cpd-font-size-body-sm)
}

.mx_PeopleRoomSettingsTab_seeMoreOrLess {
    margin: var(--cpd-space-3x) 0 0
}

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

.mx_PeopleRoomSettingsTab_action + .mx_PeopleRoomSettingsTab_action {
    margin-left: var(--cpd-space-3x)
}

.mx_PeopleRoomSettingsTab_paragraph {
    margin: 0
}

.mx_RolesRoomSettingsTab_bannedList {
    margin-bottom: 0
}

.mx_RolesRoomSettingsTab_unbanBtn {
    margin-bottom: 5px;
    margin-right: 10px
}

.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;
    -webkit-margin-start: calc(1rem + 10px);
    margin-inline-start: calc(1rem + 10px)
}

.mx_GeneralUserSettingsTab_section--discovery_existing {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_GeneralUserSettingsTab_section--discovery_existing_address, .mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 10px
}

.mx_GeneralUserSettingsTab_section--discovery_existing_button {
    margin-left: 5px
}

.mx_GeneralUserSettingsTab_warningIcon {
    margin-bottom: 2px;
    margin-right: 8px;
    vertical-align: middle
}

.mx_HelpUserSettingsTab_accessTokenDetails {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_KeyboardShortcut_shortcutList {
    display: grid;
    margin: 0;
    padding: 0;
    width: 100%;
    grid-gap: 4px
}

.mx_KeyboardShortcut, .mx_KeyboardShortcut_shortcutRow {
    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 {
    -webkit-column-gap: 4px;
    -moz-column-gap: 4px;
    column-gap: 4px;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.mx_MjolnirUserSettingsTab_listItem {
    margin-bottom: 2px
}

.mx_SecurityUserSettingsTab_bulkOptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    -ms-flex-direction: row;
    flex-direction: row
}

.mx_SecurityUserSettingsTab_ignoredUser {
    margin-bottom: 4px
}

.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
    margin-right: 8px
}

.mx_SecurityUserSettingsTab_warning {
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    padding-left: 40px;
    position: relative
}

.mx_SecurityUserSettingsTab_warning:before {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    content: "";
    height: 1.5rem;
    left: 0;
    -webkit-mask-image: url(../../img/feather-customised/alert-triangle.86506d9.svg);
    mask-image: url(../../img/feather-customised/alert-triangle.86506d9.svg);
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1.5rem;
    mask-size: 1.5rem;
    position: absolute;
    top: 0;
    width: 1.5rem
}

.mx_SidebarUserSettingsTab_homeAllRoomsCheckbox {
    margin-left: 24px
}

.mx_SidebarUserSettingsTab_homeAllRoomsCheckbox + div {
    margin-left: 48px
}

.mx_SidebarUserSettingsTab_checkbox {
    margin-bottom: 8px
}

.mx_SidebarUserSettingsTab_checkbox label {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important
}

.mx_SidebarUserSettingsTab_checkbox svg {
    height: 16px;
    margin-bottom: -1px;
    margin-right: 8px;
    width: 16px
}

.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 {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    border-radius: 16px;
    height: 80px;
    position: relative;
    width: 80px
}

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer img.mx_SpaceBasicSettings_avatar {
    border-radius: 16px;
    height: 80px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 80px
}

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar {
    cursor: pointer
}

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer div.mx_SpaceBasicSettings_avatar:before {
    background-color: #fff;
    content: "";
    height: 80px;
    left: 0;
    -webkit-mask-image: url(../../img/element-icons/camera.d1d1927.svg);
    mask-image: url(../../img/element-icons/camera.d1d1927.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    position: absolute;
    top: 0;
    width: 80px
}

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer > input[type=file] {
    display: none
}

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer > .mx_AccessibleButton_kind_link {
    color: #0086e6;
    color: var(--links, #0086e6);
    display: inline-block;
    font: var(--cpd-font-body-md-regular);
    margin: auto 18px
}

.mx_SpaceBasicSettings .mx_SpaceBasicSettings_avatarContainer > .mx_SpaceBasicSettings_avatar_remove {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_SpaceBasicSettings .mx_AccessibleButton_hasKind {
    display: block;
    margin-left: auto;
    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 {
    margin: 0 0 15px;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    border-radius: 8px;
    flex-grow: 0
}

.mx_SpaceChildrenPicker .mx_SpaceChildrenPicker_noResults {
    display: block;
    margin-top: 24px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu_background {
    background-color: var(--sidebar-color-50pct);
    left: 68px;
    opacity: .6
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu {
    background-color: var(--timeline-background-color);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 24px;
    position: relative;
    width: 480px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > h2 {
    font-size: 1.125rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin-top: 4px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu > div > p {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.0625rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 20px 0;
    padding: 16px 32px 16px 72px;
    position: relative;
    width: 432px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType > div {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    font-weight: 400;
    margin-top: 4px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 24px;
    left: 20px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
    mask-size: 24px;
    position: absolute;
    top: 27px;
    width: 24px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover {
    border-color: var(--cpd-color-bg-interactive-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(--timeline-text-color)
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_public:before {
    -webkit-mask-image: url(../../img/globe.0408a7a.svg);
    mask-image: url(../../img/globe.0408a7a.svg)
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType_private:before {
    -webkit-mask-image: url(../../img/element-icons/lock.998ae1f.svg);
    mask-image: url(../../img/element-icons/lock.998ae1f.svg);
    -webkit-mask-size: 18px;
    mask-size: 18px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back {
    background-color: var(--roomlist-highlights-color);
    border-radius: 14px;
    height: 28px;
    margin-bottom: 12px;
    position: relative;
    width: 28px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenu_back:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 28px;
    left: 0;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: 2px 3px;
    mask-position: 2px 3px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
    mask-size: 24px;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 28px
}

.mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_AccessibleButton_kind_primary {
    display: block;
    margin-left: auto;
    padding: 8px 22px;
    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 {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.0625rem;
    font-weight: var(--cpd-font-weight-semibold);
    margin: 20px 0;
    padding: 16px 32px 16px 72px;
    position: relative;
    width: 432px
}

.mx_SpacePublicShare .mx_AccessibleButton > div {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .9375rem;
    font-weight: 400;
    margin-top: 4px
}

.mx_SpacePublicShare .mx_AccessibleButton:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: 24px;
    left: 20px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px;
    mask-size: 24px;
    position: absolute;
    top: 27px;
    width: 24px
}

.mx_SpacePublicShare .mx_AccessibleButton:hover {
    border-color: var(--cpd-color-bg-interactive-primary-rest)
}

.mx_SpacePublicShare .mx_AccessibleButton:hover:before {
    background-color: var(--cpd-color-icon-primary)
}

.mx_SpacePublicShare .mx_AccessibleButton:hover > span {
    color: var(--timeline-text-color)
}

.mx_SpacePublicShare .mx_AccessibleButton.mx_SpacePublicShare_shareButton:before {
    -webkit-mask-image: url(../../img/element-icons/link.e24e5a8.svg);
    mask-image: url(../../img/element-icons/link.e24e5a8.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 {
    font: var(--cpd-font-body-md-regular);
    margin-bottom: 10px
}

.mx_InlineTermsAgreement_cbContainer a {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b);
    text-decoration: none
}

.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox {
    margin-top: 10px
}

.mx_InlineTermsAgreement_cbContainer .mx_InlineTermsAgreement_checkbox input {
    vertical-align: text-bottom
}

.mx_InlineTermsAgreement_link {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    display: inline-block;
    height: 12px;
    margin-left: 3px;
    -webkit-mask-image: url(../../img/external-link.8197a77.svg);
    mask-image: url(../../img/external-link.8197a77.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
    width: 12px
}

.mx_AnalyticsToast .mx_AccessibleButton_kind_danger_outline, .mx_AnalyticsToast .mx_AccessibleButton_kind_primary {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    border: 1px solid #0dbd8b;
    border: 1px solid var(--accent, #0dbd8b);
    color: #fff;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_IncomingCallToast {
    position: relative;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    pointer-events: auto;
    width: 250px
}

.mx_IncomingCallToast, .mx_IncomingCallToast .mx_IncomingCallToast_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal
}

.mx_IncomingCallToast .mx_IncomingCallToast_content {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 8px;
    overflow: hidden;
    width: 100%
}

.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-size: .9375rem;
    font-weight: var(--cpd-font-weight-semibold);
    line-height: 1.5rem;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 24px)
}

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info .mx_IncomingCallToast_message {
    font-size: .75rem;
    line-height: .9375rem;
    margin-bottom: 4px
}

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info .mx_LiveContentSummary {
    font-size: .75rem;
    line-height: .9375rem
}

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_info .mx_LiveContentSummary .mx_LiveContentSummary_participants:before {
    height: 15px;
    width: 15px
}

.mx_IncomingCallToast .mx_IncomingCallToast_content .mx_IncomingCallToast_joinButton {
    bottom: 4px;
    position: relative;
    right: 4px;
    -ms-flex-item-align: end;
    align-self: flex-end;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.5rem;
    min-width: 120px;
    padding: 4px 0
}

.mx_IncomingCallToast .mx_IncomingCallToast_closeButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 16px;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 16px
}

.mx_IncomingCallToast .mx_IncomingCallToast_closeButton:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: inherit;
    -webkit-mask-image: url(../../img/cancel.f8ee58c.svg);
    mask-image: url(../../img/cancel.f8ee58c.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: inherit
}

.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;
    pointer-events: auto
}

.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-size: .9375rem;
    font-weight: 700;
    line-height: 1.125rem;
    margin-right: 6px;
    margin-top: 2px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_LegacyCallEvent_type {
    color: #edf3ff;
    color: var(--tertiary-content, #edf3ff);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .75rem;
    line-height: .9375rem;
    margin-bottom: 6px;
    margin-top: 4px;
    -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;
    margin-right: 6px;
    width: 16px
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: inherit;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: inherit
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_voice .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span:before, .mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_voice .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon:before {
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg)
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_video .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span:before, .mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content.mx_IncomingLegacyCallToast_content_video .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_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_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 8px;
    -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 {
    background-color: #fff;
    content: "";
    display: inline-block;
    margin-right: 8px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button {
    padding: 0 8px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: .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 {
    height: 13px;
    -webkit-mask-size: 13px;
    mask-size: 13px;
    width: 13px
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_content .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button.mx_IncomingLegacyCallToast_button_decline span:before {
    height: 16px;
    -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
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_iconButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 20px;
    width: 20px
}

.mx_IncomingLegacyCallToast .mx_IncomingLegacyCallToast_iconButton:before {
    background-color: #edf3ff;
    background-color: var(--tertiary-content, #edf3ff);
    content: "";
    height: inherit;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: inherit
}

.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 {
    background-color: #fff;
    display: inline-block;
    height: 1.125rem;
    margin-right: 8px;
    -webkit-mask-image: url(../../img/element-icons/cloud-off.97663f7.svg);
    mask-image: url(../../img/element-icons/cloud-off.97663f7.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 1.125rem
}

.mx_NonUrgentEchoFailureToast span {
    vertical-align: middle
}

.mx_Heading_h1, .mx_Heading_h2, .mx_Heading_h3, .mx_Heading_h4 {
    margin-block: unset;
    margin-inline: 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_UserOnboardingButton {
    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: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-radius: 8px;
    margin: 8px 8px 0;
    padding: 12px
}

.mx_UserOnboardingButton.mx_UserOnboardingButton_selected, .mx_UserOnboardingButton:focus-within, .mx_UserOnboardingButton:hover {
    background-color: var(--roomlist-highlights-color)
}

.mx_UserOnboardingButton .mx_UserOnboardingButton_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_UserOnboardingButton .mx_UserOnboardingButton_content .mx_Heading_h4 {
    color: var(--timeline-text-color);
    font: var(--cpd-font-body-md-regular);
    margin-right: auto
}

.mx_UserOnboardingButton .mx_UserOnboardingButton_content .mx_UserOnboardingButton_percentage {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem
}

.mx_UserOnboardingButton .mx_UserOnboardingButton_content .mx_UserOnboardingButton_close {
    border: 1px solid #edf3ff;
    border: 1px solid var(--secondary-content, #edf3ff);
    border-radius: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 14px;
    position: relative;
    width: 14px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mx_UserOnboardingButton .mx_UserOnboardingButton_content .mx_UserOnboardingButton_close:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    height: 7px;
    left: 50%;
    -webkit-mask-image: url(../../img/element-icons/cancel-rounded.ede6a2d.svg);
    mask-image: url(../../img/element-icons/cancel-rounded.ede6a2d.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 7px
}

.mx_UserOnboardingButton .mx_ProgressBar {
    background: var(--timeline-background-color);
    margin-top: 8px;
    width: auto
}

.mx_UserOnboardingButton.mx_UserOnboardingButton_completed .mx_ProgressBar {
    display: none
}

.mx_UserOnboardingHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-name: mx_UserOnboardingHeader_slideIn;
    animation-name: mx_UserOnboardingHeader_slideIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background: #21262c;
    background: var(--system, #21262c);
    border-radius: 16px;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 64px;
    padding: 32px;
    will-change: opacity, transform
}

@media (max-width: 1280px) {
    .mx_UserOnboardingHeader {
        margin: 32px
    }
}

.mx_UserOnboardingHeader .mx_UserOnboardingHeader_dot {
    color: #0dbd8b;
    color: var(--accent, #0dbd8b)
}

.mx_UserOnboardingHeader .mx_UserOnboardingHeader_content {
    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-preferred-size: 50%;
    flex-basis: 50%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    gap: 24px;
    margin-right: auto;
    min-width: 0
}

.mx_UserOnboardingHeader .mx_UserOnboardingHeader_content p {
    margin: 0
}

.mx_UserOnboardingHeader .mx_UserOnboardingHeader_content .mx_AccessibleButton {
    margin-top: auto;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding: 12px 24px
}

.mx_UserOnboardingHeader .mx_UserOnboardingHeader_image {
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-name: mx_UserOnboardingHeader_slideInLong;
    animation-name: mx_UserOnboardingHeader_slideInLong;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    aspect-ratio: 4/3;
    height: calc(100% + 128px);
    margin-bottom: -64px;
    margin-top: -64px;
    min-height: 0;
    min-width: 0;
    -o-object-fit: contain;
    object-fit: contain;
    will-change: opacity, transform
}

@-webkit-keyframes mx_UserOnboardingHeader_slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes mx_UserOnboardingHeader_slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes mx_UserOnboardingHeader_slideInLong {
    0% {
        -webkit-transform: translateY(32px);
        transform: translateY(32px)
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes mx_UserOnboardingHeader_slideInLong {
    0% {
        -webkit-transform: translateY(32px);
        transform: translateY(32px)
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.mx_UserOnboardingList {
    -webkit-box-orient: vertical;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-name: mx_UserOnboardingList_slideIn;
    animation-name: mx_UserOnboardingList_slideIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 32px;
    will-change: opacity
}

.mx_UserOnboardingList, .mx_UserOnboardingList .mx_UserOnboardingList_header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal
}

.mx_UserOnboardingList .mx_UserOnboardingList_header {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 12px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_UserOnboardingList .mx_UserOnboardingList_header .mx_UserOnboardingList_hint {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff)
}

.mx_UserOnboardingList .mx_UserOnboardingList_progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    counter-reset: user-onboarding;
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_UserOnboardingList .mx_UserOnboardingList_progress .mx_ProgressBar {
    border-radius: 16px;
    height: 16px;
    margin-top: 16px;
    width: auto
}

.mx_UserOnboardingList .mx_UserOnboardingList_progress .mx_ProgressBar::-moz-progress-bar {
    border-radius: 16px
}

.mx_UserOnboardingList .mx_UserOnboardingList_progress .mx_ProgressBar::-webkit-progress-bar, .mx_UserOnboardingList .mx_UserOnboardingList_progress .mx_ProgressBar::-webkit-progress-value {
    border-radius: 16px
}

.mx_UserOnboardingList .mx_UserOnboardingList_list {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: grid;
    grid-template-columns:-webkit-max-content 1fr -webkit-max-content;
    grid-template-columns:max-content 1fr max-content;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    grid-gap: 24px
}

@-webkit-keyframes mx_UserOnboardingList_slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes mx_UserOnboardingList_slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.mx_UserOnboardingPage {
    height: 100%;
    width: 100%;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto auto;
    max-width: 1200px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 64px;
    padding: 64px 100px
}

@media (max-width: 1280px) {
    .mx_UserOnboardingPage {
        padding: 48px 32px
    }
}

.mx_UserOnboardingTask {
    display: contents
}

.mx_UserOnboardingTask .mx_UserOnboardingTask_number {
    align-self: center;
    border: 2px solid #6f7882;
    border: 2px solid var(--quinary-content, #6f7882);
    border-radius: 32px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    counter-increment: user-onboarding;
    grid-column: 1;
    height: 32px;
    line-height: 32px;
    position: relative;
    text-align: center;
    width: 32px
}

.mx_UserOnboardingTask .mx_UserOnboardingTask_number:before {
    content: counter(user-onboarding)
}

.mx_UserOnboardingTask .mx_UserOnboardingTask_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column: 2;
    -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;
    -webkit-transition: all .5s;
    transition: all .5s
}

.mx_UserOnboardingTask .mx_UserOnboardingTask_content .mx_UserOnboardingTask_description {
    font-size: .75rem
}

.mx_UserOnboardingTask .mx_UserOnboardingTask_action.mx_AccessibleButton {
    grid-column: 3;
    min-width: 180px
}

@media (max-width: 800px) {
    .mx_UserOnboardingTask .mx_UserOnboardingTask_action.mx_AccessibleButton {
        grid-column: 2;
        margin-top: -16px
    }
}

.mx_UserOnboardingTask.mx_UserOnboardingTask_completed .mx_UserOnboardingTask_number:before {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: mx_UserOnboardingTask_spring;
    animation-name: mx_UserOnboardingTask_spring;
    background: var(--cpd-color-icon-accent-tertiary);
    border-radius: 32px;
    content: "";
    inset: -2px;
    position: absolute;
    will-change: opacity, transform
}

.mx_UserOnboardingTask.mx_UserOnboardingTask_completed .mx_UserOnboardingTask_number:after {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: mx_UserOnboardingTask_spring;
    animation-name: mx_UserOnboardingTask_spring;
    background-color: var(--cpd-color-icon-on-solid-primary);
    content: "";
    height: 16px;
    left: calc(50% - 8px);
    -webkit-mask-image: url(../../img/element-icons/check-white.9400525.svg);
    mask-image: url(../../img/element-icons/check-white.9400525.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: calc(50% - 8px);
    width: 16px;
    will-change: opacity, transform
}

.mx_UserOnboardingTask.mx_UserOnboardingTask_completed .mx_UserOnboardingTask_content {
    opacity: .6
}

@-webkit-keyframes mx_UserOnboardingTask_spring {
    0% {
        opacity: 0;
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes mx_UserOnboardingTask_spring {
    0% {
        opacity: 0;
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.mx_VerificationShowSas_decimalSas {
    font-weight: 700;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center
}

.mx_VerificationShowSas_decimalSas span {
    margin-left: 5px;
    margin-right: 5px
}

.mx_VerificationShowSas_emojiSas {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
    -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_AuthPage_modal .mx_VerificationShowSas_emojiSas_block, .mx_Dialog .mx_VerificationShowSas_emojiSas_block {
    width: 60px
}

.mx_VerificationShowSas_emojiSas_emoji {
    font-family: Twemoji, var(--cpd-font-family-sans);
    font-size: 2rem
}

.mx_VerificationShowSas_emojiSas_label {
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_VerificationShowSas_emojiSas_break {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.mx_VerificationShowSas_buttonRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    gap: 9px;
    justify-content: center
}

[data-whatinput=mouse] .mx_LegacyCallViewButtons.mx_LegacyCallViewButtons_hidden {
    opacity: .001;
    pointer-events: none
}

.mx_LegacyCallViewButtons {
    --LegacyCallViewButtons_dropdownButton-size: 16px;
    bottom: 32px;
    gap: 18px;
    opacity: 1;
    position: absolute;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    z-index: 200
}

.mx_LegacyCallViewButtons, .mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button {
    background-color: #21262c;
    border-radius: 100%;
    cursor: pointer;
    height: 40px;
    width: 40px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0 4px 4px 0 #00000026;
    box-shadow: 0 4px 4px 0 #00000026;
    position: relative
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button:before {
    background-color: #edf3ff;
    content: "";
    display: inline-block;
    height: 24px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 24px
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton {
    bottom: 0;
    height: var(--LegacyCallViewButtons_dropdownButton-size);
    position: absolute;
    right: 0;
    width: var(--LegacyCallViewButtons_dropdownButton-size)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton:before {
    height: 14px;
    -webkit-mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg);
    mask-image: url(../../img/element-icons/message/chevron-up.0f9ac6f.svg);
    width: 14px
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton.mx_LegacyCallViewButtons_dropdownButton_collapsed:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on {
    background-color: #21262c
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on:before {
    background-color: #edf3ff
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_mic:before {
    height: 20px;
    -webkit-mask-image: url(../../img/element-icons/mic.cf0a544.svg);
    mask-image: url(../../img/element-icons/mic.cf0a544.svg);
    width: 20px
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_vid:before {
    -webkit-mask-image: url(../../img/voip/call-view/cam-on.b011f60.svg);
    mask-image: url(../../img/voip/call-view/cam-on.b011f60.svg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_screensharing {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_screensharing:before {
    background-color: #fff;
    -webkit-mask-image: url(../../img/voip/call-view/screensharing.5c2d592.svg);
    mask-image: url(../../img/voip/call-view/screensharing.5c2d592.svg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_on.mx_LegacyCallViewButtons_button_sidebar:before {
    -webkit-mask-image: url(../../img/voip/call-view/sidebar-on.c8ce983.svg);
    mask-image: url(../../img/voip/call-view/sidebar-on.c8ce983.svg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off {
    background-color: #edf3ff
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off:before {
    background-color: #21262c
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_mic:before {
    height: 20px;
    -webkit-mask-image: url(../../img/element-icons/Mic-off.0f5d334.svg);
    mask-image: url(../../img/element-icons/Mic-off.0f5d334.svg);
    width: 20px
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_vid:before {
    -webkit-mask-image: url(../../img/voip/call-view/cam-off.a099e25.svg);
    mask-image: url(../../img/voip/call-view/cam-off.a099e25.svg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_screensharing {
    background-color: #21262c
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_screensharing:before {
    background-color: #edf3ff;
    -webkit-mask-image: url(../../img/voip/call-view/screensharing.5c2d592.svg);
    mask-image: url(../../img/voip/call-view/screensharing.5c2d592.svg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_sidebar {
    background-color: #21262c
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_off.mx_LegacyCallViewButtons_button_sidebar:before {
    background-color: #edf3ff;
    -webkit-mask-image: url(../../img/voip/call-view/sidebar-off.9164266.svg);
    mask-image: url(../../img/voip/call-view/sidebar-off.9164266.svg)
}

.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)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_hangup {
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_hangup:before {
    background-color: #fff;
    -webkit-mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg);
    mask-image: url(../../img/element-icons/call/hangup.a9876fc.svg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_more:before {
    -webkit-mask-image: url(../../img/voip/call-view/more.33bfe39.svg);
    mask-image: url(../../img/voip/call-view/more.33bfe39.svg)
}

.mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_button_invisible {
    pointer-events: none;
    position: absolute;
    visibility: hidden
}

.mx_CallDuration {
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    font-size: .75rem;
    white-space: nowrap
}

.mx_CallView {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 1;
    min-height: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: var(--roomlist-background-color);
    -ms-flex-direction: column;
    flex-direction: column
}

.mx_CallView .mx_AppTile {
    background-color: #181b21;
    border: none;
    border-radius: inherit;
    height: 100%;
    width: auto
}

.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;
    background-color: #181b21;
    color: #edf3ff;
    flex-grow: 1;
    padding: 12px;
    --facepile-background: #181b21;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    gap: 32px;
    justify-content: center
}

.mx_CallView .mx_CallView_lobby .mx_FacePile {
    margin: 8px auto 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview {
    aspect-ratio: 1.5;
    background-color: #21262c;
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 800px;
    overflow: hidden;
    position: relative;
    width: 100%;
    -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 {
    height: auto !important;
    margin: 20px;
    min-height: 0;
    min-width: 0;
    width: auto !important;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 200px;
    flex: 0 1 200px
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview video {
    background-color: #000;
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    width: 100%
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls {
    background-color: var(--timeline-text-secondary-color);
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 0;
    position: absolute;
    right: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    gap: 24px;
    justify-content: center
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper {
    margin: 6px 0 10px;
    position: relative
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton {
    background-color: #21262c;
    border-radius: 25px;
    height: 50px;
    width: 50px
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton:before {
    background-color: #edf3ff;
    content: "";
    display: inline-block;
    height: 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    width: 100%
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton.mx_CallView_deviceButton_audio:before {
    -webkit-mask-image: url(../../img/element-icons/mic.cf0a544.svg);
    mask-image: url(../../img/element-icons/mic.cf0a544.svg);
    -webkit-mask-size: 14px;
    mask-size: 14px
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceButton.mx_CallView_deviceButton_video:before {
    -webkit-mask-image: url(../../img/voip/call-view/cam-on.b011f60.svg);
    mask-image: url(../../img/voip/call-view/cam-on.b011f60.svg)
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceListButton {
    background-color: #21262c;
    border-radius: 7.5px;
    bottom: 0;
    height: 15px;
    position: absolute;
    right: -2.5px;
    width: 15px
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper .mx_CallView_deviceListButton:before {
    background-color: #edf3ff;
    content: "";
    display: inline-block;
    height: 100%;
    -webkit-mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    mask-image: url(../../img/feather-customised/chevron-down.59c17e1.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    width: 100%
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceButton, .mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceListButton {
    background-color: #edf3ff
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceButton:before, .mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceListButton:before {
    background-color: #21262c
}

.mx_CallView .mx_CallView_lobby .mx_CallView_preview .mx_CallView_controls .mx_CallView_deviceButtonWrapper.mx_CallView_deviceButtonWrapper_muted .mx_CallView_deviceButton.mx_CallView_deviceButton_audio:before {
    -webkit-mask-image: url(../../img/element-icons/Mic-off.0f5d334.svg);
    mask-image: url(../../img/element-icons/Mic-off.0f5d334.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(../../img/voip/call-view/cam-off.a099e25.svg);
    mask-image: url(../../img/voip/call-view/cam-off.a099e25.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: 0;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    grid-template-columns:repeat(3, 1fr);
    margin-top: 24px
}

.mx_DialPad, .mx_DialPad_button {
    margin-left: auto;
    margin-right: auto
}

.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;
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 40px;
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
    height: 40px;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    width: 40px
}

.mx_DialPad_button .mx_DialPad_buttonSubText {
    font-size: 8px
}

.mx_DialPad_dialButton {
    background-color: #0dbd8b;
    background-color: var(--accent, #0dbd8b);
    grid-column: 2
}

.mx_DialPad_dialButton:before {
    background-color: #fff;
    content: "";
    display: inline-block;
    height: 40px;
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
    mask-size: 20px;
    vertical-align: middle;
    width: 40px
}

.mx_DialPadContextMenu_dialPad .mx_DialPad {
    -webkit-column-gap: 32px;
    -moz-column-gap: 32px;
    column-gap: 32px;
    row-gap: 16px
}

.mx_DialPadContextMenuWrapper {
    padding: 15px
}

.mx_DialPadContextMenu_header {
    border: none;
    border-bottom: 1px solid #6f7882;
    border-bottom: 1px solid var(--quaternary-content, #6f7882);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 32px;
    -webkit-transition: border-bottom .25s;
    transition: border-bottom .25s
}

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

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

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

.mx_DialPadContextMenu_cancel {
    float: right
}

.mx_DialPadContextMenu_header:focus-within {
    border-bottom: 1px solid #0dbd8b;
    border-bottom: 1px solid var(--accent, #0dbd8b)
}

.mx_DialPadContextMenu_title {
    color: #a1b2d1;
    font-size: 12px;
    font-weight: var(--cpd-font-weight-semibold)
}

.mx_DialPadContextMenu_dialled {
    border: none;
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
    height: 1.5em;
    margin: 0
}

.mx_DialPadContextMenu_dialled input {
    background-color: transparent;
    font-size: 18px;
    font-weight: var(--cpd-font-weight-semibold);
    max-width: 185px;
    overflow: hidden;
    padding: 8px 0;
    text-align: left
}

.mx_DialPadContextMenu_dialPad {
    margin: 16px
}

.mx_Dialog_dialPadWrapper .mx_Dialog {
    padding: 0
}

.mx_DialPadModal {
    height: 370px;
    padding: 16px 0 0;
    width: 292px
}

.mx_DialPadModal_header {
    border-bottom: 1px solid #6f7882;
    border-bottom: 1px solid var(--quaternary-content, #6f7882);
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 32px;
    -webkit-transition: border-bottom .25s;
    transition: border-bottom .25s
}

.mx_DialPadModal_header:focus-within {
    border-bottom: 1px solid #0dbd8b;
    border-bottom: 1px solid var(--accent, #0dbd8b)
}

.mx_DialPadModal_title {
    color: #a1b2d1;
    font-size: 12px;
    font-weight: var(--cpd-font-weight-semibold)
}

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

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

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

.mx_DialPadModal_cancel {
    float: right;
    margin-right: 16px
}

.mx_DialPadModal_field {
    border: none;
    height: 30px;
    margin: 0
}

.mx_DialPadModal_field .mx_Field_postfix {
    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;
    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 {
    background-color: var(--roomlist-background-color);
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
    pointer-events: auto
}

.mx_LegacyCallView .mx_LegacyCallView_toast {
    background-color: #17191c;
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    position: absolute;
    top: 74px;
    z-index: 50
}

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper {
    height: 100%;
    width: 100%
}

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper, .mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden
}

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content {
    position: relative;
    -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;
    background-color: #6f7882;
    border-radius: 10px;
    -ms-flex: 1;
    flex: 1;
    padding: 10px calc(20% + 20px) 10px 10px
}

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_status {
    color: #fff;
    z-index: 50
}

.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 {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: blur(20px);
    filter: blur(20px);
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%
}

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content .mx_LegacyCallView_holdBackground:after {
    background-color: rgba(0, 0, 0, .6);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%
}

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content.mx_LegacyCallView_content_hold .mx_LegacyCallView_status {
    font-weight: 700;
    text-align: center
}

.mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content.mx_LegacyCallView_content_hold .mx_LegacyCallView_status:before {
    background-image: url(../../img/voip/paused.b00e0b4.svg);
    background-position: 50%;
    background-size: cover;
    content: "";
    display: block;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    width: 40px
}

.mx_LegacyCallView_pip .mx_LegacyCallView .mx_LegacyCallView_content_wrapper .mx_LegacyCallView_content.mx_LegacyCallView_content_hold .mx_LegacyCallView_status:before {
    height: 30px;
    width: 30px
}

.mx_LegacyCallView:not(.mx_LegacyCallView_sidebar) .mx_LegacyCallView_content {
    height: 100%;
    padding: 0;
    width: 100%
}

.mx_LegacyCallView:not(.mx_LegacyCallView_sidebar) .mx_LegacyCallView_content .mx_VideoFeed_primary {
    aspect-ratio: unset;
    border: 0;
    height: 100%;
    width: 100%
}

.mx_LegacyCallView.mx_LegacyCallView_pip {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    padding-bottom: 8px;
    width: 320px
}

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons {
    bottom: 13px
}

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button {
    height: 34px;
    width: 34px
}

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button.mx_LegacyCallViewButtons_dropdownButton {
    height: var(--LegacyCallViewButtons_dropdownButton-size);
    width: var(--LegacyCallViewButtons_dropdownButton-size)
}

.mx_LegacyCallView.mx_LegacyCallView_pip .mx_LegacyCallViewButtons .mx_LegacyCallViewButtons_button:before {
    height: 22px;
    width: 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;
    margin: 8px;
    margin: var(--container-gap-width);
    margin-bottom: 10px;
    margin-right: 4px;
    margin-right: calc(var(--container-gap-width) / 2);
    padding-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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100% !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mx_LegacyCallViewForRoom .mx_LegacyCallViewForRoom_ResizeWrapper:hover .mx_LegacyCallViewForRoom_ResizeHandle:after {
    background-color: var(--timeline-text-color);
    border-radius: 4px;
    content: "";
    height: 4px;
    max-width: 64px;
    width: 100%
}

.mx_LegacyCallViewHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px;
    -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: 700;
    vertical-align: middle
}

.mx_LegacyCallViewHeader_secondaryCallInfo:before {
    content: "·";
    margin-left: 6px;
    margin-right: 6px
}

.mx_LegacyCallViewHeader_controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    margin-left: auto
}

.mx_LegacyCallViewHeader_button {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle
}

.mx_LegacyCallViewHeader_button:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    height: 20px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
    width: 20px
}

.mx_LegacyCallViewHeader_button.mx_LegacyCallViewHeader_button_fullscreen:before {
    -webkit-mask-image: url(../../img/element-icons/call/fullscreen.3baa8a5.svg);
    mask-image: url(../../img/element-icons/call/fullscreen.3baa8a5.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(../../img/element-icons/call/expand.b085a84.svg);
    mask-image: url(../../img/element-icons/call/expand.b085a84.svg)
}

.mx_LegacyCallViewHeader_callInfo {
    margin-left: 12px;
    margin-right: 16px;
    overflow: hidden
}

.mx_LegacyCallViewHeader_roomName {
    font-size: 12px;
    font-weight: 700;
    height: 15px;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_LegacyCallView_secondaryCall_roomName {
    margin-left: 4px
}

.mx_LegacyCallViewHeader_icon {
    display: inline-block;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    width: 16px
}

.mx_LegacyCallViewHeader_icon:before {
    background-color: #edf3ff;
    background-color: var(--secondary-content, #edf3ff);
    content: "";
    display: inline-block;
    height: 16px;
    -webkit-mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    mask-image: url(../../img/element-icons/call/voice-call.85002aa.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: top;
    width: 16px
}

.mx_LegacyCallViewSidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    overflow: auto;
    position: absolute;
    right: 10px;
    width: 20%;
    -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 {
    border-radius: 4px;
    width: 100%
}

.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;
    background-color: #21262c;
    justify-content: center
}

.mx_LegacyCallViewSidebar.mx_LegacyCallViewSidebar_pipMode {
    bottom: auto;
    top: 16px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    gap: 4px;
    justify-content: flex-end
}

.mx_VideoFeed {
    border: 2px solid transparent;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    position: relative
}

.mx_VideoFeed.mx_VideoFeed_secondary {
    bottom: 72px;
    position: absolute;
    right: 24px;
    width: 20%
}

.mx_VideoFeed.mx_VideoFeed_voice {
    background-color: #15171b;
    background-color: var(--strong-input-border-color, #15171b);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mx_VideoFeed.mx_VideoFeed_voice:not(.mx_VideoFeed_primary) {
    aspect-ratio: 16/9
}

.mx_VideoFeed .mx_VideoFeed_video {
    background-color: #000;
    border-radius: 4px;
    height: 100%;
    width: 100%
}

.mx_VideoFeed .mx_VideoFeed_video.mx_VideoFeed_video_mirror {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.mx_VideoFeed .mx_VideoFeed_mic {
    bottom: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 6px;
    position: absolute;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 100%;
    height: 24px;
    justify-content: center;
    width: 24px
}

.mx_VideoFeed .mx_VideoFeed_mic:before {
    background-color: #fff;
    border-radius: 7px;
    content: "";
    height: 17px;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    width: 17px
}

.mx_VideoFeed .mx_VideoFeed_mic.mx_VideoFeed_mic_muted:before {
    -webkit-mask-image: url(../../img/element-icons/Mic-off.0f5d334.svg);
    mask-image: url(../../img/element-icons/Mic-off.0f5d334.svg)
}

.mx_VideoFeed .mx_VideoFeed_mic.mx_VideoFeed_mic_unmuted:before {
    -webkit-mask-image: url(../../img/element-icons/mic.cf0a544.svg);
    mask-image: url(../../img/element-icons/mic.cf0a544.svg)
}

.mx_LiveBadge {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ff5b55;
    background-color: var(--alert, #ff5b55);
    border-radius: 2px;
    color: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    gap: 4px;
    padding: 2px 4px
}

.mx_LiveBadge--grey {
    background-color: #6f7882;
    background-color: var(--quaternary-content, #6f7882)
}

.mx_VoiceBroadcastControl {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--timeline-background-color);
    border-radius: 50%;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 32px;
    flex: 0 0 32px;
    height: 32px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 32px
}

.mx_VoiceBroadcastControl-recording {
    color: #ff5b55;
    color: var(--alert, #ff5b55)
}

.mx_VoiceBroadcastControl-play .mx_Icon {
    left: 1px;
    position: relative
}

.mx_VoiceBroadcastHeader {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    line-height: 20px;
    margin-bottom: 16px;
    min-width: 0
}

.mx_VoiceBroadcastHeader_content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0
}

.mx_VoiceBroadcastHeader_room_wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.mx_VoiceBroadcastHeader_room {
    font-size: .75rem;
    font-weight: var(--cpd-font-weight-semibold);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_VoiceBroadcastHeader_line {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .75rem;
    gap: 4px
}

.mx_VoiceBroadcastHeader_line .mx_Spinner {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14px;
    flex: 0 0 14px;
    padding: 1px
}

.mx_VoiceBroadcastHeader_line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mx_VoiceBroadcastHeader_mic--clickable {
    cursor: pointer
}

.mx_VoiceBroadcastRecordingConnectionError {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px
}

.mx_VoiceBroadcastRecordingConnectionError svg path {
    fill: #ff5b55;
    fill: var(--alert, #ff5b55)
}

.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle.mx_RoomTile_subtitle--voice-broadcast {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ff5b55;
    color: var(--alert, #ff5b55);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px
}

.mx_VoiceBroadcastBody {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border-radius: 8px;
    color: #edf3ff;
    color: var(--secondary-content, #edf3ff);
    display: inline-block;
    font-size: .75rem;
    padding: 12px;
    width: 271px
}

.mx_VoiceBroadcastBody .mx_Clock {
    line-height: 1
}

.mx_VoiceBroadcastBody--pip {
    background-color: #21262c;
    background-color: var(--system, #21262c);
    -webkit-box-shadow: 0 2px 8px 0 #0000004a;
    box-shadow: 0 2px 8px 0 #0000004a
}

.mx_VoiceBroadcastBody--small {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    width: 192px
}

.mx_VoiceBroadcastBody--small .mx_VoiceBroadcastHeader {
    margin-bottom: 0
}

.mx_VoiceBroadcastBody--small .mx_VoiceBroadcastControl {
    -ms-flex-item-align: center;
    align-self: center
}

.mx_VoiceBroadcastBody--small .mx_LiveBadge {
    margin-top: 4px
}

.mx_VoiceBroadcastBody_divider {
    background-color: #6f7882;
    background-color: var(--quinary-content, #6f7882);
    border: 0;
    height: 1px;
    margin: 12px 0
}

.mx_VoiceBroadcastBody_controls {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 32px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 8px
}

.mx_VoiceBroadcastBody_timerow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.mx_AccessibleButton.mx_VoiceBroadcastBody_blockButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px
}

.mx_VoiceBroadcastBody__small-close {
    position: absolute;
    right: 8px;
    top: 8px
}

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