Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<header><style>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>

    <div class="compositiondani-banner">
        <div class="compositiondani-banner-image"></div>/* Remove margens padrão do body para o banner ocupar toda a largura */
        <div class="compositiondani-banner-overlay"></div>body {
        <div class="compositiondani-banner-logo-container">margin: 0;
            <div class="compositiondani-banner-logo"></div>
        </div>font-family: 'Roboto', sans-serif; /* Aplica a fonte ao corpo */
    }

    <div class=".compositiondani-banner-content"> {
        position: relative; /*  <!-- Conteúdo do banner aqui -->Necessário para posicionar elementos filhos (overlay, logo, content) de forma absoluta */
        </div>
    </div>
</header>

Livesearch
spaceKeyself
sizelarge
placeholderEstou procurando por ....
typepage

HTML
<div class="FullWidthCarouselstyles__DraggableContainer-sc-16jty68-1 fwSgiY inherited-styles-for-exported-element">
    <div class="grid__Container-sc-p40pqe-0 ctsbPE">
 width: 100%;
        min-height: 400px; /* Defina uma altura mínima ou fixa para o banner ser visível */
        /* --- ESTILOS DO BACKGROUND --- */
       <div style="margin-left: -16px; cursor: grab; transition: margin-left 0.6s ease 0s;" class="grid__Row-sc-p40pqe-1 oFuOf">
        <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="2xIZne1VBy81MhQlXA90bn" draggable="false" href="https://tdn.totvs.com/display/TCGDC/Release" class="rogGT"> background-image: url('https://totvscrm.app/public/login/images/background.png');
        background-size: cover; /* Faz a imagem cobrir todo o container, mantendo a proporção (pode cortar partes) */
        background-position: center center; /* <div color="rgba(9, 30, 66, 1)" class="hNWOlT"></div>Centraliza a imagem */
        background-repeat: no-repeat; /* Evita <div class="fzULwq">
    que a imagem se repita */
          <div class="bgvUWO"></div>
/* --------------------------- */
        display: flex; /* Usar flexbox para alinhar conteúdo interno <h3>Releases<*/h3>
        flex-direction: column; /* Empilhar conteúdo  <p class="muted"> </p>verticalmente */
        justify-content: center; /* Centralizar conteúdo verticalmente <p>Clique*/
 e explore: cada versão do TOTVS CRM align-items: Gestãocenter; de/* ClientesCentralizar éconteúdo apresentada com documentos detalhados, que fornecem insights claros sobre as mudanças implementadas, as melhorias realizadas e as novidades que foram introduzidas. </p>horizontalmente */
        color: white; /* Cor padrão do texto, assumindo que o fundo pode ser escuro */
            </div>
      text-align: center; /* Centraliza o texto por padrão */
    </a></div>
<!-- Separação bloco -->}

    .compositiondani-banner-overlay {
        position: absolute; /* Cobre todo o banner pai */
        top: 0;
 <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="3Vmbzdd1S76GhVxNtDs2Kz" draggable="false" href="https://trello.com/use-cases/meetings" class="rogGT">       left: 0;
        right: 0;
    <div color="rgba(9, 30, 66, 1)" class="grqWLk"></div> bottom: 0;
        background-color: rgba(0, 0,  <div class="fzULwq">
              <div class="eUOZOn"></div>0, 0.4); /* Overlay semi-transparente (preto com 40% de opacidade) - ajuste a cor e opacidade */
        z-index: 1; /* Coloca o overlay <h3>Roadmap</h3>
acima da imagem de fundo */
     }

    <p class="muted"> </p>
