Histórico da Página

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Inclua o estilo do tema Monokai -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
  

  <style>
  /* ==============================
    =       CONFIGURAÇÕES GERAIS      =
    =============================== */

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

a {
  color: #42526e;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: white;
}

li {  font-size: 14px !important;
}

h3 {  font-size: 14px !important;
  font-weight: bold;  

}

h1 {  font-size: 13px !important;
  

}

h2 {  font-size: 15px !important;
  font-weight: bold;  

}

td, th {
    padding: 9px4px;
}

td:first-child {
    width: 100%;
/* ==============================
    display: inline-block; /* Converte o elemento td em um bloco em linha para controlar a largura */
 =        ESTILOS DE TÍTULOS     white-space: nowrap; /*=
 Impede a quebra de linha do texto =============================== */

#title-text {
  display: overflow:none hidden; /* Esconde o texto que excede o tamanho definido */
    text-overflow: ellipsis; /* Mostra '...' se o texto exceder o tamanho e for cortado */
}

/* ==============================
      =        ESTILOS DE TÍTULOS       =
     !important;
}

.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
  font-size: 13px!important;
 
}

.wiki-content h1 {
  font-size: 13px !important;
}

.wiki-content h2 {
  font-size: 14px !important;
  color: #42526e !important;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
}

.custom-heading,
h3.custom-h3 {
  font-size: 16px;
  color: #42526e;
  margin-bottom: 20px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

/* =============================== */

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

.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
 
}
      =        ESTILOS DE TEXTO         =
      =============================== */

.wiki-content h1p {
  font-size: 16px14px !important;
}

.wiki-content h2justificado,
.custom-justified {
  fonttext-sizealign: 14px !importantjustify;
  colormargin: #42526e10px !important0;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
}

.custom-heading,
h3.custom-h3 {
  font-size: 16px;
  color: #42526e;
  margin-bottom: 20px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

/* }

/* ==============================
      =       ESTILOS DE LINKS         =
      ==============================
      = */

.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
 ESTILOS DE TEXTOtext-decoration: none;
  color: #42526e;
  font-size: 14px;


}

.wiki-content a:hover  ={
      =============================== */

.wiki-content p {
  font-size: 14px !important;
}

.justificado,
.custom-justified {
  text-align: justify;
  margin: 10px 0color: white;
}

/* ==============================
      =       ESTILOS DE LINKS  CONTAINER       =
      =============================== */



.wikicustom-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  font-size: 14px;


}

.wiki-content a:hover {
  color: white{
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* ==============================
      =       ESTILOS DE CARDS CONTAINER        =
      =============================== */



.custom-contentcard {
  background-color: #f5f5f5border: 2px solid #9aa1ad;
  padding: 20px;
  border  box-radiusshadow: 0 4px 8px;
  margin:rgba(0, 0, 0, 10px0.1);
  maxborder-widthradius: 100%8px;
  overflowbackground-color: hidden#f4f5f7;
}

.faq-container {  color: #42526e;
  maxoverflow-widthx: 800pxhidden;
  margin top: 0 auto;
  padding: 20px;
}



/* ==============================
      =       ESTILOS DE TABS CARDS         =
      =============================== */

.cardtabs {
  borderbackground-color: 2px solid #9aa1ad#dfe1e5;
}

.tabs .tab padding:a 20px;{
  color:  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8pxrgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #6B48FF;
  background-color: #f4f5f7transparent;
}

.tabs .tab colora:focus #42526e;{
  overflowbackground-xcolor: hidden;
  rgba(82, 97, 232, 0.25);
}



/* ==============================
      =       ESTILOS DE TABS          =
      =.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #6B48FF;
}

.tab-content {
   gap: 0;
  padding: 10px;
}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================== */

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab a= {
  color: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #1094b8;
  background-color: transparent;
}

.tabs .tab a:focus ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  backgroundpadding-colorleft: rgba(82, 200, 232, 0.25)0;
  list-style-type: none;
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #1094b8;
}

.tab-content {
   gap: 0;
  padding: 10pxicon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.tab-content preitem .label i {
  maxmargin-widthright: 100%;
  overflow-x: hidden10px;
}

/* ==============================
      =        ESTILOS DE ÍCONES COMPONENTES       =
      =============================== */

.icon-listcollapsible,
.collapsible-header,
.iconcollapsible-body {
  paddingbox-leftshadow: none 0!important;
}

.faq-question {
 list-style-type: none font-weight: bold;
  margin-bottom: 5px;
}

.iconfaq-answer {
  displaymargin-bottom: inline-block20px;
}
  width: 24px;
.custom-list {
  verticalpadding-alignleft: middle0;
  margin-rightleft: 45px;1.5em;
}

.custom-list li {
  position: relative;
  padding-left: -25px1em;
}

ul.item .label i custom-list {
  marginpadding-rightleft: 10px;
}

/* ==============================
      =    ESTILOS DE COMPONENTES      =
      =============================== */

.collapsible,
.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 20px;
}

