:root {
  --base: #1e1e2e;
  --base-ninety: rgb(255 255 255 / 90%);
  --base-seventy-five: rgb(255 255 255 / 75%);
  --base-seventy: rgb(255 255 255 / 70%);
  --base-fifty: rgb(255 255 255 / 50%);
  --base-fourty: rgb(255 255 255 / 40%);
  --base-thirty: rgb(255 255 255 / 30%);
  --base-twenty: rgb(255 255 255 / 20%);
  --base-ten: rgb(255 255 255 / 10%);
  --base-nine: rgb(255 255 255 / 9%);
  --base-five: rgb(255 255 255 / 5%);
  --container-color: #11111b;
  --container-dark-color: #181825;
  --list-header-color: #1e1e2e;
  --blue: #89b4fa;
  --white: #fff;
}

html.__fb-dark-mode {
  --icon-primary-color: #f38ba8;
  --messenger-card-background: var(--container-dark-color);
}

div.__fb-dark-mode {
  --messenger-card-background: var(--list-header-color);
}

html.__fb-dark-mode-mode body {
  color: var(--base-seventy);
  background: var(--container-color) !important;
}

/* Fixes appearance of "Verify Account" screen text */
html.__fb-dark-mode-mode ._3-mr ._3-mt,
html.__fb-dark-mode-mode ._3-mr ._3-mu {
  color: #fff;
}

html.__fb-dark-mode-mode ._3v_o, /* Login screen */
html.__fb-dark-mode-mode body.UIPage_LoggedOut ._li, /* 2FA screen */
html.__fb-dark-mode-mode body.UIPage_LoggedOut ._4-u5 /* 2FA screen */ {
  background-color: var(--container-dark-color);
}

/* Login title and names */
html.__fb-dark-mode-mode ._5hy4,
html.__fb-dark-mode-mode ._3403 {
  color: var(--base-fourty) !important;
}

/* Login inputs */
html.__fb-dark-mode-mode ._3v_o ._55r1 {
  background: var(--base-five);
  color: var(--base-seventy);
}
html.__fb-dark-mode-mode ._3v_o ._55r1::-webkit-input-placeholder {
  color: var(--base-thirty) !important;
}

/* "Keep me signed in" checkbox */
html.__fb-dark-mode-mode .uiInputLabelInput {
  filter: opacity(70%);
}

/* "Keep me signed in" text */
html.__fb-dark-mode-mode .uiInputLabelLabel {
  color: var(--base-fourty) !important;
}

/* 2FA screen modal */
html.__fb-dark-mode-mode body.UIPage_LoggedOut ._4-u8 {
  background: var(--container-color);
  border-color: var(--base-five) !important;
}

/* 2FA screen modal title */
html.__fb-dark-mode-mode body.UIPage_LoggedOut ._2e9n {
  border-color: var(--base-five);
  color: #fff;
}

/* 2FA screen modal separator */
html.__fb-dark-mode-mode body.UIPage_LoggedOut ._p0k ._5hzs {
  border-color: var(--base-five);
}

/* 2FA screen modal separators */
html.__fb-dark-mode-mode body.UIPage_LoggedOut a {
  color: var(--blue);
}

/* 2FA screen modal input */
html.__fb-dark-mode-mode body.UIPage_LoggedOut input {
  background: var(--base-ten);
  border-color: var(--base-ten);
  color: var(--base-ninety);
}

/* Cookies notification: background */
html.__fb-dark-mode-mode ._9o-w ._9o-c {
  background: var(--container-color) !important;
}
/* Cookies notification: text */
html.__fb-dark-mode-mode ._9o-g {
  color: var(--base-seventy) !important;
}
/* Cookies notification: collapsible headers */
html.__fb-dark-mode-mode ._9o-l {
  color: var(--base-seventy) !important;
}
/* Cookies notification: subheaders */
html.__fb-dark-mode-mode ._9si- {
  color: var(--base-seventy) !important;
}
/* Cookies notification: hamburger menu */
html.__fb-dark-mode-mode
  ._42ft._4jy0._55pi._2agf._4o_4._9o-e._p._4jy3._517h._51sy {
  background: var(--container-color) !important;
}
/* Cookies notification: hamburger menu background */
html.__fb-dark-mode-mode ._54ng {
  background: var(--container-color) !important;
}
/* Cookies notification: hamburger menu text */
html.__fb-dark-mode-mode ._54nh {
  color: var(--base-seventy) !important;
}
/* Cookies notification: hamburger menu column borders */
html.__fb-dark-mode-mode ._54nc {
  border-color: var(--container-color) !important;
}
/* Cookies notification: icons */
html.__fb-dark-mode-mode .img.sp_ng1YXMZLXub {
  filter: invert(0.66);
}
/* Cookies notification: rectangular boxes */
html.__fb-dark-mode-mode .pam._9o-n.uiBoxGray {
  background-color: var(--base-ten) !important;
}
html.__fb-dark-mode-mode ._9xq0 {
  color: var(--base-seventy) !important;
}