* Estilos para o container do logo e conteúdo para ficarem ACIMA do overlay <p>Acompanhe*/
 nosso roadmap e prepare-se para as próximas inovações que irão elevar sua experiência com o TOTVS CRM - Gestão de Clientes a um novo patamar. Estamos ansiosos para crescer e evoluir junto com você!</p>
       .compositiondani-banner-logo-container,
    .compositiondani-banner-content {
        position: relative; /* Mantém no fluxo normal, mas permite z-index */
        z-index: 2; /* Garante que fiquem sobre o overlay */
      </div>
  padding: 20px; /* Adiciona espaçamento interno ao container </a><*/div>
        <div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="1Tqt54zuPmOckSi6MKDPiy" draggable="false" href="https://trello.com/use-cases/onboarding" class="rogGT">
   /* text-align: center; garante que o inline-block wrapper seja centralizado */
         <div color="rgba(9, 30, 66, 1)" class="cELStS"></div>text-align: center;
    }

    /* Wrapper para dar fundo branco ao  <div class="fzULwq">logo */
      .compositiondani-logo-background {
        <div class="gRxMAA"></div>background-color: white;
        display: inline-block; /* Ajusta o tamanho <h3>Calendário</h3>
ao conteúdo (imagem) */
        padding: 10px;  <p>Fique de olho no Calendário de Atualizações/* e antecipe-se às novidades que farão a diferença no seu dia a dia. Estamos comprometidos em mantê-lo atualizado com as mais recentes inovações do TOTVS CRM - Gestão de Clientes.</p>
     Opcional: Espaço entre o logo e a borda branca */
        margin-bottom: 20px; /* Espaço abaixo do bloco do logo */
        line-height: 0;       </div>
* Corrige possível espaço extra abaixo da imagem em inline-block <*/a></div>
  
<!-- Separação bloco -->

   /* ---  </div>
    </div>
  </div>
  
  <style>
    *, ::after, ::before {
      box-sizing: border-box;
    }
  
    .inherited-styles-for-exported-element {
      color: #091e42;
      font-family: "Roboto", sans-serif;
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 1.5;
    }
  
    h3NOVO: Arredonda os cantos --- */
        border-radius: 8px;  /* Ajuste o valor (8px) conforme necessário */
        /* --------------------------------- */
        /* Opcional: Adiciona uma sombra sutil */
        /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    }

    /* Estilo para a IMAGEM do logo */
    .compositiondani-logo-image {
      font-family: "Roboto", sans-serif;
      font-size: 1.25rem;
      font-weight: 500;
  width: 200px; /* Largura do logo - AJUSTE CONFORME NECESSÁRIO */
        line-height: 1.2auto;
 /* Mantém a proporção da margin-bottom: .5rem;
imagem */
       margin-top display: 0block;
 /* Remove espaço }
extra abaixo 
da imagem dentro do @media (min-width: 768px) {wrapper */
      h3 {}


    /* Adicione mais estilos font-size:para 1.5rem;
   .compositiondani-banner-content se necessário */
     line-height: 1.33333;.compositiondani-banner-content h1,
    .compositiondani-banner-content p }{
     }
  
  margin: 0 .ctsbPE0 {
10px 0; /* Ajusta margens do margin-left: auto;texto */
      margin-right: auto;}

</style>

<header>
      padding-left: 1rem;<div class="compositiondani-banner">
      padding-right: 1rem;
 <div class="compositiondani-banner-overlay"></div>
    width: 100%;
    }<div class="compositiondani-banner-logo-container">
  
    @media (min-width: 576px) {
    <!-- Wrapper .ctsbPEpara {
o fundo       max-width: 540px;branco -->
      }
    }
  
 <div class="compositiondani-logo-background">
  @media (min-width: 768px) {
      .ctsbPE {
        max<!--width: 720px;
Logo dentro do    }wrapper -->
    }
  
    @media (min-width: 992px) {
     <img .ctsbPE {
   src="https://totvscrm.app/public/login/images/TOTVS-CRM.png" alt="TOTVS CRM Logo" class="compositiondani-logo-image">
     max-width: 960px;
      }
  </div>
      }
  </div>
    @media (min-width: 1200px) {
 <!-- Se houver outro  .ctsbPE {
        max-width: 1140px;conteúdo (título, texto), ele pode ir aqui ou dentro de um .compositiondani-banner-content -->
      }
    <!-- Exemplo:
  }
  
    .oFuOf {<div class="compositiondani-banner-content">
      -webkit-box-align: stretch;
      -webkit-box-pack: start;<h1>Título do Banner</h1>
      align-items: stretch;
     <p>Algum display: flex;texto descritivo.</p>
      flex-wrap: wrap;  </div>
      justify-content: space-around;  -->
    </div>
</header>

Confira a ficha técnica do produto por este link!

Livesearch
spaceKeyself
sizelarge
placeholderEstou procurando por ....
typepage

HTML
<div class="FullWidthCarouselstyles__DraggableContainer-sc-16jty68-1 fwSgiY inherited-styles-for-exported-element">
  <div class="grid__Container-sc-p40pqe-0 ctsbPE">
    <div style="margin-left: -16px; cursor: grab; transition: margin-left 0.6s ease 0s;" class="grid__Row-sc-p40pqe-1 oFuOf">  margin-left: -1rem;
      margin-right: -1rem;
    }
  
    .cJzWlo {
      display: block;
      flex: 1 1 auto;
      padding: 1rem;
      position: relative;
<div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="2xIZne1VBy81MhQlXA90bn" draggable="false" href="https://tdn.totvs.com/display/TCGDC/3+-+Release+-12.1.2503" class="rogGT">
       scroll-margin-top: 72px;
  <div color="rgba(9, 30,  text-align: center;66, 1)" class="cELStS"></div>
      width: 83.3333%;
   <div class="fzULwq">
  margin: 10px;
      max-width: 300px;
    }<h3 class="titlegch3">RELEASE</h3>
  
    @media (min-width: 992px) {
   <p   .cJzWlo {class="muted"> </p>
        display: block;
   <p class="pmodelTex">Explore as versões do flex:TOTVS 0CRM 0 auto;
        width: 33.3333%;- GC: documentos detalhados destacam as atualizações, melhorias e inovações introduzidas. </p>
      }
    }</div>
  
    .fwSgiY {
      overflow-x: hidden;
 </a></div>
<!-- Separação bloco -->
      }
  
    .rogGT {
       border-radius: .5rem;
<div class="grid__StyledColumn-sc-p40pqe-2 cJzWlo"><a data-testid="individual-template" data-uuid="3Vmbzdd1S76GhVxNtDs2Kz" draggable="false" href="https://tdn.totvs.com/display/TCGDC/Roadmap+do+Produto" class="rogGT">
        box-shadow:   <div color="rgba(9, 30, 66, .151) 0 .5rem 1rem 0;
" class="cELStS"></div>
          color: inherit;<div class="fzULwq">
      display: block;
      height: 100%;<h3 class="titlegch3">ROADMAP</h3>
      margin: 0;
      overflow: hidden;<p class="muted"> </p>
      text-align: left;
      text-decoration: none;
      text-wrap: wrap;
      user-select: none;
      white-space-collapse: collapse;
<p class="pmodelTex">Confira nosso roadmap e prepare-se para as inovações que vão elevar sua experiência com o TOTVS CRM. </p>
          </div>
 width: auto;
    }
  </a></div>
    .hNWOlT {
 <div class="cJzWlo"><a data-testid="individual-template" data-uuid="1Tqt54zuPmOckSi6MKDPiy"  background-color: #6B48FF;draggable="false" href="https://tdn.totvs.com/pages/viewpage.action?pageId=636959623" class="rogGT">
      height: 2rem;
    }
  
