@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100&display=swap');


html {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    scroll-padding-top: 140px; /* Use a altura do topo fixo */
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

#home {background-color: #efecec; }

#topo {background-color: #005ef2;position: fixed; width: 100%;z-index: 1000;height: 70px; top: 0;}
.contador h5 {  color: #005ef2; font-size: 12pt;text-align: right;line-height: 1;padding-right: 10px; margin-bottom: 3px;}
.contador h5 span{background-color: #ffde00; padding: 0 5px ; font-weight: 600;}



/* Login */
.text-center {padding-top: 140px; background-color: #005ef2 !important; background-image: url(..//img/ser-visto.png); background-repeat: no-repeat; background-position-y: 350%;}
.form-signin {width: 100%;max-width: 330px;padding: 15px;margin: auto; }
.font-weight-normal{color: #fff; font-family: 'Alexandria', sans-serif; font-size: 25px; padding-top: 10px; margin-bottom: 50px;}
.form-signin .checkbox {font-weight: 400;}
.form-signin .form-control {position: relative;box-sizing: border-box;height: auto;padding: 10px;font-size: 16px;}
.anotacao{width: 100%; min-height: 100px !important;}
.form-signin .form-control:focus {z-index: 2}
.form-signin input[type="email"]{margin-bottom: 30px; border-radius: 0; background-image: url('..//img/login.png'); background-repeat: no-repeat; background-position-y: 10px; background-position-x: 5px; padding-left: 40px;}
.form-signin input[type="password"]{margin-bottom: 10px; border-radius: 0;background-image: url('..//img/senha.png'); background-repeat: no-repeat;background-position-y: 5px; background-position-x: 5px; padding-left: 40px;}
.btn{background-color: #ffc000; float: right; border: none; border-radius: 0; color: #005ef2; --bs-btn-padding-x: 2rem;}
.btn:hover{background-color: #c4950b; border: none; color: #fff;}
.form-signin .checkbox{text-align: left; margin-top: 35px;}
.checkbox a{text-decoration: none;}
.checkbox a p{font-family: 'Roboto', sans-serif; color: #fff;}
.form-lembrar{flex-direction: row !important;}
#lembrar{margin-bottom: 7px; margin-right: 10px;}
.background-imagem{position: absolute; }
.background-imagem img{width: 100%; position: fixed; bottom: 0;}
.exportar{background: none; border: none;}

#cliente{background-color: #efecec;}

#cadastro_sucesso {border: 2px solid; border-color: green; padding: 10px; margin-top: 20px;}
#cadastro_erro {border: 2px solid; border-color: red; padding: 10px; margin-top: 20px;}


.btn-success-cadastro{text-align: center;display: inline-grid;align-items: center; text-decoration: none; color: #005ef2;}
.btn-ano-cadastro{width: 125px; height: 45px; background-color: #ffc200 !important;  border: none; border-radius: 0.3rem; color: #005ef2 !important;}
.btn-ano-cadastro-leads{width: 50px; height: 50px; background-color: #ffc200;  border: none; border-radius: 0.3rem; color: #005ef2; font-size: 30px;}

.log_cliente{margin-left: 50px; color: #ffde00; text-align: right;}
.log_cliente a{text-decoration: none; cursor: pointer;}
.log_cliente a p{color: #fff; font-size: 17px; transition: all 0.3s;}
.log_cliente a p:hover{color: #2c2c2c; transition: all 0.3s;}
.log_cliente h3{font-size: 17px; font-weight: bold; margin: 0; padding-top: 15px;}


/* Login */


/* inicial */
.navbar{background-color: #005ef2; padding: 0px 0%; }
.navbar-collapse{ color: #fff; margin-left: 60px;}
.nav-link{font-family: 'Roboto', sans-serif; color: #fff;}
.nav-link:hover{color: #ffde00;}
.nav-item{padding-top: 5px; border-right: 2px solid #176ef7;}
.logout{display: flex; align-items: center;justify-content: end;position: absolute;right: 10px; gap: 10px;}
.logout h3{font-size: 20px; margin-right: 30px; margin-bottom: 0; color: #ffde00;}
.logout a {display: flex;align-items: center;  text-decoration: none;}
.logout p{margin: 0; color: #fff;}
.mobile-logout{display: none; gap: 10px;  position: absolute; right: 100px; top: 25px;}
.cad-leads{cursor: pointer;}

#centro{background-color: #efecec; margin-top: 70px; }
#centro-2{background-color: #efecec; height: 750px;}
.container{max-width: 1760px;}
.box{text-align: center; font-family: 'Roboto', sans-serif; }
.informacao-perfil{padding-top: 30px; background-color: #fff;}
.informacao-perfil h1{font-size: 16px; margin: 0;}
.informacao-perfil p{margin: 0; color: #a2a1a1;}
.perfil{display: flex; align-items: center; justify-content: center; background-color: #fff;}
.avatar-container {width: 200px; height: 200px; margin: 30px 0; border-radius: 50%; overflow: hidden; display: flex;justify-content: center;align-items: center;background-color: #f0f0f0; box-shadow: 0px 0px 0px 19px #efecec;}
.avatar {width: 100%; height: auto; border-radius: 50%; }
.btn-editar{border: none; padding: 10px 20px; margin: 30px 0;}
.cards{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 15px 0; background-color: #fff;}



#vendas .row {display: flex; flex-wrap: wrap;}
#vendas .row > [class*='col-'] {display: flex;}
.card { width: 100%; display: flex; flex-direction: column; padding: 0 10px; border: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 5px 0; transition: all 0.3s;}
.alert-card {padding: 4px; background-color: #e6e2e2; font-size: 11px; margin-left: 26px; color: #474646; border-radius: 5px;}
.alert-card-red {padding: 4px; background-color: #ff2a2a; font-size: 11px; margin-left: 26px; color: #ffffff; border-radius: 5px;}

.card-in{background-color: #005ef2;}
.card h1 {font-size: 35pt;margin: 0;}
.card h1 span{font-size: 2.5rem;margin: 0;}
.card p { margin: 0 ; color: #555;}
.acesso{margin-left: 30px;}
.btn-acesso{border: none; padding: 10px 25px;}
.grafico{background-color: #fff; margin-bottom: 5px; margin-top: 5px;}
.dados-iniciais{display: inline-flex; align-items: center; justify-content: space-between; padding: 15px 0;}
.texto-inicial{color: #fff;  width: 90%;}
.texto-inicial h3 span{color: #ffde00; font-weight: 500; font-size: 25px;}
.texto-inicial-atualizacao h3{font-size: 24px; margin: 0; padding: 0; color: #005ef2;}
.texto-inicial-atualizacao p{margin: 0;}
.divisao-de-section{height: 1px ; background-color: #d3d3d3; margin: 15px auto;}

.card-box{ flex: 1;display: flex;flex-direction: column;justify-content: center;   padding: 10px 0; }
.card-home{height: 100px;}
#fonte{color: #005ef2; padding: 2px 0; text-align: left;}
#fonte2{color: #005ef2; padding: 2px 0 0 10px; text-align: left; font-weight: 600;}
.cidade{color: #6f6f6f !important; font-weight: normal !important;}
.cidade-cliques{color: #000 !important;}
.info{position: absolute; top: 10px; right: 10px;  text-align: center; cursor: pointer; margin-top: 3px;}
.info img{width: 10px;}
.info p{color: #005ef2; margin: 0; font-size: 10px; font-weight: 500;}
.info-icon{display: flex;}
.card-color:hover{background-color: #e1e1e1; transition: all 0.3s;}
#card-box-leads{border-left: 9px solid #cde0fe; text-align: center;}
#card-box-compra{border-left: 9px solid #f5ffdf; height: 130px;}
#card-box-em-compra{border-left: 9px solid #f5ffdf; text-align: center;}
#card-box-andamento{border-left: 9px solid #f1ffc1; height: 130px;}
#card-box-em-andamento{border-left: 9px solid #f1ffc1; text-align: center;}
#card-box-em-andamento{border-left: 9px solid #f1ffc1; text-align: center;}
#card-box-interesse{border-left: 9px solid #f2a4b5; height: 130px;}
#card-box-em-interesse{border-left: 9px solid #f2a4b5; text-align: center;}
#card-box-meta{background-color: #fff; text-align: center;}
#card-box-google{background-color: #fff; text-align: center;}
#card-box-whatsapp{background-color: #fff; text-align: center;}
#card-box-rastreio{background-color: #fff; text-align: center;}

.texto-leads{display: flex; padding: 30px 0;}
.texto-leads img{width: 30px; margin-top: 5px;}
.texto-leads h1{font-family: 'Roboto', sans-serif; text-transform: uppercase; color: #005ef2; margin: 0; font-size: 20pt;}
.icones-redes{display: inline-flex; align-items: center; justify-content: center; gap: 10px;}
.icones-redes img{width: 20px;}

#card-box-realizadas{ border-left: 9px solid #f5ffdf; text-align: center;}
#card-box-em-realizadas{ border-left: 9px solid #f5ffdf; text-align: center;}
#card-box-coversao{ border-left: 9px solid #005ef2; text-align: center;}
#card-box-total{ border-left: 9px solid #f5ffdf; text-align: center;}
#card-box-prospeccao{ border-left: 9px solid #fae3b1;  height: 130px;}
#card-box-prospeccao_tarefa{ border-left: 9px solid #fae3b1;  height: 160px;}

#card-box-em-prospeccao{ border-left: 9px solid #fae3b1;  text-align: center;}
#card-box-com-interesse{ border-left: 9px solid #cde0fe;  height: 130px;}
#card-box-com-interesse_tarefa{ border-left: 9px solid #cde0fe;  height: 160px;}


.infor-leads-atual{display: flex; align-items: center; justify-content: end;  text-align: center;margin-top: 10px; gap: 10px;}
.infor-leads-atual h3{font-size: 1.8rem; margin: 0;}
.leads-gerados{border-left: 9px solid #005ef2; width: 220px; height: 45px; padding-top: 5px; }
.vendas-feitas{border-left: 9px solid #f5ffdf; width: 220px; height: 45px; padding-top: 5px; }
.numero{position: absolute; left: 0; border-radius: 0.375rem; width: 30px; height: 20px; background-color: #005ef2; text-align: center; cursor: pointer; color: #fff;}
.numero p{color: #fff; margin: 0; font-size: 13px;}
.cliques-vendas-2{display: inline-grid; justify-content: center;}
.cliques-vendas{width: 45px; height: 40px; text-align: center; background-color: none; margin-top: 15px;}
.cliques-vendas img{width: 100%; padding: 5px; color: #005ef2;}
.cliques-vendas-1{width: 45px; height: 45px; text-align: center; background-color: #005ef2; margin-bottom: 5px;}
.cliques-vendas-1 img{width: 100%; padding: 5px;}


body.home-column {overflow-x: auto;white-space: nowrap;}

.scroll-horizontal-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px; /* espaço entre scroll e conteúdo de baixo */
  box-sizing: border-box;
  scrollbar-width: thin; /* Firefox */  
  
}
.scroll-horizontal-wrapper::-webkit-scrollbar {
  height: 8px;         /* só define o horizontal */
  width: 0px !important; /* impede que afete o vertical */
}

.scroll-horizontal-wrapper::-webkit-scrollbar-thumb {
  background-color: #006BFF;
  border-radius: 4px;
}

.scroll-horizontal-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.fff {
  display: flex;
  width: fit-content;
  max-height: calc(100vh - 270px); /* ajustável conforme cabeçalho, filtros etc */
  overflow-y: auto;
}

.column {display: flex; flex-direction: column; min-width: 360px; margin: 10px;}
.coluna_vendedor{display: flex; align-items: center; justify-content: center;}

.whatsapp-button { display: inline-flex;color: #25d366;font-weight: 500;text-decoration: none;}
.whatsapp-icon { width: 20px; height: 20px; margin: 0 5px;}

/* TABS */
.tab {overflow: hidden;background-color: #efecec;}
.tab button {font-family: 'Roboto', sans-serif;text-transform: uppercase; background-color: #efecec; color: #005ef2;margin: 0;font-size: 20pt; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; border-radius: 5px; margin: 0 10px;border: 1px solid #ccc}
.tab button:hover {background-color: #ddd;}
.tab button.active { background-color: #ccc;}
.tabcontent {display: none;padding: 6px 12px;border-top: none;}
/* TABS */



#card-box-prospeccao{border-left: 9px solid #fae3b1;}
#card-box-prospeccao_tarefa{border-left: 9px solid #fae3b1;}
#card-box-prospeccao-2{border-left: 9px solid #fae3b1; text-align: center;}
#card-box-vendas{border-left: 9px solid #faffef;}
#card-box-seminteresse{border-left: 9px solid #fab1b1;}

#card-box-total h1,
#card-box-prospeccao-2 h1{
    font-size: 30pt;
    line-height: 1.08;
    word-break: break-word;
}

#card-box-total .card-box,
#card-box-prospeccao-2 .card-box{
    padding-left: 8px;
    padding-right: 8px;
}

.cliente{text-align: left; margin-left: 40px;}
.quente{position: absolute; right: 0; border-radius: 50%; width: 25px; height: 25px; background-color: #FF4600; text-align: center; cursor: pointer; color: #fff; padding: 5px;}
.quente img{width: 100%; margin-top: -12px;}

.icones-direita {
    display: flex;
    gap: 10px; /* Espaçamento entre os ícones */
    align-items: center;
}

#card-box-cliqueswhatsapp{border-left: 9px solid #b3b3b3; background-color: #e1e1e1;}
.icones-leads{padding: 5px 0; text-align: left; margin-left: 0px;}
.icones-leads a{text-decoration: none; cursor: pointer;}
.icones-leads a img{padding: 0 5px; width: 30px;}
#primary{border-radius: 0.375rem; border: none; background-color: #cacaca; padding: 3px 10px; font-size: 13px; font-weight: 500;}
#con-edi{border-radius: 0.375rem; border: none; background-color: #fdfff6; padding: 3px 10px;  font-size: 13px; font-weight: 500;}
#remove{border-radius: 0.375rem; border: none; background-color: #fff6f8; padding: 3px 10px;  font-size: 13px; font-weight: 500;}
#alert_bt{border-radius: 0.375rem; border: none; background-color: #fff6f8; padding: 3px 10px;  font-size: 13px; font-weight: 500;}
#back{border-radius: 0.375rem; border: none; background-color: #f9e8b4; padding: 3px 10px;  font-size: 13px; font-weight: 500;}

.editar_leads{padding-top: 10px;}
.completo{padding: 0; text-align: center;}
.completo img{ width: 50%; background-color: #005ef2; margin-top: 10px; padding: 5px;}

#box-rolagem{height: 655px;border: 1px solid #cccccc63;overflow-y: auto;padding: 10px;  border-radius: 0 0 10px 10px; background-color: #efecec;}
#box-rolagem a{text-decoration: none;}
#box-rolagem::-webkit-scrollbar {width: 3px; height: 60px;}
#box-rolagem::-webkit-scrollbar-thumb {background-color: #888; border-radius: 10px; }
#box-rolagem::-webkit-scrollbar-track {background: #f1f1f1;  border-radius: 10px; }
#box-rolagem::-webkit-scrollbar-button {display: none; }



.elemento {position: relative;}
.elemento::after {content: '';position: absolute;top: 50%;right: 0;width: 1px; height: 70%; background-color: #cbcbcb; transform: translateY(-50%);}
.elemento p{color: #005ef2; font-weight: 500;}
.titulo-empresa{color: #005ef2;}
.btn-select{display: flex; align-items: center;justify-content: right;}
#btn-on{width: 580px;}
#btn-on p{margin-bottom: 5px; margin-top: 10px; color: #6e6e6e; font-weight: 500;}
.btn-op{text-align: right;}
.btn-op a{text-decoration: none;}
.btn-op .btn{ float: none; border-radius: 0.375rem; font-weight: 500; padding: 5px 10px;}
.btn-op img{margin-right: 5px;}

.btn-success-1{background-color: #b3b3b3; color: #fff;  border-radius: 0.375rem; border: 0px; font-weight: 500; padding: 5px 10px}
.btn-success-1:hover{background-color: #005ef2;}
.btn-success-1-active{background-color: #005ef2; color: #fff; border: 0px;  border-radius: 0.375rem; font-weight: 500; padding: 5px 10px; cursor: default;  }

.btn-success-2{background-color: #b3b3b3; color: #fff; border-radius: 0.375rem; border: 0px; font-weight: 500; padding: 5px 10px}
.btn-success-2:hover{background-color: #e58901;}
.btn-success-2-active{background-color: #e58901; color: #fff; border: 0px;  border-radius: 0.375rem; font-weight: 500; padding: 5px 10px; cursor: default;  }


.btn-success-3{background-color: #b3b3b3; color: #fff;  border-radius: 0.375rem; border: 0px; font-weight: 500; padding: 5px 10px }
.btn-success-3:hover{background-color: #66b865;}
.btn-success-3-active{background-color: #66b865; color: #fff; border: 0px;  border-radius: 0.375rem; font-weight: 500; padding: 5px 10px; cursor: default;  }


.btn-success-4{background-color: #b3b3b3; color: #fff;  border-radius: 0.375rem; border: 0px; font-weight: 500; padding: 5px 10px }
.btn-success-4:hover{background-color: #ff2d2d;}
.btn-success-4-active{background-color: #ff2d2d; color: #fff; border: 0px;  border-radius: 0.375rem; font-weight: 500; padding: 5px 10px; cursor: default;  }

.btn-success-1 img{margin-bottom: -3px;}
.like{margin-bottom: 0 !important; margin-top: -8px;}
.btn-success-2 img{margin-bottom: -3px;}

#notas h3 img {margin: 0px 5px;margin-bottom: 5px;}

.origem{background-color: #e1e1e1; padding-bottom: 10px;}
.origem h5{font-size: 16px; color: #005ef2; text-align: left; padding-top: 10px;}
#origem{display: flex; align-items: left; justify-content: left !important;}
#origem img{margin: 0 0 5px 0 !important; margin-right: 3px !important;}
#origem h3{color: #424242; padding: 0; }
/* .horario, .fonte-origem, .link-saida {padding-bottom: 30px;} */
.link-saida{text-align: center;}
.link-saida p{color: #005ef2; font-weight: 500;}
#link-fonte{text-align: left !important;}
#link-fonte h5{text-align: left !important;}
#link-fonte p{color: #005ef2; font-weight: 500;}
.fonte-origem{text-align: center;}
.mapa{background-color: #fff; height: auto;}
.mapa .form-control{background-color: #b3b3b3;}

.icon-editar-lead {
    fill: red;
    stroke: blue;
    stroke-width: 2;
}

#editar-leads{background-color: #efecec;}
#anotacoes{background-color: #efecec; }

.rodape{width: 100%; background-color: #005ef2; text-align: right; margin-top: 50px;}
.rodape img{width: 10%; padding: 35px;}

.rodape-2{background-color: #005ef2; text-align: right; margin-top: 50px;}
.rodape-2 img{width: 5%; padding: 15px;}

.rodape-3{position: fixed; width: 100%; bottom: 0; background-color: #005ef2; text-align: right; margin-top: 50px;}
.rodape-3 img{width: 10%; padding: 15px;}

/* inicial */


/* clientes */
.caixa-texto{display: flex;align-items: center;  text-decoration: none; padding-top: 25px;}
.caixa-texto h1{font-family: 'Roboto', sans-serif; text-transform: uppercase; color: #005ef2; font-size: 20pt;}
.caixa-texto h2{margin-left: auto; color: #005ef2; font-size: 45px;}
.caixa-texto img{width: 50px;}

#listar_contagem {width: 100%;height: 55px;float: left;background-color: #fff;margin-top: 30px;font-family: 'Roboto', sans-serif;}
#listar_contagem_atualizacao {width: 100%;height: auto;float: left;background-color: #fff;margin-top: 30px;font-family: 'Roboto', sans-serif;}
#listar_numeracao {width: 41px;height: 55px;font-size: 20px;color: #000;float: left;padding-top: 10px;text-align: center;}
#listar_nome_cliente {width: 250px;height: 55px;font-size: 17px;color: #000;float: left;padding-top: 13px;text-align: center;}
#listar_data {width: 250px;height: 55px;font-size: 17px;color: #000;float: left;padding-top: 15px;text-align: center;}
#listar_data2 {width: 140px;height: 55px;font-size: 17px;color: #000;float: left;padding-top: 15px;text-align: left; padding-left: 20px;}
#listar_leads {width: 150px;height: 55px;font-size: 17px;color: #000;float: left;padding-top: 15px;text-align: center;}
#listar_vendas {width: 150px;height: 55px;font-size: 17px;color: #000;float: left;padding-top: 15px;text-align: center;}
#listar_telefone {width: 250px;height: 55px;font-size: 17px;color: #000;float: left;padding-top: 15px;text-align: center;}
#listar_icones {display: flex;align-items: center;justify-content: end;width: 720px;height: 55px;color: #666262;font-size: 12px;text-align: center; gap: 10px;}
#listar_icones-2 {display: flex;align-items: center;justify-content: end;width: 460px;height: 55px;color: #666262;font-size: 12px;text-align: center; gap: 10px;}
#listar_icones-2 a{text-decoration: none;}
#listar_icones-3 {display: flex;align-items: center;justify-content: end;width: 1220px;height: 55px;color: #666262;font-size: 12px;text-align: center; gap: 10px;}
#listar_atualizacao {width: 75%; height: auto; font-size: 17px;color: #000;float: left;padding-top: 15px;text-align: left;}

.tabela-cabecalho,
.linha-cabecalho-blanca {display: grid;grid-template-columns: 
        80px   /* Nº */
        280px  /* Produto */
        200px  /* Data */
        200px  /* Prospecções */
        200px  /* Vendas */
        200px  /* Conversão */
        200px  /* Valor */
        60px;  /* Ações */

    align-items: center;
    font-weight: bold;
    color: #333;
}
/* células */
.coluna,
.celula-blanca {padding: 8px 12px;white-space: nowrap;}
/* bordas */
.coluna:not(:last-child),
.celula-blanca:not(:last-child) {border-right: 1px solid #efecec;}

/* containers (pode manter) */
.tabela-container {background-color: #d0d1d2;border-radius: 10px;padding: 10px 20px;margin-bottom: 20px;overflow-x: auto;font-family: Arial, sans-serif;}
.tabela-blanca-container, .tabela-container-2 {position: relative;background-color: #fff;border-radius: 10px;padding: 10px 20px;margin-top: 5px;overflow-x: auto;font-family: Arial, sans-serif;}
.acoes{position: absolute; right: 20px;}
.acoes a{text-decoration: none;}

.tabela-vendedores-grid {grid-template-columns: 80px 270px 320px 200px 190px 210px 180px 60px;align-items: center;}
.tabela-vendedores-grid .coluna {min-width: 0;}
.tabela-vendedores-grid .coluna-email {overflow: hidden;}
.email-truncado {display: block;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}


.table{background-color: #fff; font-family: 'Roboto', sans-serif; margin: 30px 0;}
.lista{border: none; font-weight: 500; text-align: center; padding: 15px !important;}
.listar_numeracao{font-size: 20px;color: #000;float: left;padding-top: 10px;text-align: center;}
.listar_icones {color: #666262;font-size: 12px; float: right;margin-bottom: 5px;text-align: center;}
.planilha{margin-top: 5px;}

#anotacoes h5{color: #005ef2; padding: 30px 0 15px 0;}
#anotacoes p{padding: 30px 0; margin: 0;}

/* clientes */

/* Filtros */
.filtros{display: flex; align-items: center; justify-content: left; gap: 10px; flex: 1;} 
.ano{text-align: right;}
.filtro-categoria select {padding-right: 50px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 100%; background-image: url("..//img/seta-triangular.svg");background-repeat: no-repeat;background-position: right 10px center;background-size: 12px 12px;}
.filtro-cliente input{padding-right: 60px;}
.filtro-cliente input::placeholder{color: #333;}
.filtro-categoria select option{color: #333;}
/* Filtros */

/* Exluir leads */
.excluir-lead {position: relative;display: inline-block;}
.excluir-lead-toggle { background: none;border: none;font-size: 24px;cursor: pointer;padding: 5px;}
.excluir-lead-menu { display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;z-index: 1; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);max-width: 200px;white-space: nowrap;margin-right: 20px;}
.excluir-lead-menu.visible {display: block;}
.excluir-lead-item {display: flex;align-items: center;padding: 5px 10px;text-decoration: none;color: #333;white-space: nowrap;}
.excluir-lead-item:hover {background-color: #f0f0f0;}
.icon-trash {width: 16px;height: 16px;margin-right: 8px;}
/* Excluir Lead */

/* Cadastrar Plano */
#cadatrar_plano{margin: 100px 0px; }
.container_plano{display: flex; gap: 20px;flex-wrap: wrap;}
.vantagens, .conta_pro{width: 23%;}
.vantagens, .conta_pro, h3{ color: #535353;}
.middle, .right {background-color: #fff;padding: 20px;border-radius: 8px; flex: 1;min-width: 300px; height: 400px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.left { max-width: 40%; margin-right: 130px;}
.left p{font-size: 20px; color: #535353; font-family: 'Roboto', sans-serif;}
.left p span strong{color: #005ef2;}
.middle {max-width: 100%; text-align: left;}
.right {max-width: 100%; text-align: left;}
.highlight {color: #0073ff;}
.blue, .red, .gray{color: #fff; padding: 10px 15px;border: none;border-radius: 4px;font-weight: 400;margin-top: 10px;cursor: pointer; font-family: 'Roboto', sans-serif;}
.blue {background-color: #0073ff;}
.red {background-color: #ff2d2d;}
.gray {background-color: #aaa;}
ul {list-style: none;padding: 0;}
ul li {margin: 10px 0; font-family: 'Roboto', sans-serif;}
.linha {margin: 20px 0; height: 1px; background-color: #ccc; border: none; border-top: 1px solid #ccc;}
.info_left {font-size: 12px !important; color: #666 !important;margin-top: 20px !;}
/* Cadastrar Plano */

/* cadastrar cliente */

.form-group{padding-top: 20px; width: 20%;}
.form-group label{font-family: 'Roboto', sans-serif; color: #2c2c2c;}
.form-control{ font-family: 'Roboto', sans-serif; height: 50px; background-color: #e1e1e1;}
.btn-cadastrar{background-color: #005ef2;  font-size: 18px; color: #fff; height: 50px;margin-top: 45px;border: none; border-radius: 0.375rem; padding: 0 20px;}
.btn-primary-2{float: none;  background-color: #005ef2 !important; border-radius: 0.375rem; color: #fff; margin-top:25px; height: 50px;padding: 0px 20px;}
.btn-primary-2:hover{background-color: #196aec !important; color: #fff !important;}
.btn-primary-3{float: none;  background-color: #ff2d2d !important; border-radius: 0.375rem; color: #fff; margin-top:25px; height: 50px;padding: 0px 20px;}
.btn-primary-3:hover{background-color: #b3b3b3 !important; color: #fff !important;}
#texto-leads{height: auto !important; }
.token h1 {font-family: 'Roboto', sans-serif;text-transform: uppercase;color: #005ef2;margin: 0;margin-left: 20px;}
.token p{margin-left: 20px;}
.vertical-list {list-style-type: none;padding: 0;margin: 0; width: 100%;max-width: 100%; }
.vertical-list li {background: #fff;padding: 10px 20px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.number { padding: 5px 10px; margin-right: 10px;}
.domain {flex-grow: 1;border-left: 1px solid #ccc;padding: 5px 10px;}
.domain span{border-left: 1px solid #ccc;}
.icons {display: flex;gap: 10px;}
.icons i {cursor: pointer;color: #333;}
.icons i:hover {color: #007BFF;}
.lista-invest{margin-top: 30px;}
.lista-item{display: flex;}

/* cadastrar cliente */

/* Cadastro Modal */
.modal-lateral {position: fixed;top: 0; right: 0;width: 30%;height: 100%;background-color: #fff;box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);overflow-y: auto;transform: translateX(100%);transition: transform 0.3s ease-in-out;z-index: 9999;}
.modal-lateral.active {transform: translateX(0);}
.modal-header {display: flex;justify-content: space-between;align-items: center;padding: 15px;background-color: #005ef2; color: #fff;}
#modalCadastro .form-group{padding-top: 15px; width: 100%;}
#modalCadastro .btn-cadastrar{margin-top: 10px;}
.modal-container{padding:  10px;}
.overflow{overflow: hidden;}
.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7); display: none; z-index: 1000; }
.overlay.active {display: block;}




/* links e integrações */

.links-integracoes {display: flex;align-items: center; padding: 20px 0;}
.box-integracoes {background-color: white;padding: 20px;border-radius: 10px; width: 320px;height: 230px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;margin-right: 20px;}
.icon-integracoes {margin-bottom: 20px;}
.icon-integracoes img {width: 15%;}
.box-integracoes h2 {color: #2687f1;margin-bottom: 10px;font-size: 18px;}
.box-integracoes  p {font-size: 14px;color: #666;}
.kanban-focus-hide svg{border-radius: 5px;}

/* links e integrações */


/* clientes-leads */
#card-box{text-align: center; border-radius: 0; padding: 30px 15px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 15px 0; background-color: #fff; height: 300px;}
#card-box img{padding: 20px 0;}
#card-box h1{font-size: 30pt;margin: 0; padding-bottom: 10px;}
#card-box h1 span{color: #00901b;}
#card-box p{margin: 0;}
.total{ padding: 10px 25px; background-color: #efecec;}
#card-relatorio{text-align: center; border-radius: 0; padding: 30px 15px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 15px 0; background-color: #fff;}
#card-relatorio h2{font-size: 35pt;margin: 0; padding-bottom: 10px; color: #9b0c04;}
#card-relatorio h2 span{color: #00901b;}
/* clientes-leads */


/* Leads Dezembro */
#card-leads{text-align: center; border-radius: 0; padding: 30px 15px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 15px 0; background-color: #fff; height: 130px;}
.box-leads{margin-top: 20px;}
.color-red{color: #9b0c04;}
.color-blue{color: #005ef2;}
.color-green{color:#00901b;}
.cards-grafico{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 15px 0; background-color: #fff;}
.cards-grafico img{padding: 30px 0;}
.titulo{display: flex; align-items: center; justify-content: space-between; font-family: 'Roboto', sans-serif; padding: 10px; background-color: #f1f3f5; border-radius: 10px 10px 0 0;}
.titulo h2{text-transform: uppercase; color: #575757; font-size: 14px; margin: 0; font-weight: 700;}
.titulo p{text-transform: uppercase; font-size: 13px; font-weight: 500; color: #005ef2; margin: 0;}
.titulo p a{text-decoration: none;}
.prospeccao {display: flex;flex-direction: row; align-items: center; border-radius: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 15px 0; background-color: #fff; position: relative; padding: 10px;}
.prospeccao h1{position: absolute; top: 0; font-size: 16px; padding: 30px 10px;}
.prospeccao h3{font-size: 16px; color: #005ef2; }
.prospeccao p{ font-size: 14px; font-weight: 400; color: #000; line-height: 1;}
.prospeccao img{ top: 0; right: 0; padding: 0px 10px;}
.nota-x{display: flex;align-items: center; justify-content: space-between;}
.nota-x h3 {font-size: 16px;color: #898989;margin-bottom: 0;}
.acesso-2 {display: flex;align-items: center; justify-content: left;}
.acesso-2 h3{font-size: 16px; color: #898989; margin-bottom: 0;}
.acesso-2 h3 img{margin: 0px 2px; margin-bottom: 3px;}
.hora{margin-left: 20px;}
.icones-g{position: absolute; right: 10px; display: flex; align-items: center; justify-content: space-between; gap: 5px;}
.fechado{background-color: #ebfbed;}
.interesse{background-color: #fcdddd;}
.dragging {opacity: 1; }
#vernomapa{display: none;}
.elemento p img{fill: red;}

/* Leads Dezembro */

/* Leads */
.botoes{display: flex;justify-content: space-between;align-items: center;}
.dropdown-menu {background-color: #5592f2; color: #fff; min-width: inherit; width: auto; border-radius: 0; padding: 10px; text-align: center; margin-top: -1px; border: none;}
.dropdown-divider{margin: 0;}
.dropdown-item{color: #fff; padding: 10px 0px; border-bottom: 1px solid #6d9de9;}
.btn-ano{width: 90px; height: 50px; background-color: #005ef2; color: #fff; border: none; border-radius: 0.3rem;}
.mes{padding-top: 15px; padding-bottom: 10px;}
.btn-geral{width: 90px; height: 50px; background-color: #9b9b9b; color: #fff; border: none; margin-right: 10px; margin-bottom: 10px;}
.btn-mes{width: 55px; height: 50px; background-color: #9b9b9b; color: #fff; border: none;margin-right: 10px; margin-bottom: 10px;}
.btn-mes-active{width: 55px; height: 50px; background-color: #005ef2; color: #fff; border: none;margin-right: 10px; margin-bottom: 10px;}
/* Leads */

/* Configurações */
.caixa-texto-config{display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}
.config-gen{display: flex;}
.config-gen h1{font-family: 'Roboto', sans-serif;text-transform: uppercase;color: #005ef2;margin: 0;font-size: 20pt;}
.config-gen h2{margin-left: auto; color: #005ef2; font-size: 45px;}
.config-gen img{width: 50px;}
.config-texto h1{font-family: 'Roboto', sans-serif; text-transform: uppercase; color: #005ef2; margin: 0; }
.row-t {display: flex; align-items: center; flex-wrap: wrap; padding: 20px 0;}
.step {display: flex;flex-direction: column; margin: 0 10px;}
.step h2 {font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: normal; margin-bottom: 10px; color: #828282;}
.step input {padding: 8px;width: 320px;border: 1px solid #ccc;border-radius: 4px;}
.step button {padding: 12px 8px; background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer; margin-left: 20px;}
.step button:hover {background-color: #0056b3;}
.arrow {font-size: 2em; margin: 0 50px;color: #007bff; padding-top: 65px;}
.form-c{display: flex; align-items: center; justify-content: space-between;}
#form-conf .form-inline{margin: 0;}

/* Configurações */

/*  CSS para o modal */
.modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 999; }
.modal-content { position: relative;background-color: white;margin: auto;padding: 20px;
width: 50%; max-width: 600px; height: auto; top: 50%;transform: translateY(-50%);border-radius: 8px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
/* Estilos básicos para o contêiner do código */
.code-container { position: relative;background-color: #f5f5f5;padding: 20px;border: 1px solid #ddd;border-radius: 5px;margin: 20px 0;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;}
/* Estilos para o botão de copiar */
.copy-button { position: absolute;top: 10px; right: 10px;background-color: #4CAF50; color: white;border: none;padding: 5px 10px;border-radius: 3px;cursor: pointer;font-size: 12px;}
.copy-button:hover { background-color: #45a049;}
/* Estilos para o bloco de código */
pre { margin: 0; overflow: auto;white-space: pre-wrap; word-wrap: break-word; }



@media screen and (max-width: 1600px){
    #card-box h1{font-size: 25pt;margin: 0; padding-bottom: 10px;}
    #card-box h1 span{color: #00901b;}  

    #card-relatorio h2{font-size: 25pt;margin: 0; padding-bottom: 10px; color: #9b0c04;}
#card-relatorio h2 span{color: #00901b;}
    
}



@media screen and (max-width: 1440px){
    .navbar{padding: 0;}
    .log_cliente{margin-left: 50px;}
    .texto-inicial h3   {font-size: 26px;}
    .navbar-collapse { margin-left: 10px; }
    .background-imagem img{position: static;}
    .step{margin-bottom: 20px;}
     #cadatrar_plano {margin: 85px 0px;}
    .left {max-width: 35%;margin-right: 20px;}
    .vantagens, .conta_pro {width: 30%;}
    .fff{width: 98%; margin-left: auto; margin-right: auto;}
    #listar_icones{width: 320px;}
    .nav-link{font-size: 14px;}
   
   
    
}

@media screen and (max-width: 1366px){
    .rast{width: 250px;}
    .info img{width: 15px;}
    .card-home{height: auto;}
    .card h1 {font-size: 30px;}
    #card-box-total h1,
    #card-box-prospeccao-2 h1{font-size: 25px;}
    #card-box-prospeccao-2 .card-box p{font-size: 13px;}
    .whatsapp-button{font-size: 15px;}
    .arrow{margin: 0;}
    .row-t{flex-wrap: nowrap;}
}

@media screen and (max-width: 1260px){
    .texto-inicial h3 {font-size: 18px; margin-left: 10px;}
    .texto-inicial h3 span{font-size: 20px;}
    .texto-inicial-atualizacao h3{font-size: 18px; }
    .navbar-collapse {margin-left: 0;}
     .left {max-width: 100%;margin-right: 20px;}
    .vantagens, .conta_pro {width: 100%;}
    .middle, .right{height: auto;}
}

@media screen and (max-width: 1190px){
.nav-link { margin: 0 20px;}
.log_cliente {margin-left: 15px;}
.row-t{flex-wrap: wrap;}

}

@media screen and (max-width: 1024px){
    #topo .container{margin: 0; padding: 0;}
    .infor-leads-atual { justify-content: center; flex-wrap: wrap;}
    .navbar-collapse{margin: 0;}
    .nav-link{margin: 0;}
    .log_cliente{margin-left: 10px;}
    #card-box-leads{height: auto;}
    #card-box-compra{height: auto;}
    #card-box-andamento{height: auto;}
    #card-box-interesse{height: auto;}
    #card-box-meta{height: auto;}
    #card-box-google{height: auto;}
    #card-box-whatsapp{height: auto;}
    #card-box-rastreio{height: auto;}
    #card-box-realizadas{height: auto;}
    #card-box-coversao{height: auto;}
    #card-box-total{height: auto;}
    #card-box-prospeccao{height: auto;}
    .arrow{display: none;}
    .filtros{display: none;}
}


@media screen and (max-width: 990px){
    #centro-2{height: auto;}
   .info-card-leads-v{width: 100%; margin: 0 5px;}
   .info-card-leads-v h3 {font-size: 19px; padding-top: 10px;}
    .listar_numeracao {margin-top: 20px;}
    .btn-cadastrar{margin-bottom: 40px;}
    #listar_contagem{margin-bottom: 40px;}
    #listar_nome_cliente{width: 150px;}
    #listar_data{width: 200px;}
    .rodape{text-align: center;position: static; }
    .rodape img{width: 20%; padding: 35px 0;}
    .rodape-2{text-align: center;}
    .rodape-2 img{width: 20%; padding: 35px 0;}
    .rodape-3{text-align: center;}
    .rodape-3 img{width: 20%; padding: 35px 0;}
    #card-box h1{font-size: 25pt;margin: 0; padding-bottom: 10px;}
    #card-box h1 span{color: #00901b;}
    .mapa{height: auto;}
    .mobile-logout{display: flex; gap: 15px;}
    .logout{display: flex; justify-content: end; position: relative;}
    .log_cliente{text-align: right; margin: 0;}
    .nav-item{padding: 0;}
    #topo{padding: 10px 0;}
    .navbar-collapse{padding: 0 10px 20px 10px; text-align: right;}
    .cliques-vendas-2{display: flex;}
    .cliques-vendas{margin-right: 10px; margin-top: 0;}
    .botoes{text-align: center; justify-content: center;}
    .form-group {width: 100%;}
    .vertical-list{margin-left: 0;}
    .col {flex: 1 0 100%;}
    .caixa-texto{justify-content: center;}
    .token{text-align: center;}
    #link-fonte{text-align: center !important; width: 100%;}
    #link-fonte h5{text-align: center !important;}
    .links-integracoes {display: block;}
    .box-integracoes {width: 100%; margin-bottom: 20px;}
    .caixa-texto-config{padding-top: 20px; display: block;text-align: center;}
    .config-gen{justify-content: center;}
    .btn-op{text-align: center;}
    .btn-op button{margin:  5px 0;}
    .modal-lateral{width: 90%;}
   
}


@media screen and (max-width: 500px){
    .lista {padding: 5px !important;}
    .info-card-leads-v{margin-top: 5px;}

}