/* styles.css */
/* Reset some default margin and padding */
:root {
    --body-bg:#f5f5f5;
    --body-color:#a5a5ab;
    --card-color: #555555;
    --card-bg:#bcf0e5;
    --card-border: transparent;
}
.off:root {
    --body-bg:#1c1a27;
    --body-color:#807790;
    --card-color: #779089;
    --card-bg:#1a1226;
    --card-border: 1px solid rgb(0, 255, 174);
}

.background {
      background-color: #f5f5f5; 
      color: #a5a5ab;
      position: relative;
      width: 100%;
  }

body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* fonte desejada */
}
.italic {
    font-style: italic;
}

.cgv-btn::selection {
    color: #333; /* Cor do texto quando selecionado */
    background-color: #416b9a !important;  /* Cor de fundo quando selecionado */ }

.pinkcopy::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
.pinkcopy p::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
.pinkcopy a::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
.pinkcopy h1::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
.pinkcopy em::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
         
.pinkcopy h3::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
.pinkcopy h4::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
    .pinkcopy h6::selection {
        color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
        .pinkcopy span::selection {
            color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
            .pinkcopy div::selection {
                color: #000000; /* Cor do texto quando selecionado */ background-color: #ffa8db;  /* Cor de fundo quando selecionado */ }
    
.greencopy::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }   
::selection {
    color: #333; /* Cor do texto quando selecionado */
    background-color: #3fffa9;  /* Cor de fundo quando selecionado */ }

.greencopy label::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
.greencopy p::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
.greencopy output::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
.greencopy span::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
.greencopy button::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
.greencopy input::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
.greencopy img::selection {
    color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
    .greencopy a::selection {
        color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
        .greencopy h3::selection {
            color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
            .greencopy h2::selection {
                color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
                        
    
    .btn-light ::selection {
        color: #000000; /* Cor do texto quando selecionado */ background-color: #9b87ff;  /* Cor de fundo quando selecionado */ }
.greencopy {
    fill: black;
    }    
          
/* Estilizando a cor do texto quando selecionado */
.click-here {
    color: #333; /* Cor do texto quando selecionado */
    background: linear-gradient(to rigth, rgb(32, 59, 53), #3a2150 30%, #3f232e); /*  Cor de fundo  */
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kishan 3s linear infinite; 
}
@keyframes kishan {
    0%{background-position:0% 75%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 70%;}
}


/* Navbar styles */

/* Estilos para o conteúdo de texto */
.content {
    max-width: 1300px;
    margin: 0 auto; /* Centralizar o conteúdo horizontalmente */
    padding: 20px;
    text-align: left;
    line-height: 1.5;
    font-size: 18px; /* tamanho de fonte desejado */
    font-family: Arial, sans-serif; /* fonte desejada */
}

/* Estilos para os parágrafos específicos */
.content p {
    color: #47445a; /* Cor do texto em cinza médio */
    font-family: Arial, sans-serif; /* Fonte */
}

/* Estilos para os cartões */
.custom-card {
    background-color: #fcd7ff;  /* Fundo dos cards rosa claro */
    padding: 10px;
    margin-bottom: 20px; /* Espaçamento inferior entre os cartões */
    border-radius: 5px; /* Cantos arredondados */
    font-family: Arial, sans-serif; /* Fonte dos cartões */
    text-align: center; /* Alinha o texto ao centro */
}
/* Estilos para o título "Diseases covered" */
.card-title {
    font-family: 'Open Sans', sans-serif; /*fonte desejada */
    font-weight:600;
    font-size: 20px; /* tamanho de fonte desejado */
    color: #555; /* Cor desejada */
}
/* Estilos para os cartões das doenças */
.card-disease {
    color: var(--card-color);
    background-color: var(--card-bg); /* Fundo dos cards das doenças verde claro */
    padding: 20px;
    margin-bottom: 20px; /* Espaçamento inferior entre os cartões */
    border: var(--card-border);
    border-radius: 5px; /* Cantos arredondados */
    font-family: Arial, sans-serif; /* Fonte dos cartões */
    text-align: center; /* Alinha o texto ao centro */
    display: inline-block; /* Exibir os cartões em linha */
    width: calc(30% - 30px); /* Definir a largura de cada cartão (3o% do espaço disponível menos 30 pxs dos espaços entre cards) */
    margin-right: 20px; /* Espaçamento entre os cartões */
    vertical-align: top; /* Alinhar os cartões no topo */
    margin-top: 5px;
}
/*  */
.card-disease:hover {
    transition: margin-top  0.1s, box-shadow 0.3s, background-color 0.4s;
    background-color: #85ffe5;   
    padding: 20px;
    margin-bottom: 20px; 
    border-radius: 5px; 
    font-family: Arial, sans-serif; 
    text-align: center; 
    display: inline-block;
    width: calc(30% - 30px); 
    margin-right: 20px;
    vertical-align: top; 
    margin-top: -10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.245); 
} 
/* Estilos para as logos das doenças */
.card-logo {
    width: 70px; /* largura desejada */
    height: auto; /* Isso mantém a proporção original da imagem */
    margin-bottom: 7px; /* margem */
}
/* Estilos para os parágrafos de conteúdo nas páginas Datasets e Graphs */
.text-content {
    background-color:#fcd7ff; 
    padding: 20px;
    margin-top: 20px; /* Espaçamento superior */
    margin-bottom: 20px; /* Espaçamento inferior */
    border-radius: 5px; 
    font-family: Arial, sans-serif; 
    text-align: center; 
    max-width: 100%;
    width: 71%;
    margin-left: auto; /* Manter alinhamento horizontal centralizado */
    margin-right: auto; /* Manter alinhamento horizontal centralizado */
    font-size: 18px; 
    color: #47445a; 
    line-height: 1.5;
}


/* Estilos CSS para ocultar o conteúdo adicional */
.hidden-content {
    display:none;
}

.read-more-button {
    position: relative; /* Necessário para posicionar o elemento filho absoluto */
    background-color: transparent; /* Cor de fundo transparente */
    color: #555; /* Cor do texto */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    overflow: hidden; /* Oculta qualquer conteúdo que transbordar */
}

.read-more-button::after {
    content: "";
    position: absolute;
    left: 50%; /* Inicia do centro */
    bottom: 0; /* Posiciona a linha na parte inferior */
    width: 0; /* Inicialmente, a largura é zero */
    height: 4px; /* Altura da linha */
    background-color: #7b4aff; /* Cor da linha */
    transform: translateX(-50%); /* Move o centro da linha para a esquerda em 50% */
    transition: width 0.5s ease; /* Transição para o efeito de crescimento */
}

.read-more-button:hover::after {
    width: 100%; /* Aumenta a largura para 100% ao passar o mouse */
}

.card-sub-title {
    font-family: 'Open Sans', sans-serif; /*fonte desejada */
    font-weight:600;
    font-size: 18px; /* tamanho de fonte desejado */
    color: #555; /* Cor desejada */
    margin-bottom: 15px; /* Espaçamento inferior */
    margin-top: 20px;
}
/* Estilos para o cartão dos dados */ 
.data-card {
    background-color: #fcd7ff;
    padding: 20px;
    margin-bottom: 20px; 
    border: 5px #fcd7ff  solid;
    border-radius: 5px; 
    font-family: Arial, sans-serif;
    text-align: justify;
    margin-top: 5px;
}


/* Estilos para os botões com fundo transparente e texto em cinza médio */
.transparent-button {
    background-color: transparent; /* Fundo transparente */
    font-weight:600;
    font-size: 14px;
    color: #446a79; /* Cor do texto em cinza médio */
    border: none; /* Remova a borda se necessário */
    cursor: pointer;
    margin-top: 10px;
}

/* Estilizar o botão transparente quando o mouse passa por cima */
.transparent-button:hover {
    background-color: transparent; /* Mantenha o fundo transparente */
    font-weight:600;
    color: #333 /* Cor do texto em cinza escuro ao passar o mouse */
}

/* Estilos para o footer */
.footer {
    background-color: #352a41; /* cinza médio */
    padding: 20px 0;
    text-align: center;
}
/* Textos dos parágrafos footer */
.footer p {
    font-family: Arial, sans-serif;
    text-align: justify;
    color: #fff;
    max-width: 300px; 
    margin: 0 auto;
    margin-top: 5px;
    font-size: 14px;
}

/* Resetando o alinhamento para os títulos */
.footer-title {
    text-align: center;
}

.footer img {
    width: 60px; /* tamanho das imagens */
    margin: 5px;
}

.footer-title {
    color: #a49efa;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.footer-section {
    display: inline-block;
    vertical-align: top;
    margin: 0 20px; /* espaço entre as seções */
}

/* Definindo a largura máxima para as tabelas e seus elementos */
.table-container {
    max-width: 80%; /* Ajuste este valor conforme necessário */
    margin: 0 auto; /* Centraliza o contêiner */
}

/* Estilização para o card */
.card {
    background-color: #e5ddf3; /* Lilás clarinho */
    color:#252236;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.291); /* Sombra suave */
}
.card .paginate_button {
    border: 1px solid #7a6f8d;
    background-color:  #e5ddf3; /* Lilás clarinho */
    color:#8278a9 !important;
}


/* Estilização da tabela */
table.dataTable thead th,
table.dataTable tfoot th {
    border-bottom: 1px solid #b05cff; /* Cor da borda inferior do cabeçalho */
    border-top: 1px solid #b05cff; /* Cor da borda superior do rodapé */
}

/* Estilo para as linhas verticais internas da tabela usando box-shadow */
table.dataTable tbody td,
table.dataTable thead th {
    position: relative; /* Necessário para o uso do box-shadow */
}
table.dataTable tbody td::before,
table.dataTable thead th::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px; /* Largura da pseudo-borda */
    background-color: #b05cff; /* Cor da pseudo-borda */
    box-shadow: -1px 0 0 #f5f5f5; 
}
.off table.dataTable tbody th::before { transition: all 0.5s; background-color: #b05cff;  box-shadow: -1px 0 0 #b05cff;  }


table.dataTable tbody td::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 1px; /* Largura da pseudo-borda */
        background-color: #f5f5f5; /* Cor da pseudo-borda */
        box-shadow: 1px 0 0 #f5f5f5;
}
.off table.dataTable tbody td::after { transition: all 0.5s; background-color: #17101d; box-shadow: 1px 0 0 #17101d; }

table.dataTable thead th::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px; /* Largura da pseudo-borda */
    background-color: #d4c1ee; /* Cor da pseudo-borda */
    box-shadow: 1px 0 0 #d4c1ee;
}
.off table.dataTable tbody th::after { transition: all 0.5s; background-color: #b05cff; box-shadow: 1px 0 0 #b05cff; }

table.dataTable tbody td:first-child::before,
table.dataTable thead th:first-child::before {
    display: none; /* Remove a borda esquerda da primeira célula de cada linha */
}

table.dataTable tbody td:last-child::after,
table.dataTable thead th:last-child::after {
    display: none; /* Remove a borda direita da última célula de cada linha */
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #c1c1c1;
}

th, td {
    padding: 8px 12px;
    text-align: left;
}

th {
    background-color: #d4c1ee;
    color: #716e74;
}

/* Estilização do botão, similar ao da Homepage 
button {
    background-color: #774caf;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #75af4c;
} */

.card-title-data {
    font-family: 'Open Sans', sans-serif; /*fonte desejada */
    font-weight: bold;
    font-size: 20px; /* tamanho de fonte desejado */
    color: #555; /* Cor desejada */
    margin-bottom: -5px; /* Espaçamento inferior */
    text-align: center;
}

/* PÁGINA GRAPHS */
.graph-title {
    max-width: 100%;
    font-family: 'Open Sans', sans-serif; /*fonte desejada */
    font-weight: bold;
    font-size: 20px; /* tamanho de fonte desejado */
    color: #555; /* Cor desejada */
    margin-bottom: 10px; /* Espaçamento inferior */
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Aumenta a altura da barra para os navegadores que usam Webkit, como Chrome e Safari */
input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #e0e0e0;
    border: 1px solid #888;
    border-radius: 3px;
}

/* Estiliza o botão (thumb) para navegadores Webkit */
input[type="range"]::-webkit-slider-thumb {
    border: 1px solid #888;
    height: 20px;
    width: 11px;
    background-color: #f0c0c7; /* Preenchimento rosa claro */
    cursor: pointer;
    -webkit-appearance: none; /* Remove a aparência padrão em Webkit */
    margin-top: -7px;
    border-radius: 4px; /* Pequeno arredondamento */
}

/* Aumenta a altura da barra para Firefox */
input[type="range"]::-moz-range-track {
    height: 6px;
    background: #e0e0e0;
    border: 1px solid #888;
    border-radius: 3px;
}

/* Estiliza o botão (thumb) para Firefox */
input[type="range"]::-moz-range-thumb {
    border: 1px solid #888;
    height: 20px;
    width: 11px;
    background-color: #f0c0c7; /* Preenchimento rosa claro */
    cursor: grab;
    border-radius: 4px; /* Pequeno arredondamento */
}

/* Estilizações gerais e para navegadores que não suportam os pseudo-elementos acima */
input[type="range"] {
    height: 6px;
    border-radius: 4px;
    background: #e0e0e0;
    outline: none;
    -webkit-appearance: none; /* Remove para o Webkit */
    appearance: none; /* Remove para outros navegadores */
}
/* Efeito ao passar o mouse sobre o botão para navegadores Webkit */
input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #ebaebb; /* Uma cor rosa um pouco mais escura */
}

/* Efeito ao passar o mouse sobre o botão para Firefox */
input[type="range"]::-moz-range-thumb:hover {
    background-color: #ebaebb; /* Uma cor rosa um pouco mais escura */
}

/* Efeito ao clicar no botão para navegadores Webkit */
input[type="range"]::-webkit-slider-thumb:active {
    height: 16px; /* Reduzindo a altura do botão ao pressionar */
    margin-top: -6px; /* Ajustando a posição vertical ao pressionar */
    background-color: #ebaebb; /* Uma cor rosa ainda mais escura */
    cursor: grabbing;
}

/* Efeito ao clicar no botão para Firefox */
input[type="range"]::-moz-range-thumb:active {
    height: 16px; /* Reduzindo a altura do botão ao pressionar */
    background-color: #ebaebb; /* Uma cor rosa ainda mais escura */
    cursor: grabbing;
}

/* Efeito de transição de cor na barra para navegadores Webkit */
input[type="range"]::-webkit-slider-runnable-track {
    transition: background-color 0.3s ease; /* Adiciona suavidade na transição de cores */
}

input[type="range"]:hover::-webkit-slider-runnable-track {
    background-color: #fff; /* Cor branca ao passar o mouse */
}

/* Efeito de transição de cor na barra para Firefox */
input[type="range"]::-moz-range-track {
    transition: background-color 0.5s ease; /* Adiciona suavidade na transição de cores */
}

input[type="range"]:hover::-moz-range-track {
    background-color: #fff; /* Cor branca ao passar o mouse */
}
#purple {
    accent-color:#a361ff;
}

input {
    caret-color: rgb(255, 87, 233);
}
.read-more-button-search-g {
    padding: 5px 8px; /* top-bottom left-right */
    position: relative; /* Necessário para posicionar o elemento filho absoluto */
    background-color: #c2e4da; /* Cor de fundo */
    color: #555; /* Cor do texto */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    overflow: hidden; /* Oculta qualquer conteúdo que transbordar */
}

.read-more-button-search-g::after {
    content: "";
    position: absolute;
    left: 50%; /* Inicia do centro */
    bottom: 0; /* Posiciona a linha na parte inferior */
    width: 0; /* Inicialmente, a largura é zero */
    height: 3px; /* Altura da linha */
    background-color: #7b4aff; /* Cor da linha */
    transform: translateX(-50%); /* Move o centro da linha para a esquerda em 50% */
    transition: width 0.5s ease; /* Transição para o efeito de crescimento */
}

.read-more-button-search-g:hover::after {
    width: 80%; /* Aumenta a largura para 80% ao passar o mouse */
}
.transparent-button-search-g {
    padding: 5px 8px; /* top-bottom left-right */
    background-color: #bcdfd4; /* Fundo */
    font-weight:600;
    font-size: 13px;
    color: #577d8b; /* Cor do texto em cinza médio */
    border: none; 
    cursor: pointer;
    margin-top: 2px;
}

/* Estilizar o botão transparente quando o mouse passa por cima */
.transparent-button-search-g:hover {
    padding: 5px 8px; /* top-bottom left-right */
    background-color: transparent; /* Mantenha o fundo transparente */
    font-weight:600;
    color: #333 /* Cor do texto em cinza escuro ao passar o mouse */
}

.read-more-button-search-g, .transparent-button-search-g {
    bottom: -1px; /* Move o botão 1px para baixo */
    margin-left: 1px; /* Move o botão 10px para a direita */
}

.read-more-button-search-s {
    padding: 5px 8px; /* top-bottom left-right */
    position: relative; /* Necessário para posicionar o elemento filho absoluto */
    background-color: #c2e4da; /* Cor de fundo */
    color: #555; /* Cor do texto */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    overflow: hidden; /* Oculta qualquer conteúdo que transbordar */
}

.read-more-button-search-s::after {
    content: "";
    position: absolute;
    left: 50%; /* Inicia do centro */
    bottom: 0; /* Posiciona a linha na parte inferior */
    width: 0; /* Inicialmente, a largura é zero */
    height: 3px; /* Altura da linha */
    background-color: #7b4aff; /* Cor da linha */
    transform: translateX(-50%); /* Move o centro da linha para a esquerda em 50% */
    transition: width 0.5s ease; /* Transição para o efeito de crescimento */
}

.read-more-button-search-s:hover::after {
    width: 80%; /* Aumenta a largura para 80% ao passar o mouse */
}
.transparent-button-search-s {
    padding: 5px 8px; /* top-bottom left-right */
    background-color: #bcdfd4; /* Fundo */
    font-weight:600;
    font-size: 13px;
    color: #577d8b; /* Cor do texto em cinza médio */
    border: none; 
    cursor: pointer;
    margin-top: 2px;
}

/* Estilizar o botão transparente quando o mouse passa por cima */
.transparent-button-search-s:hover {
    padding: 5px 8px; /* top-bottom left-right */
    background-color: transparent; /* Mantenha o fundo transparente */
    font-weight:600;
    color: #333 /* Cor do texto em cinza escuro ao passar o mouse */
}

.read-more-button-search-s, .transparent-button-search-s {
    bottom: -1px;  /* Move o botão 1px para cima */
    margin-left: 40px; /* Move o botão 40px para a direita */
}

.read-more-button-remove {
    padding: 5px 8px; /* top-bottom left-right */
    position: relative; /* Necessário para posicionar o elemento filho absoluto */
    background-color: #c2e4da; /* Cor de fundo */
    color: #555; /* Cor do texto */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    overflow: hidden; /* Oculta qualquer conteúdo que transbordar */
}

.read-more-button-remove::after {
    content: "";
    position: absolute;
    left: 50%; /* Inicia do centro */
    bottom: 0; /* Posiciona a linha na parte inferior */
    width: 0; /* Inicialmente, a largura é zero */
    height: 3px; /* Altura da linha */
    background-color: #7b4aff; /* Cor da linha */
    transform: translateX(-50%); /* Move o centro da linha para a esquerda em 50% */
    transition: width 0.5s ease; /* Transição para o efeito de crescimento */
}

.read-more-button-remove:hover::after {
    width: 80%; /* Aumenta a largura para 80% ao passar o mouse */
}
.transparent-button-remove {
    padding: 5px 8px; /* top-bottom left-right */
    background-color: #bcdfd4; /* Fundo */
    font-weight:600;
    font-size: 13px;
    color: #577d8b; /* Cor do texto em cinza médio */
    border: none; 
    cursor: pointer;
    margin-top: 2px;
}

/* Estilizar o botão transparente quando o mouse passa por cima */
.transparent-button-remove:hover {
    padding: 5px 8px; /* top-bottom left-right */
    background-color: transparent; /* Mantenha o fundo transparente */
    font-weight:600;
    color: #333 /* Cor do texto em cinza escuro ao passar o mouse */
}

.read-more-button-search-s, .transparent-button-remove {
    bottom: -1px;  /* Move o botão 1px para cima */
    margin-left: 20px; /* Move o botão 20px para a direita */
}
/* Estilo para telas menores (como telas de celular) 
@media screen and (max-width: 1080px) {
    body { font-size: 22px; }
    .graph-title { font-size: 30px; }
}*/
/* ESTILOS EXCLUSIVOS DA PÁGINA HOME */
        /* Estilos CSS para o botão "Ler mais" */
        .read-more-button {
            background-color: #555; /* Cor do botão */
            color: #fff; /* Cor do texto do botão */
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
        /* Estilizar o botão quando o mouse passa por cima */
        .read-more-button:hover {
            background-color: #333; /* Cor do botão ao passar o mouse */
        }
        .transparent-button {
    background-color: transparent;
    color: #446a79; /* Cor do texto em cinza médio */
    font-weight:600;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}
.transparent-button:hover {
    background-color: transparent;
    color: #333; /* Cor do texto em cinza médio (ou outra cor desejada ao passar o mouse) */
}
#Data-source-button {
    color:#735555;
}
#Data-source-button:hover {
    color:#000000; 
}
/* ESTILOS EXCLUSIVOS DA PÁGINA GRAPHS */
.container {
    align-items: center;  /* Centraliza verticalmente os filhos */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    color: #47445a; 
    font-size: 11pt;
    flex-direction: row; /* itens são dispostos em uma linha */
    flex-wrap: nowrap; /* não permita que os itens quebrem para a próxima linha */
    width: 100%; /* IMPORTANTE PARA MOBILE */
  /*   overflow-x: auto;  */
}

.links line {
    font-family: Futura;
    stroke: #aaa;
}
.nodes circle {
    font-family: Futura;
    font-size: 7pt;
    pointer-events: all;
}
/*      main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 73vh; 
    flex-direction: row;   itens são dispostos em uma linha 
    gap: 20px;  adiciona um espaço entre os contêineres 
} */
.starter-template {
    max-width: 60%; /* usa no máximo 60% da largura da tela */
    margin-top: 0px;  /* Espaçamento entre os containers */
    padding: 10px;
    background-color: #a1d3ba; 
    border: solid #a1d3ba; 
    width: 60%; height:715px;  /* Alterado entre '800px' / '60%'  IMPORTANTE PARA MOBILE */
}
#network {
    max-width: 100%; /* usa no máximo 60% da largura da tela */
    border: solid #a1d3ba;
    border-radius: 2px;
    height:720px;
    width: 810px !important;
    position: relative; /* define a posição do contêiner como relativa */
    top: 0px; /* move o contêiner 1 pixels para cima */
    background-color: #f5f5f5;  /*  background-color: #f5f5f5; */
    display: flex; justify-content: left; align-items: left; margin-left: 0;
} 
.flex-container {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center; /* Alterado entre 'center' / 'flex-start'  IMPORTANTE PARA MOBILE */
    max-width: 100%;  /* Alterado entre 'max-width' / 'width'  IMPORTANTE PARA MOBILE */
    gap: 20px; /* Espaço entre os contêineres */
    height: 700px;
    margin: 0 auto;  /* não tinha  IMPORTANTE PARA MOBILE */
}
.text-content {
    margin-bottom: 0; /* Ajuste este valor conforme necessário */
}
#saveButton {
    font-family: "Arial", sans-serif; /* Mude para a fonte desejada */
    color: #585858; /* Cor do texto do botão */
    background-color: #dbece5; /* Cor de fundo do botão */
}
/*
#saveButton:hover {
    background-color: #9655ff;  
    color: #ffffff;
} */

/* Estilo base para os botões */
.btn-light {
    background-color: #dbece500; /* Cor de fundo do botão */
    color: #556c6c; /* Cor do texto do botão */
    transition: background-color 0.6s, color 0.6s; /* Transição suave para cor de fundo e cor de texto */ 
}
/* Estilo para o estado "hover" dos botões */
.btn-light:hover {
    background-color: #9655ff; /* Cor de fundo do botão ao passar o mouse */
    color: #ffffff; /* Cor do texto ao passar o mouse */
}
#nodeSearchContainer {
    width: auto; /* Definir a largura automática */
    box-sizing: content-box;
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin-left: -29px; /* Move a barra 29px para a direita */
}
.read-more-button-search-g, .transparent-button-search-g, .read-more-button-search-s, .transparent-button-search-s {
    width: 100px; /* Largura */
    margin-left: 5px; /* Diminui o espaço horizontal para 5 pixels. Você pode ajustar conforme a necessidade */
}
#searchLabel {
    margin-left: -17px; /* Ajustar mais pra direita*/
}
.slider-x, .slider-y {
    flex-shrink: 0;  /* Evita que o slider reduza seu tamanho */
    flex-grow: 0;    /* Evita que o slider cresça */
}
/* FIM DOS ESTILOS EXCLUSIVOS DA PÁGINA GRAPHS */

.summary-bottom {
    padding: 10px 20px; /* Espaçamento interno */
    max-width: 13.5%;
    font-family: Arial, sans-serif; /* Fonte */
    font-size: 99%;
    font-weight: bold;
    background-color: #f5f5f5; /* Cor de fundo */
    border: 2px solid #4e3961;
    border-radius: 0.5rem; /* Cantos arredondados */
    cursor: pointer;
    position: relative;
    color: #40304f; /* Texto cor*/
    box-shadow: 5px 5px 0px #4e3961;
    margin-bottom: 1.5%;
    transition: all 0.4s; /* Adição para transição  */
}
.summary-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #4e3961; /* Cor de fundo */
    border-radius: inherit;
    margin-top: 5px;
    margin-left: 5px;
    transition: 0.25s;
    z-index: -1;
}
.summary-bottom:hover::after {
    translate: 0;
    margin-top: 5px;
    margin-left: 5px;
    box-shadow: 0px 0px 0px #4e3961;
}
.summary-bottom:hover {
    background-color: #4e3961; 
    color: #f5f5f5;
    margin-top: 5px;
    margin-left: 5px;
    box-shadow: 0px 0px 0px #483559;
}

.back-bottom {
    padding: 10px 20px; /* Espaçamento interno */
    max-width: 13.5%;
    font-family: Arial, sans-serif; /* Fonte */
    font-size: 99%;
    font-weight: bold;
    background-color: #f5f5f5; /* Cor de fundo */
    border: 2px solid #4e3961;
    border-radius: 0.5rem; /* Cantos arredondados */
    cursor: pointer;
    position: relative;
    color: #40304f; /* Texto cor*/
    box-shadow: 5px 5px 0px #4e3961;
    margin-bottom: 1.5%;
    transition: all 0.4s; /* Adição para transição  */
    text-decoration: none;
}
.back-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #4e3961; /* Cor de fundo */
    border-radius: inherit;
    margin-top: 5px;
    margin-left: 5px;
    transition: 0.25s;
    z-index: -1;
    text-decoration: none;
}
.back-bottom:hover::after {
    translate: 0;
    margin-top: 5px;
    margin-left: 5px;
    box-shadow: 0px 0px 0px #4e3961;
    text-decoration: none;
}
.back-bottom:hover {
    margin-left: 16.7%;
    background-color: #4e3961; 
    color: #f5f5f5;
    margin-top: 5px;
    margin-left: 5px;
    box-shadow: 0px 0px 0px #483559;
    text-decoration: none;
}


