Histórico da Página

<img src="https://totvscrm.com/wp-content/uploads/2023/04/capaartigo3.png" style="width:100%">  


 <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>  

<style>
    /* Seleciona a classe CSS 'meu-titulo' e aplica o padding de 0 3em 0 3em */
    .meu-titulo {
      padding: 0 3em 0 3em;
    }
  </style>

 <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/04/[email protected]" alt="some text" width=40> &nbsp &nbsp <strong>PARÂMETRO<strong>PARÁMETRO DE AGRUPACIÓN AGRUPAMENTOEN NOEL MÓDULO DE DOCUMENTOS</strong> </h2>     <br> <br>
<span class="badge badge-novo"><strong>NOVO<><strong>NUEVO</strong></span> <span class="badge badge-dark"><strong>DOCUMENTOS</strong></span> <br> 

<br> 

  <style>
      /* Estilo para a tabela */
      table {
        width: 100%;
               border-collapse: collapse;
      }
      
      /* Estilo para as células da tabela */
   
    </style>

 <div class="coluna1">
 <div class="table-wrap" style="margin-left: 0px;padding: 0 3em 0 3em;">

 <table class="relative-table wrapped confluenceTable" style="width: 100%;" resolved="">
    <thead>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Produto>Producto:</th>
        <td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - GestãoGestión de Clientes<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>Línea de Produtoproducto:</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">Documentos</td>
      </tr>
      <tr>
        <th style="text-align: left;" colspan="1" class="confluenceTh">Aplicação<>Aplicación</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);">NR040820221011</span></td>
      </tr>
         
              
          <div class="content-wrapper">

            
            </span>

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



    </div>  <div class="coluna2">
      <div class="conteudo"> <br> 
      
        <p>Antes de desseeste recurso, muitasmuchas vezesveces era necessárionecesario fazerrealizar ala organizaçãoorganización por grupo de produtosproductos manualmente, olo quecual consumiaconsumía muitomucho tempotiempo ey esforçoesfuerzo. Além dissoAdemás, ala organizaçãoorganización manual podiapodía levarinducir a cometer erroserrores e inconsistencias inconsistênciasen noslos documentos. ComCon oel recurso de agrupamentoagrupación de produtosproductos ey serviçosservicios, vocêpuede pode definir grupos comcon base emen critérioscriterios emen comumcomún para seussus produtosproductos ey serviçosservicios, ey ala soluçãosolución irágenerará gerarsubtotales subtotaisy eorganizará organizarautomáticamente automaticamentesus seus itensítems de acordoacuerdo comcon essesestos grupos. IssoEso economiza tempotiempo ey esforçoesfuerzo, poispues nãono ées maisnecesario necessáriorealizar fazeresta essa organizaçãoorganización manualmente. </p>
      </div>
    </div>



 <br> 



  <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/04/[email protected]" alt="some text" width=40> &nbsp &nbsp <strong>O<strong>¿QUÉ QUE MUDOUCAMBIÓ?</strong> </h2>   <br> 



 <p> <h3 class="meu-titulo"> NOVOSNUEVOS PARÂMETROSPARÁMETROS QUE PERMITEMPERMITEN ORGANIZAR PRODUTOSPRODUCTOS EY SERVIÇOSSERVICIOS POR GRUPOS </h3> <br> </p>  

<p>Os quatro novos parâmetros disponibilizados em<p>Los cuatro nuevos parámetros puestos a disposición en modelo de documentos permitempermiten personalizar ala exibiçãoexhibición de informaçõesinformaciones emen suassus listas de produtosproductos ey serviçosservicios, oresultando queen resultauna em uma visualização maisvisualización más organizada ey fácil de entender. ComCon essesestos novosnuevos recursos, vocêpuede podemejorar melhorarla apresentación apresentaçãode daslas informaçõesinformaciones para seussus clientes ey facilitar a compreensão das mesmassu comprensión. </p>   <div style="padding: 0 3em 0 3em;"> 

<br>

<ul style="list-style-type: square;">
  <li> <strong>Habilitar agrupamentoagrupación: </strong>
quandocuando ase opçãoactiva éla ativadaopción, ala soluçãosolución considera ala segunda línea linhade dala tabelatabla dodel documento como parâmetroparámetro de agrupamentoagrupación. Nessa linha, é necessário inserir aEn esta línea es necesario incluir la tag de grupo para definir oel fatorfactor de agrupamentoagrupación.
Com isso, o Con lo cual TOTVS CRM organiza oslos itensítems automaticamenteautomáticamente emen grupos, de acordoacuerdo comcon oel critériocriterio definido por pelala tag de grupo. ALa tabelatabla ése ordenadaordena de forma creciente crescentepor peloel campo expresado expressopor pelala tag, olo quecual facilita ala compreensãocomprensión y eel aanálisis análisede doslos dadosdatos.</li><br>

<img src="https://totvscrm.com/wp-content/uploads/2023/04/ordena.gif" class="destaque"> <br> <br>  

 <li> <strong> Habilitar linhalínea de identificaçãoidentificación dodel grupo: </strong> AoAl ativaractivar oel parâmetro,parámetro ése exibidamuestra umauna linhalínea comcon oel nomenombre dodel grupo  para cada novonuevo grupo, separando ala linhalínea anterior de dala próxima. EssaEsta opçãoopción sósolamente podepuede seractivarse ativadasi sela oagrupación agrupamentotambién tambémestuviera estiver ativado.
