Histórico da Página

  <div class="imgcapa">
    <img src="http://danielypaz.com.br/wp-content/uploads/2023/02/capaartigo3-1final.png" style="width:100%"> </div>  

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   

  <div class="content">

    <div class="article"> <br>   

  <h2> <img src="httpshttp://tdn.totvs.com/download/attachments/741313263/Ativo%[email protected]?version=2&modificationDate=1676431647473&api=v2projeto.cloud/wp-content/uploads/2023/03/[email protected]" alt="some text" width=40> &nbsp &nbspWEBHOOKS  WEBHOOKS NO WORKFLOW DO TOTVS CRM</h2>        

     <div class="table-wrap" style="margin-left: 30px;">

   <table class="relative-table wrapped confluenceTable" style="width: 367.06px;" resolved="">
    <thead>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Produto:</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - Gestão de Clientes</td>
        <div class="content-wrapper">
        </div>
        </td>
      </tr>
    </thead>
    <colgroup>
      <col style="width: 162.912px;">
      <col style="width: 203.153px;">
    </colgroup>
    <tbody>
      <tr>
        <th style="text-align: left;" class="confluenceTh">Linha de Produto:</th>
        <td style="text-align: left;" class="confluenceTd">TOTVS CRM</td>
        <div class="content-wrapper">

        </div>
        </td>
      </tr>
      <tr>
        <th style="text-align: left;" class="confluenceTh">Segmento:</th>
        <td style="text-align: left;" class="confluenceTd">Cross Segmentos</td>
        <div class="content-wrapper">
        </div>
        </td>
      </tr>
      <tr>
        <th style="text-align: left;" class="confluenceTh">Módulo:</th>
        <td style="text-align: left;" class="confluenceTd">Workflow</td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Aplicação</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd">Web/app móvel</td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Identificador:</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd"><span style="color: rgb(23,43,77);">ME261020221452</span></td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Stakeholder:</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd">TOTVS Connector</td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Ticket:</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd"><br></td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh"><span style="color: rgb(0,0,0);">Requisito/S</span><span style="color: rgb(0,0,0);">tory/Issue (informe o requisito relacionado)</span><span style="color: rgb(47,57,65);"> :</span></th>
        <td style="text-align: left;" colspan="1" class="confluenceTd">
          <div class="content-wrapper">

            <span class="jira-issue" data-jira-key="DTCRMSC-2480">
              <a href="https://jiraproducao.totvs.com.br/browse/DTCRMSC-2480" class="jira-issue-key"><img class="icon" src="https://jiraproducao.totvs.com.br/images/icons/ico_epic.png">DTCRMSC-2480</a>
              -
              <span class="summary">ME261020221452 - Suporte a webhooks via Workflow</span>
              <span class="aui-lozenge aui-lozenge-subtle             aui-lozenge-current
               jira-macro-single-issue-export-pdf">Em Execução</span>
            </span>

          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>


    

      
      <br>
      <p> Muitas empresas enfrentam o desafio de manter seus registros atualizados em diversos sistemas quando uma ação é executada no TOTVS CRM. Esse processo manual é demorado e pode levar a erros, impactando negativamente a eficiência e produtividade da equipe. Para superar essa dificuldade, o TOTVS CRM lançou recentemente um novo recurso de ação chamado Webhook, disponível no módulo de workflow. Com a utilização de Webhooks, os clientes agora podem automatizar esses processos e integrar facilmente diferentes sistemas e aplicativos. Quando um gatilho de criação ou atualização é acionado no TOTVS CRM, a ação de Webhook é executada, permitindo que as informações sejam atualizadas em tempo real em outros sistemas conectados. Esse processo resulta em atualizações rápidas e precisas, economizando tempo e eliminando erros manuais que antes eram muito comuns. Em outras palavras, a ação de Webhook permite que os clientes conectem seus sistemas e automatizem a atualização de registros, o que simplifica o processo e melhora significativamente a eficiência operacional da empresa. <br> <br>      <div>


</div>  

<div class="pause" id="secao-5">   &nbsp <b>  TIPO DE INTEGRAÇÃO</b> </div>                     
<p> <strong>Saída:</strong> esta integração envia dados do TCRM - Gestão de Clientes para uma ferramenta destino, especificada na configuração.
</p>               
   <br> <br>

<div class="pause" id="secao-5">   &nbsp <b>  O QUE ESTA INTEGRAÇÃO FAZ?</b> </div>                     
<p> Esta configuração permite enviar dados do TOTVS CRM para outras ferramentas que disponham de uma URL de entrada de dados. Essa URL precisa conseguir ler e consumir dados enviados em formato JSON.
</p>               
   <br> <br>

<div class="pause" id="secao-5">   &nbsp <b>  OBSERVAÇÕES E REQUISITOS</b> </div>                     
<p>  É importante ter um desenvolvedor ou contato com o suporte do seu outro sistema para checar a compatibilidade com a leitura do pacote de dados que o TOTVS CRM envia. </p>               
   <br> <br>

<div class="pause" id="secao-5"> &nbsp <b> PASSO A PASSO PARA REALIZAR A INTEGRAÇÃO </b> </div>
<br>

<ol>
  <li>Com o TOTVS CRM Gestão de Clientes aberto em seu navegador, acesse o Workflow por meio do menu principal;</li> <br>
  <li>Para adicionar uma automação, clique no botão "Adicionar" localizado no canto superior direito da tela;</li><br>
  <li>No campo de nome, insira uma breve descrição do Webhook, facilitando a identificação do cadastro em acessos futuros. Se necessário, adicione informações complementares no campo de observações;</li><br>
  <li>Depois de nomear seu Workflow, selecione o gatilho do seu workflow clicando no botão "Selecionar Gatilho" disponível em tela. Em seguida, selecione o gatilho que iniciará sua automação clicando no botão "Selecionar Gatilho". O gatilho será o evento que desencadeará a chamada do Webhook, como uma atividade concluída ou uma oportunidade ganha, entre outros;</li><br>
  <li>Se desejar, você pode adicionar condições (filtros) para limitar quando a automação será executada, clicando em "Adicionar Condições";</li><br>
  <li>Por fim, selecione a ação "Webhook" em "Selecionar Ação" e informe a URL pública do sistema que receberá a notificação do evento. Se necessário, adicione cabeçalhos adicionais para questões técnicas, como autenticação;</li><br>
  <li>Salve seu Workflow com o status de ativo e ele passará a ser executado para os próximos eventos;</li><br>
  <li>Vale destacar que Webhooks no TOTVS CRM são regidos por algumas características técnicas importantes. Consulte a próxima seção deste documento para maiores informações a respeito, permitindo que sua integração aconteça com sucesso e de forma eficiente.</li><br>
</ol>

<img src="https://tdn.totvs.com/download/attachments/745140752/gifwehook.gif?version=1&modificationDate=1678548639423&api=v2">

<div class="pause" id="secao-5">   &nbsp <b>  INFORMAÇÕES TÉCNICAS</b> </div>                     
<p> Quando o TOTVS CRM Gestão de Clientes realiza uma chamada para sistemas externos via Webhooks, ele transmite metadados sobre o evento que permitem identificar o que aconteceu e reagir adequadamente. Esses metadados são enviados por meio de uma chamada HTTP utilizando o método POST, com o conteúdo (payload/body) formatado em JSON.
 <br>  <br> 
Aqui está um exemplo desse formato JSON e as informações incluídas nele para referência: </p>               
   <br> <br>

<style>
  .code-box {
    background-color: #282c34;
    color: #abb2bf;
    padding: 20px;
margin: 20px;
    border-radius: 5px;
    position: relative;
  }

  .code-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #343541;
    color: #282c34;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-weight: bold;
  }

  .code-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #343541;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
  }

  .code-box pre {
    margin: 0;
  }

  .code-string {
    color: #98c379;
  }

  .code-number {
    color: #d19a66;
  }

  .code-boolean {
    color: #56b6c2;
  }

  .code-null {
    color: #e06c75;
  }
</style>

<div class="code-box">
  <div class="code-title">
    <img src="http://projeto.cloud/wp-content/uploads/2023/03/json-file.png" alt="JSON logo" width="20" height="20" style="margin-right: 5px;">
  </div>
  <button class="code-btn" onclick="copyToClipboard()">Copiar</button>
  <pre><code id="myCode" class="language-json">
    
    {
      "eventId": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
      "timestamp": <span class="code-string">"2022-05-06T15:28:36.110-03:00"</span>,
      "workflow": {
        "id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
        "description": <span class="code-string">"Lorem ipsum dolor sit amet"</span>
      },
      "trigger": {
        "id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
        "description": <span class="code-string">"Opportunity won"</span>
      },
      "source": {
        "object": {
          "id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
          "description": <span class="code-string">"Opportunity"</span>,
          "contextUrl": <span class="code-string">"/api/v11/opportunity/opportunities"</span>
        },
        "row": {
          "id": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>,
          "externalId": <span class="code-string">"00000000-0000-0000-0000-000000000000"</span>
        }
      }
    }
    
  </code></pre>
</div>

<script>
  function copyToClipboard() {
    const codeToCopy = document.getElementById("myCode").textContent;
    const el = document.createElement('textarea');
    el.value = codeToCopy;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    alert("Código copiado para a área de transferência.");
  }
</script> <br> <br>

<p>Aqui<p> está A atabela listaabaixo completacontém dosinformações atributosdetalhadas comsobre seusos respectivosatributos formatospresentes eno propósitos!formato ConfiraJSON. abaixoEsses eatributos comecesão alistados desbravarjuntamente estecom poderososeus formatorespectivos deformatos trocae de dados.intenções. Essas informações podem ser úteis para entender melhor a estrutura do JSON e como usá-lo.  </p>  <br>

<p>
<style>
  table {
      }
</style>
<table class="wrapped confluenceTable tablesorter tablesorter-default" role="grid" resolved="">
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr role="row" class="tablesorter-headerRow">
      <th class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="0" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Atributo: No sort applied, activate to apply an ascending sort" style="user-select: none;">
        <div class="tablesorter-header-inner">Atributo</div>
      </th>
      <th class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="1" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Tipo de dados: No sort applied, activate to apply an ascending sort" style="user-select: none;">
        <div class="tablesorter-header-inner">Tipo de dados</div>
      </th>
      <th class="confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted" data-column="2" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" aria-sort="none" aria-label="Descrição: No sort applied, activate to apply an ascending sort" style="user-select: none;">
        <div class="tablesorter-header-inner">Descrição</div>
      </th>
    </tr>
  </thead>
  <tbody aria-live="polite" aria-relevant="all">
    <tr role="row">
      <td class="confluenceTd">eventId</td>
      <td class="confluenceTd">String</td>
      <td class="confluenceTd">Identificador único do evento</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">timestamp</td>
      <td class="confluenceTd">Data e hora formatados como String (ISO 8601)</td>
      <td class="confluenceTd">Data e hora em que o Workflow foi executado</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">workflow.id</td>
      <td class="confluenceTd">UUID formatado como String</td>
      <td class="confluenceTd">Identificador único do workflow que emitiu o evento</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">workflow.description</td>
      <td class="confluenceTd">String</td>
      <td class="confluenceTd">Nome do workflow que emitiu o evento, como definido no momento que a chamada foi disparada <disparada </td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">trigger.id</td>
      <td class="confluenceTd">UUID formatado como String</td>
      <td class="confluenceTd">Identificador único global do gatilho definido no Workflow no momento que o evento foi disparado</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">trigger.description</td>
      <td class="confluenceTd">String</td>
      <td class="confluenceTd">Nome do gatilho definido no Workflow no momento que o evento foi disparado</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">source.object.id</td>
      <td class="confluenceTd">UUID formatado como String</td>
      <td class="confluenceTd">Identificador único do objeto de origem do evento (oportunidades, leads, atividades, etc)</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">source.object.description</td>
      <td class="confluenceTd">String</td>
      <td class="confluenceTd">Descrição do objeto de origem do evento</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">source.object.contextUrl</td>
      <td class="confluenceTd">URL formata como String</td>
      <td class="confluenceTd">URL base da API do objeto de origem no TOTVS CRM Gestão de Clientes</td>
    </tr>
    <tr role="row">
      <td class="confluenceTd">source.row.id</td>
      <td class="confluenceTd">UUID formatado como String</td>
      <td class="confluenceTd">Identificador único do registro de origem do evento (ID da oportunidade, lead, atividade, etc)</td>
    </tr>
    <tr role="row">
      <td colspan="1" class="confluenceTd">source.row.externalId</td>
      <td colspan="1" class="confluenceTd">String</td>
      <td colspan="1" class="confluenceTd">Identificador externo do registro de origem do evento, se houver um e o atributo estiver visível no Workflow</td>
    </tr>
  </tbody>
</table> </p>

