:root {
  --design-url-favicon-ico: url("/roles/web-app-matrix/latest/img/design/favicon.ico");
  --design-url-apple-touch-icon-png: url("/roles/web-app-matrix/latest/img/design/apple-touch-icon.png");
  --design-url-apple-touch-icon-svg: url("/roles/web-app-matrix/latest/img/design/apple-touch-icon.svg");
  --design-url-banner-png: url("/roles/web-app-matrix/latest/img/design/banner.png");
  --design-url-banner-svg: url("/roles/web-app-matrix/latest/img/design/banner.svg");
  --design-url-header-png: url("/roles/web-app-matrix/latest/img/design/header.png");
  --design-url-header-svg: url("/roles/web-app-matrix/latest/img/design/header.svg");
  --design-url-icon-png: url("/roles/web-app-matrix/latest/img/design/icon.png");
  --design-url-icon-svg: url("/roles/web-app-matrix/latest/img/design/icon.svg");
  --design-url-logo-png: url("/roles/web-app-matrix/latest/img/design/logo.png");
  --design-url-logo-svg: url("/roles/web-app-matrix/latest/img/design/logo.svg");
  --design-url-wordmark-png: url("/roles/web-app-matrix/latest/img/design/wordmark.png");
  --design-url-wordmark-svg: url("/roles/web-app-matrix/latest/img/design/wordmark.svg");
  --design-slot-apple-touch-icon-width: 180px;
  --design-slot-apple-touch-icon-height: 180px;
  --design-slot-banner-width: 960px;
  --design-slot-banner-height: 160px;
  --design-slot-header-width: 320px;
  --design-slot-header-height: 64px;
  --design-slot-icon-width: 512px;
  --design-slot-icon-height: 512px;
  --design-slot-logo-width: 512px;
  --design-slot-logo-height: 512px;
  --design-slot-wordmark-width: 320px;
  --design-slot-wordmark-height: 64px;
}
body.cpd-theme-light,
body.cpd-theme-dark {
  --cpd-color-bg-canvas-default: var(--design-surface-1);
  --cpd-color-bg-action-secondary-rest: var(--design-surface-1);
  --cpd-color-bg-action-tertiary-rest: var(--design-surface-1);
  --cpd-color-bg-subtle-secondary: var(--design-surface-2);
  --cpd-color-bg-subtle-primary: var(--design-surface-3);
  --cpd-color-bg-canvas-disabled: var(--design-surface-3);
  --cpd-color-bg-action-secondary-hovered: var(--design-surface-hover);
  --cpd-color-bg-action-tertiary-hovered: var(--design-surface-hover);
  --cpd-color-bg-action-secondary-pressed: var(--design-surface-active);
  --cpd-color-bg-action-tertiary-selected: var(--design-surface-active);
  --cpd-color-text-primary: var(--design-text);
  --cpd-color-text-action-primary: var(--design-text);
  --cpd-color-icon-primary: var(--design-text);
  --cpd-color-text-secondary: var(--design-text-muted);
  --cpd-color-icon-secondary: var(--design-text-muted);
  --cpd-color-icon-tertiary: var(--design-text-muted);
  --cpd-color-text-disabled: var(--design-text-muted);
  --cpd-color-icon-disabled: var(--design-text-muted);
  --cpd-color-icon-quaternary: var(--design-text-muted);
  --cpd-color-bg-action-primary-rest: var(--design-primary);
  --cpd-color-bg-action-primary-hovered: var(--design-primary-hover);
  --cpd-color-bg-action-primary-pressed: var(--design-primary-active);
  --cpd-color-text-on-solid-primary: var(--design-on-primary);
  --cpd-color-icon-on-solid-primary: var(--design-on-primary);
  --cpd-color-bg-accent-rest: var(--design-primary);
  --cpd-color-bg-accent-hovered: var(--design-primary-hover);
  --cpd-color-bg-accent-pressed: var(--design-primary-active);
  --cpd-color-bg-accent-selected: var(--design-surface-active);
  --cpd-color-text-action-accent: var(--design-link);
  --cpd-color-icon-accent-primary: var(--design-link);
  --cpd-color-icon-accent-tertiary: var(--design-link);
  --cpd-color-border-accent-primary: var(--design-link);
  --cpd-color-text-link-external: var(--design-link);
  --cpd-color-border-interactive-primary: var(--design-border-strong);
  --cpd-color-border-interactive-hovered: var(--design-border-strong);
  --cpd-color-border-interactive-secondary: var(--design-border);
  --cpd-color-border-disabled: var(--design-border);
  --cpd-color-border-focused: var(--design-focus, var(--design-link));
  --cpd-color-text-critical-primary: var(--design-danger);
  --cpd-color-icon-critical-primary: var(--design-danger);
  --cpd-color-border-critical-primary: var(--design-danger);
  --cpd-color-bg-critical-primary: var(--design-danger);
  --cpd-color-bg-critical-hovered: var(--design-danger-hover);
  --cpd-color-bg-critical-subtle: var(--design-danger-subtle);
  --cpd-color-border-critical-subtle: var(--design-danger-border);
  --cpd-color-text-success-primary: var(--design-success);
  --cpd-color-icon-success-primary: var(--design-success);
  --cpd-color-bg-success-subtle: var(--design-success-subtle);
  --cpd-color-border-success-subtle: var(--design-success-border);
  --cpd-color-text-info-primary: var(--design-info);
  --cpd-color-icon-info-primary: var(--design-info);
  --cpd-color-bg-info-subtle: var(--design-info-subtle);
  --cpd-color-border-info-subtle: var(--design-info-border);
  --cpd-color-gray-100: var(--design-neutral-50);
  --cpd-color-gray-200: var(--design-neutral-100);
  --cpd-color-gray-300: var(--design-neutral-100);
  --cpd-color-gray-400: var(--design-border);
  --cpd-color-gray-500: var(--design-neutral-300);
  --cpd-color-gray-600: var(--design-neutral-300);
  --cpd-color-gray-700: var(--design-neutral-400);
  --cpd-color-gray-800: var(--design-neutral-500);
  --cpd-color-gray-900: var(--design-neutral-600);
  --cpd-color-gray-1000: var(--design-neutral-700);
  --cpd-color-gray-1100: var(--design-neutral-700);
  --cpd-color-gray-1200: var(--design-neutral-800);
  --cpd-color-gray-1300: var(--design-neutral-900);
  --cpd-color-gray-1400: var(--design-neutral-950);
  --cpd-color-green-100: var(--design-primary-50);
  --cpd-color-green-200: var(--design-primary-100);
  --cpd-color-green-300: var(--design-primary-100);
  --cpd-color-green-400: var(--design-primary-200);
  --cpd-color-green-500: var(--design-primary-300);
  --cpd-color-green-600: var(--design-primary-300);
  --cpd-color-green-700: var(--design-primary-400);
  --cpd-color-green-800: var(--design-primary-500);
  --cpd-color-green-900: var(--design-primary-600);
  --cpd-color-green-1000: var(--design-primary-700);
  --cpd-color-green-1100: var(--design-primary-700);
  --cpd-color-green-1200: var(--design-primary-800);
  --cpd-color-green-1300: var(--design-primary-900);
  --cpd-color-green-1400: var(--design-primary-950);
}