<div color="rgba(9, 30, 66, 1)" class="cELStS"></div>
     @media (min-width: 576px) {
  <div class="fzULwq">
   .hNWOlT {
        height: 3rem;<h3 class="titlegch3">CALENDÁRIO</h3>
      }
    }
  
    .grqWLk {
      background-color: #0ADBE3;
      height: 2rem;
    }
  <p class="pmodelTex">Consulte o Calendário de Atualizações para ficar a par das datas importantes e das atualizações.</p>
          </div>
    @media (min-width: 576px) {    </a></div>

<!-- Separação bloco -->

    </div>
  .grqWLk {
    </div>
</div>

<style>
  *, ::after, ::before {
    heightbox-sizing: 3remborder-box;
  }

  .wiki-content h3 }{
  margin: 0 !important;
}
  
    .cELStSinherited-styles-for-exported-element {
      background-color: #FEAC0E#091e42;
      height: 2rem;
    }
  
    @media (min-width: 576px) {font-family: "Roboto", sans-serif;
    font-size: 1.25rem;
      .cELStS {font-weight: 400;
        line-height: 3rem1.5;
      }

  .titlegch3  }{
  
  color:  .bxLzQJ {
      background-color: #ffc400#494440;
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: 900;
      line-height: 2rem1.2;
    }margin-bottom: .5rem;
  
    margin-top: 0;
}


.pmodelTex {
font-family: Lato, sans-serif;
font-size: 16px;
color: #494440
}
  @media (min-width: 576px768px) {
      .bxLzQJtitlegch3 {
        heightfont-size: 3rem1.5rem;
      }line-height: 1.33333;
    }
  }
  
  .lnQKVZctsbPE {
      backgroundmargin-colorleft: #00c7e5auto;
      heightmargin-right: 2remauto;
    }
  padding-left: 1rem;
    @media (min-width: 576px) {padding-right: 1rem;
    width: 100%;
 .lnQKVZ {}

  @media (min-width: 576px) {
    height: 3rem;.ctsbPE {
      }max-width: 540px;
    }
  }

  @media  .kgNiiW(min-width: 768px) {
      background-color: #f99cdb;.ctsbPE {
      heightmax-width: 2rem720px;
    }
  }

    @media (min-width: 576px992px) {
      .kgNiiWctsbPE {
        heightmax-width: 3rem960px;
    }
  }

  @media  }
  (min-width: 1200px) {
    .bgvUWO, .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
      background-color: #fffctsbPE {
      max-width: 1140px;
    }
  background-image: url(https://totvscrm.com/wp-content/uploads/2024/01/pre-release-access-1.png);}

  .oFuOf {
      background-position: center center-webkit-box-align: stretch;
      background-repeat: no-repeat-webkit-box-pack: start;
      backgroundalign-sizeitems: containstretch;
      borderdisplay: 8px solid #fffflex;
      borderflex-radiuswrap: .5remwrap;
      heightjustify-content: 3remspace-around;
    margin-left:  left-1rem;
    margin-right: -1rem;
  }

  .cJzWlo  position{
    display: absoluteblock;
    flex: 1 top: -1.5rem1 auto;
    padding: 1rem;
  width  position: 3remrelative;
    }
   scroll-margin-top: 72px;
    text-align: center;
    .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {width: 83.3333%;
    margin: 10px;
      backgroundmax-image: url(https://totvscrm.com/wp-content/uploads/2024/01/roadmap-3.png)width: 350px;
    }

  
@media (min-width: 992px) {
 .gAonen, .gRxMAA, .iRWtjz, .kIYtDicJzWlo {
      background-image: url(https://totvscrm.com/wp-content/uploads/2024/01/calend.png);
display: block;
      }
  flex: 0 0 auto;
    .gAonen, .iRWtjz, .kIYtDi {  width: 33.3333%;
    }
  background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/4Mgm4SG6P6bD673rMtNpXP/9f8798510480b30d296550be747b9624/icon-content-checklists_2x.png);}

  .fwSgiY {
    } overflow-x: hidden;
  }

    .gAonen, .kIYtDirogGT {
      backgroundborder-imageradius: url(https://images.ctfassets.net/rz1oowkt5gyp/x2AI5JZPTDVY7BxKbvClM/dc65b20bf0914caa72bcaf2ddbb05d9b/UseCasesBrainstorming.svg).5rem;
    }
  
    .gAonen {box-shadow: rgba(9, 30, 66, .15) 0 .1rem 1rem 0;
    color:  background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/5rv4eidOfMf1vdEzVpHNlA/bb102f380f9cfd3d1761858d8910963d/icon-object-book_2x.png)inherit !important;
    }
  display: block;
    .fzULwq {
height: 100%;
    margin: 0;
  padding: 2.25rem 1.5rem 1.5rem overflow: hidden;
      positiontext-align: relativeleft;
    }
  text-decoration: none !important;
    body text-wrap:focus {wrap;
    user-select: none;
  outline: 2px solid #091e42 white-space-collapse: collapse;
    }width: auto;
  
  border:  a:not([href]), a:not([href]):hover {
  1px solid #ccccc;
  }

  .hNWOlT {
    background-color: inherit#6B48FF;
    height: }2rem;
  }

  @media  .fzULwq p(min-width: 576px) {
      font-size: 13px;.hNWOlT {
      marginheight: 03rem;
    }
  }

    .fzULwq p+p.grqWLk {
      marginbackground-topcolor: .5rem#0ADBE3;
    height: }2rem;
  }

  @media  .cJzWlo>:last-child, .cJzWlo>:last-child>:last-child, .cJzWlo>:last-child>:last-child>:last-child(min-width: 576px) {
    .grqWLk {
      margin-bottomheight: 03rem;
    }
  }

    .fwSgiY .grid__Row-sc-p40pqe-1 cELStS {
      flexbackground-wrapcolor: nowrap#EEEEEE;
      padding-bottomheight: 1rem2rem;
  }

  @media  (min-width: calc(100% + 2rem);
576px) {
    .cELStS }{
  
    .rogGTheight:focus, .rogGT:hover {
 3rem;
    }
   box-shadow: rgba(9, 30, 66, .25) 0 .5rem 1rem 0}

  .bxLzQJ {
    background-color: #ffc400;
      colorheight: inherit2rem;
  }

  }
  @media (min-width: 576px) {
    .fzULwq p.mutedbxLzQJ {
      colorheight: #5e6c843rem;
    }
  }

  .lnQKVZ {
   body :focus:not(:focus-visible) { background-color: #00c7e5;
      outlineheight: 0 !important2rem;
    }

  </style>
  
Section Painel

Product_title
TitleO que há de novo
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/Novo-1.png

Page Tree
rootRelease
spacesTCGDC

Product_title
TitleRoadmap
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/roadmap-2.png

Page Tree
rootRoadmap do Produto
spacesTCGDC

Product_title
TitleDocumentos de referência
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/documentos-1.png

Page Tree
rootDocumentação
spacesTCGDC

Product_titleTitleÚltimas atualizaçõesImage
@media (min-width: 576px) {
    .lnQKVZ {
      height: 3rem;
    }
  }

  .kgNiiW {
    background-color: #f99cdb;
    height: 2rem;
  }

  @media (min-width: 576px) {
    .kgNiiW {
      height: 3rem;
    }
  }

  .bgvUWO, .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-color: #fff;
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/
01
02/
ultimas
agile3.png

Atualizado recentemente
typespage
max10
spacesTCGDC

Section
Painel

Product_title
TitleÍndice
Imagehttps://totvscrm.com/wp-content/uploads/2024/01/list.png

Page Tree
rootTOTVS CRM - Gestão de Clientes
spacesTCGDC

Painel Product_titleTitleYoutube Imagehttps://totvscrm.
);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 3px solid #fff;
    border-radius: .5rem;
    height: 3rem;
    left: 1rem;
    position: absolute;
    top: -1.5rem;
    width: 3rem;
  }

  .eUOZOn, .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/
