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

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

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

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

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



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


 /* Tema Escuro */

 body.dark-mode {
     background-color: #121212;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
 }


 body.dark-mode .navbar {
     background-color: #212529;
     color: #ffffff;
 }

 body.dark-mode .nav-link {
     color: #ffffffc2;
 }

 body.dark-mode .emoji {
     background-color: rgb(41, 41, 41);
     border: solid 2px #121212;
     padding: 16px;
     border-radius: 12px;
     transition: transform 0.2s;
 }

 body.dark-mode .emoji:hover {
     background-color: rgba(20, 138, 40, 0.32);
     transform: scale(1.2);
     border: solid 2px rgba(55, 139, 69, 0.64);
     border-style: dotted;
 }

 body.dark-mode .btn {
     background-color: #333;
     color: #eee;
     border-color: #444;
 }

 body.dark-mode .btn:hover {
     background-color: #444444;
     color: rgb(194, 223, 181);
 }

 body.dark-mode .itemMenu:hover {
     /* font-weight: 500; */
     transform: scale(1.1);
     background-color: rgba(31, 179, 112, 0.42);
     border: solid 2px rgb(32, 122, 82);
     border-style: dotted;
     color: rgb(194, 223, 181);
 }

 body.dark-mode .searchInput {
     /* font-weight: 500; */
     background-color: #212529;
     color: rgba(158, 158, 158, 0.795);
     -webkit-text-fill-color: #23eb9891;
 }

 body.dark-mode .alert {
     /* font-weight: 500; */
     background-color: #005c3691;
     color: rgba(158, 158, 158, 0.795);
     border: none;
     -webkit-text-fill-color: #23eb9891;
 }

 body.dark-mode .card {
     width: 200px;
     background-color: rgba(36, 40, 50, 1);
     background-image: linear-gradient(135deg, rgba(36, 40, 50, 1) 0%, rgba(36, 40, 50, 1) 40%, rgba(37, 28, 40, 1) 100%);

     background-color: rgba(36, 40, 50, 1);

     border-radius: 10px;
     padding: 15px 0px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }


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

 body.dark-mode .card .separator {
     border-top: 1.5px solid #373737
 }

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

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

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

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

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

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

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

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

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

 body.dark-mode .card .list:last-child .element {
     color: #bd89ff;
 }

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


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


 body.dark-mode .btn-grupo {
     background-color: transparent;
 }