body.light-mode .emoji-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
  }

  body.light-mode .emoji {
      font-size: 2.2rem;
      cursor: pointer;
      padding: 16px;
      border: 2px solid #eceaea;
      border-radius: 12px;
      transition: transform 0.2s;
  }

  body.light-mode .emoji:hover {
      background-color: #b2f5d4;
      transform: scale(1.2);
      border: solid 2px #23eb98;
      border-style: dotted;
  }

  body.light-mode .itemMenu:hover {
      /* font-weight: 500; */
      transform: scale(1.1);
      background-color: #d9f1e5;
      border: solid 2px #23eb98;
      border-style: dotted;
  }

  body.light-mode .custom-tooltip {
      --bs-tooltip-bg: #712cf9;
      --bs-tooltip-color: var(--bs-white);
  }



  /* 
    --
    TEMA : MODO DARK 
    --
*/

  /* Tema Claro */
  body.light-mode {
      background-color: #fdf6e3;
      color: #333;
  }

  body.light-mode {
      background-color: #fff;
  }


  /*
 :: Estilo do Menu Lateral (Categorias)
 */

  body.light-mode .card .separator {
      border-top: 1.5px solid #42434a;
  }

  body.light-mode .card .list {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0px 10px;
  }

  body.light-mode .card .list .element {
      display: flex;
      align-items: self-start;
      color: #353b46;
      gap: 10px;
      transition: all 0.3s ease-out;
      padding: 4px 7px;
      border-radius: 6px;
      cursor: pointer;
  }

  body.light-mode .card .list .element svg {
      width: 19px;
      height: 19px;
      transition: all 0.3s ease-out;
  }

  body.light-mode .card .list .element .label {
      font-weight: 600;
  }

  body.light-mode .card .list .element:hover {
      background-color: #5353ff;
      color: #ffffff;
      transform: translate(1px, -1px);
  }

  body.light-mode .card .list .delete:hover {
      background-color: #8e2a2a;
  }

  body.light-mode .card .list .element:active {
      transform: scale(0.99);
  }

  body.light-mode .card .list:not(:last-child) .element:hover svg {
      stroke: #ffffff;
  }

  body.light-mode .card .list:last-child svg {
      stroke: #bd89ff;
  }

  body.light-mode .card .list:last-child .element {
      color: #3f1f69;
  }

  body.light-mode .card .list:last-child .element:hover {
      background-color: rgba(56, 45, 71, 0.836);
  }


  body.light-mode .card {
      width: 200px;
      background-color: rgb(198 202 213);
      border-radius: 10px;
      padding: 15px 0px;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }