css

/**
   * Everything you need to know is below:
   * Source:  https://github.com/vednoc/onyx
   * Discord: https://discord.gg/NpT8PzA
   * License: MIT
   */

  :root {
    --dark:    #272C35;
    --darker:  #1F232A;
    --light:   #D1D1D1;
    --lighter: #E9E9E9;
    --accent:  #7289DA;
    --icon:    #E1E1E1;
    --shadow:  rgba(0,0,0,0.10);
    --mred:    #A3525B;
    --mgreen:  #70A352;
    --mblue:   #527AA3;
    --hover-delay: 0.8s;
    --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg);
    --emojiOpacity: 0.75;
    --version: "WhatsApp by Mew v1.5.2";
    --message: "Updated on 9th of October. Fixed bubbles once again. ";
    --changes: "See the changelog at: https://github.com/vednoc/onyx/releases";
  }

  /* Body reset. */
  body {
    font-family: 'font_name', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Lucida Grande', 'Arial', 'Ubuntu', 'Cantarell', 'Fira Sans', sans-serif;
    background: none;
    background-color: var(--dark); }

  /* Scrollbar track. */
  *::-webkit-scrollbar-track {
    background-color: var(--shadow); }
  /* Scrollbar thumb. */
  *::-webkit-scrollbar-thumb {
    background-color: var(--accent); }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--shadow); }

  /* Highlight selection. */
  ::selection {
    color: var(--light) !important;
    background-color: var(--accent) !important; }
  ::-moz-selection {
    color: var(--light) !important;
    background-color: var(--accent) !important; }
  /* Input placeholders. */
  ::placeholder { color: var(--lighter) !important; }
  ::-moz-placeholder { color: var(--lighter) !important; }
  ::-webkit-input-placeholder { color: var(--lighter) !important; }

  /* Progress. */
  progress[value]::-webkit-progress-bar {
    background: var(--darker); }
  /* Value. */
  progress[value]::-webkit-progress-value {
    background: var(--accent); }
  progress {
    background: var(--darker); }
  ::-moz-progress-bar {
    background: var(--accent) !important; }

  /* App wrapper. */
  #app .app {
    background: none;
    background-color: var(--dark); }

  /* Log-in page. */
  .landing-wrapper::before {
    opacity: 0.6;
    background-color: var(--accent) !important; }
  .landing-window {
    border-radius: 4px !important;
    border: 1px solid var(--shadow);
    box-shadow: 0 8px 32px 0 var(--shadow) !important;
    background-color: var(--darker) !important; }
  .landing-main + div {
    background-color: var(--darker) !important; }
    .landing-main + div img:not(:hover) {
      opacity: 0.3; }
    /* Text color. */
    .landing-main * {
      color: var(--light); }
    /* Reload QR code. */
    ._1MOym {
      background-color: var(--darker) !important; }
    ._3PxOr rect {
      fill: var(--dark) !important; }
    /* Fix QR code. */
    .landing-wrapper div[data-ref] {
      border-radius: 0;
      filter: contrast(150%) !important;
      outline: 4px solid white !important; }
    /* Loader. */
    #startup svg > circle {
      stroke: var(--lighter) !important; }
  /* Logo colors. */
  span._3PxOr svg path:nth-child(1) {
    fill: var(--dark) !important; }


  /* Landing page. */
  .app .iFKgT {
    border: none;
    background-color: var(--dark) !important; }
    /* Image. */
    .app .iFKgT [data-asset-intro-image] {
      max-width: 200px;
      max-height: 200px;
      border-radius: 50%;
      filter: opacity(0.75);
      transition: opacity 1s ease !important; }
    /* Text color. */
    .app .iFKgT * {
      color: var(--light); }
    /* Accent bar. */
    .app .iFKgT::after {
      border-top-color: var(--accent) !important; }
    /* Hide the text. */
    .iFKgT ._3mkas { font-size: 0px; }
    /** Theme note. */
    .app .iFKgT ._3mkas::before {
      display: block;
      margin-bottom: -20px;
      font-size: 16px;
      content: var(--message) var(--changes) !important;
    }
    /** Theme info. */
    .app .iFKgT ._3mkas::after {
      display: block;
      margin-top: 10px;
      padding-top: 10px;
      font-size: 16px;
      content: var(--version) !important;
      border-top: 1px solid var(--darker);
    }

  /* Left drawer. */
  #app .app #side {
    background-color: var(--darker); }

    /* Chat list. */
    #side > header {
      background-color: var(--darker) !important; }

    /* Enable notifications. */
    #side ._2GB6m {
      background-color: var(--accent) !important; }
    /* Low battery. */
    #side ._2t3oV {
      background-color: var(--mred) !important; }
    /* Phone not connected. */
    #side ._1puWZ {
      background-color: var(--mred) !important; }
      /* Text color. */
      #side ._2GB6m *,
      #side ._1puWZ * {
        color: var(--lighter); }

    /* Global -> Search. */
    ._2HS9r {
      border-bottom: 0px solid var(--dark);
      background-color: var(--darker) !important;
      background-color: transparent !important; }
      /* Label background. */
      .ZP8RM label, .ZP8RM._19OGD {
        border: 0px solid var(--dark);
        background-color: var(--dark) !important; }
      /* Input element. */
      .ZP8RM ._183ES,
      .ZP8RM label input {
        color: var(--light);
        background-color: transparent; }
      .ZP8RM::after,
      .ZP8RM > div::after {
        border-color: var(--darker) !important;
        background-color: var(--dark) !important; }

  /* New group and group info buttons. */
  ._1w-mX, ._70TS5, ._11p3Q, .r7sRK, ._8-yzK {
    /* box-shadow: 0 0 8px -1px var(--shadow) !important; */
    color: var(--accent) !important;
    background-color: transparent !important; }
    /* Hide borders. */
    ._2DxRd, ._39cGk {
      border-color: var(--shadow) !important; }
    /* Input text color. */
    ._44uDJ {
      color: var(--light) !important; }

  /* Search results. */
  #side ._1AKfk {
    color: var(--accent);
    background-color: var(--dark); }
    /* Matching results. */
    #side .matched-text {
      color: var(--accent) !important; }

    /* Contacts wrapper. */
    #pane-side, ._11GZy ._2UaNq {
      background-color: transparent !important; }
      /* Contacts. */
      ._2UaNq, ._11GZy ._26JG5 {
        transition: 200ms ease-in-out;
        background-color: transparent !important; }
        /* On event. */
        ._2UaNq._3mMX1, ._2UaNq:hover {
          background-color: var(--dark) !important; }
        /* Text color. */
        ._2UaNq *:not(#z) {
          color: var(--light) !important; }
        /* Borders. */
        ._2UaNq::after, ._2WP9Q {
          border-color: transparent !important; }
        /* Avatar wrapper background. */
        ._3RWII {
          box-shadow: 0 0 8px -1px var(--shadow) !important;
          background-color: transparent !important; }

  /* New message indicator. */
  #side .P6z4j {
    color: var(--lighter) !important;
    background-color: var(--accent) !important; }


  /* Settings. */
  ._11GZy, ._1KDYa {
    background-color: var(--darker) !important; }
    /* Header color. */
    ._11GZy header, ._1KDYa header {
      min-height: 50px;
      height: auto;
      background-color: var(--darker) !important; }
      /* Send contacts. #42 */
      .WOXAS {
        background-color: transparent !important; }
      /* Footer. */
      ._21bWq, ._22oFl {
        background-color: var(--accent) !important; }
      /* Reset header height. */
      ._11GZy header > div:first-child {
        padding: 12px 0 !important;
        height: auto; }
      /* Reset header title in left/right drawers. */
      ._11GZy ._1xGbt {
        margin-top: 2px !important;
        font-size: 16px; }
    /* Transparent sections. */
    ._11GZy ._1CRb5, ._1KDYa ._2LSbZ {
      box-shadow: none !important;
      background-color: transparent !important; }
      /* Highlighted sections. */
      ._11GZy ._3hhmj ._1CkkN {
        background-color: var(--darker) !important; }
      /* Change profile picture. */
      ._11GZy .WX_XW, ._11GZy ._2Lbqu, ._1JS2G {
        background-color: rgba(0,0,0,0.5) !important; }
      /* Text color. */
      ._11GZy * {
        color: var(--light); }
    /* Input element. */
    ._5UNoc ._3hnO5 { border-color: var(--accent) !important; }
    /* Wrapper background. */
    ._3979j { background-color: transparent !important }
    /* Take a new profile picture. */
    ._2HyTU, ._22aOT {
      background-color: var(--darker) !important; }
    /* Confirm button. */
    ._2HyTU ._1g8sv, ._22aOT ._1g8sv {
      box-shadow: 0 2px 4px 0 var(--shadow) !important;
      background-color: var(--accent) !important; }
    /* Zoom in/out. */
    ._1DKwn {
      box-shadow: 0 2px 4px 0 var(--shadow) !important;
      background-color: var(--dark) !important; }

  /* Option/select elements. */
  select {
    color: var(--light);
    border-color: var(--accent); }
  select option { background-color: var(--dark); }

    /* Archived chat image. */
    ._2fq0t ._2Lev2 {
      background-color: var(--dark) !important; }

    /* Body. */
    ._2fq0t ._2sNbV ._1CkkN,
    ._2fq0t ._2sNbV ._2EXPL {
      background-color: transparent; }
      /* On event. TODO: Fixed, but it might still overlap somewhere. */
      .k1feT ._2sNbV > ._1CkkN:hover,
      ._2fq0t ._2sNbV ._1CkkN:hover {
        background-color: var(--dark); }

    /* New group. */
    ._2fq0t ._39pS- {
      background-color: transparent !important; }
      /* Header. */
      ._2fq0t ._1AKfk {
        background-color: var(--darker) !important; }
        /* On event. */
        .k1feT ._2fq0t ._2EXPL._1f1zm,
        .k1feT ._2fq0t ._2EXPL:hover {
          background-color: var(--dark) !important; }
      /* Search element */
      ._66JgU ._3_3Rs {
        border-bottom: none !important; }
      ._66JgU ._3_3Rs input, ._66JgU ._3_3Rs ::placeholder {
        color: var(--lighter) !important; }

  /** Context/dropdown menu. */
  ._2hHc6 {
    background-color: var(--darker) !important;
    box-shadow: 0 4px 16px 0 var(--shadow) !important; }
  ._2hHc6 li:hover, ._2hHc6 li:hover div {
    color: var(--accent) !important;
    background-color: var(--dark) !important; }
  ._2hHc6 div, ._1ArIP div {
    color: var(--light); }

  /* Middle drawer. */
  #main {
    background-color: var(--dark); }
    /* Fix parent-element. #43 */
    ._1ays2 {
      display: flex !important;
      flex-direction: column !important; }

    /* Doodle background. TODO: Plans for the future. */
    #app [data-asset-chat-background="true"] {
    filter: invert(100%) opacity(0.45) !important; }

    /* Main -> Group description. */
    ._3jzsh {
      background-color: var(--darker) !important; }
    /* Text colors. */
    ._3jzsh ._3GIEC, ._3jzsh ._6xQdq {
      color: var(--lighter) !important; }

    /* Jump to present button. */
    ._3KRbU {
      box-shadow: 0 4px 8px 2px var(--shadow) !important;
      background-color: var(--darker) !important; }
    /* Number of messages. */
    ._3KRbU > span > span {
      background-color: var(--accent) !important; }

    /* Header. */
    #main header {
      border: none;
      background-color: var(--dark); }
      /* Text color. */
      #main header ._1WBXd * {
        color: var(--light); }
    /* Header text color. #22 */
    #main > header > div span[title] {
      color: var(--light); }
    /* Header separator. */
    #main > header::after {
      border-bottom-color: var(--darker);
      background-color: transparent; }

  /* Footer. */
  #main footer {
    border-top: 1px solid var(--darker);
    background-color: var(--darker); }
    /* Input wrapper. */
    #main footer > div {
      color: var(--light);
      border: none;
      /* border-bottom: 2px solid var(--dark); */
      background-color: var(--dark); }
      /* Input element. */
      #main footer > div:nth-child(1) > div:nth-child(2) {
        border: none !important;
        color: var(--light);
        background-color: var(--darker) !important; }

  /* Unknown contact. */
  ._2Pown {
    color: var(--light) !important;
    border-color: var(--darker) !important;
    background-color: var(--dark) !important;
    box-shadow: 0 -1px 0 0 inset var(--darker) !important; }
  /* Buttons. */
  ._2ZZub {
    color: var(--lighter) !important;
    background-color: var(--darker) !important; }
  ._2ZZub:hover {
    color: var(--light) !important;
    box-shadow: 0 2px 4px 0 var(--shadow) !important; }

    /* Shared contact button colors. */
    .Ir_Ne {
      color: var(--accent) !important; }
    /* Shared contact text. */
    .AVd_p {
      color: var(--lighter) !important; }
    /* View contact. */
    ._1VwzF {
      background-color: transparent !important; }

  /* Hide 'Type a message' once focused. */
  ._3FeAD.focused div[style] {
    color: transparent !important; }
    /* Placeholder text color. */
    ._3FeAD div[style] {
      transition: color 0.15s ease;
      color: var(--lighter) !important; }

  /* Right drawer. */
  /* .app ._3HZor ._2fq0t {
    background-color: var(--darker); } */
    /* Border-color. */
    .app ._3HZor {
      border-left-color: transparent !important; }
    /* Header. */
    .app ._3HZor header {
      background-color: var(--darker); }
      /* Fix header text vertical position. */
      .app ._3HZor ._1pYs5 {
        margin-top: 4px !important; }
      /* Text color. */
      .app ._3HZor header div {
        color: var(--light); }
      /* Mute/starred messages. */
      ._3_-Si + ._3_-Si ._2x2XP {
        border-color: var(--darker) !important; }

    /* Group info sections. */
    .app ._3HZor ._26JG5, .app ._3HZor ._2UaNq {
      /*box-shadow: 0 1px 3px shadow /**/
      box-shadow: none;
      background-color: transparent; }
      .app ._3HZor ._26JG5:hover {
        background-color: var(--dark) !important; }
      /* Fix borders. */
      .app ._3HZor ._27Ie2,
      .app ._3HZor ._26JG5::before {
        border-color: transparent !important; }
      /* User's name. */
      .app ._3HZor span {
        color: var(--light); }
      .app ._3HZor ._23Un5 {
        color: var(--mred); }
      /** Username colors in group chat. */
      .app [class*="color-"] span {
        color: inherit !important; }

      /* Group options. */
      .app ._3HZor ._1CRb5 ._2EXPL,
      .app ._3HZor ._1CRb5 ._1CkkN {
        transition: 200ms ease-in-out;
        background-color: transparent; }
        /* On event. */
        .app ._3HZor ._1CRb5 ._2EXPL._3xj48:hover,
        .app ._3HZor ._1CRb5 ._1CkkN:hover {
          background-color: var(--dark); }
        /* Text color. */
        .app ._3HZor ._1CRb5 ._2EXPL * {
          color: var(--light); }
        /* Admin color. */
        .app ._3HZor .FPZFa {
          border-color: var(--accent); }


  /* Search messages. TODO: Apply this to all search elements. */
  .a5vst, .a5vst .ZP8RM._19OGD /*, ._3HZor ._1iMEz._3sdhb*/ {
    background-color: var(--darker) !important; }
    /* Input wrapper. */
    .a5vst label {
      border: 0px solid var(--dark) !important;
      background-color: var(--dark) !important; }
    .a5vst .ZP8RM::after {
      border: none !important;
      background-color: var(--dark) !important; }
      .a5vst label input {
        background-color: transparent !important; }

  /* Search messages body. */
  .YAPQk {
    background-color: var(--darker) !important; }
    /* Matching results. */
    ._3HZor .matched-text {
      color: var(--accent) !important; }
    /* On event. */
    .YAPQk ._1f1zm > ._3j7s9,
    .YAPQk ._3j7s9:hover {
      background-color: var(--dark) !important; }

  /* Search messages. */
  #pane-side ._2EXPL {
    background-color: transparent !important; }

  /* Starred messages. */
  ._1WMT2 .tail:not(.PJFFv) {
    background-color: var(--dark) !important; }
  /* Borders. */
  ._1WMT2::before, ._1WMT2::after {
    display: none !important; }
    /* Selected message. */
    ._1WMT2._2V_Wj,
    ._1WMT2._2nA3s,
    ._1WMT2:hover {
      transition: 200ms ease-in-out !important;
      background-color: var(--dark) !important; }
    /* Remove tails. */
    ._1WMT2 .tail-container {
      display: none !important; }
    /* Date text color. */
    ._1WMT2 ._2V2qB {
      color: var(--lighter) !important; }


  /* Message info. */
  #app .app > div:nth-child(2) ._2rGVQ {
    background-color: var(--dark) !important; }
    /* Doodle image. */
    #app .app > div:nth-child(2) [data-asset-chat-background="true"] {
      filter: invert(100%) opacity(0.8) !important; }
    /* Read by. */
    #app .app > div:nth-child(2) ._2AJf5,
    #app .app > div:nth-child(2) ._19xqi {
      box-shadow: none !important;
      background-color: transparent !important; }
    /* Read by text color. */
    #app .app > div:nth-child(2) ._2AJf5 span {
      color: var(--accent) !important; }
    /* Forwarded message info. #44 */
    ._1NZZN, ._3XHR- {
      border-color: var(--dark) !important;
      background-color: transparent !important;
      box-shadow: none !important; }
    ._1w7vp {
      color: var(--light) !important; }

  /* Media/docs/links section. */
  ._27U_m, .yrOIH {
    border-bottom: 1px solid var(--dark);
    background-color: var(--darker) !important; }
  /* Active indicator. */
  ._27U_m::before {
    background-color: var(--accent) !important; }
  /* Text color. */
  ._26Nvu,
  ._27U_m .Y1iVg {
    color: var(--lighter) !important; }
  /* Selected links. */
  ._27U_m .Y1iVg._3caqI {
    color: var(--light) !important; }
  /* Selected image. */
  ._2Ji5m {
    border-color: var(--darker) !important; }

  /** Media viewer. */
  ._1iNsf, ._2KgjI {
    background-color: transparent !important; }
    /* Pseudo-element background. */
    ._1iNsf::before, ._2KgjI::before {
      content: ""; position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background-color: var(--dark);
      opacity: 0.8; z-index: -1; }
    /* Chevron/preloader background. */
    ._3yth3 {
      box-shadow: 0 2px 4px -1px var(--shadow) !important;
      background-color: var(--darker) !important; }

    /* Header. */
    ._1iNsf > div:first-child,
    ._2KgjI > div:first-child {
      box-shadow: 0 1px 0 0 var(--darker);
      background-color: var(--dark) !important; }
      /* Inner element. */
      ._1iNsf > div:first-child > div > div,
      ._2KgjI > div:first-child > div > div {
        background-color: transparent !important; }
        /* Text color. */
        ._1iNsf > div:first-child > div > div *,
        ._2KgjI > div:first-child > div > div * {
          color: var(--light); }

    /* Footer. */
    ._2n0jo {
      border-color: var(--darker) !important;
      background-color: var(--dark) !important; }
      /* Selected image. */
      ._2AP3i .cJP5q {
        border: none !important;
        transform: scale(1) !important;
        outline: 3px solid var(--accent) !important }
        ._2AP3i ._1LdNS:hover:not(.cJP5q):not(#spec) {
          outline: 3px solid var(--accent) !important; }

  /* Highlight message bubbles. #29 */
  div.message-in.velocity-animating > div > div,
  div.message-out.velocity-animating > div > div {
    background-color: var(--accent) !important }
  .velocity-animating > .tail > .tail-container {
    border-top-color: var(--accent) !important }

  /* Bubble colors. #49 #54 */
  .message-in > div:not(.a81-s) > div,
  .message-out > div:not(.a81-s) > div {
    background-color: var(--darker) !important; }
    ._2v02G {
      color: var(--lighter) !important; }

    /* Message text color. */
    .message-in .selectable-text,
    .message-out .selectable-text,
    .quoted-mention,
    ._1upWv {
      color: var(--light) !important; }

    /* Voice messages. */
    ::-moz-range-thumb { background-color: var(--accent) !important }
    ::-moz-range-track { background-color: var(--lighter) !important }
    ._7sUPO { background-color: var(--accent) !important }
    ._1FWQp { color: var(--light) !important }

    /* Use accent color for links. #20 */
    a[href].selectable-text {
      color: var(--accent) !important; }

    /* Forwarded message. */
    ._15aTv {
      color: var(--lighter) !important; }

    /* Show more. */
    ._1Jc9f { color: var(--accent) !important }

    /* Deleted message. */
    ._3uHCS { color: var(--lighter) !important }
    span[class][data-icon="recalled-out"] svg path { fill: red !important }

    /* Phone numbers of users that aren't your contacts. */
    #main ._1F9Ap {
      color: var(--lighter) !important; }

    /* Mentions. */
    .matched-mention, .matched-mention .at-symbol {
      color: var(--accent) !important; }

      /* Message meta text color. */
      [class*="message-"] div > div:last-child span {
        color: var(--light); }

    /* Image/gif/video meta wrapper. */
    .KYpDv ._1DZAH {
      bottom: 8px;
      padding: 2px 5px;
      border-radius: 4px;
      background-color: var(--shadow); }
      /* Text color. */
      .KYpDv ._1DZAH ._3EFt_ {
        margin-top: 0px;
        color: var(--lighter); }

      /* Message options for images. */
      ._3EQsG._1eJVc {
        background: none !important; }
      /* Smooth transition. */
      .message span:last-child div {
        transition: 50ms ease-in-out !important; }

    /* Typing... */
    span._2ZAIy {
      color: var(--accent) !important; }

    /* System messages. */
    .a7otO {
      box-shadow: 0 2px 8px 0px var(--shadow) !important;
      border-bottom: 3px solid var(--shadow) !important;
      background-color: var(--darker) !important; }
      /* Text color and shadows. */
      .a7otO * {
        text-shadow: none !important;
        color: var(--lighter) !important; }
      /* New message. */
      #main ._3Xx0y {
        border: none !important;
        background-color: var(--darker) !important; }
        /* X unread messages. */
        #main ._3Xx0y span {
          box-shadow: 0 0 8px 0 var(--shadow) !important;
          color: var(--light) !important;
          background-color: var(--dark) !important; }

    /* Loader. */
    ._2sOZc {
      box-shadow: 0 2px 4px -1px var(--shadow) !important;
      background-color: var(--darker) !important; }

    /* Document embeds. */
    ._3a29n, ._1mrMQ {
      background-color: var(--dark) !important; }

    /* Embeds description */
    .HNuTV {
      background-color: var(--dark) !important; }

    /* Link embeds. */
    ._3qblR, ._1SsXF {
      box-shadow: 0 0 0 1px var(--dark) !important;
      background-color: var(--dark) !important; }

    /* Thumbnail. */
    ._3_nIn {
      background-color: var(--darker) !important; }


  /* Reply section. (= */
  footer ._1ebw2 {
    box-shadow: 0 0px 8px 0 var(--darker) !important;
    background-color: var(--darker) !important; }
  /* Fix margins. */
  footer ._1ebw2 > div:first-child {
    margin: 0 0 5px 10px !important;
    background-color: transparent !important; }
  /* Reply content. */
  footer ._1ebw2 > div:first-child > div {
    background-color: var(--dark) !important; }
  /* Close button. */
  footer ._1ebw2 > div:last-child {
    position: relative;
    margin: 0 8px 5px 8px !important;
    background-color: transparent !important; }
  /* Make the button larger. */
  footer ._1ebw2 > div:last-child > div svg {
    padding: 18px;
    border-radius: 6px;
    background-color: var(--dark); }

  /* Mention group members. */
  ._2j-wI, .XSeqj {
    color: var(--light);
    border-left: none !important;
    background-color: var(--darker) !important; }
  /* Wrapper. */
  ._2j-wI .XSeqj {
    transition: 300ms ease-in-out !important;
    background-color: transparent !important; }
  /* Active. */
  ._2j-wI .XSeqj._1Yz8K,
  ._2j-wI .XSeqj:hover {
    background-color: var(--accent) !important; }


  /* Select messages. */
  #main ._2AqZl {
    background-color: var(--shadow); }
    /* Hover over messages. */
    #main .qTFAl {
      transition: 0.15s ease !important; }
      /* Selected message. */
      #main .qTFAl:hover, #main .qTFAl._3Z2tD {
        background-color: var(--shadow) !important; }
    /* Selected icon. */
    ._15wNI {
      border-color: var(--accent) !important;
      background-color: var(--accent) !important; }
      /* Checkmark. */
      ._15wNI ._1ygtt {
        border-bottom-color: var(--light);
        border-right-color: var(--light); }
    /* Footer/control/options. */
    #main ._1hhkM {
      background-color: var(--darker); }


  /* Bubble tails -- experimental. */
  .tail .tail-container {
    width: 0px !important;
    height: 10px !important;
    z-index: 0 !important;
    border-top: 12px solid var(--darker);
    background: none !important; }
    .message-in > .tail > .tail-container {
      left: -10px !important; top: 0px;
      border-left: 10px solid transparent;
      border-radius: 5px 0 0 0; }
    .message-out > .tail > .tail-container {
      right: -10px !important; top: 0px;
      border-right: 10px solid transparent;
      border-radius: 0 5px 0 0; }

    /* Disable tails everywhere. */
    /* Tails are enabled. */

    /* Disable tails everywhere except in chat. */
    .starred-msg-wrapper .tail-container,
    .message-gallery .tail-container,
    .MS-DH .tail-container {
      display: none !important; }
      /* Rounded corners. */
      .message-gallery.tail-override-left,
      .MS-DH .tail-override-left {
        border-radius: 7.5px !important; }

  /** Stickers. */
  ._1rK-b {
    background: none !important; }
  /* Sender. */
  ._3Mf7Z {
    background-color: var(--darker) !important; }
  /* Time/status. */
  ._3qAvH {
    background-color: var(--darker) !important; }
  ._3qAvH * {
    color: var(--light) !important; }

  /* Message options. */
  ._15CAo {
    background: linear-gradient(90deg, transparent, var(--darker) 40%) !important;
  }
  /* Reset sticker menu background. */
  .a81-s > div + span > div { background: none !important }
  /* Context menu buttons. */
  [data-js-context-icon='true'] {
    background-image: none !important;
    background: none !important; }
  [data-js-context-icon='true'] + div { background: var(--darker) !important }

  /* Emoji/gif/stickers menu. */
  .QChXd, ._20KNO, .RxbUw, ._2PpWQ > div {
    background-color: var(--dark) !important; }
    /* Temporary fix for emoji container. */
    #main footer > div:nth-child(2) > div {
      border: 0; }
    /* Nib. */
    .iqJMX {
      background-color: var(--dark) !important; }
    /* Emoji tabs. */
    ._2avTY {
      background: var(--darker) !important; }
    /* Tab indicator. */
    ._2avTY .Orl3a,
    ._1Wbpa {
      background-color: var(--accent) !important; }
    /* Active button. */
    ._1oNFt.-XQxp path {
      fill: var(--accent) !important; }

    /* Search emojis. */
    ._2Qm0c, ._2Qm0c label {
      box-shadow: none !important;
      background-color: var(--dark) !important; }
      /* Text color. */
      ._2Qm0c input {
        color: var(--light) !important; }

    /* Gif preloader background. */
    ._2x9yi {
      /* border: 2px dashed ; */
      background-color: var(--darker) !important; }

      /* Preview. */
      ._1drQ- {
        background-color: var(--dark) !important; }
        /* Header. */
        ._1drQ- header {
          background-color: var(--accent) !important; }
          /* Text color. */
          ._1drQ- header *, ._1drQ- .media-body * {
            color: var(--lighter) !important; }
        /* Footer. */
        ._1drQ- .media-collection {
          background-color: var(--darker); }
          /* Button. */
          ._1drQ- .media-collection .btn-fill, ._1drQ- ._3hV1n {
            color: var(--lighter);
            background-color: var(--accent) !important; }


  /* Emoji-wanna-be-round. */
  .emojik {
    opacity: var(--emojiOpacity);
    transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04);
    clip-path: circle(47%) !important; }
    /* Selected emoji. */
    .emojik:focus, .emojik:hover, .emojik.selected {
      box-shadow: none !important;
      opacity: 1;
      transform: scale(1.15); }

    /* Emoji quick selection. */
    ._2mlOb {
      border: 0 !important;
      border-bottom: 1px solid var(--darker) !important;
      background-color: var(--darker) !important; }
    /* Emoji race color popup. */
    ._1gFYk {
      background-color: var(--dark) !important; }
      /* Separator. */
      ._1gFYk ul li:first-child {
        border-right: 1px solid var(--darker) !important; }
      /* Emoji menu triangle. */
      ._1gFYk .iqJMX {
        background-color: var(--dark) !important; }
    /* Quick replies. #56 */
      ._1omcu._2saG0, ._2saG0 {
        background-color: var(--darker) !important; }


  /* Backdrop. */
  ._3Fq9Y, #startup, #initial_startup {
    background-color: var(--dark) !important; }
    /* Modal. */
    ._3Fq9Y ._3RiLE,
    ._3gUiM ._2dA13 ._1CnF3,
    ._2dA13 ._18wuJ, ._2dA13 .IuYNx {
      box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important;
      background-color: var(--darker) !important; }
      /* Selected contact. */
      ._3gUiM ._2EXPL._1f1zm,
      ._3gUiM ._2EXPL:hover,
      ._2EXPL._3ntaf:hover {
        background-color: var(--dark) !important; }
      /* Text color. */
      ._3Fq9Y ._3RiLE *,
      ._3gUiM ._1CnF3 * {
        color: var(--light); }
      /* Header/footer. */
      .XOIaT {
        background-color: var(--dark) !important; }
      /* Empty element below search bar. */
      ._2fq0t span._3fOoY {
        display: none !important; }


  /* Accent buttons. */
  ._3PQ7V {
    color: var(--lighter) !important;
    background-color: var(--accent) !important; }
  ._3PQ7V:hover {
    opacity: 0.8; }
  /* Link buttons. */
  ._23_1v:hover {
    box-shadow: none !important;
    color: var(--accent) !important;
    background-color: transparent !important; }
  /* Muted checkbox color. */
  ._1VD7W {
    border-color: var(--accent);
    background-color: var(--accent); }
  /* Buttons. */
  .PNlAR:hover, ._1WZqU:hover {
    background-color: var(--dark) !important; }

  /* Drop items. (-: */
  .drag-drop, ._2n-96 {
    background-color: var(--dark) !important; }
    /* Footer. */
    .NeQRT {
      background-color: var(--darker) !important; }
    /* Border. */
    ._2n-96 ._3L-be {
      border: 5px dashed var(--accent) !important;
      color: var(--light) !important; }

    /* Add file icon. */
    .GpvML, ._1ypOz, ._3fktq, ._1g8sv {
      background-color: var(--dark) !important;
      box-shadow: 0 2px 4px var(--shadow) !important; }
      /* Border. */
      ._1gcLL::after {
        background-color: var(--accent) !important; }

    /* Accent border. */
    .CzI8E, ._31WRs ._1DTd4, ._2Fvnm ._3ogpF {
      border-bottom-color: var(--accent) !important; }
    /* Text color. */
    ._7HWvs, .A_Kh_ {
      color: var(--light) !important; }

  /** Status area! */
  .app-wrapper-web ._2dLx9 {
    background-color: transparent !important; }
  /* Pseudo-element background. */
  .app-wrapper-web ._2dLx9::before {
    content: ""; position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: var(--dark);
    opacity: 0.8; z-index: -1; }
    /* Status icon. */
    span[data-icon*="status-v3"] > svg > path:first-child {
      opacity: 0.55 !important; }
    /* Left hand side. */
    ._2dLx9 .IMn_C { background-color: var(--darker) !important; }
    /* Text color. */
    .IMn_C span { color: var(--light) !important; }
    .qlhJH hr { color: var(--dark) !important; }
    /* Right hand side. */
    ._2dLx9 ._3MBzN { background-color: var(--dark) !important; }
    /* Text color. */
    ._2dLx9 ._3MBzN div { color: var(--lighter) !important; }
    /* Reply to status. */
    .QRsOy { background-color: var(--dark) !important; }
    /* Input bar. */
    ._3FeAD._2nW8k { background-color: var(--dark) !important; }

  /* Remove weird iframes. */
  object { display: none !important; }

  /* Global icon color. */
  span[data-icon^="business-"] > svg path,
  span:not([data-icon="image"]) > svg > path {
    transition: 200ms ease;
    fill: var(--icon) !important; }
    /* On event. */
    span:not([data-icon="image"]):hover > svg > path {
      /* fill: var(--accent) !important; */
      opacity: 0.3 !important; }

  /* Upload files. */
  .azEEh { color:var(--light) !important; }
  ._2sn3C { background-color: var(--darker) !important; }
  .Ijb1Q::after { box-shadow: 0 4px 8px 2px var(--shadow) !important; }

  /* Default profile picture background. */
  span[data-icon^="default-"] svg > path:first-child {
    fill: var(--dark) !important; }

  span[data-icon^="default-"] svg path:last-child {
    opacity: 0.7;
    fill: var(--icon) !important; }

  /*  Sent message. */
  span[data-icon="msg-dblcheck"] svg path,
  span[data-icon="status-dblcheck"] svg path,
  span[data-icon="msg-check"] svg path,
  span[data-icon="status-check"] svg path {
    fill: var(--light) !important;
    opacity: 0.5 !important; }

  /* Sent AND seen message. */
  span[data-icon="msg-dblcheck-ack"] svg path,
  span[data-icon="status-dblcheck-ack"] svg path,
  span[data-icon="msg-dblcheck-ack-light"] svg path,
  span[data-icon="status-v3-unread"] > svg > path:last-child {
    fill: var(--accent) !important;
    opacity: 1 !important; }

  /* Misc icons fix. */
  span[data-icon^="chevron-"] svg path,
  span[data-icon="x-viewer"] svg path,
  span[data-icon="download"] svg path,
  span[data-icon="forward"] svg path,
  span[data-icon="star-btn"] svg path,
  span[data-icon="audio-file"] svg path:last-child,
  span[data-icon="new-group"] svg path,
  span[data-icon="add-user-light"] svg path,
  span[data-icon="link"] svg path {
    fill: var(--icon) !important; }

  /* Audio message icons. #55 */
  span[data-icon^="ptt-"] svg path:first-child {
    fill: var(--dark) !important; }
  span[data-icon^="ptt-"] svg path:last-child {
    fill: var(--accent) !important; }

  /* Logo. */
  ._3CSsZ > svg > path:first-child {
    fill: var(--accent) !important; }
  span[data-icon="logo"] svg path:nth-child(1) {
    fill: white !important; }
  span[data-icon="alert-phone"] svg path:first-child,
  span[data-icon="logo"] svg path:nth-child(1n+2),
    span[data-icon="whatsapp-logo"] svg path:first-child {
    fill: var(--darker) !important; }

  /* GIF icon opacity. */
  span[data-icon="emoji-gifs"] svg path {
    fill: var(--icon) !important;
    fill-opacity: 1 !important; }

  /* Be cautious icons. */
  span[data-icon="exit"] svg path,
  span[data-icon="thumbs-down"] svg path,
  span[data-icon="delete-danger"] svg path {
    fill: var(--mred) !important; }

  /* Audio message. */
  span[data-icon="audio-file"] svg path {
    fill: rgba(255, 173, 31, 0.8) !important; }
    /* Audio length bar. */
    ._22cMG.fS1bA .nDKsM {
      background-color: var(--accent) !important; }
      /* Slider thumb. */
    input[type=range]::-webkit-slider-thumb {
      cursor: pointer;
      background: var(--accent) !important; }
    /* Audio length. */
    ._3HwRC, ._1lxsr {
      color: var(--light) !important; }

  /* Rounded buttons. */
  span svg > path[fill="#00BFA5"] {
    fill: var(--accent) !important; }

  /* Disable background image on small resolutions. */
  @media screen and (max-width: 1441px) {
    ._1FKgS::after {
      display: none !important;
    }
  }

  @media screen and (min-width: 1441px) {
    /* Animation. */
    html[dir=ltr] ._3dqpi {
      /* display: none !important; */
      animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38); }

    /* App wrapper. */
    #app .app {
      border-radius: 8px;
      box-shadow: 0 4px 24px -2px var(--shadow); }

    /* Fullscreen. */
    /* Fullscreen is disabled. */

    /* App background. */
      #app > div::after {
    top: 0px; right: 0px;
    bottom: 0px; left: 0px;
    height: auto; width: auto;
    background-color: var(--dark) !important;
    background-image: var(--image) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }

  }

  /* "Privacy mode." */
  /* Blurred contacts are disabled. */
  /* Blurred images are disabled. */

  /* Compact mode. */
      /* Reset min app height/width reset. */
    @media screen and (max-height: 500px) { #app > div > .app { min-height: auto; }}
    @media screen and (max-width: 648px) { #app > div > .app { min-width: auto; }}
    /* Custom compact mode. */
    @media screen and (max-width:720px) {
      /* .app > div div:hover { box-shadow: 0 0 0 2px inset crimson !important; } /**/
      /* Fix header width hiding icons. */
      #side > header { min-width: 240px; }
      /* Hide notifications. */
      #side > header + span { display: none }
      /* Search bar width. */
      .ZP8RM:not(._19OGD) label { padding: 0px; }
      /* ? Reset panes. */
      .three > div:nth-child(3),
      .three > div:nth-child(2) > div:nth-child(1),
      .two > div:nth-child(2) > div:nth-child(1),
      .two > div:nth-child(3) {
        flex: 0 0 75px !important; }
      /* Settings/Starred/Etc. */
      .two > div:nth-child(2) > div._3kF8H {
        transition: 0.3s ease-in-out !important;
        flex: 0 0 75px !important; }
      .two > div:nth-child(2) > div._3kF8H:hover {
        flex: 0 0 30% !important; }
      /* Upload preview. */
      .two > div:nth-child(2) > div._2rI9W {
        flex: 0 0 calc(100% - 75px) !important; }
      /* Don't expand contacts if there are 3 panes. */
      .three > div:nth-child(3):hover {
        flex: 0 0 75px !important; }
      /* Expand contacts. */
      .two > div:nth-child(3) {
        min-width: 1px !important;
        transition: 0.3s ease-in-out !important;
        transition-delay: 0.2s !important; }
      .two > div:nth-child(3):hover {
        min-width: 400px !important;
        transition-delay: var(--hover-delay) !important;
        flex: 0 0 30% !important; }
      /* Pane -> Chat. */
      .three ._2rI9W { flex: 1 1 auto !important; }
      /* Pane -> Info. */
      .three ._1C9rS {
        max-width: 400px;
        width: calc(100% - 76px); }
      /* ? Hack for positioning unread counter. */
      ._2UaNq .xD91K {
        z-index: 199 !important;
        display: flex !important;
        flex-direction: row-reverse !important; }
      /* ? Unread counter. */
      ._2UaNq .xD91K ._1ZMSM .P6z4j {
        z-index: 999 !important;
        line-height: 23px !important;
        margin: 7px 00px 0px -60px !important;
        transition: 0.15s ease !important;
        box-shadow: 0 0 0 3px var(--darker) !important; }
      /* On event. */
      #side ._2UaNq._3mMX1 .xD91K .P6z4j, #side ._2UaNq:hover .xD91K .P6z4j {
        /* color: var(--accent) !important;
        background-color: var(--darker) !important; */
        box-shadow: 0 0 0 3px var(--dark) !important; }
      /* Reset text position. */
      ._2UaNq .xD91K span[dir] { margin-left: 10px; }
      /* Remove icons we don't need. */
      #side ._1ZMSM > span:not(.P6z4j) { display: none !important }
      /* Remove overflow for unread messages counter. */
      #side ._0LqQ {
        margin-left: -10px !important;
        overflow: unset !important }
      /* Message dropdown thing; fixes ticks jumping left and right. */
      #side ._0LqQ > span:last-child:not(._17TaE) { display: none !important }
      /* ? Hack for positioning message status. */
      ._3VIru {
        z-index: 101;
        position: absolute;
        margin: 5px 0 0 -20px;
        border-radius: 50%;
        transition: 0.15s ease !important;
        background-color: var(--dark);
        box-shadow: 0 0 0 3px var(--darker); }
      /* Make SVG smaller. */
      ._3VIru > span > svg {
        padding: 2px;
        height: 14px !important;
        width: 14px !important; }
      /* Background on event. */
      ._2UaNq:hover ._3VIru, ._2UaNq._3mMX1 ._3VIru {
        background-color: var(--darker);
        box-shadow: 0 0 0 3px var(--dark) !important; }
    }


  /* Custom CSS rules. */
  /**
   * Userstyles.org limitations prevent this;
   * Install UserCSS version from GitHub to use it.
   */