/* Estilos para os cartões da equipe */
.card-develop {
    background-color: hsl(0, 0%, 100%); /* Fundo dos cards */
    margin-bottom: 20px; /* Espaçamento inferior entre os cartões */
    border-radius: 10px; /* Cantos arredondados */
    border: 1px solid #ccc;
    font-family: Arial, sans-serif; /* Fonte dos cartões */
    text-align: center; /* Alinha o texto ao centro */
    display: inline-block; /* Exibir os cartões em linha */
    width: calc(20.5% - 5px); /* Definir a largura de cada cartão (3o% do espaço disponível menos 30 pxs dos espaços entre cards) */
    margin-right: 10px; /* Espaçamento entre os cartões */
    vertical-align: top; /* Alinhar os cartões no topo */
    margin-top: 5px;
    overflow: hidden;
    align-self:center;
}
.profile-name {
    padding: 0 5px;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 4px;
    margin-top: 10px;
    color:#2c2c2c;
}
.job-title {
    padding: 0 15px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #40977c;
}
.description {
    padding: 0 10px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #777777;
    margin-bottom: 25px;
}
.social-links {
    width: 100%;
    display: flex;
    height: 0;
    border-top: 1px solid #ccc;
    transition: height 0.4s ease;
}
.card-develop:hover .social-links {
    height: 65px;
  
}
.social-links .instagram {
    --color: #a6cd3c;
}
.social-links .linkedin {
    --color: #2393d0;
}
.social-links .lattes {
    --color: #423d95;
}
.lattes, .linkedin, .instagram {
    padding: 14px; display: flex; align-items: center; justify-content: center;
}
.lattes img {
    width: 35%; height: auto;  }