Com essa opção ativada, os itens são separadosactivada. Con esta opción activada, los ítems se separan por grupos ey ala linhalínea comcon oel valor dodel parâmetroparámetro de agrupamentoagrupación ajudaayuda a identificar claramente a quequé grupo pertenece cada item pertenceítem. IssoEsto tornadeja ala visualizaçãovisualización maismás organizada ey facilita la acomprensión compreensãode doslos dadosdatos.</li> <br>     <img src="https://totvscrm.com/wp-content/uploads/2023/04/separa.gif" class="destaque"> <br> <br>   

  <li><strong>Habilitar subtotais<subtotales</strong>:AoAl ser ativadoactivarse, ées possívelposible exibirmostrar subtotaissubtotales para cada grupo definido por peloel parâmetroparámetro de agrupamentoagrupación. EssaEsta opçãoopción sósolamente podepuede seractivarse ativadasi sela oagrupación agrupamentotambién tambémestuviera estiver ativadoactivada.
Para definir los ossubtotales subtotais,es énecesario necessárioincluir inserirla acuarta quartalínea linhaen nala tabelatabla ey especificar la acolumna colunadeseada desejadaen nala célulacelda correspondentecorrespondiente. AoAl final de cada agrupamento, oagrupación TOTVS CRM somasuma oslos valores dade colunala columna especificada ey exibemuestra oel subtotal para oel respectivo grupo.</li>

<br>     <img src="https://totvscrm.com/wp-content/uploads/2023/04/substotal.gif" class="destaque"> <br> <br>

  <li> <strong> Habilitar totaistotales: </strong> AoAl ativaractivar oel parâmetro,parámetro ées possívelposible exibirmostrar oel total general geralde dala tabelatabla. EssaEsta opçãoopción considera ala última linhalínea de dala tabelatabla como configuraçãoconfiguración para exibiçãoexhibición dodel total. Para definir oel total es, énecesario necessárioincluir inserirla aúltima últimalínea linhaen nala tabelatabla ey especificar la acolumna colunadeseada desejadaen nala célulacelda correspondentecorrespondiente. ApósDespués todosde oscalcular itenstodos elos subtotaisítems seremy calculadossubtotales, o TOTVS CRM somasuma oslos valores de dala colunacolumna especificada ey exibemuestra oel total general geralde dala tabelatabla. Com isso, é possível ter uma visãoCon lo cual es posible tener una visión clara ey organizada dodel total geralgeneral de doslos itensítems, facilitando ael análisis análisede doslos dadosdatos ey ala compreensãocomprensión dodel documento.</li> <br>

     <img src="https://totvscrm.com/wp-content/uploads/2023/04/total.gif" class="destaque"> <br> <br>    

</ul>

<script type="text/javascript" src="https://es.files.fm/gallery_module/v1/js/?hash=qm444aq53&user=70e672d&ihash=c672d87be79e19fddc5ccfa11148e2dc&view=horizontal" id="files_fm_upload_script_tag"></script>

  </div>


  <br> <br> <br> <br>

<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.;
    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;
}
table {
  border-collapse: collapse;
}
th {
  text-align: left;
  background-color: #363636;
  color: #fff;
}
caption {
  font-size: 1.5rem;
  text-align: left;
  padding-bottom: 1rem;
}
td, th {
  padding: 0.5rem;
  border: 3px solid #fff;
}
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: 50px auto;
  padding: 20px;
  box-shadow: 0px 1px 8px 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;
} 
.fas fa-info-circle
{
  color: #585EC2;
}
.warning-box .fa-exclamation-triangle{
  color: #EFA162;
}
.error-box .fa-exclamation-triangle{
  color: #E63470;
}
p{
  padding:0 3em 0 3em;
}
.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;

  }
.topic-cluster-index li {
 display: inline-block; list-style: none;
  min-height: 30px;
  width: 98%;
  background-color: #fff;
  border-radius: 2px;
  padding: 2em 3em 2em 3em;

   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;
}
  </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>
.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 
#tab5:checked ~ #content5{
  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> 

.half {
  float: left;
  width: 100%;
  padding: 0 1em;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #363636;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  width: 100%;
   display: block;
  padding: 0 0 0 1em;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #feac0e;
  background: #afaf4a00;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #f7f7fc;
  -webkit-transition: max-height 0.35s;
  -o-transition: max-height 0.35s;
  transition: max-height 0.35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 300em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}
input[type="checkbox"] + label::after {
  content: "+";
}
input[type="radio"] + label::after {
  content: "\25BC";
}
input[type="checkbox"]:checked + label::after {
  transform: rotate(315deg);
}
input[type="radio"]:checked + label::after {
  transform: rotateX(180deg);
}

/*----------------------------------------------------------*/
/* Estilos generales */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Open Sans", sans-serif;
}
h2 {
  font-weight: normal;
}

.wrapper {
  margin: auto;
  width: 90%;
  max-width: 960px;
}

/* Otros estilos */
.card {
  padding: 1em;
  color: #333;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.card h2:first-child,
.card p:first-child {
  margin-top: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  margin: 2rem auto;
  padding: 0 1rem;
  max-width: 50rem;
}

details {
  padding: 1rem 1rem;
  margin: 6px;
  position: relative;
  background-color: #ffffff;
  transition: all 0.3s;
}

details[open] {
  min-height: 20px;
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

summary:focus {
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}

.control-wrapper {
  border-radius: 50%;
  line-height: 0;
}

summary .control-wrapper {
  transition: background-color 0.3s, box-shadow 0.3s;
}

summary:focus .control-wrapper {
  transition-duration: 0s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09), 0 0 0 4px #feac0e;
}

.control-icon-close {
  display: none;
}

details[open] .control-icon-close {
  display: initial;
}

details[open] .control-icon-expand {
  display: none;
}
 </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-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: #363636;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
  </style>