.mx_AccessibleButton_kind_danger,
.mx_AccessibleButton_kind_danger_sm,
[data-kind][data-destructive] {
  --cpd-color-text-on-solid-primary: var(--design-on-danger);
}

.mx_Dialog {
  color: var(--design-text-muted);
}

.mx_HomePage_default h2 {
  color: var(--design-text-muted);
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
  background-color: var(--design-primary);
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:hover {
  background-color: var(--design-primary-hover);
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton,
.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton svg {
  color: var(--design-on-primary);
}

#matrixchat:has(.mx_AuthPage) {
  background-color: var(--design-frame);
  --design-focus: var(--design-on-frame);
}

.mx_AuthPage_modal {
  --design-focus: var(--design-link);
}

.mx_AuthPage_modal.mx_AuthPage_modal_withBlur .mx_AuthPage_modalContent {
  background-color: var(--design-surface-2);
}

.mx_AuthFooter {
  background: none;
  opacity: 1;
}

.mx_AuthFooter a:link,
.mx_AuthFooter a:visited,
.mx_AuthFooter a:hover {
  color: var(--design-on-frame);
}

body:not(:has(> #matrixchat)) {
  background-color: var(--design-surface-1);
  color: var(--design-text);
}

body:not(:has(> #matrixchat)) a {
  color: var(--design-link);
}

body:not(:has(> #matrixchat)) hr {
  border-color: var(--design-border);
  background-color: var(--design-border);
  color: var(--design-border);
}

body:not(:has(> #matrixchat)) .logo svg g[fill] {
  fill: var(--design-text);
}

body:not(:has(> #matrixchat)) header p,
body:not(:has(> #matrixchat)) footer p,
body:not(:has(> #matrixchat)) .profile .user-id,
body:not(:has(> #matrixchat)) .confirm-trust {
  color: var(--design-text-muted);
}

body:not(:has(> #matrixchat)) .confirm-trust strong {
  color: var(--design-text);
}

body:not(:has(> #matrixchat)) .primary-button {
  background-color: var(--design-primary);
  color: var(--design-on-primary);
}

body:not(:has(> #matrixchat)) .primary-button:hover {
  background-color: var(--design-primary-hover);
}

body:not(:has(> #matrixchat)) .profile {
  border-color: var(--design-border);
  background-color: var(--design-surface-2);
}