/** Cores personalizadas **/

body {
    font-family: 'Poppins', sans-serif;
    background: #F3F3F3 !important;
}

.text-red {
    color: #FF4136;
}

.text-pink {
    color: #EA33B1;
}

.text-blue {
    color: #1977F2;
}

.text-green {
    color: #36A954;
}

.text-red-tiktok {
    color: #E3014D;
}
.text-red-kwai {
    color: #FE4905;
}

.bg-red {
    background: #FF4136;
}

.bg-gray {
    background: #EAEAEA;
}

/** Cores Cards **/
.bg-kwai {
    background: #FE4905 !important;
}

.border-facebook {
    border: 1px solid #0765FF !important;

}
.border-kwai {
    border: 1px solid #FE4905 !important;

}

.bg-transparent-card {
    background: rgba(255, 255, 255, 0.2) !important;
}

.border-whatsapp {
    border: 1px solid #25d366 !important;
}

.border-tiktok {
    border: 1px solid #E4004D !important;
}

.border-google {
    border: 1px solid #4486F4 !important;

}



.bg-gray-verso {
    background: #E8E8E8 !important;
}

.bg-face {
    background: #0765FF;

}

.bg-whatsapp {
    background: #23D366;
}

.border-whatsapp {
    border-color: #23D366;
}

.bg-google-red {
    background: #EA4537;
}

.bg-google-yellow {
    background: #EDB100 !important;
}

.bg-google-green {
    background: #36A954;
}

.bg-google-blue {
    background: #4486F4;
}

.bg-tiktok-blue {
    background: #00BAC6;
}

.bg-tiktok-pink {
    background: #E4004D;
}

.bg-instagram-purple {
    background: #6F00F6;
}

.bg-instagram-orange {
    background: #FF8001;
}

.bg-instagram-pink {
    background: #F703C1;
}

.bg-banner1 {
    background: url("../img/home/banner33.jpg") lightgray 50% / cover no-repeat;
    height: 100%;
    background-position: center center;
    background-size: cover;

    @media (min-width: 767px) {
        height: 600px !important;
    }
}

.bg-banner2 {
    background: url("../img/home/banner2.png") lightgray 50% / cover no-repeat;
    height: 100% !important;
    background-position: top center;

    @media (min-width: 767px) {
        height: 500px !important;
    }
}

.bg-banner3 {
    background: url("../img/home/banner3.webp") #F3F3F3 50% / contain no-repeat;
    background-color: #f3f3f3;
    height: 100%;
    background-position: top center;

    @media (min-width: 767px) {
        height: 450px !important;
    }
}

.bg-banner4 {
    background: url("../img/home/banner4.webp") #F3F3F3 50% / cover no-repeat;
    padding-top: 150px;
    color: #fff;
    height: 100%;
    background-position: top center;
}


.table-personalizada thead tr th,
.table-personalizada tbody tr td,
th {
    background: none !important;
    border: none !important;
}

.table-personalizada tr:nth-child(even) {
    background-color: #101010;
    border-radius: 30px !important;
}



/* Diferenciais bg home */
.card-personalizado {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    width: max-content;
}

.bg-diferenciais {
    border-radius: 20px;
    background-color: rgba(244, 244, 244, 0.8);


    /* @media (max-width: 767px) {
        margin: auto;
        min-width: 500px;
    } */
}

.itens-perpage {
    background: white;
    width: max-content;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #374151;
}





/* Customiza a barra de rolagem para todos os elementos */
* {
scrollbar-width: thin; /* Para Firefox */
scrollbar-color: rgba(0, 0, 0, 0.5) transparent; /* Para Firefox, define a cor da barra e o fundo */
}

/* Para Webkit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
width: 6px; /* Largura da barra de rolagem */
}

*::-webkit-scrollbar-track {
background: transparent; /* Cor de fundo da trilha da barra de rolagem */
}

*::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5); /* Cor da barra de rolagem */
border-radius: 6px; /* Arredondamento das bordas da barra de rolagem */
border: 3px solid transparent; /* Borda transparente em torno da barra de rolagem */
}

/* Aplica estilos personalizados somente para a classe .scrollable */
.scrollable::-webkit-scrollbar {
    width: 6px;
}

.scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    border: 3px solid transparent;
}

.scrollable {
    max-height: 180px; /* Altura máxima antes de mostrar o scroll */
    overflow-y: auto; /* Mostra scroll vertical se o conteúdo exceder a altura máxima */
    font-size: 11px !important;
}




@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulsating-button {
  animation: pulsate 1s infinite ease-in-out;
  /* Estilos adicionais para o botão */
  padding: 10px 20px;
  border: none;
  background-color: green;
  color: white;
  border-radius: 25px;
  width: 200px;
  cursor: pointer;
  outline: none;
}
.pulsating-button:hover {
  animation: pulsate 1s infinite ease-in-out;
  /* Estilos adicionais para o botão */
  padding: 10px 20px;
  border: none;
  background-color: green;
  color: white;
  border-radius: 25px;
  width: 200px;
  cursor: pointer;
  outline: none;
}