<style>

 #title-text {
	display: none !important;}  


@import "compass/css3";  @import "compass/css3";

* {
  box-sizing: border-box;
  font-family: lato, sans-serif;
}  

* {
  font-family: lato, sans-serif;
}  

blockquote {
  margin: 3%;
  border-left: 10px solid #363636;
  padding: 2%;
  color: #222;
  background: #fff;
  font-style: italic;
  line-height: 130%;
}



.top {
  width: 100%;
  background: #363636;
  
}

.img {
image-resolution: 5px 5px 9px;
image-rendering: auto;
image-orientation:0deg
}

.header {
  max-width: 1200px;
  width: 98%;
  height: 7em;
  margin: 0px auto;
  overflow: hidden;

  
  h1 {
    text-align: center;     
    font-weight: bold;     
    color: #fff;
    padding: 20px;
   font-size: 22px;

     div {
      margin: 0;
      font-weight: normal;
      font-size: 1.8em;
    }
  }
  .author {
    font-size: 0.8em;
    font-weight: normal;
    border-top: 1px dashed #555;
    border-bottom: 1px dashed #555;
    max-width: 160px;
    text-align: center;
    margin: -1em auto 0 auto;
    padding: 0.3em;
    text-transform: uppercase;
    color: #ccc;
  }
}

.content {
  max-width: auto;
  float: right;
  margin: auto;
  padding: 0;
}

.date {
  float: left;
  width: 10%;
  color: #444;
  text-align: center;
  div {
    margin: 0;
    line-height: 50%;
  }}
  .day {
    float: left;
    margin-top: 0.1em;
    width: 100%;
    color: #FEAC0E;
    font-size: 200%;
  }
}

.date-line {
  display: none;
}

.article {
  width: 100%;
  padding: 0 7em 0 7em;
  background: rgb(247, 247, 252);
 
  }
  h2 {
    font-weight: normal;       
    font-size: 22px;
   font-weight: bold;
   color: #555555;
    margin: 0;
  }
  h3 {
    font-weight: normal;
    font-size: 16px;
    color: #888;
    font-style: italic;
    margin: 0 0 1em 0;
  }
  p {
    margin: 0;
    padding-top: 8px;
    color: #555;
    text-align: justify;
    font-size: 16px;
    line-height: 150%;
    
  }

li{

  font-size: 16px;
  color: #555555;
}    

div{
    font-style: 16px;
    color: #555;
  }
  .firstpara {
    text-indent: 0;
    font-size: 16px;
  }
  .pause {
    margin: 2em auto 2em auto;
    color: #555555;
    width: 60%;
    padding: 10px;
    text-align: center;
   font-size: 20px;
 

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .firstcharacter {
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    line-height: 0.6em;
    padding-top: 0.12em;
    padding-right: 0.1em;
    padding-left: 0;
  }
}

.footer {
  max-width: 1200px;
  width: 98%;
  height: 50px;
  margin: 0px auto;
  overflow: hidden;
  border-top: 1px solid #ccc;}
  .copy {
    float: right;
    font-style: italic;
    color: #888;
    padding: 1% 1% 0 0;
  }
}

.prev a,
.next a {
  position: fixed;
  top: 9.6em;
  padding: 1em;
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.prev a:hover,
.next a:hover {
  background: #fff;
}
.prev a {
  left: 0.7em;
}
.next a {
  right: 0.7em;
}

@media only screen and (max-width: 450px) {
  .content {
    margin-top: 2em;
  }
  .social {
    display: none;
  }
  .date {
    display: none;
  }
  .date-line {
    display: inline;
  }
  .article {
    width: 100%;
    margin: 0 auto 2em auto;
    border-left: none;
    padding-bottom: 2em;
    border-bottom: 1px solid #ccc;
    p {
      font-size: 1.2em;
    }
  }
  .header {
    height: auto;
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0;
    background: rgb(34, 16, 171)
     
    h1 {
      text-align: center;
      width: 100%;
      margin: 0;
      color: #f1f1f1;
      span {
        font-size: 80%;
      }
    }
    .author {
      display: none;
    }
  }
  .footer {
    text-align: center;
    padding: 3%;
    height: 40px;
    .copy {
      float: none;
    }
  }
  .prev a,
  .next a {
    position: relative;
    margin-bottom: 2em;
    text-align: center;
    top: 0;
  }
  .prev a {
    float: left;
    width: 40%;
  }
  .next a {
    float: right;
    width: 40%;
  }s
.table {
font-family: lato;
background-color: #fff;

}
  
#wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  inset: 0;
  justify-content: center;
  align-items: center;
}}
.flexWrap {
  display: flex;
  gap: 2px;
  width: 110px;
}
#disclaimer {
  font-family: sans-serif;
  color: #333333;
  position: fixed;
  top: 5%;
  right: 5%;
  width: 5%;
} 

