:root {
  --cpd-color-bg-canvas-default: #f4f9fd;
  --cpd-color-bg-subtle-primary: #eaf6ff;
  --cpd-color-bg-action-primary-rest: #64b5f6;
  --cpd-color-bg-action-primary-hover: #368bd6;
  --cpd-color-text-action-accent: #0086e6;
  --cpd-color-icon-accent-primary: #64b5f6;
  --energy-primary: #64b5f6;
  --energy-primary-strong: #368bd6;
  --energy-surface: #eaf6ff;
  --energy-splash: #ece6f1;
}

body {
  background:
    radial-gradient(circle at top left, rgba(100, 181, 246, 0.24), transparent 34rem),
    linear-gradient(180deg, #f8fbff 0%, #eaf6ff 100%) !important;
}

.mx_AuthPage,
.mx_AuthPage_modalContent,
.mx_AuthBody,
.mx_CompleteSecurityBody {
  background-color: #f8fbff !important;
}

.mx_AuthHeader_logo,
.mx_AuthHeader img,
.mx_AuthHeaderLogo img {
  max-height: 72px !important;
  object-fit: contain !important;
}

.mx_Button_primary,
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_sm,
.mx_Dialog_primary,
button[type="submit"] {
  background-color: var(--energy-primary) !important;
  border-color: var(--energy-primary) !important;
  color: #ffffff !important;
}

.mx_Button_primary:hover,
.mx_AccessibleButton_kind_primary:hover,
.mx_AccessibleButton_kind_primary_sm:hover,
.mx_Dialog_primary:hover,
button[type="submit"]:hover {
  background-color: var(--energy-primary-strong) !important;
  border-color: var(--energy-primary-strong) !important;
}

a,
.mx_AccessibleButton_hasKind_link,
.mx_BaseCard_header_title,
.mx_TabbedView_tabLabel_active {
  color: var(--energy-primary-strong) !important;
}

.mx_RoomTile_selected,
.mx_RoomTile:hover,
.mx_LeftPanel_roomListContainer,
.mx_SpacePanel,
.mx_MatrixChat_useCompactLayout .mx_RoomTile_selected {
  background-color: var(--energy-surface) !important;
}

.mx_LeftPanel,
.mx_RoomSublist,
.mx_RoomSublist_tiles,
.mx_RoomList {
  background-color: #f4f9fd !important;
}

.mx_MessageComposer,
.mx_MessageComposer_wrapper,
.mx_RoomHeader,
.mx_RoomView_body {
  border-color: #c7e7f7 !important;
}

.mx_ProgressBar_fill,
.mx_Spinner > div {
  background-color: var(--energy-primary) !important;
}

.mx_AuthPage_brand {
  color: #123247 !important;
}

.eg-help-about-version {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  color: #123247;
}

.eg-help-about-version h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.eg-help-about-version p {
  margin: 0;
  color: #5d6b78;
  font-size: 14px;
  line-height: 1.5;
}

.eg-transcription {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  max-width: min(520px, 100%);
}

.eg-transcription button {
  justify-self: start;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: var(--energy-primary);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.eg-transcription button:disabled {
  opacity: 0.62;
  cursor: wait;
}

.eg-transcription-output {
  color: #123247;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
}