/* Importar a fonte Nunito do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* Aplicar a fonte Nunito em toda a página */
body {
    font-family: Nunito, Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Tahoma, Arial, sans-serif !important;
}

/* Tema Claro */
:root {
    --background-color: 243 253 253;
    --text-blue: 8 109 224;
    --border-container: 236 236 236;
    --border-strong: 235 235 235;
    --border-weak: 234 234 234;
    --solid-1: 249 249 251; /* 255 255 255; */
    --solid-2: 255 255 255;
    --solid-3: 255 255 255;
    --gradiente-back: #dfecf9;
    --gradiente-back-1: 255 255 255;
    --gradiente-back-2: #dcf7ffb3;
    --gradiente-back-3: 238 227 241;
    --background-send: #D9FDD3;
}

/* Tema Escuro */
.dark {
    --background-color: 17 27 33;
    --solid-1: 32 41 47; /* 23 23 26; */
    --solid-2: 32 44 51;
    --gradiente-back: #9db6cf;
    --gradiente-back-1: 32, 44, 51;
    --gradiente-back-2: #080a0ab3;
    --gradiente-back-3: 17 27 33;
    --background-send: #144D37;
}

.gradiente-root {
    background: #dfecf9;
    background-color: #dfecf9;
    background-image: linear-gradient(62deg, rgba(255, 255, 255, 1) 10%, #dcf7ffb3 74%, rgb(238 227 241 / 30%) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 4px 25px 2px rgba(0, 0, 0, 0.09);
    border-right: 1px solid #bdb8b8;
}

.gradiente-dark {
    background: #9db6cf;
    background-color: #9db6cf;
    background-image: linear-gradient(62deg, rgba(32, 44, 51, 1) 10%, #080a0ab3 74%, rgb(17 27 33 / 50%) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 4px 25px 2px rgba(0, 0, 0, 0.09);
    border-right: 1px solid #bdb8b8;
}

input[type="checkbox"] {
  transform: scale(1.3); /* Ajuste o valor para o tamanho desejado */
  margin: 0.3em; /* Adiciona um espaçamento para evitar cortes */
}

nav.grid.flex-grow.gap-2.px-2.pb-5.overflow-y-scroll.no-scrollbar {
    scrollbar-width: thin;
    overflow-x: hidden;
}

div.flex-1.truncate.min-w-0 {
    overflow: visible; /* hidden; */
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;
    margin-left: -6px;    
}

h1.text-lg.font-medium.truncate.text-n-slate-12 {
    text-transform: capitalize;
}

.bg-n-solid-2 {
    --tw-bg-opacity: 1;
    /* background-color: #fff; */
    /* background-color: rgb(var(--solid-2) / var(--tw-bg-opacity)); */
    background: var(--gradiente-back);
    background-color: var(--gradiente-back);
    background-image: linear-gradient(62deg, rgba(var(--gradiente-back-1), 1) 10%, var(--gradiente-back-2) 74%, rgb(var(--gradiente-back-3) / 50%) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 4px 25px 2px rgba(0, 0, 0, 0.09);
    border-right: 1px solid #bdb8b8;
}

.tabs-title.is-active {
    border-radius: .5rem;
    background-color: rgba(var(--alpha-2));
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 0;
    padding-right: 0.125rem;
    padding-bottom: 0;
    padding-left: 0.225rem;    
}

.ml-auto.leading-4.text-xxs.text-n-slate-10.hover\:text-slate-11.v-popper--has-tooltip {
    visibility: hidden;
}

.animate-card-select {
    background: var(--background-send) !important;
    border-radius: 10px;
    padding-bottom: 3px;
}

@keyframes pulse-white {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 221, 221, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 221, 221, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 221, 221, 0);
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 95, 95, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 95, 95, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 95, 95, 0);
    }
}

.user-online-status--online {
    width: 10px !important;
    height: 10px !important;
    background-color: rgb(12 241 131) !important;
    animation: pulse-white 1.5s infinite;
}

.user-thumbnail {
    border-radius: 30% !important;
}

.inbox--name {
    /* background-color: #2dce89 !important; */
    /* background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important; */
    /* background-image: linear-gradient(to top, var(--gradiente-back-2), var(--gradiente-back-3)); */
    background-color: rgb(var(--slate-5) / var(--tw-bg-opacity));
    border-radius: 5%;
}

.dark\:bg-n-background:is(.dark *) {
     background: var(--gradiente-back); 
     background-color: var(--gradiente-back); 
     background-image: linear-gradient(62deg, rgba(var(--gradiente-back-1), 1) 10%, var(--gradiente-back-2) 74%, rgb(var(--gradiente-back-3) / 50%) 100%); 
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 4px 25px 2px rgba(0, 0, 0, 0.09); 
     border-right: 1px solid #bdb8b8;
}

.max-h-\[calc\(14rem\+16px\)\] {
    max-height: calc(22rem + 16px);
}

.max-w-\[100rem\] {
    max-width: 100rem;
}

.max-w-\[120rem\] {
    max-width: 120rem;
}

.py-0\.5 {
    padding-top: .025rem;
    padding-bottom: .025rem;
}

.right-bubble {
    background-color: var(--background-send);
}