.badge-primary {
  color: #8686FF;
  background-color: #F3F3FF;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-secondary{
  color: #ebeef0;
  background-color: #2abe74;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold 

}

.badge-novo {
  color: #fff;
  background-color: #20d691;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-danger{
  color: #FFFFFF;
  background-color: #FF4057;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold }

.badge-manutencao {
  color: #FFF;
  background-color: #efc307;
  border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}

.badge-melhoria {
  color: #FFF;
  background-color: #6f60f6;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-light {
  color: #8686FF;
  background-color: #F3F3FF
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-dark {
  color: #ebeef0;
  background-color: #064118;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold } 


body {
  font-family: lato;
}

}
caption {
  font-size: 1.5rem;
  text-align: left;
  padding-bottom: 1rem;
}

}
tbody tr:nth-child(odd),
tfoot tr:nth-child(even) {
   background-color: #fff;
}
tfoot tr td:first-child {
  border: none;
  background-color: white;
}
tfoot {
border-top: 5px solid #fff;
}

.img2 {
   width:50%;
    height:auto;
    padding:2%;
    margin-bottom:4%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto }

 #f7f7fc;
  }  



}
container{
    width: 50%;
}
.borderbox{
  border: 1px dashed #ebebeb;
  width:45%;
  margin: 50px auto;
  border-radius: 8px;
  border-width:2px;
}
.box{
  position:relative;
  width:auto;
  height:auto;
  margin: 30px auto;
  padding: 15px;
  box-shadow: 0px 1px 6px 1px #ebebeb;
  border-radius: 8px;
}
.sucess-box{
    border-left: solid 5px #3FC43C;
    background-color: #fff;

} .info-box{
    border-left: solid 5px #585EC2;
    background-color: #fff;
}
.warning-box{
    border-left: solid 5px #EFA162;
    background-color: #fff;
}
.error-box{
    border-left: solid 5px #F32D70;
    background-color: #fff;
}
.fa{
    padding-right:10px;
}
.fa-check-circle{
  color: #3FC43C;
} 

.fa fa-info-circle {
  color: #585EC2;
}
.warning-box .fa-exclamation-triangle{
  color: #EFA162;
}

.info-box .fa-info-circle{
  color: #585EC2;
}

 .error-box .fa-exclamation-triangle{
  color: #E63470;
}
p{
  padding:0px 28px;
}
.time{
  color:#9b9b9b;
}
.fa-close{
    color:#BCC4CD;
}
.close{
  position:absolute;
  top: 20px;
  right:20px; 
}
.link1,
.link2,
.link3,
.link4{
  opacity:0;
  margin-left:20px;
  text-decoration:none;
}
.link1{
  color:#3FC43C;
}
.link2{
  color:#585EC2;
}
.link3{
  color:#EFA162;
}
.link4{
  color:#E63470;
}
.box:hover a{
  opacity:1;
}


.topic-cluster-index {
  list-style: none;
  padding: 0;
}
.topic-cluster-index li {
 display: inline-block; list-style: none;
  min-height: 30px;
  width: 98%;
  background-color: #fff;
  border-radius: 2px;
  padding: 24px;
  margin: 5px 0;
  border: 1px solid #e4e8ec;
  line-height: 16px !important;
font-weight: bold;
   color: #363636;
  font-family: lato;
  font-weight: 600;
}
.topic-cluster-index li a {
list-style: none;
  font-weight: 400;
  color: #363636 !important;
  list-style: none;
font-size: 15px;
   margin: 0;
  padding: 0;
  font-family: lato;
font-weight: bold;
 text-decoration: none !important;
}
.topic-cluster-index li:hover {
list-style: none;
  background-color: #F7F7FC;
  font-family: lato;
  font-weight: 700;
  cursor: pointer;
}
.topic-cluster-index li:hover a {
list-style: none;
  color: #feac0e !important;
  font-family: lato;
  font-weight: 700;
  text-decoration: none !important;
}
.index-title {
  width: 100%;
  height: 30px;
  background: #feac0e;
  font-family: lato;
  font-size: 20px;
  border-radius: 2px;
  color: #fff;
  font-weight: 700;
  padding: 6px 10px 6px 25px;
}