.custom-list {
  padding-left: 0;
  margin-left: 1.5em;
}

.custom-list li {
  position: relative;
  padding-left: 1em;
}

ul.custom-list {
  padding-left: 10px;
}

ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10pxul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item:last-child {
  border-bottom: none;
}

/* Estilos para o label */
.label {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.item .label i {
  display: flex;
  align-itemsmargin-right: center10px;
 /* padding: 10px;
  border-bottom: 1px solid #eee;Adiciona espaço depois dos ícones */
}

.item:last-child {
  border-bottom: none;
}

.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0/* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: auto;
  display: flexblock;
  justify-content: space-between;
  align-items: center;
}

.item:last-child {
  border-bottom: none;
}

/* Estilos para o label */
.label {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
}

/* }

/* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */

#youtube-video-container iframe {
  width: 100%;
  =height: auto;
  display:  ESTILOS DE IMAGENS   block;
}

.video-container {
    max-width: 800px;
    margin: 0 =auto;
  }

.ytp-cued-thumbnail-overlay-image {
   =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto100%;
  displayposition: blockabsolute;
}

/* ==============================
      =    OUTROS ESTILOS DE VÍDEO           PERSONALIZADOS =
      =============================== */

#youtube-video-container iframe .custom-content {
  widthbackground-color: 100%#f5f5f5;
  heightpadding: auto20px;
  displayborder-radius: block8px;
}

.video-container {
    margin: 0 10px;
  max-width: 800px100%;
    marginoverflow: 0 autohidden;
  }

.ytp-cued-thumbnail-overlay-imagecustom-heading {
  backgroundfont-size: 16px;
  color: cover#42526e;
  background-positionmargin: center10px 0;
  widthborder-bottom: 100%2px solid #e0e0e0;
  heightpadding-bottom: 100%5px;
  positionfont-weight: absolutebold;  
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5#indice {
  border-radius: 5px;
  padding: 20px;
  bordermax-radiuswidth: 8px100%;
  marginoverflow: 0 10px;hidden;
}

#indice h2 {
  maxtext-widthalign: 100%center;
  overflowmargin-bottom: hidden16px;
}

.custom-heading#indice ul {
  fontlist-style-sizetype: 16pxnone;
  colorpadding-left: #42526e;0;
}

#indice li {
  marginpadding: 10px 0;
  border-bottom: 2px1px solid #e0e0e0#eee;
  padding-bottomcursor: 5pxpointer;
  font-weighttransition: bold;  background-color 0.1s ease;
}

#indice li:last-child {
  border-radiusbottom: 5pxnone;
  padding: 20px;}

#indice li:hover {
  maxbackground-widthcolor: 100%#6B48FF;
  overflowcolor: hiddenwhite;
}

#indice h2 {
  text-align: center;
  margin-bottom: 16px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #1094b8;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey /* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey {
  background-color: #ffffff;
}

.custom-grey th,
.custom-grey td {
  border: 1px solid #42526e;
  padding: 10px;
}

.custom-grey th {
  color: #fff;
  background-color: #42526e;
}



.custom-grey td {
  font-size: 13px;
}

.custom-grey tr:nth-child(odd) {
  background-color: #ffffff#e4e4e6;
}

.custom-grey th,
.custom-grey td tr:nth-child(even) {
  border: 1px solid #42526e;
  padding: 10px;
}

.custom-grey th {
  color: #fff;
  background-color: #42526e;
}



.custom-grey td {
  font-size: 13px;
}

.custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
}

.custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
}

/* ========== FIM DO ESTILO ========= */

  </style>
  

   
background-color: #dfdfdf;
}

/* ========== FIM DO ESTILO ========= */

  </style>
  

   





  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
      <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
      <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>
     <!-- PrimeiroTab CardContent -->
 
 <div class="card">
    <div id="tab1" class="itemcol s12">
        <span<div class="labeltab-content">
        <table  <div borderstyle="1">
          <tr>background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;">
            <section  <td><i class="fas fa-tags"></i> Produto:</td>