01
02/
PLAY.png Section

How To - TOTVS CRM

Painel Product_titleTitleLinksImage
roadmap3.png);
  }

  .gAonen, .gRxMAA, .iRWtjz, .kIYtDi {
    background-image: url(https://totvscrm.com/wp-content/uploads/2024/
01
02/
link.png

Button
Cor#6B48FF
TextoVisualizar integrações
Linkhttp://tdn.totvs.com/display/INT

Button
Cor#6B48FF
TextoInformativos do Produto
Linkhttps://informa.totvs.com/crm/

data3.png);
  }

  .gAonen, .iRWtjz, .kIYtDi {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/4Mgm4SG6P6bD673rMtNpXP/9f8798510480b30d296550be747b9624/icon-content-checklists_2x.png);
  }

  .gAonen, .kIYtDi {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/x2AI5JZPTDVY7BxKbvClM/dc65b20bf0914caa72bcaf2ddbb05d9b/UseCasesBrainstorming.svg);
  }

  .gAonen {
    background-image: url(https://images.ctfassets.net/rz1oowkt5gyp/5rv4eidOfMf1vdEzVpHNlA/bb102f380f9cfd3d1761858d8910963d/icon-object-book_2x.png);
  }

  .fzULwq {
    padding: 2.25rem 1.5rem 1.5rem;
    position: relative;
  }

  body :focus {
    outline: 2px solid #091e42;
  }

  a:not([href]), a:not([href]):hover {
    color: inherit;
  }

  .fzULwq p {
    font-size: 15px;
    margin: 0;
  }

  .fzULwq p+p {
    margin-top: .5rem;
  }

  .cJzWlo>:last-child, .cJzWlo>:last-child>:last-child, .cJzWlo>:last-child>:last-child>:last-child {
    margin-bottom: 0;
  }

  .fwSgiY .grid__Row-sc-p40pqe-1 {
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    width: calc(100% + 2rem);
  }

  .rogGT:focus, .rogGT:hover {
    box-shadow: rgba(9, 30, 66, .25) 0 .5rem 1rem 0;
    color: inherit !important;
     text-decoration: none !important;
  }

  .fzULwq p.muted {
    color: #5e6c84;
  }

  body :focus:not(:focus-visible) {
    outline: 0 !important;
  }
</style>








HTML
<!-- Adicione este link para o Font Awesome -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 <style>
  /* Seu CSS existente vai aqui... */
  body {
  background: #eee;
  /* This is just a helper in case the element has a transparent background or white colors. */
}

/* When exporting elements with child elements that were edited, edited classes has !important on every CSS declaration.
This will be fixed on future updates (requires a lot of work due to the nature of CSS selectors complexity). Sorry for the inconvenience. You can remove it, but be careful and check if some other selector won't override it. */
*, ::after {
  border: 0 solid #e5e7eb;
}

h2, p {
  margin: 0 0 1rem;
}

h2 {
  margin-bottom: .5rem;
}

img { /* Mantido caso haja outras imagens, mas as dos cards foram removidas */
  border-style: none;
  display: initial;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

* {
  box-sizing: border-box;
}

article {
  display: block;
}

strong {
  font-weight: bolder;
}

.btn:hover, a {
  text-decoration: none;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-12, .col-6 {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  width: 100%;
}

.col-12, .col-6 {
  -webkit-box-flex: 0;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .col-md-3 {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 992px) {
  .col-lg-2 {
    -webkit-box-flex: 0;
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
}

.btn {
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  padding: .375rem .75rem;
  text-align: center;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
  transition-behavior: normal, normal, normal, normal, normal;
  user-select: none;
  vertical-align: middle;
}

@media (prefers-reduced-motion:reduce) {
  .btn {
    transition: none 0s;
    transition-behavior: normal;
  }
}

.btn-outline-primary {
  border-color: #0ADBE3;
  color: #494440;
  text-decoration: none;
}

.card {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  background-clip: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
  position: relative;
}

.card-body {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: .75rem;
}

.card-footer {
  padding: .75rem 1.25rem;
  text-align: center;
  width: 100%;
}

.btn {
  border-radius: 40px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .btn-outline-primary {
    font-size: 13px;
    padding: 5px;
  }
}

.display-h2 {
  font-size: 28px;
}

@media screen and (max-width: 768px) {
  .display-h2 {
    font-size: 26px;
  }
}

.display-text-support {
  font-size: 18px;
}

.display-h2 {
  line-height: 1.3;
}

.display-text-support {
  line-height: 1.5;
}

.card-transparent {
  border-radius: 15px;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
}

.card-transparent-home {
  background-color: transparent;
  border: 1px solid #494440;
  margin-bottom: 75px;
  min-height: 126px;
  padding-top: 15px;
}

img[data-src] {
  min-height: 1px;
  min-width: 1px;
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  opacity: .65;
}

.btn-outline-primary:hover {
  background-color: #0ADBE3;
  border-color: #0ADBE3;
  text-decoration: none;
}

.btn-outline-primary:focus {
  box-shadow: rgba(84, 192, 209, .5) 0 0 0 .2rem;
}

.btn-outline-primary:disabled {
  background-color: transparent;
  color: #0ADBE3;
  text-decoration: none;
}

.card-footer:last-child {
  border-radius: 0 0 calc(-1px + .25rem) calc(-1px + .25rem);
}

.btn-outline-primary.bg-light-gray {
  background-color: #f5f5f5;
}

@media screen and (max-width: 992px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.card .card-footer-over {
  z-index: 30;
}

.card-footer.card-footer-over {
  left: 0;
  position: absolute;
  right: 0;
  bottom: -15%; /* Ajuste conforme necessário para posicionar corretamente o rodapé dentro do card */
  transition: all .3s ease-in-out;
}

.card-transparent .card-icon {
  border-radius: 50%;
  /* line-height: 85px; */ /* Removido/Comentado - Flexbox é melhor para centralizar ícones */
  margin: 0 auto;
  text-align: center;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
  /* Adicionado para manter o espaço e centralizar o ícone */
  min-height: 85px;
  width: 85px; /* Definir largura também */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ajuste o tamanho e cor do ícone aqui */
  font-size: 2.5rem; /* Exemplo de tamanho */
  color: #494440;   /* Exemplo de cor (pode herdar se preferir) */
}


.card-transparent .card-body {
  text-align: center;
}

.card-transparent .card-footer {
  bottom: -15%;
  left: 0;
  position: absolute;
  right: 0;
  transition: all .3s ease-in-out;
  transition-behavior: normal;
}

@media (min-width: 992px) {
  .card-transparent:hover {
    transform: scale(1.2);
  }
}

.card-transparent-home:hover {
  background-color: transparent;
  box-shadow: unset;
}
.card-footer.card-footer-over a {
  color: #494440; /* Define a cor do texto */
  text-decoration: none; /* Remove o sublinhado */
}

.card-footer.card-footer-over a:hover {
  color: #FFFFFF; /* Cor do texto ao passar o mouse, ajuste conforme necessário */
  background-color: #0ADBE3; /* Cor de fundo ao passar o mouse, já definido em sua regra .btn-outline-primary:hover */
}
a:where(:not(.wp-element-button)) {
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

.btn-outline-primary:hover.bg-light-gray {
  background-color: #0ADBE3;
}

.card-transparent .card-body .card-title {
  font-size: 14px;
  font-weight: 900;
}

.card-transparent:hover .card-footer {
  background-color: transparent;
  border-style: none;
  opacity: 1;
  text-align: center;
}

.card-transparent-home:hover .card-icon {
  background-color: transparent;
  /* Opcional: mudar a cor do ícone no hover */
  /* color: #0ADBE3; */
}


.card-transparent-home:hover .card-footer {
  transform: translateY(0);
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

.btn-outline-primary:not(:disabled):not(.disabled):not(.btn-disabled):not([href="#off"]):active {
  background-color: #0ADBE3;
  border-color: #0ADBE3;
  color: #212529;
  text-decoration: none;
}

.btn-outline-primary:not(:disabled):not(.disabled):not(.btn-disabled):not([href="#off"]):active:focus {
  box-shadow: rgba(84, 192, 209, .5) 0 0 0 .2rem;
  text-decoration: none;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.text-center {
  text-align: center !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.text-secondary {
  color: #0ADBE3 !important;
}

.text-dark {
  color: #363636 !important;
}

.text-blue {
  color: #363636!important;
}

.btn-outline-primary:hover {
  color: #494440 !important;
  text-decoration: none;
}

.css-scan-edited-element-0 {
  background-color: #f5f5f5 !important;
  background-size: cover !important;
  border-radius: 0 !important;
  border-style: initial !important;
  border-width: 0 !important;
  box-sizing: border-box !important;
  color: #494440 !important;
  display: block !important;
  font-family: Lato, sans-serif !important;
  font-size: 14.4px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 80px 0 .5rem !important;
  position: relative !important;
  tab-size: 4 !important;
  text-align: left !important;
}

@media (max-width: 767.98px) {
  .css-scan-edited-element-0 {
    background-position: 100% center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 50px !important;
  }
}

.css-scan-edited-element-0::after, .css-scan-edited-element-0::before {
  border: 0 solid #e5e7eb !important;
  border-image: initial initial initial initial initial !important;
  box-sizing: border-box !important;
}

.css-scan-edited-element-0::before {
  background-image: url(https://totvscrm.com/wp-content/uploads/2024/02/plnfundoo.png) !important;
  background-position: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-size: auto 600px !important;
  bottom: 0 !important;
  content: "" !important;
  height: 100% !important;
  position: absolute !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 0 !important;
}

@media screen and (max-width: 1500px) {
  .css-scan-edited-element-0::before {
    display: none !important;
  }
}

html {
  font-size: 16px;
  /* This is IMPORTANT since some copied values use "REM" units */
}
</style>

<section class="css-scan-edited-element-0 inherited-styles-for-exported-element" style="background-color: #f5f5f5">

  <div class="container">
    <div class="row mb-5">
      <article class="col-12">
        <p class="display-h2 font-weight-bold text-uppercase text-center text-dark">
          Aprofunde Seu Conhecimento <br>explore a<strong class="text-secondary"> documentação</strong>
        </p>

        <div class="display-text-support text-center mt-4">
          <p class=".display-text-support ">Este recurso valioso é projetado para enriquecer sua compreensão do produto e otimizar sua experiência de uso.<br>
          </p>

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

    <div class="row">
      <!-- Adm. -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-clipboard-list"></i> <!-- Ícone de Administração/Configuração -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Adm.</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/1+-+Administrativo" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Agenda -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
             <i class="fas fa-calendar-alt"></i> <!-- Ícone de Agenda -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Agenda</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/2+-+Agenda" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Analytics -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-chart-pie"></i> <!-- Ícone de Gráfico/Analytics -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Analytics</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/3+-+Analytics" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Analytics Studio -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-drafting-compass"></i> <!-- Ícone de Criação/Estúdio -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue"> A. Studio</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/4+-+Analytics+Studio" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Atividades -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-tasks"></i> <!-- Ícone de Tarefas/Atividades -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Atividades</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/5+-+Atividade" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Catálogo -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-book-open"></i> <!-- Ícone de Livro/Catálogo -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Catálogo</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/pages/releaseview.action?pageId=728643168" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Contas -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
             <i class="fas fa-building"></i> <!-- Ícone de Empresa/Conta -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Contas</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/7+-+Contas" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Data Discovery -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-search"></i> <!-- Ícone de Busca/Descoberta -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">D. discovery</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/TCGDC/8+-+Data+Discovery" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Documentos -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
             <i class="fas fa-file-alt"></i> <!-- Ícone de Documento -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Docs</p>
          </div>
          <div class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/9+-+Documentos" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
            </a>
          </div>
        </div>
      </div>
      <!-- Marketplace -->
      <div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
          <div class="card-icon">
            <i class="fas fa-store"></i> <!-- Ícone de Loja/Marketplace -->
          </div>
          <div class="card-body">
            <p class="card-title text-uppercase text-blue">Marketp.</p>
          </div>
          <div class="card-footer card-footer-over">
HTML     <style> body {

            
margin: 0;
<a href="https://tdn.totvs.com/display/TCGDC/11+-+Marketplace" class="btn btn-outline-primary bg-light-gray">
              Saiba Mais
   
padding:
 
0;
        
}
</a>
         
.container
 
{
</div>
        </div>
     
width: 100%;
 </div>
      <!-- Oportunidades -->
    
padding:
 
20px;
 
/* Padding de 20px em todos os lados do container */
<div class="col-lg-2 col-md-3 col-6">
        <div class="card card-transparent card-transparent-home">
        
box-sizing:
 
border-box; /* Inclui o padding no cálculo da largura */
 <div class="card-icon">
             <i 
} .card {
class="fas fa-trophy"></i> <!-- Ícone de Troféu/Oportunidade (conforme sugerido) -->
             <!-- 
width
Alternativas: 
80%; /* Card ocupa 80% do espaço da tela */
fas fa-dollar-sign, fas fa-lightbulb -->
          </div>
       
max-width:
 
800px;
 
/*
 
Largura máxima do card */
<div class="card-body">
            
padding: 20px; /* Padding de 20px em todos os lados do card */
<p class="card-title text-uppercase text-blue">Oport.</p>
          </div>
          <div 
border: 1px solid #ddd;
class="card-footer card-footer-over">
            <a href="https://tdn.totvs.com/display/public/TCGDC/12+-+Oportunidades" 
border-radius: 5px;
class="btn btn-outline-primary bg-light-gray">
            
transition: box-shadow 0.3s;
  Saiba Mais
            
display: flex;
</a>
          </div>
       
flex-direction: column;
 </div>
      </div>
      
align-items: flex-start;
<!-- Pers. (Personalização/Personas?) -->
      <div class="col-lg-2 col-md-3 col-6">
   
text-align:
 
left;
    <div class="card card-transparent card-transparent-home">
    
position:
 
relative;
     <div class="card-icon">
      
background-color:
 
#f7f7f7;
      <i class="fas fa-id-badge"></i> <!-- Ícone de 
height: 190px;
Identificação/Persona -->
            
margin: 0 auto;
 <!-- Alternativas: fas fa-user-edit, fas fa-palette -->
       
   
</div>
        
/*
 
Centraliza
 
horizontalmente */
<div class="card-body">
        
}
    <p class="card-title 
.card:hover {
text-uppercase text-blue">Pers.</p>
          </div>
  
box-shadow:
 
0px
 
0px
 
10px
 
rgba(0,
 
0,
 
0,
 
0.3);
 <div class="card-footer card-footer-over">
     
}
       <a 
.stripe {
href="https://tdn.totvs.com/pages/viewpage.action?pageId=821575034" class="btn btn-outline-primary bg-light-gray">
          
height:
 
10px;
   Saiba Mais
        
width:
 
100%;
   </a>
         
background-color: #6B48FF;
 </div>
        </div>
     
position: absolute;
 </div>
      <!-- Plan. (Planejamento) -->
     
top: 0;
 <div class="col-lg-2 col-md-3 col-6">
        <div 
left: 0;
class="card card-transparent card-transparent-home">
          <div 
border-top-left-radius: 5px;
class="card-icon">
            <i class="fas 
border
fa-
top-right-radius: 5px; }
map-signs"></i> <!-- Ícone de Mapa/Planejamento -->
        
.icongc
 
{
    <!-- Alternativas: fas fa-calendar-check, fas 
width: 30px;
fa-sitemap -->
          </div>
  
height:
 
30px;
       <div class="card-body">
  
background-image:
 
url('https://totvscrm.com/wp-content/uploads/2024/01/Novo-1.png');
         <p class="card-title text-uppercase 
background-size: contain;
text-blue">Plan.</p>
          
background-repeat: no-repeat;
</div>
          <div 
margin-right: 10px;
class="card-footer card-footer-over">
        
}
    <a href="https://tdn.totvs.com/display/TCGDC/14+-+Planejamento" class="btn 
.icongc1 {
btn-outline-primary bg-light-gray">
           
width:
 
30px;
  Saiba Mais
         
height:
 
30px;
  </a>
          
background-image: url('https://totvscrm.com/wp-content/uploads/2024/01/roadmap-2.png');
</div>
        </div>
    
background-size: contain;
  </div>
      <!-- Vendas 
background
-
repeat: no-repeat;
->
      <div class="col-lg-2 col-md-3 col-6">
   
margin-right:
 
10px;
    <div class="card 
}
card-transparent card-transparent-home">
       
.icongc2
 
{
  <div class="card-icon">
         
width:
 
30px;
  <i class="fas fa-hand-holding-usd"></i> <!-- Ícone de Mão com 
height: 30px;
Dinheiro/Vendas -->
            
background
<!--
image: url('https://totvscrm.com/wp-content/uploads/2024/01/notice-1.png');
 Alternativas: fas fa-tags, fas fa-cash-register -->
       
background-size: contain;
   </div>
          
background-repeat: no-repeat;
<div class="card-body">
            
margin-right: 10px;
<p class="card-title text-uppercase text-blue">Vendas</p>
        
}
  </div>
      
h3
 
{
   <div class="card-footer card-footer-over">
       
margin:
 
0;
    <a href="https://tdn.totvs.com/display/TCGDC/15+-+Vendas" class="btn btn-outline-primary bg-light-gray">
    
display:
 
flex;
         
align-items: center;
Saiba Mais
        
}
    </a>
    
.separator
 
{
     </div>
       
width: 100%;
 </div>
      </div>
      
height: 1px;
<!-- Workflow -->
      <div class="col-lg-2 
background-color: #ddd;
col-md-3 col-6">
        <div class="card card-transparent 
margin: 10px 0;
card-transparent-home">
          
}
<div class="card-icon">
        
ul
 
{
    <i class="fas fa-project-diagram"></i> <!-- Ícone de 
Diagrama/Workflow 
list
-
style
-
type: none;
>
            
padding: 0;
 <!-- Alternativas: fas fa-cogs, fas fa-sync-alt -->
      
margin:
 
0;
   </div>
     
}
     <div class="card-body">
  
li
 
{
         <p class="card-title 
margin: 5px 0;
text-uppercase text-blue">Workflow</p>
          
}
</div>
          
li a {
<div class="card-footer card-footer-over">
            
text-decoration: none;
<a href="https://tdn.totvs.com/display/TCGDC/17+-+Workflow" class="btn btn-outline-primary bg-light-gray">
              
color:
Saiba 
#333;
Mais
        
}
    </a>
    
li
 
a:hover
 
{
    </div>
        
text-decoration: underline;
</div>
      </div>

  
}
  </div>
  </
style>
div>

</section>
HTML
<style>
#title-text {
	display: none !important; 
}


li.first > span > a {
    display: none;
}


ul {
    list-style: none !important;   

    #content > div.page-metadata {
    display: none;
}   .sectionMacro .columnMacro+.columnMacro {
    padding-left: 0px!important;
}

#breadcrumbs > li {
    display: none;
}
       .cell.normal h1 {
    color: #42526e !important;

}

.cell.aside h1 {
    color: #42526e!important;
       font-size: 24px !important;
font-weight: bold !important;

}

     .composition-banner-title{
color: #0c9abe!important;
}

.composition-banner-desc{
color: #0c9abe!important;
}




</style>

HTML
<style>
.page-description {
    display: none;!important;
}

.line-bottom {
    top: 260px !important;
}
    div.theme-default .ia-splitter #main {
    margin-left: 0px;
}
.ia-fixed-sidebar, .ia-splitter-left {
    display: none;
}
#main {
    padding-left: 0px;
    padding-right: 0px;
    overflow-x: hidden;
}

.aui-header-primary .aui-nav,  .aui-page-panel {
    margin-left: 0px !important;
}
.aui-header-primary .aui-nav {
    margin-left: 0px !important;
}
</style>
HTML
<style> .compositiondani-banner {
    position: relative;
    min-height: 220px240px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}

.compositiondani-banner-image {

background-image: url("https://totvscrm.com/wp-content/uploads/20232024/0804/capaCAPA-comTDN-fundoGC-e-sem-icone-TDN21.png")3-azul.jpg");
    min-height: inherit;
    width: 100%;
    background-sizeposition: covercenter;
    minbackground-heightrepeat: inheritno-repeat;
    widthbackground-size: 100%cover;
    min-height: 35vh; }

.compositiondani-banner-overlay,
.compositiondani-banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.compositiondani-banner-overlay {
    border-radius: 5px;
    pointer-events: none;
}

.compositiondani-banner-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.compositiondani-banner-logo {
    width: 450px;
    height: 180px;
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/09/logo-com-descricao-totvsgc.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.compositiondani-banner-title {
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    line-height: 1.3;
    color: #ffffff;
    position: relative;
    margin-top: 130px;
    padding: 0px;
    border-radius: 10px;
    font-family: "Roboto", sans-serif;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-header h1 {
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
    margin: 0;
}

.negrito-materialize {
    font-weight: bold;
}

.custom-margin-justified {
    margin: 0 20px;
    text-align: justify;
} 


.wiki-content .contentLayout2 .columnLayout .cell {
    padding-right: 0px;!important;
padding-left: 0px;!important;}

#main #content {
    padding-right: 30px;!important;
padding-left: 30px;!important;}


 }  



    </style>