/* Top bar: App menu button color */
/* Top bar: New message button color */
.j83agx80.pfnyh3mw .ozuftl9m .a8c37x1j.ms05siws.hwsy1cff.b7h9ocf4 {
  fill: currentcolor;
  color: var(--primary-text);
}

/* Chat list: Mute icon */
.bp9cbjyn.j83agx80.btwxx1t3 .dlv3wnog.lupvgy83 .a8c37x1j {
  fill: #11111b;
  color: var(--primary-text);
}

/* Right sidebar: icons */
.x1qhmfi1.x14yjl9h.xudhj91.x18nykt9.xww2gxu.x1fgtraw.x1264ykn.x78zum5.x6s0dn4.xl56j7k
  svg
  path {
  fill: currentcolor;
  color: var(--primary-text);
}

/* Contact list: delivered icon color */
.aahdfvyu [role="grid"] .a8c37x1j.ms05siws.hwsy1cff.b7h9ocf4 {
  fill: currentcolor;
  color: var(--primary-text);
}

/* Messenger settings: Privacy & safety icon color */
.x1lliihq.x1k90msu.x2h7rmj.x1qfuztq.x198g3q0.xxk0z11.xvy4d1p {
  fill: currentcolor;
  color: var(--primary-text);
}

/* Removing top gap */
/* TODO: Remove when fixed by fb */
.__fb-dark-mode {
  --header-height: 0 !important;
}

/* Message list: fix for received messages text color in dark mode */
/* TODO: Remove when fixed by fb */
.__fb-dark-mode .__fb-light-mode {
  --primary-text: #cdd6f4;
}

/* Radio buttons */
.x14yjl9h.xudhj91.x18nykt9.xww2gxu.x13fuv20.xu3j5b3.x1q0q8m5.x26u7qi.xamhcws.xol2nv.xlxy82.x19p7ews.x9f619.x1rg5ohu.x2lah0s.x1n2onr6.x1tz4bnf.xmds5ef.x25epmt.x11y6y4w.xxk0z11.xvy4d1p {
  --accent: var(--primary-text);
}

/* Backgrounds of various buttons ("Join room", "Visit Group", Audio call, etc.) */
/* TODO: Remove when fixed by fb, since -floating should not be here */
html.__fb-dark-mode-mode
  .x14yjl9h.xudhj91.x18nykt9.xww2gxu.x6s0dn4.x972fbf.xcfux6l.x1qhh985.xm0m39n.x9f619.x3nfvp2.xl56j7k.x1n2onr6.x1qhmfi1.xc9qbxq.x14qfxbe,
html.__fb-dark-mode-mode
  .x1n2onr6.x1ja2u2z.x78zum5.x2lah0s.xl56j7k.x6s0dn4.xozqiw3.x1q0g3np.xi112ho.x17zwfj4.x585lrc.x1403ito.x972fbf.xcfux6l.x1qhh985.xm0m39n.x9f619.xn6708d.x1ye3gou.x1qhmfi1.x1r1pt67 {
  background-color: var(--secondary-button-background-floating) !important;
}

/* Search results: Close button */
/* TODO: Remove when fixed by fb, since --always-white is not good here */
html.__fb-dark-mode-mode .x14hiurz.x1r1pt67 {
  background-color: var(--secondary-button-background) !important;
}

/* Attachment background color in Chat Box */
/* TODO: Remove when fixed by fb, since #d6d9dd is too bright here */
/* Current Background-Color is same style as add attachment button */
html.__fb-dark-mode-mode .x1ybostu {
  background-color: rgba(134 142 153 / 25%);
}

/* Recipient Pills in new message form */
/* TODO: Remove when fixed by fb, since #f3f3f4 is too bright here */
/* It seems FB uses shades of blue here */
html.__fb-dark-mode-mode .x4noic3 {
  background-color: var(--secondary-button-background);
}

/* Create room icon color */
html.__fb-dark-mode-mode .x1p6odiv {
  color: var(--primary-icon);
}