id="section1" style="margin-top: 40px;">
               <td>Automação da Força de Vendas</td><!-- Tab 70 conteúdo -->
  <!-- Segundo Card  -->

    </tr>
   !-- Primeiro Card -->
    <!-- Primeiro Card <tr>-->
      <div class="card">
       <td><i<div class="fas fa-link"></i> Linha de Produto:</td>item">
        <span class="label">
     <td>TOTVS CRM</td>
       <table border="1">
   </tr>
          <tr>
                <td><i class="fas fa-chart-pietags"></i> SegmentoProduto:</td>
              <td>Cross Segmentos<  <td>Automação da Força de Vendas</td>
            </tr>
            <tr>
                <td><i class="fas fa-desktoplink"></i> Linha de MóduloProduto:</td>
              <td>Relatório<  <td>TOTVS CRM</td>
            </tr>
            <tr>
                <td><i class="fas fa-chart-globepie"></i> AplicaçãoSegmento:</td>
              <td>Web/app móvel<  <td>Cross Segmentos</td>
            </tr>
            <tr>
                <td><i class="fas fa-hashtagdesktop"></i> IdentificadorMódulo:</td>
              <td>
  <td>Relatório</td>
            </tr>
        15266396</td>
    <tr>
      </tr>
       </table>
   <td><i class="fas fa-globe"></i> Aplicação:</span>td>
    </div>
     </div>

  <!-- Tabs e conteúdo das guias -->
  <div class="card">
<td>Web/app móvel</td>
           <ul class="tabs"> </tr>
      <li  class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li> <tr>
      <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      <li<td><i class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>fas fa-hashtag"></i> Identificador:</td>
     <!-- Tab Content -->
 
      <div id="tab1" class="col s12">
 <td>
           <div class="tab-content">
      15266396</td>
    <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
 </tr>
        </table>
     <section id="section1" style="margin-top: 40px;"> </span>
      </div>
      </div> 
 

  <!-- Tab 70 conteúdo --><br>

       <!-- Segundo Card -->

       <h2 class="custom-heading">
        <i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL
      </h2>
      <p class="justificado">
        A nova funcionalidade do TOTVS CRM - SFA aprimora o processo de geração de
        relatórios. Anteriormente, ao clicar em "Relatório", era exigida uma escolha
        manual de formato. Agora, os usuários podem predefinir um formato (PDF ou
        XLSX) nas configurações. Assim, ao acionar o botão, o download é iniciado
        automaticamente no formato selecionado, tornando o fluxo mais ágil.
      </p>
<br>

    <h2 class="custom-heading">
      <i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO
    </h2>
    <p class="justificado">
      Aprimorar a experiência na solução, acelerando o download de relatórios no
      formato escolhido, diminuindo etapas e evitando erros manuais.
    </p>
    <br>

  <!-- ... (seu conteúdo existente) ... -->

               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para utilizar o recurso, certifique-se de estar usando a versão padrão da solução.</p>
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2>
            <h3>Funções </h3>
            <ul class="browser-default">
              <li>
                  <p>
                      <b>Anteriormente</b>, para obter o relatório do pedido no TOTVS SFA ambiente web, era necessário:
                  </p>
                  <ul class="browser-default">
                      <li>Clicar no botão <b>"Relatório"</b>.</li>
                      <li>Selecionar o formato desejado (<b>PDF</b> ou <b>XLSX</b>) em uma nova aba.</li>
                  </ul>
              </li>
              <li>
                  <p><b>Com a melhoria</b>, será inserido um parâmetro nas configurações:</p>
                  <ul class="browser-default">
                      <li><b>Determinar previamente</b> o formato de arquivo.</li>
                      <li><b>Permitir download automático</b> ao clicar no botão <b>"Relatório"</b>.</li>
                  </ul>
              </li>
          </ul> 
          </section>
         
      
          <section id="section3" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>
            <h3> Passo a Passo</h3>

            <ol>
              <li<b>relatório</b>.</li>
              <li>Vá para a pasta de <b>pedidos</b>.</li>
              <li>No card <b>espelho do pedido</b>, clique no ícone <b>lápis de editar</b>.</li>
              <li>Na seção "<b>Downloand sem filtros:</b>", selecione uma das opções <b>"Formato PDF"</b> ou <b>"XLSX"</b>.</li>
              <li>Depois de salvo, ao acessar o pedido e clicar em <b>relatório</b>, automaticamente ele fará o <b>download</b>.</li>
          </ol>
            
            <br>

        <img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF0018.gif" alt="" class="imagem-responsiva"> 
          </section>

          <section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>
            <h3>Caso de uso</h3>
            

<p>
  <b>Cenário:</b> João é representante de vendas. Sua ferramenta principal é o TOTVS CRM - SFA,
  onde ela acompanha os pedidos de seus clientes.
</p> <br>
<p>
  <b>Desafio Antigo:</b> Diariamente, ao necessitar de relatórios de pedidos para compartilhar, João
  enfrentava um processo trabalhoso: primeiro, clicava no botão Relatório,
  aguardava uma nova aba abrir, e depois selecionava o formato desejado para
  finalmente realizar o download. Eram necessários ao menos 3 cliques e uma
  espera.