.imgcapa {
width: 100%; 
margin-top: 0px;}

  </style>

<style>
.main-presupuestoMensual {
  min-width: 320px;
  max-width: 100%;
  padding: 50px;
  margin: 0 auto;
  background: #F7F7FC;
}

.containter-tab1 {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

.input-tabPresupuestoMensual {
  display: none;
}

.label-tabPresupuestoMensual {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

.label-tabPresupuestoMensual:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

/* .label-tabPresupuestoMensual[for*='1']:before {
  content: '\f1cb';
}

.label-tabPresupuestoMensual[for*='2']:before {
  content: '\f17d';
}

.label-tabPresupuestoMensual[for*='3']:before {
  content: '\f16b';
}

.label-tabPresupuestoMensual[for*='4']:before {
  content: '\f1a9';
} */

.label-tabPresupuestoMensual:hover {
  color: #888;
  cursor: pointer;
}

.input-tabPresupuestoMensual:checked + .label-tabPresupuestoMensual {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 
{
  display: flex;
}

@media screen and (max-width: 650px) {
  .label-tabPresupuestoMensual {
    font-size: 0;
  }

  .label-tabPresupuestoMensual:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  .label-tabPresupuestoMensual {
    padding: 15px;
  }
}

/**/
body {
  background: #ececec;
}

.loader:before,
.loader:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  border-top-color: #ecd078;
  border-right-color: #c02942;
  border-bottom-color: #542437;
  border-left-color: #53777a;
  content: "";
  transform: translate(-50%, -50%);
  animation: rotate 1.5s infinite ease-in-out;
}
.loader:before {
  border-width: 10vh;
}
.loader:after {
  width: 30vh;
  height: 30vh;
  border-width: 2.5vh;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

</style>

<style>  #title-text {
	display: none !important;}       body {
  font-size: 100%;
  font-family: "lato", serif;
  color: #363636;
  background-color: #ffffff;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "lato";
font-family: lato, sans-serif!important;   
font-size: 16px;
}

img {
  max-width: 100%;
}

p {
  text-align:justify;
  font-family: "Lato", sans-serif;
}

h2
h5 {
  font-family: "lato", sans-serif;
  font-size: 90px ;
  font-weight: bold;
  
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
}
.cd-nugget-info a {
  position: relative;
  font-size: 14px;
  color: #718ca1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
  opacity: 0.8;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #718ca1;
}

/* -------------------------------- 

Main components 

-------------------------------- */


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 32px;
  height: 32px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px;
}
.cd-timeline-img.cd-novo {
  background: #363636;
}
.cd-timeline-img.cd-melhoria {
  background: #363636;
}
.cd-timeline-img.cd-manutencao {
  background: #363636;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 50px;
  background: #f5f5fa;
  border-radius: 0.25em;
  max-width: 400px;
  padding: 1em;
  box-shadow: 0 3px 0 #363636;
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h2 {
  color: #363636;
  font-weight: bold;
}
.cd-timeline-content p,

.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;

}

.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: 0.8em 1em;
  background: #5596e6;
  color: white;
  border-radius: 0.25em;
  text-decoration: none;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #ffffff;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: 0.8em 0;
  opacity: 0.7;
}
.cd-timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold ;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #d7e4ed;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #d7e4ed;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }

  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
    color: #fff;
    background-color: #FDAB0E;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #0897E9;
  }
  
  .button-2:active {
    background-color: #FDAB0E;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 50px;
  }
  #disclaimer {
    font-family: Tahoma;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  }
  
  
  
  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
      color: #fff;
    background-color: #363636;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #feac0e;
  }
  
  .button-2:active {
    background-color: #feac0e;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 110px;
  }
  #disclaimer {
    font-family: sans-serif;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  } 

  .badge-primary {
    color: #8686FF;
    background-color: #F3F3FF;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-secondary{
    color: #ebeef0;
    background-color: #2abe74;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold 
 
 }
 
 .badge-novo {
    color: #fff;
    background-color: #20d691;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-danger{
    color: #FFFFFF;
    background-color: #FF4057
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
 
 .badge-manutencao {
    color: #FFF;
    background-color: #FEAC0E;
    border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 
 .badge-melhoria {
    color: #FFF;
    background-color: #6f60f6;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-light {
    color: #8686FF;
    background-color: #F3F3FF
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-dark {
    color: #ebeef0;
    background-color: #064118;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
  </style> 

<style> @import url(https://fonts.googleapis.com/css?family=Raleway:300);

.my-custom-class {
  /* Estilos para o body */
  margin: 0;
  padding: 15px;
  background: #f7f7fc;
  text-align: center;
}

.personne {
  display: inline-block;
  position: relative;
  width: 80px;
  margin: 0 20px;
  cursor: pointer;
  vertical-align: top;
}

.personne > div {
  width: 100%;
  height: 80px;
  border-radius: 50%;
  border: 4px solid transparent;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}

.personne img {
  height: 100%;
  margin: 0 -50%;
  transition: all 0.5s ease;
}

.personne:hover img {
  height: 105%;
}

.personne:hover > div {
  border: 4px solid #feac0e;
}

.personne h4 {   
font-family: lato, sans-serif!important;
  text-align: center;
  margin-top: 5px;
  color: #363636;
  font-size: 13px;
  padding-left: 1px;
}

/* Estilos para o tooltip */
.tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
   color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Mostrar o tooltip quando o elemento pai é hover */
.personne:hover .tooltip {
  display: block;
}
.titulo-destaque {
  font-size: 18px;   
font-family: lato, sans-serif!important;   
font-weight: bold;
  margin: 0;
  text-align: center;
  padding-bottom: 5px;
  color: #363636;
}

.subtitulo-destaque {
  font-family: lato;
  margin-left: 22%;
  margin-right: 22%;
  padding-top: 8px;
  color: #555;
  text-align: center;
  font-size: 16px;
  line-height: 150%;
  text-align: justify;
}

.tooltip {
  position: relative;
}

.tooltip:before {
  content: "";
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.tooltip:hover:before {
  display: block;
}

.titulo-destaque.tooltip:before {
  content: attr(data-tooltip);
}       

.tooltip:before {
  content: "";
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 80px; /* Define a largura máxima do tooltip */
  word-wrap: break-word; /* Faz o tooltip quebrar a linha quando necessário */
}

</style>

<style> 
#conteudo {
  background-color: #f7f7fc;
}

.caixas {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.caixa {
  width: calc(50% - 10px);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.caixa:hover {
  background-color: #F7F7FC;;
}

.caixa .conteudo {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.caixa .imagem {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.caixa img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
}

.caixa .texto {
  height: 0%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Lato', sans-serif;
  max-width: 100%;
  font-size: 14px;
  color: #363636;
 
}

.caixa h3 {
  margin-top: 10px;
  font-size: 1.2em;
  font-family: 'Lato', sans-serif;
  color: #363636;
}

.caixa p {
  margin: 15 10px;
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #363636;
 </style>

<style>  body {
  margin: 0; // 1
  font-family: lato;
  font-size: 16px;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: #555555
  text-align: left; // 3
  background-color: $body-bg; // 2
}

.speech-bubble {
  max-width: 300px;   
  font-family: lato;   
  color: #555555;
font-size: 16px;
   margin: 1rem;
  padding: 1rem;
  position: relative;
  border: 2px solid #FEAC0E;
  background: #fff;
  border-radius: 0.4em;
}
.speech-row {
  display: flex;
  justify-content: center;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

.speech-img img {
  border-radius: 50%;
}
img {
  vertical-align: middle;
  border-style: none;
}
.speech-img {
  align-self: center;
  max-width: 100%;
  height: auto;
}
*,
::after,
::before {
  box-sizing: border-box;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
.speech-bubble:before,
.speech-bubble:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: #FEAC0E;
  border-left: 0;
  margin-top: -20px;
  margin-left: -20px;
}

.speech-bubble:after {
  border-right-color: #fff;
  margin-left: -18px;
  z-index: 1;
}
    </style>

<style>

.alert-box {
    color:#555;
    border-radius:5px;
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
    padding:10px 25px 10px 25px;  
margin: 5px 25px 5px 25px;   
max-width: 100%;
}

.alert-box span {
    font-weight:bold;
    text-transform:uppercase;
}

.error {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}
</style>