.linkedin img {
    width: 35%; height: auto;  }
.instagram img {
    width: 35%; height: auto;  }
   
.social-links > a {
    font-size: 20px;
    padding-block: 20px;
    color: var(--color);
    flex: 1;
}
.social-links > a:not(:last-child) {
    border-right: 1px solid #cfcfcf; 
}
.social-links > a:hover {
    background-color: var(--color);
}
.social-links > a:hover > i {
    color: white; 
}
/* Estilos para as fotos */
.card-develop-logo {
    width: 100%; /* largura desejada */
    height: auto;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    overflow: hidden;
}
.card-develop-logo img {
    width: 100%; /* largura desejada */
    height: 100%; /* Isso mantém a proporção original da imagem */
    object-fit: cover;
    margin-bottom: 7px; /* margem */
}

.grabbingNodes {
    cursor: grabbing;
}
      /* Barra de rolagem */
      ::-webkit-scrollbar {
        width: 5px; /* Largura da barra de rolagem */
      }
      /* Trilha da barra de rolagem */
      ::-webkit-scrollbar-track {
        background: #22242e; /* Cor de fundo da trilha */
      }
      /* Botão da barra de rolagem */
      ::-webkit-scrollbar-thumb {
        background: transparent; /* Cor do botão */
        border-radius: 4px; /* Raio da borda do botão */
      }
      /* Botão da barra de rolagem */
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(360deg, #00c0c0, #8d5cff, #e449ff); /* Cor do botão */
        border-radius: 4px; /* Raio da borda do botão */
      }
            /* Botão da barra de rolagem */
            ::-webkit-scrollbar-thumb:horizontal {
                background: linear-gradient(90deg, #00c0c0, #8d5cff, #e449ff); /* Cor do botão */
                border-radius: 4px; /* Raio da borda do botão */
              }
      /* Mudança de cor quando hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #b250dc; /* Cor do botão ao passar o mouse */
        width: 5px; /* Largura da barra de rolagem */
      }
      /* Mudança de cor quando hover */
      ::-webkit-scrollbar-thumb:active {
        background: #764cff; /* Cor do botão ao passar o mouse */
        width: 5px; /* Largura da barra de rolagem */
      }
      ::-webkit-scrollbar:hover {
        width: 5px; /* Largura da barra de rolagem */
      }
      ::-webkit-scrollbar:active {
        width: 5px; /* Largura da barra de rolagem */
      }
      ::-webkit-scrollbar-button:start {
              background: #e449ff;
          }    
      ::-webkit-scrollbar-button:start:hover {
              background: #a736af;
          } 
      ::-webkit-scrollbar-button:end {
              background: #00c0c0;
          }    
      ::-webkit-scrollbar-button:end:hover {
              background: #267676;
          } 
           /* MTDNA MAPS */  
           #example-tables table, td { color:rgb(27, 25, 33); background-color:#f2f2f2; }

           summary {
              color:#207dc0;
           }
           summary:hover {
              color:black;
           }