</p><br>
<p>
  <b>Solução Atualizada:</b> Agora, após configurar sua preferência de formato no TOTVS CRM - SFA, João
  precisa apenas clicar no botão Relatório. A solução, imediatamente, faz o
  download no formato que ele escolheu anteriormente.
</p>
<br>
<p>
  <b>Solução Atualizada:</b> A nova funcionalidade eliminou etapas desnecessárias, permitindo que João
  acesse os relatórios que precisa com mais agilidade, otimizando seu tempo e
  eficiência.
</p>

          </section>
      
         
          </div>
          
            <!-- Tab 30 fim -->
          
            <!-- Tab 30 fim -->
          
          </div>
        </div>
    


      <div id="tab2" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
            <section id="section5" style="margin-top: 40px;">
            <!-- Primeira coluna do conteúdo da guia 2 -->
            <h2 class="custom-heading"><i class="fa-solid fa-gear"></i>&nbsp DETALHES TÉCNICOS</h2>
            <br>
            <h3>Adicionando o Novo Campo</h3>
            <p>Localize-se dentro da tela "Relatório" → "Relatório" → "opção Editar relatório". Aqui, você deverá adicionar um novo campo:</p>
            <ul class="browser-default">
                <li><b>Label:</b> "Download sem filtros:"</li>
                <li><b>Tipo:</b> Combobox</li>
                <li><b>Obrigatório:</b> Sim</li>
                <li><b>Persistência:</b> tabela <code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>
                <li><b>Adaptações:</b> Crie um campo do tipo <code>varchar(80)</code> NULLABLE na opção 7 do tools.</li>
            </ul>
            
            <p><b>Obs:</b> adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>
        
            <h3>Configurando Opções do Combobox</h3>
            <p>O combobox terá 3 opções, cada uma correspondendo a um comportamento específico:</p><br>
            <ol>
                <li><b>Padrão (selecionar formato):</b> Valor a ser persistido: <code>PADRAO</code></li>
                <li><b>Formato PDF:</b> Valor a ser persistido: <code>PDF</code></li>
                <li><b>Formato XLSX:</b> Valor a ser persistido: <code>XLSX</code></li>
            </ol>
        
            <h3>Determinando Comportamentos de Download</h3>
            <p>Ao acionar o botão "Relatório", o sistema deve verificar o valor selecionado no combobox e agir de acordo:</p>
            <ol>
                <li><b>Padrão (selecionar formato):</b> O SFA mantém o modelo atual.</li>
                <li><b>Formato PDF:</b> O SFA inicia o download automático no formato PDF.</li>
                <li><b>Formato XLSX:</b> O SFA inicia o download automático no formato XLSX.</li>
            </ol>
        
            <h3>Instrução de Verificação</h3>
            <p>Para confirmar a configuração, realize a seguinte busca:</p>


                  <pre><code class="language-sql"> SELECT
                    sglformatosemfiltro
                FROM
                    relatoriobi
                WHERE
                    nome = 'Espelho do Pedido.prpt';</code></pre>
            <br> 


              </div>

            


           
        </div>
    </div>

    <div id="tab3" class="col s12">
      <div class="tab-content">
        <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;">
              <!-- Primeira coluna do conteúdo da guia 2 -->
              <div class="container">
                <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2>
                <ul class="collapsible">
                    <li>
                        <div class="collapsible-header"><i class="material-icons">question_answer</i>Posso manter o método antigo de seleção de formato a cada download?</div>
                        <div class="collapsible-body"><span>Sim! Basta selecionar a opção "Padrão (selecionar formato)" no combobox. Assim, sempre que clicar em "Relatório", será solicitado que escolha o formato desejado.
                          </span></div>
                    </li>
                   
                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
                </ul>
            </div>

            
                            <!-- Primeira coluna do conteúdo da guia 2 -->

            
            </div>
             
      </div>
  </div>

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // Inicialização das tabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
</script>

<script>
  const items = document.querySelectorAll("#indice li");

  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const targetId = e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          window.scrollTo({
              top: targetElement.offsetTop - 10,
              behavior: "smooth"
          });
      });
  });
</script>

<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> 

<script>hljs.highlightAll();</script>
  


<script src="scripts.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
  });
</script>

 <!-- ... (conteudo video) ... -->
 <script src="https://www.youtube.com/iframe_api"></script>

 <script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'FvsuBOvyyro',
      playerVars: {
        start: 1238, // 20:38 em segundos
        end: 1356   // 22:36 em segundos
      }
    });
  }
</script>