@charset "UTF-8";

/* ========  IMPRESSÃO ========= */
@media print {

    /* ===============================
       AJUSTE GERAL: permitir cores no print
       (necessário para Safari iOS / Chrome imprimir backgrounds)
    =============================== */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ===============================
       VARIÁVEIS E BASE DO MODO IMPRESSÃO
    =============================== */
    html.modo-impressao {
            /* força o iPhone a tratar a página como DESKTOP */

    /* impede 'shrink-to-fit' do Safari */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    
        /* Fixamos todas as variáveis base */
        --grupos: 19;
        /*--minimo: 625;*/
        --minimo: 600px;
        --larguraTela-quadrado: 19;
        --encolher-barralateral: 1; /* mantém proporção original */
        --proporcaoTela: min(calc(0.9vw + 0.1vh), calc(var(--grupos) * 0.092vh - 0.21vh));
        --quadrado: calc(var(--larguraTela-quadrado) * var(--proporcaoTela));
        --fatorGrupos: calc(1 + (var(--grupos) - 17) / 18);
        --lacuna-na-grade: calc(5 * var(--proporcaoTela) * var(--encolher-barralateral) / var(--grupos));
        --fonte-minima: calc(1.8 * var(--minimo) / var(--encolher-barralateral) / 100);
        --altura-linha: calc((var(--quadrado) - 0.7rem) / 6);

        padding: 0 min(
            (100% - 100 * var(--proporcaoTela)) / 2,
            (100% - var(--minimo) / var(--encolher-barralateral) * var(--fatorGrupos) - 0.7rem) / 2.1
        ) !important;
        
         
    }

    /* Aside sempre escondido em impressão */
    html.modo-impressao aside {
        display: none !important;
    }

    /* ===============================
       MODO ECO — forçar P&B / fundo branco e bordas
    =============================== */
    html.modo-eco ol > li {
        background: white !important;
        border-width: max(0.2em, 2px) !important;
        border-style: solid !important;
    }

    html.modo-eco #mostradorid {
        background: white !important; /* ou transparent, conforme preferir */
    }

    /* Em ECO, remover imagens de fundo e sombras para garantir P&B */
    html.modo-eco * {
        background-image: none !important;
        box-shadow: none !important;
    }

    /* ===============================
       VISIBILIDADE: ocultar tudo e mostrar somente a tabela (.principal)
       (mantive sua abordagem com visibility conforme seu código original)
    =============================== */
    
    body{
        background: white !important;
    }
    body * {
        visibility: hidden !important;
    }

    html.modo-impressao .principal,
    html.modo-impressao .principal * {
        visibility: visible !important;
        outline: none !important;
    }
    header,
    aside,
    .caixaAnuncio,
    footer{
        
        display: none !important;
    }

    /* ===============================
       PAGE / MARGENS
    =============================== */
@page {
    size: landscape;
    margin: 0mm;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}


    /* elementos marcados como não imprimíveis */
    .no-print {
        display: none !important;
        visibility: hidden !important;
    }

    /* ===============================
       BLOQUEIO DE ANÚNCIOS (Adsense / iframes)
    =============================== */
    .caixaAnuncio,
    .adsbygoogle,
    [data-ad-client],
    [data-ad-slot],
    iframe[src*="googlesyndication"],
    iframe[src*="doubleclick"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
    }
    
    
    /* ===============================
       AJUSTE DE ESCALA ESPECÍFICO PARA iOS/SAFARI 
       (Ativado por JavaScript)
    =============================== */

    /* A classe 'ios-fix' sobrescreve o padding complexo que o iOS não calcula bem */
/* ===============================
   AJUSTE DE ESCALA ESPECÍFICO PARA iOS/SAFARI 
   (Substituição de --minimo e Correção de Fonte por Estado da Tabela)
=============================== */

/* A classe 'ios-fix' ativada pelo JS garante as correções de posicionamento */
html.modo-impressao.ios-fix {
    padding: 0 !important; /* Limpa o padding de cálculo original */
}


/* 1. ESTADO PADRÃO (Tabela Fechada): --grupos: 19, data-expansao: 0 */
html.modo-impressao.ios-fix[data-expansao="0"] {
    /* Define o valor para 19 grupos */
    
    --minimo: 880px !important; 
            --fonte-minima: calc(2 * var(--minimo) / var(--encolher-barralateral) / 100);


}

/* 2. ESTADO EXPANDIDO (Tabela Aberta): --grupos: 33, data-expansao: 15 */
html.modo-impressao.ios-fix[data-expansao="15"] {
    /* Define o valor para 33 grupos */
    --minimo: 600px !important; 

    
   
}


/* Mantenha a correção de escala e posicionamento do contêiner principal */
html.modo-impressao.ios-fix .principal {
    /* Garante que o contêiner ocupa a página */
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    /* Mantemos a escala de ajuste fino */
    transform: scale(0.92) !important;
    transform-origin: top left !important; 
}
   
   /* =====================================================
      MODO PRETO E BRANCO - SIMBOLOS DE GRUPO
===================================================== */
html.modo-pb ol > li {

        background: white !important;
        border-width: max(0.2em, 2px) !important;
        border-width: max(0.2em, 2px) !important;
        border-color: grey !important;
}

html.modo-pb .seriesQuimicasCentral li {
    
    border: none;
    outline: 1px dashed lightgrey;
    

}

/* Símbolos pretos no canto superior direito */
html.modo-pb ol > li::after {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 11px;
    font-weight: bold;
    color: black !important;
}

/* ------- Série Química → Símbolo -------- */

html.modo-pb .metaisAlcalinos::after {
    content: "■";        /* quadrado cheio */
}
html.modo-pb .metaisAlcalinosTerrosos::after {
    content: "□";        /* quadrado vazio */
}
html.modo-pb .lantanideos::after {
    content: "▧";        /* padrão listrado */
}
html.modo-pb .actinideos::after {
    content: "▣";        /* quadrado cruzado */
}
html.modo-pb .transicaoExterna::after {
    content: "▲";        /* triângulo cheio */
}
html.modo-pb .representativos::after {
    content: "△";        /* triângulo vazio */
}
html.modo-pb .semiMetais::after {
    content: "◆";        /* losango cheio */
}
html.modo-pb .naoMetais::after {
    content: "◇";        /* losango vazio */
}
html.modo-pb .gasesNobres::after {
    content: "○";        /* círculo vazio */
}

html.modo-pb .desconhecidos::after {
    content: "?";       
}

/* =============================
   SÍMBOLOS PB - LEGENDA (seriesQuimicasCentral)
============================= */

html.modo-pb .seriesQuimicasCentral li {
    position: relative;
}

html.modo-pb .seriesQuimicasCentral li::after {
    position: relative;
    right: 2px;
    top: 2px;
    font-size: 12px;
    color: black;
}


/* H (se quiser) */
html.modo-pb .h::after {
    content: "◇";
}

/* Alcalinos */
html.modo-pb .alc::after {
    content: "■";
}

/* Alc. Terrosos */
html.modo-pb .ter::after {
    content: "□";
}

/* Lantanídeos */
html.modo-pb .lan::after {
    content: "▧";
}

/* Actinídeos */
html.modo-pb .act::after {
    content: "▣";
}

/* Metais de Transição Externa */
html.modo-pb .ext::after {
    content: "▲";
}

/* Representativos */
html.modo-pb .rep::after {
    content: "△";
}

/* Semimetais */
html.modo-pb .sem::after {
    content: "◆";
}

/* Não Metais */
html.modo-pb .nao::after {
    content: "◇";
}

/* Gases Nobres */
html.modo-pb .gas::after {
    content: "○";
}

/* Desconhecidos (caso use um dia) */
html.modo-pb .desc::after {
    content: "?";
}


/* Hidrogênio isolado */
/*
html.modo-pb .h::after {
    content: "★";
}
*/

}




.modal-impressao {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
}

.modal-impressao .modal-conteudo {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
}

.modal-impressao button {
    margin: 10px;
    padding: 10px 15px;
    font-size: 1.1rem;
    cursor: pointer;
}

.menuDireita{
    
    display: flex;
    align-items: center;
}

#btnImprimir{
    
    border: none;
    background: none;
    
    display: flex;
    align-items: center;
}

#btnImprimir svg{
    
 
    width: max(1.2em, 18px);
    
}



/* ================================
   MODAL DE FUNDO
================================ */
.modal-impressao {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    animation: fadeIn 0.25s ease-out;
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ================================
   CONTEÚDO DO MODAL
================================ */
.modal-conteudo {
    background: rgba(255, 255, 255, 0.9);
    padding: 1.8em 2.2em;
    border-radius: 18px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    width: 100%;
    text-align: center;
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.modal-conteudo h2 {
    margin: 0 0 1em 0;
    font-size: 1.4em;
    color: #222;
    font-weight: 700;
}


/* ================================
   BOTÕES
================================ */
.modal-conteudo button {
    width: 100%;
    padding: 0.75em;
    margin: 0.45em 0;
    border: none;
    border-radius: 12px;
    font-size: max(1.2em, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: .5px;
}

/* Hover padrão */
.modal-conteudo button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* ================================
   🌿 BOTÃO ECO MODE
================================ */
#btnModoEco {
    background: linear-gradient(135deg, #58c26a, #3cae55);
    color: white;
    position: relative;
}

/* Plantinha pixel-art no canto */
#btnModoEco::after {
    content: "🌿";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: max(1.2em, 14px);
    opacity: 0.9;
}

/* Hover Eco */
#btnModoEco:hover {
    background: linear-gradient(135deg, #4dbd60, #34a64c);
}

/* ================================
   🔵 BOTÃO MODE COMUM
================================ */
#btnModoComum {
    background: linear-gradient(135deg, #4682e6, #326ed0);
    color: white;
}

#btnModoComum:hover {
    background: linear-gradient(135deg, #3b75d9, #2c62c1);
}

/* ================================
   ❌ BOTÃO CANCELAR
================================ */
#btnFecharModal {
    background: #e0e0e0;
    color: #333;
}

#btnFecharModal:hover {
    background: #d5d5d5;
}



/*******************/


.label {
  background: rgba(255,255,255,0.95);
  border: 1px solid #ccc;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 3px;
  white-space: nowrap;
  transform-origin: center bottom;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}




#orbitLabels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.orbit-label {
  position: absolute;
  color: #333;
  font-size: 14px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}



.linus_pauling{
    
        width: max(1.8em, 46px);

}
.mostradorLegendasCentraisDireita {
    position: fixed;
    top: 50px;
    right: 20px;
    width: max-content;   /* largura se ajusta ao conteúdo */
    min-width: 200px;     /* opcional, para não ficar muito estreita */
    max-width: 90vw;      /* nunca ultrapassa a tela */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 9999;
    touch-action: none;
    display: flex;
    flex-direction: column;
        cursor: move; /* indica que pode arrastar */

}


.caixaMostradorLegendaDireita {
    padding: 10px;
    cursor: pointer; /* indica que pode arrastar */
}

.fecharLegendaDireita {
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.painelAtomo3D{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 5px;
    position: relative;

}
    .linhaBotoesModelosAtomicos{
        
        display: none;
        justify-content: center;
    margin: 0.3em;

    }


/* --- Botões de troca de modelo atômico --- */
.atomModelButtons {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
    border: none;
}


.atomModelButtons button {
    flex: 1 1 auto;
    padding: none;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 10px;        /* letras menores */
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* fonte diferente */
    color: #333;
    text-align: center;
        border: none;

}

.atomModelButtons button:hover {
    background-color: #e0e0e0;
    border-color: #999;
    color: #000;
}



/* Botão ativo (qualquer um) */
.atomModelButtons button.active {
    background: #0077ff;
    color: #fff;
    box-shadow: 0 0 4px rgba(0,119,255,0.5);
}


.painelAtomo3D .panel {
    display: block;
    align-items: center;
    cursor: pointer;

}

.painelAtomo3D.fullscreen-falso {
  position: fixed;
  top: 0;
  left: 0;
 
  margin: 0;
  padding: 0;
  z-index: 9999;
  background: #fff; /* ou transparente, como preferir */
  overflow: hidden;
}


.painelAtomo3D.fullscreen-falso .panel {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Canvas ocupa tudo, mas fica no fundo */
.painelAtomo3D.fullscreen-falso canvas {

  display: block;
  z-index: 0;
}

/* Botão de pause e legenda ficam sobre o canvas */
.pause-ATOMO3D,
.ProtonEletronNeutro3D {
  position: absolute;
  z-index: 10;
}

/* Exemplo: canto superior esquerdo para o pause */
.pause-ATOMO3D {
  top: 10px;
  left: 10px;
}

/* Exemplo: canto inferior direito para os dados */
.ProtonEletronNeutro3D {
  bottom: 10px;
  right: 10px;
  background: rgba(255,255,255,0.7);
  padding: 6px 10px;
  border-radius: 8px;
}

.caracteristicasFotosElementos{
    
    margin: 0.4em;
    font-size: max(0.58rem, 10px);
    
}



/* Ajusta os botões para ficarem juntos e centralizados */
.linhaBotoes {
  display: flex;
  flex-direction: row;
  gap: 10px; /* espaço entre os botões */
  margin-top: -5px; /* puxa para ficar colado na LI de cima */
  padding-top: 5px;
  justify-content: space-evenly;
}

/* Estilo dos botões */
.linhaBotoes button {
  padding: 5px 15px;
  cursor: pointer;
  transition: 0.2s;
  color:#2e2e2e;
  border: none;
  background: none;
}

.linhaBotoes button.ativa {
  color: #2e2e2e;
  background: #ebebeb;
  font-weight: bold;
}

/* Pequeno efeito hover */
.linhaBotoes button:hover {
  background-color: #d1d1d1;
}

/* Animação de radioatividade */
@keyframes pulse-radioativo {
  0% {
    box-shadow: 0 0 5px #aeff00, 0 0 10px #aeff00;
  }
  50% {
    box-shadow: 0 0 10px #aeff00, 0 0 20px #aeff00;
  }
  100% {
    box-shadow: 0 0 5px #aeff00, 0 0 10px #aeff00;
  }
}

.radioativo-glow {
  animation: pulse-radioativo 1.5s infinite;
 /* border-radius: 6px; /* para suavizar */
}


.linhaPropriedades > .botaoImagensReais{
    display: none;

}


 .botaoImagensReais{
    flex-direction: column;
}

.mostradorLateral2D3DIMAGEM{
    
    margin: 1em 0px;
}

#imagemElemento {
    
        display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}


#imagemElemento img{
    
    width: 10em;
    margin-right: 3px;
    order: 1;
}

#imagemElemento small{
    
    writing-mode: vertical-rl;
    order: 0;
    font-size: 0.4em;
    color: #666;
}



/* Lightbox */
#imagemElemento img.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;   /* ocupa toda a largura da tela */
  height: 100vh;  /* ocupa toda a altura da tela */
  object-fit: contain; /* mantém proporção */
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  cursor: zoom-out;
  transition: all 0.3s ease;
}



  .ExpandirPixel {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.05s ease;
  }
  
      .simboloestadoFisico img {
    opacity: 0;
    width: 0.8em;
}

  #expandirCompactar:hover .ExpandirPixel {
    transform: scale(1.1);
  }

.seriesQuimicasCentral  > * > strong            { flex-grow: 1; }


#massasAtomicasCentral > *,
.seriesQuimicasCentral > *              { padding: 0.15em; display: flex; width: 100%; height: 100%; }


#massasAtomicasCentral > li > strong,
.seriesQuimicasCentral > li > strong        {
    display: block;
  /*  max-height: 8em;*/
    text-align:start;
    align-self: center;/* Firefox eats line breaks otherwise */
    overflow-wrap:anywhere;


}


.abas-dados{
    
    display: flex;
    margin: 2px;
        justify-content: center;
    align-items: center;
}


.aba {
  cursor: pointer;
  padding: 5px 10px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.aba.ativa {
  font-weight: bold;
  color: #575757;
/*  color: #e74c3c; /* destaque da aba ativa */
 /* border-bottom: 2px solid #e74c3c;*/
}


#detalhes {
  width: auto;
  padding: 3px;
  background: #f9f9f9;
  border: 2px dashed #0077cc;
  font-size: max(0.7em, 10px);
  overflow-y: auto;
  flex-direction: column;
}
.titulo-massa-real,
.titulo-ciaaw{
  font-size: max(1em, 12px);
  padding: 2px;
  margin: 0px;

    
}

.isotopos h4,
.massaReal h4 {
  margin: 0px 0;
  color: #444;
}

.isotopos ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.isotopos li {
  margin: 0.3em;
  padding: 1px;
  background: #fff;
  
}

.isotopos ul li div span{
    
      font-size: max(0.8em, 10px);

}

.massaReal {
  background: #fff;
  text-align: center;
}

.valor-destaque {
  font-weight: bold;
  color: #0077cc;
}


/* Container principal */
.detalhesMassaAtomica {
  flex-direction: column;
 /* gap: 1rem;*/
  padding: 1.2rem;
  background: #fdfdfd;
  border: 1px solid #ddd;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #333;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  margin: 0.5em;
}

/* Abas no topo */
.abas-dados {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: max(0.9em, 12px);
  color: #666;
  cursor: pointer;
}

.abas-dados .aba {
    padding: 0.2em;  border-radius: 6px;
  transition: all 0.25s ease;
}

.abas-dados .aba:hover {
  background: #f0f0f0;
  color: #222;
}

.abas-dados .aba.ativa {
 /* background: #0077cc;*/
  color: #292929;
  font-weight: bold;
 /* box-shadow: 0 2px 5px rgba(0,0,0,0.15);*/
}

/* Seções */

.secao-dados[style*="display: block"] {
  display: block;
}

/* Títulos */
.titulo-isotopos
 {
  font-size: max(0.7em, 10px);
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #0077cc;
  text-align: center;
}

/* Lista de isótopos */
.lista-isotopos-iupac,
.lista-isotopos-nist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-isotopos-iupac li,
.lista-isotopos-nist li {
  padding: 0.1em;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
      justify-content: center;
    align-items: center;
  transition: background 0.2s ease;
}

.lista-isotopos-iupac li:hover,
.lista-isotopos-nist li:hover {
  background: #fafafa;
}


.lista-isotopos-iupac small,
.lista-isotopos-nist small{
font-size: max(0.58rem, 10px);
text-align: center;
    
}


/* Destaque massa real */
.valor-destaque {
  display: inline-block;
  font-size: max(1em, 10px);
  font-weight: bold;
  color: #222;
  border-radius: 6px;
}


.isotopo-box {
  color: #fff;
  font-weight: bold;
  display: inline-block;
}

.isotopo-barra {
  background: #eee;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 4px;
}

.isotopo-barra span {
  display: block;
  height: 100%;
}


















.seriesQuimicasCentral{

    border-radius: 0.4em;
    padding: 0.2em;
   box-shadow: 0 0 0;
    font-size: 0.9em;
    min-width: 0;
    width: 50%;
    height: fit-content;
    background-color:hsla(0, 0%, 100%, 0);
    overflow-wrap: anywhere;
    grid-auto-flow: column;
    display: grid;
    grid-template-columns: repeat(9, auto);
   /* grid-template-rows:  repeat(8, auto);*/
    background-color:rgb(255, 255, 255);
   /* box-shadow: 0.08em 0.08em 0 rgba(116, 116, 116, 0.171), -0.04em -0.04em 0 rgba(116, 116, 116, 0.171);*/

   /* margin: 0px 0.8em;*/
     gap: 1px;
    }
    
    

.seriesQuimicasCentral > li {overflow-wrap:anywhere;}

.seriesQuimicasCentral > li {
    cursor:pointer;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);

   
}


.legenda-desativada {
  background-color: white !important;
  opacity: 1 !important;
  filter: none !important;
}


.extra-container {
  display: none; /* esconde todo o container */
background: grey;
}

    
.electron {
    /* Adicione sua configuração de estilo padrão aqui */
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    animation-play-state: paused; /* Pausa a animação inicialmente */
    background: radial-gradient(circle, #fff947, #ff5e39);
    border: 1px solid #bf262600;
    box-shadow: 0 0 5px rgb(251 255 0);
}

.orbit{
        border: 1px solid #00000024;

}

.nucleus{
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, white, lightgrey); /* Gradiente radial de branco para cinza claro */
}


/*************************** GERAL  (inicio) *****************************/
  /* ESTAVA NO FIM */
.orbital-vazio {
  color: transparent;
  pointer-events: none;
  user-select: none;
}
.orbital-vazio::before {
  content: " "; /* espaço não-quebrável para manter o layout */
}


mostradorid              { margin: 0.1rem; }
small           { font-size: 0.38em; text-align: end; }


ul > li > output            { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul > li.HideStart > output  { direction: rtl; text-align: left; }
ul > li:hover > output      { direction: unset; white-space: initial; overflow: initial; text-align: end; }
/*posiçao na GRID da series quimicas central */


/*** Legend and Data holders ***/
.regiaoCentral                  { contain: paint; 
    
}
/*.regiaoCentral strong               { color: inherit !important; }*/
.regiaoCentral      { display: flex; /*overflow-x: hidden; /* overflow-x: scroll; -ms-overflow-style: none; scroll-snap-type: mandatory; scroll-snap-stop: always; scrollbar-width: none; scroll-snap-points-x: repeat(100%); scroll-snap-type: x mandatory; -ms-scroll-snap-type: mandatory; */ }

.regiaoCentralLi{
    
    display: flex;
    flex-direction:row;
}

.regiaoCentralLi > * {
    display: flex;
    min-width: 100%;
} 

.regiaoCentral > *              { display: flex; }
.regiaoCentral > :not(.IsotopeKey)  { gap: 0px; }
.regiaoCentral > *              { min-width: 100%; /* scroll-snap-align: start; */ }

.estadoeseries              {

    display: flex;
    flex-direction: row;
    background-color: hsla(0, 0%, 100%, 0);
    justify-content: center;
    align-items:center;

  /*  padding:  0.15rem 0.15rem 0.45rem 0.15rem;*/

}  

.camadaEletronicaCentral{
    
        display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.camadaEletronicaCentral div{
    
        position: absolute;
        left:50%;
        top:0;
        
}

.distribuicaoEletronicaCentral{
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
        gap:0em;
        padding: 0px 0.1em;

}

.distribuicaoEletronicaCentral > li{
    
    display: flex;
    flex-direction: row;
            white-space: nowrap;
        
            padding: 0.3em;

}

.tooltip{
    
    display: none; /* Inicialmente oculto */
    position: fixed; /* Usa position fixed para garantir que o tooltip esteja sempre visível na tela */
    background-color: #333; /* Cor de fundo do tooltip */
    color: #fff; /* Cor do texto do tooltip */
    padding: 5px 10px; /* Espaçamento interno do tooltip */
    border-radius: 4px; /* Bordas arredondadas */
    font-size: 12px; /* Tamanho da fonte */
    z-index: 9999999; /* Garante que o tooltip esteja acima de outros elementos */
    pointer-events: none; /* Garante que o tooltip não interfira na interação com outros elementos */
    white-space: nowrap; /* Impede que o texto quebre em múltiplas linhas */
}

#mostradorid{

    margin: 0;
    display:flex;
    flex-direction:row;
    margin:5px;
    margin-right: 0px;
    width: max(6.8em, 80px);
    height: max(6.8em, 80px);
      border: 0.2em solid rgba(0, 0, 0, 0.096);
    padding: 4px;
    position: relative; /* Para ser o contexto de posicionamento */


}

.inicioLegendaDireita{
    

    margin:0px;
    padding: 0px;
    padding-bottom: 1em;
}


.inicioLegendaDireita{
    
    border: none;
}
.inicioLegendaEsquerda {
  margin: 0px;
  border: none;
  
}

.inicioLegendaEsquerda{
    
        margin: 0;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
   /* padding: 4px;*/

}

.legendaLinha {
  z-index: 1;
  position: relative; /* Torna o z-index ativo */
}


.mostrador{

    margin:5px;
    background-color: rgb(187, 255, 153);
 
    display:flex;
    flex-direction:row;
    width: max(6.1em, 80px);
    height: max(6.1em, 80px);
   border: 0.12em solid rgba(0, 0, 0, 0.096);


}

.mostradorLegendasCentraisEsquerda,
.mostradorLegendasCentraisDireita,
.mostradorContainer {
    align-items:center;
    justify-content:center;
    display: flex;
   /* flex-wrap: wrap;*/
}


.mostradorLegendasCentraisDireita{
        align-items:start;
    justify-content: center;
    height: auto; /* garante que cresce conforme o conteúdo */
    flex-wrap: wrap; /* deixa quebrar linha se for row */
    
}

.mostradorLegendasCentraisDireita {
    display: flex;
    align-items: center; /* Alinha o texto verticalmente ao centro */
        flex-direction: row;
     display: flex;
    flex-direction: column; /* ou row, depende do layout */
    align-items: center;
    justify-content: flex-start;
    height: auto;  /* cresce conforme o conteúdo */
    margin: 0;     /* sem espaçamento artificial */
    border: 2px dashed dodgerblue;

}

.textoVertical {
    writing-mode: vertical-rl; /* Exibe o texto na vertical */
    transform: rotate(180deg); /* Gira o texto para que ele vá de cima para baixo */
    font-size: max(0.7em, 10px); /* Tamanho da fonte para o texto */
    margin-right: 2em;
}


.caixaMostradorLegenda{

    display: flex;
    flex-direction: column;
    /*border: 0.12em solid rgba(0, 0, 0, 0.096);*/
    padding: 0.2em 0.4em;
    /*border-radius: 0.2em;*/
    line-height: 1.15;
    margin: 0;
    gap: max(0.46rem, 7px);
    background-color: #f0f0f0;

}

/* Aplica a transição suave para os itens da legenda */
.legendaItem1, .legendaItem2, .legendaItem3, .legendaItem4,
.caixaMostrador strong, .caixaMostrador em, .caixaMostrador .simboloQuimico, .caixaMostrador data {
    transition: transform 0.3s ease;
    cursor: pointer;
        transform-origin: left; /* Altera a origem da transformação para a esquerda */

}
.legendaItem1Direita, .distribuicaoEletronicaMostrador{
        transition: transform 0.3s ease;
    cursor: pointer;
            transform-origin: right; /* Altera a origem da transformação para a esquerda */

    
}



.legendaItem2{
    font-size: max(1em, 12px);
    
    
}
.caixaMostrador > .simboloQuimico{

    font-size: 1.8em;
    text-align: left;
}
.legendaItem1,
.legendaItem2,
.legendaItem4,
.legendaItem3{
    
        transform: scaleX(0.9); /* Comprimiu o texto para 90% da largura original */

}

.legendaItem1Direita{
            font-size: 1em;
        letter-spacing: -0.025em;
        text-align: left;
        padding-right: 3em;
    
}
.legendaItem1,
.legendaItem3{
    
        font-size: 0.45em;
        letter-spacing: -0.05em;
        text-align: right;
    
}

.legendaItem4{
        letter-spacing: -0.05em;
        text-align: right;
font-size: 0.55em
}



.caixaMostrador > strong,
.caixaMostrador > em,
.caixaMostrador > data{

    font-size: 1em;
        letter-spacing: -0.025em;
    padding: 0px;
    text-align: left;
    letter-spacing: normal;
}


.caixaMostradorLegenda > .simboloQuimico {

    font-size: 1.3em;
    text-align: center;    transform: scaleX(0.9); /* Comprimiu o texto para 90% da largura original */

}

.caixaMostradorLegenda > strong, 
.caixaMostradorLegenda > data,
.caixaMostradorLegenda > em {

    transform: scaleX(0.9); /* Comprimiu o texto para 90% da largura original */

    font-size: 0.7em;
}


.caixaMostrador .propriedadesDentroCaixinha {
    
        font-size: 0.7em;
      
display: flex;
    flex-direction: column;
    position: absolute;
    right: 4px;
    top: 4px;
}


.caixaMostrador .propriedadesDentroCaixinha span{
    
        font-size: 0.9em;
}

.caixaMostrador .propriedadesDentroCaixinha .caixinhaConfEletronica{
    
        font-size: 0.7em;
        padding-bottom: 2px;
}




figure .simboloQuimico, li > .simboloQuimico  {
    font-weight: 600;
}




.actinideos7{





     text-align: center;
    align-self: center;
}






.barraDeSeparacaoLantAct{
    border:none;
    justify-self: left;
    align-self: center;
}














/****************************************************************/







/*em,*/data{
        margin-left: max(0.1em, 2px);

    color: black;
    font-size: 0.55em;
   /* text-align: center;*/
    text-align: left;
    font-style: normal;
  
}
  
em{
        margin-left: max(0.1em, 2px);

    color: black;
    font-size: 0.48em;
    /*text-align: center;*/
    text-align: left;
    font-style: normal;

}

        /* JOGO */

      /* Estilos gerais */



      #startButton {
        width: 120px;
        height: 120px;
        background: radial-gradient(circle at 30% 30%, #ffffffaa, #00aaff);
        border-radius: 50%;
        border: none;
        box-shadow: inset 5px 5px 10px rgba(255, 255, 255, 0.5),
          inset -5px -5px 15px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 170, 255, 0.8);
        font-size: 18px;
        font-weight: bold;
        color: white;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        cursor: pointer;
        outline: none;
        transition: transform 0.2s, box-shadow 0.2s;
          background: radial-gradient(circle at 30% 30%, rgba(0,31,181,0.84), #63b8ff);
  border: 2px solid rgba(135, 206, 235, 0.9);
  border-radius: 50%;
      }

      #startButton:hover {
        transform: scale(1.1);
        box-shadow: inset 5px 5px 12px rgba(255, 255, 255, 0.6),
          inset -5px -5px 18px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 170, 255, 1);
            background: radial-gradient(circle at 30% 30%, rgba(0,31,181,0.84), #63b8ff);
  border: 2px solid rgba(135, 206, 235, 0.9);
  border-radius: 50%;
      }

      #startButton:active {
        transform: scale(0.95);
        box-shadow: inset 3px 3px 8px rgba(255, 255, 255, 0.4),
          inset -3px -3px 12px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 170, 255, 0.9);
      }
   
    h4{
        
        margin: 0.1em;
    }

      /* Modal (tela de jogo) */
      .modalJogo {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0px;
        background: rgba(0, 0, 0, 0.6);
        justify-content: center;
        align-items: center;
        z-index: 999999;
        
        
font-family: 'Chalkboard SE', 'Comic Sans MS', cursive, sans-serif;
}

      /* Tela inicial do jogo */
      #startScreen {
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        
      }
      /* Interface do jogo */
      #gameUI {
        display: none;
        position: relative;
        height: 100%;
        width: 100%;
        background: transparent;
        overflow: hidden;
        
      }
      
  /* PROPRIEDADES LATERAIS DENTRO DO ELEMENTOS */
.propriedadesDentroCaixinhaLegenda{
    
        display: flex;
    flex-direction: column;
    position: absolute;
    right: 1px;
    top: 0px;
}

.propriedadesDentroCaixinha{
    
    display: flex;
    height: 100%;
    justify-content: start;
    flex-direction: column;
    position: absolute;
    right: 1px;
    top: 0px;

}

.propriedadesDentroCaixinhaLegenda span{
        font-size: max(0.45em, 5.5px);
    text-align: right;
    display: none;
        padding: 0.01rem 0px;
    line-height: 1;
    gap: 0.01em;
    
}

.propriedadesDentroCaixinha span {

    /*font-size: max(0.25em, 3px);*/
    font-size: 0.2em;
    text-align: right;
           /* padding: 0.01rem 0px;*/
           /* gap: 0.01rem;*/
    line-height: 1;
    display: inline-block; /* Para consistência */

}



.seriesQuimicasCentralGame{
    
   /* border-radius: 0.4em;*/
    padding: 0.2em;
   box-shadow: 0 0 0;
    font-size: 0.9em;
    min-width: 0;
    width: 100%;
    height: 6em;
  /*  background-color:hsla(0, 0%, 100%, 0);*/
  
    overflow-wrap: anywhere;
    grid-auto-flow: column;
    display: grid;
    grid-template-columns: repeat(9, auto);
   /* grid-template-rows:  repeat(8, auto);*/
    background-color:rgb(255, 255, 255, 0);
   /* box-shadow: 0.08em 0.08em 0 rgba(116, 116, 116, 0.171), -0.04em -0.04em 0 rgba(116, 116, 116, 0.171);*/

   /* margin: 0px 0.8em;*/
     gap: 1px;
     font-size: max(16px, 2em);
    
}


.pneCENTRAL{
    
    display: none;
    
    flex-direction: row;

    
}



/*.desenhosCentral,*/
.desenhosCentral{
    
       
            display:none;

}


.usosCentral{

            display: flex;
            width: 100%;
            height: auto;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            justify-content: center;
            margin: 0;
        }
        
.usosCentral .linha{
            display: flex;
            width: 100%;
            flex-direction: row;
    
}

.svg-container {
    flex: 0 0 15%; /* Ocupar 15% da largura do contêiner pai */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc; /* Opcional: Adiciona uma borda para visualizar o tamanho do contêiner */
    background: #f9f9f9; /* Opcional: Adiciona um fundo para visualizar o contêiner */
}

.texto{
    
        display: flex;
        justify-content: left; /* Alinha horizontalmente no centro */
        align-items: center; /* Alinha verticalmente no centro */
        padding-left: 8px;
        padding-right: 8px;
        flex: 1; /* Ocupar o restante da largura disponível */
            text-align: left;

}

#texto1, #texto2, #texto3{
    
    font-size: max(0.8em, 10px);

}
        #svg1, #svg2, #svg3{
            
            width: 2em;
            height: 2em;
            transition: transform 0.3s ease;
        }
        
        #svg1:hover, #svg2:hover, #svg3:hover{
        
            transform: scale(1.2);    
                }

        #mainImage {
            width: 6em;
            height: 6em;
        }








.desenho{
    
        display:flex;
        flex-direction:row;
            align-items: center; /* Alinha o conteúdo verticalmente ao centro */


}

.desenho div{
    padding: 0.2em 0.6em;
    
}

.desenho{
    
    display:none;
}

#desenho1{
    
        display:flex;
        flex-direction:row;
}

#mainText,
.textoDesenho{
    
    padding: 0.2em 0.6em;
    font-size: max(0.8em, 10px);
  
    line-height:1.2;
    justify-content:center;
    align-items: center;
        color: grey;

}

.desenho em{
    
        font-size: max(1em, 12px);
        color: blue;
        font-weight:bold;

}


.tituloPneCentral{
    position: relative;
   top:-1.4em;
   left:0;
    display:flex;
    justify-content: center;
    text-align:center;
    font-size: max(0.8em, 12px);
   font-weight: bold;
}


.tituloPneCentral2{
    position: absolute;
    top:0;
    left:12em;
    display:flex;
    justify-content: center;
    text-align:center;

    font-size: max(0.8em, 12px);
    font-weight: bold;
}

.nucleo{
    
    display:flex;
    flex-direction:column;
    position: absolute;
    top: 3.4em;
    left:45.3%;
    font-size: max(0.8em, 10px);
    
}
.atomosCentrais{
    
    display: flex;
    flex-direction: row;
    padding: 3em;
    margin-left: 5em;
}


  ul {
    list-style-type: none; /* Remove as bolinhas ou números dos itens da lista */
    padding: 0; /* Remove o preenchimento padrão */
    margin: 0; /* Remove a margem padrão */
    display: flex;
  }




  
  


.protonCamadaEletronica{

    width: 1em; /* largura relativa ao tamanho do átomo */
    height: 1em; /* altura relativa ao tamanho do átomo */
    border-radius: 50%;
    border: 0px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, lightgrey, grey); /* Gradiente radial de branco para cinza claro */
    color: black;
      /*  transform: skewY(6deg); /* Ajuste o ângulo conforme necessário */
    display: inline-block;
}

.numeroProton1{

    width: 1.9em; /* largura relativa ao tamanho do átomo */
    height: 1.9em; /* altura relativa ao tamanho do átomo */
    border-radius: 50%;
   /* border: 1px solid black;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, lightgrey, grey); /* Gradiente radial de branco para cinza claro */
    color: black;
}


.spanNeutron{
     font-size: max(0.6em, 6px);
     position: absolute;
    top: 50%;
    left: calc(50% + 0.8em);
    transform: translate(-50%, -50%);
    width: 1.8em; /* largura relativa ao tamanho do átomo */
    height: 1.8em; /* altura relativa ao tamanho do átomo */
    border-radius: 50%;
    /*border: 1px solid #303030;*/
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, white, lightgrey); /* Gradiente radial de branco para cinza claro */
    font-weight: bold;

    
}
.numeroNeutron{
    font-size: max(0.7em, 8px);
     position: absolute;
    top: 50%;
    left: 52.5%;
    transform: translate(-50%, -50%);
    width: 2.2em; /* largura relativa ao tamanho do átomo */
    height: 2.2em; /* altura relativa ao tamanho do átomo */
    border-radius: 50%;
    /*border: 1px solid black;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, white, lightgrey); /* Gradiente radial de branco para cinza claro */
    font-weight: bold;
}

.spanProton{
    
       font-size: max(0.6em, 6px);
    position: absolute;
    top: 50%;
    left: calc(50% - 0.8em);
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 1.8em; /* largura relativa ao tamanho do átomo */
    height: 1.8em; /* altura relativa ao tamanho do átomo */
    border-radius: 50%;
   /* border: 1px solid #303030;*/
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, lightgrey, grey); /* Gradiente radial de branco para cinza claro */
    color: black;
    font-weight: bold; 
    
}
.numeroProton{
    font-size: max(0.7em, 8px);
    position: absolute;
    top: 50%;
    left: 47.5%;
    transform: translate(-50%, -50%);
    width: 2.2em; /* largura relativa ao tamanho do átomo */
    height: 2.2em; /* altura relativa ao tamanho do átomo */
    border-radius: 50%;
   /* border: 1px solid black;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, lightgrey, grey); /* Gradiente radial de branco para cinza claro */
    color: black;
    font-weight: bold;
}


.eletrosfera {
    font-size: max(0.7em, 8px);
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(-10deg); /* Inclinação */
}


.numeroNeutron1{

    width: 1.9em; /* largura relativa ao tamanho do átomo */
    height: 1.9em; /* altura relativa ao tamanho do átomo */
    border-radius: 50%;
   /* border: 1px solid black;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, white, lightgrey); /* Gradiente radial de branco para cinza claro */
}


.numeroEletron{
    display: flex;
    font-size: max(0.7em, 8px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    width: 2.2em; /* largura relativa ao tamanho do átomo */
    height: 2.2em; /* altura relativa ao tamanho do átomo */
    background-color: yellow;
    border-radius: 50%;
   /* border: 1px solid black;*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra para efeito 3D */
    background: radial-gradient(circle, yellow ); /* Gradiente radial de branco para cinza claro */
    font-weight: bold;

}


.numeroEletron1{

    justify-content: center;
    align-items: center;
    width: 1.9em; /* largura relativa ao tamanho do átomo */
    height: 1.9em; /* altura relativa ao tamanho do átomo */
    background-color: yellow;
    border-radius: 50%;
   /* border: 1px solid black;*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra para efeito 3D */
    background: radial-gradient(circle, yellow ); /* Gradiente radial de branco para cinza claro */
}



.orbit1central {
    position: absolute;
    width: 6.5em; /* largura relativa à largura da viewport */
    height:6.5em; /* altura relativa à largura da viewport */
    border: 1px solid black;
    border-radius: 50%;
    background-color: transparent;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    background: radial-gradient(circle, transparent, #ffff0a20, #ffea03); /* Gradiente radial de branco para cinza claro */
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    /*border: 1px solid black;*/
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}


.electronCentral {
    animation: orbit1central 6s linear forwards;
}




.numeroNeutronLegenda{
    font-size: max(1em, 10px);
   /* width: 2.2em; 
    height: 2.2em;
    border-radius: 50%;
    border: 1px solid black;*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: grey;
   /* background: radial-gradient(circle, white, lightgrey); /* Gradiente radial de branco para cinza claro */
}

.numeroProtonLegenda{
    font-size: max(1em, 10px);
   /* width: 2.2em; 
    height: 2.2em; 
    border-radius: 50%;
   border: 1px solid black;*/
    display: flex;
    justify-content: center;
    align-items: center;
  /*  background: radial-gradient(circle, lightgrey, grey); /* Gradiente radial de branco para cinza claro */
    color: black;
}



.numeroEletronLegenda{
    display: flex;
    font-size: max(1em, 10px);
    justify-content: center;
    align-items: center;
    color: #002cd7;
   /* width: 2.2em; /* largura relativa ao tamanho do átomo */
  /*  height: 2.2em; /* altura relativa ao tamanho do átomo */
   /* background-color: #afcfff70;*/
   /* border-radius: 50%;*/
  /* border: 1px solid black;*/
   /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra para efeito 3D */
   /* background: radial-gradient(circle, yellow ); /* Gradiente radial de branco para cinza claro */
}





/* ORBITA */

@keyframes orbit1central {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateY(4.5em); /* ajustado para tamanho da tela */
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateY(4.5em); /* ajustado para tamanho da tela */
    }
}


.barraLateral {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.barraLateral[hidden] {
    transform: translateX(-100%);
    opacity: 0;
}



  .mudarTemperatura{
    display: none;
    background: transparent;
    justify-content: center;
    width: 100%;
    background: #343a6900;
    align-items: center;
}
 
  
  /* Estilizar o input range para exibição vertical */
#inputRangeTemperatura {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; /* Largura da barra (tornando-se altura após a rotação) */
    height: 12px; /* Espessura da barra */
    background: linear-gradient(to right, rgba(253, 255, 122, 1), rgba(255, 233, 122, 1), rgba(255, 200, 0, 1));
    outline: none; /* Remover a borda */
    opacity: 1; /* Definir opacidade */
   /* transform: rotate(360deg); /* Rotaciona o controle para ser vertical */
  /*  transform-origin: center; /* Mantém a rotação centralizada */
  /*  position: absolute; /* Para garantir que o range fique centralizado dentro do contêiner */
    border-radius: 2em;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Estilizar o controle deslizante (ponteiro) para WebKit */
#inputRangeTemperatura::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: max(1.6em, 23px); /* Largura do ponteiro */
    height: max(1.6em, 23px); /* Altura do ponteiro */
    background: green; /* Cor do ponteiro */
    border-radius: 50%; /* Torna o ponteiro redondo */
    cursor: pointer; /* Cursor do mouse */
    border: 1px solid grey;
    background-image: radial-gradient(circle at center, beige, #e8d7a3);
        border: 1px solid rgba(0,0,0,0.3);

}

/* Estilizar o controle deslizante (ponteiro) para Firefox */
#inputRangeTemperatura::-moz-range-thumb {
    width: 16px; /* Largura do ponteiro */
    height: 16px; /* Altura do ponteiro */
    background: green; /* Cor do ponteiro */
    border-radius: 50%; /* Torna o ponteiro redondo */
    cursor: pointer; /* Cursor do mouse */
            border: 1px solid rgba(0,0,0,0.3);

}





  
  
      .modal-content {
        background: #fff;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: auto;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin: none;
      }
      /* Painel de informações */
      #infoPanel {
        display: none;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        align-items: left;
        flex-wrap: wrap;
        position: absolute;
        bottom: 0px;
        right: 0px;
        text-align: right;
        z-index: 999999;
        padding: 0px 1em;
        
        
font-family: 'Chalkboard SE', 'Comic Sans MS', cursive, sans-serif;
      }
      #infoPanel > div {
        margin: 5px;
        font-size: max(0.6em, 10px);
        color: grey;
        
      }
      
.nomeModuloAtual{
    
    color: grey;
        width: 100%;
    text-align: left;
    font-size: max(1em, 12px);
    position: absolute;
    top: 5px;
    left: 1em;
    z-index: 999999;

}


.nomeModuloAtual2{
    
    color: white;
    width: 100%;
    text-align: left;
    font-size: max(1em, 12px);
        z-index: 999999;

}


ul{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: repeat(6, auto);
    grid-gap: 0 0.7rem;
    margin: 0;
    scrollbar-width: none;
    
        list-style-type: none; /* Remove as bolinhas ou números dos itens da lista */
    padding: 0; /* Remove o preenchimento padrão */
    margin: 0; /* Remove a margem padrão */
    display: flex;
}



ul > li{
    display: flex;
    align-items: left;
    justify-content: left;
    padding: 0 0.7rem;
    break-inside: avoid;
    /*outline: 0 solid var(--tab-hover);*/
    
        display: flex;
    flex-direction: column; /* Alinha os átomos em coluna (verticalmente) */
}


.pnigogenicos,
.calcogenios,
.halogenios{
    font-size: 0.7em;
}



/*******************/
* {
    box-sizing: border-box;
}

      /* Botão para abrir o modal */
      #openGame {
        position: relative;
        border: none;
        background: none;
        z-index: 2;
             width: max(1.5em, 26px);
        margin: 0px;
        padding: 0px;
  image-rendering: crisp-edges; /* alguns navegadores usam esse valor */
  image-rendering: pixelated; /* preserva pixels sem suavização */


      }



.ProtonEletronNeutro3D > span  ,
.ProtonEletronNeutro > span{
    
    /*margin-left: 4px;*/
    text-align: center;
        text-align: center;
    display: flex;

}
.ProtonEletronNeutro3D > div,

.ProtonEletronNeutro > div{
        text-align: center;
    font-size: max(1em, 10px);
    display: flex;
    flex-direction: row;
    gap: 0.2em;
    
}



.ProtonEletronNeutro3D{
    
        display: grid;
    grid-template-columns: repeat(1, auto);
    column-gap: 0.5em;
    justify-items: right;
    align-items: left;
    text-align: left;
    padding: 0.2rem;
    font-size: max(0.8em, 8px);
    background-color: transparent;
    order: 1;
    right: 0;
    bottom: 0;
    position: absolute;
}
/* Classe fullscreen */
/* quando estiver em fullscreen */
.painelAtomo3D.fullscreen-falso .panel .ProtonEletronNeutro3D {
    right: 4rem;
    bottom: 4rem;
    font-size: 1rem;
        position: absolute;

}
.ProtonEletronNeutro {
    

    display: grid;
    grid-template-columns: repeat(1, auto);
    column-gap: 0.5em;
    justify-items: right;
    align-items: left;
    text-align: left;
    padding: 0.2rem;
    font-size: max(0.8em, 8px);
    background-color: transparent;
    order: 1;
    right: 0;
    bottom: 0;
    position: absolute;
}


/* Estilo para ProtonEletronNeutro em modo fullscreen */


.ProtonEletronNeutro.fullscreen {
    
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 2em;
    justify-items: center;
    align-items: center;
    text-align: center;
    font-size: 2em;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    position: fixed;
    bottom: 20px;

  
    
    
}



.FamiliaPeriodoBloco > label,
.ProtonEletronNeutro3D > label,
.ProtonEletronNeutro > label{
    
 /*   padding:4px;*/
 text-align:center;
}


:root{

     --grupos: 19;
    --lacuna-na-grade: calc(5 * var(--proporcaoTela) * var(--encolher-barralateral) / var(--grupos));
    --encolher-barralateral:1;
    --fonte-minima:  calc(1.8 * var(--minimo) / var(--encolher-barralateral) / 100);
    --proporcaoTela: min(calc(0.9vw + 0.1vh), calc(var(--grupos) * 0.092vh - 0.21vh));
    --altura-linha: calc((var(--quadrado) - 0.7rem) / 6);
    --fatorGrupos: calc(1 + (var(--grupos) - 19) / 18);
    --minimo: 625px;
    --larguraTela-quadrado: 19;
    --quadrado: calc(var(--larguraTela-quadrado) * var(--proporcaoTela));


    /***** cores de fundo  *******/
    --naoMetais:    hsl(100, 100%, 80%);
    --metaisAlcalinos: hsl(254, 100%, 92%);
   --metaisAlcalinosTerrosos: hsl(36, 100%, 83%);
    --transicaoExterna:     hsl(200, 100%, 83%);
    --representativos: hsl(0, 100%, 85%);
    --semiMetais: hsl(53, 100%, 80%);
    --gasesNobres: #ffd6ff;
    --lantanideos: hsl(55, 67%, 80%);
    --actinideos: hsl(170, 100%, 92%);
    --desconhecidos: hsl(0, 0%, 93%);
    --serieNaoMetais: hsla(100, 100%, 80%, 0.589);


}

/*---------------------------------------------*/
          /* cores das classes */
/*---------------------------------------------*/
.destacado {
  background: var(--cor-fundo) !important;
}

.destacado * {
  color: var(--cor-texto) !important;
}


.hover-borda {
  border: 1px solid #0098e3 !important;
}

.filtrar-destaque {

      border-color: #31bba1c4 !important;
  opacity: 1;
}

.filtrar-escurecido {
  background-color: white !important;
  border-color: transparent;
}



/*-----------------------------------------*/
/*           legendas classes              */
/*-----------------------------------------*/

.CaixinhaLegenda {
    
  
    margin: 5px 0px;
    width: max(4em, 40px);
    height: max(6.8em, 80px);
    border:0.2em solid rgba(0, 0, 0, 0.0);
    padding: 0px;
            display: none;
    flex-direction: column;

   /* gap: 0.025em;*/
   
   
    
}
.CaixinhaLegenda span{
    
    display: none;
        font-size: max(0.45em, 5.5px);
        white-space: nowrap;
        color: grey;
        padding: 0.01rem 0px;
        line-height: 1;

}
.CaixinhaLegenda .ConfEletronicaLegenda{
        padding: 0.2em 0px;
    
}

.propriedadesDentroCaixinhaLegenda .caixinhaEletronsCamadaLegenda,
.propriedadesDentroCaixinhaLegenda .caixinhaConfEletronicaLegenda{
    
        font-size: max(0.45em, 5.5px);

}
.propriedadesDentroCaixinhaLegenda .caixinhaConfEletronicaLegenda{

    padding: 0.05em 0px;
}

.propriedadesDentroCaixinha .caixinhaEletronsCamada,
.propriedadesDentroCaixinha .caixinhaConfEletronica{
    
    font-size: 0.2em;
   /* padding-bottom: 1px;*/
}

.inputs-menu {
    position: fixed;
    top: 0;
    right: -270px; /* Começa fora da tela à direita */
    width: 250px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    padding: 20px;
    transition: right 0.3s ease-in-out;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.inputs-menu.open {
    right: 0; /* Move para dentro da tela */
}

.inputs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.inputs-overlay.active {
    display: block;
}


#svgToggleInputs{
    
   width: max(1.5em, 26px);
    cursor: pointer;
   /* padding: 0.3em;*/
}
.logoJogo{
    width: max(1.5em, 26px);
    padding: none;
    cursor: pointer;   
    
}


.mostrarTemperatura{
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
}


.mostrarTemperatura img{
    
                width: max(1.5em, 26px);
}

/***  menu ****/


        /* Botão para abrir o menu */
        #menuToggle {
           /* position: fixed;*/
            background: transparent;
            cursor: pointer;
            z-index: 1;
            border: none;
            padding: none;
            margin-left: 0.5em;
            display: flex;
            justify-content: center;
            align-items: center;
            width: max(2em, 36px);
            height: max(2em, 36px);
        }
        
        #menuToggle svg{
            
            width: 100%;
        }

        /* Container do menu */
        #menu{
            position: fixed;
            top: 0;
            left: max(-80em, -600px); /* Menu escondido inicialmente */
            width: max(10em, 300px);
            height: 100%;
            background-color: #f8f9fa;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
            overflow-y: auto;
            transition: left 0.3s ease;
            z-index: 99999;
        }

        #menu.open {
            left: 0; /* Mostrar o menu */
        }

        #menu h2 {
            margin: 0;
            background-color: #007bff;
            color: white;
            text-align: center;
            width: 100%;
            font-size: max(0.8em, 14px);
        }

        #menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #menu ul li {
            border-bottom: 1px solid #ddd;
        }

        #menu ul li button {
            width: 100%;
            display: none;
            /*padding: 15px;*/
            text-align: left;
            border: none;
            background-color: rgba(0,0,0,0);
            cursor: pointer;
            font-size: 16px;
        }


        /* Overlay para fechar ao clicar fora */
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 998;
        }

        #overlay.active {
            display: block;
        }
        
/* Estilo geral para os menus */
.menuGerais, 
.menuPropriedadesQuimicas, 
.menuPropriedadesFisicas {
        display: flex; /* Habilita o Flexbox */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    list-style: none; /* Remove os marcadores padrão dos <li> */
    width: 100%;
    display: flex; /* Habilita o flexbox */
    flex-direction: row; /* Alinha os itens em coluna; use 'row' para alinhar horizontalmente */
    gap: 10px; /* Espaço entre os itens */
    padding: 10px; /* Espaçamento interno */
    border: 1px solid #ccc; /* Borda para melhor visualização */
    border-radius: 5px; /* Cantos arredondados */
    background-color: #f9f9f9; /* Cor de fundo */
}

/* Estilo adicional para itens dentro dos menus */
.menuGerais > *, 
.menuPropriedadesQuimicas > *, 
.menuPropriedadesFisicas > * {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    transition: background-color 0.3s ease;
}

/* Estilo para hover nos itens */
.menuGerais > *:hover, 
.menuPropriedadesQuimicas > *:hover, 
.menuPropriedadesFisicas > *:hover {
    background-color: #e0e0e0;
}

        


/*************************/



.caixaDaTabela{
    
    overflow: auto;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    /* background-image: url(https://img.freepik.com/vetores-gratis/fundo-de-carnaval-plano_23-2150044427.jpg); */
    background-size: cover;
    background-position: center;
    order: 1;
}


.eixo-y-labels{
    
        position: relative;
    top: -5px;
    left: -30px;
    width: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    pointer-events: none;
}

.eixo-x-labels{
    
position: relative;
    bottom: -20px;
    left: 0px;
    width: 100%;
    height: 20px;
    pointer-events: none;
}

.elemento strong {
    order: 1;
}
.caixaMostrador abbr{
    
        display: flex;
    align-items: center;
}

.elemento .simboloQuimico {
    order: 2;
    display: flex;
    align-items: center;
}



.elemento em {
    order: 3;
}

.elemento data {
    order: 5;
}

.elemento .imagemDoCantinho{
    
    order: 4;

}


.nomesDasTabelas{
    
    font-size: max(0.8em, 8px);
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
    
}


/****************************/


/* ampliar atomos */


/* Estilo para o container do átomo */
.espacoAtomos {
    position: relative; /* Define um contexto de posicionamento para elementos filhos */
}

/* Estilos para o botão de ampliar */


/* Estilo para expandir o átomo ocupando 80% da tela */
.atomo.fullscreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw; /* 80% da largura da tela */
    height: 100vh; /* 80% da altura da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    z-index: 999999;
    color: black;
    border-radius: 8px;
    /*padding: 20px;*/
    box-sizing: border-box;
    font-size: 3em; /* Aumenta a fonte para 5rem quando expandido */
    
    transition: transform 0.3s ease, font-size 0.3s ease; /* Adiciona transição suave */
}



/* Estilo para o botão de fechar */
.close-button {
    position: absolute;
    top: 20px; /* Um pouco mais afastado do topo */
    right: 20px; /* Um pouco mais afastado da direita */
    padding: 10px 15px;
    font-size: 1rem;
    background-color: #ff5c5c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000; /* Assegura que o botão esteja acima de outros elementos */
}


/* Estilo para o botão de ampliar */
.expand-ATOMO3D,
.expand-button {
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: none;
        padding: 4px;
    font-size: 14px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
        font-size: max(0.9em, 10px);


    
    
}

.propriedadesBarraLateral > ul > .espacoAtomos > .atomo.fullscreen {
    font-size: 2.5em; /* Aumenta a fonte para 5em quando expandido */
}


/* ampliar atomos */

.previewPontoFusaoUnidade,
.previewPontoFusao{
    
    font-size: max(0.5em, 10px);
    margin: 0px;
    
}

/* idiomas */

.language-selector {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.selected-language {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    background-color: white;
}

.language-options {
    display: none; /* Esconde as opções inicialmente */
    position: absolute; /* Permite que as opções sejam sobrepostas ao cabeçalho */
    background-color: white; /* Fundo branco para as opções */
    border: 1px solid #ccc; /* Borda para as opções */
    border-radius: 5px; /* Bordas arredondadas */
    z-index: 1000; /* Garante que fique acima de todos os outros elementos */
    bottom: 100%; /* Posiciona as opções acima do elemento pai */
    left: 0; /* Alinha as opções à esquerda do pai */
    width: 100%; /* Faz com que as opções ocupem toda a largura do pai */
    box-sizing: border-box; /* Inclui padding e borda na largura total */
}

.language-selector:hover .language-options {
    display: block; /* Mostra opções ao passar o mouse */
}

.language-options div {
    display: flex;
    align-items: center;
    padding: 5px;
}

.language-options div:hover {
    background-color: #f0f0f0; /* Altera o fundo ao passar o mouse */
}

/* Ajuste de estilo para as bandeiras */
.language-options img {
    width: 20px; /* Ajuste a largura conforme necessário */
    height: auto; /* Mantém a proporção da imagem */
    margin-right: 5px; /* Espaço entre a imagem e o texto */
}


/*******FIM idiomas ***********/

#atom-list{
    
    gap: 0.2em;
}




#atom-list > .botaoCalorEspecifico,
#atom-list > .botaoCondutividadeEletrica,
#atom-list > .botaoCondutividadeTermica,
#atom-list > .botaoDureza,
#atom-list > .botaoRaioAtomico,
#atom-list > .botaoEnergiaIonizacao,
#atom-list > .botaoEletroafinidade,
#atom-list > .botaoEletronegatividade,
#atom-list > .botaoEletroafinidade,
#atom-list > .botaoDensidade,
#atom-list > .botaoPontoFusao,
#atom-list > .botaoPontoEbulicao,
#atom-list > .botaoEstadoFisico,
/*#atom-list > .botaoEstruturaAtomica,*/
#atom-list > .botaoCamadaEletronica,
#atom-list > .botaoConfiguracaoEletronica,
#atom-list > .botaoSeriesQuimicas,
#atom-list > .botaoPaises,
#atom-list > .botaoUsos,


#atom-list > .botaoMassaAtomica, 
#atom-list > .botaoNumerosQuanticos


{
    
    display: flex;
    flex-direction: row;
        align-items: center; /* Centraliza verticalmente os elementos internos */
    justify-content: space-between;
    padding-bottom: 0.2em;
}


#atom-list > .botaoCalorEspecifico label,
#atom-list > .botaoCondutividadeEletrica label,
#atom-list > .botaoCondutividadeTermica label,
#atom-list > .botaoDureza label,
#atom-list > .botaoRaioAtomico label,
#atom-list > .botaoEnergiaIonizacao label,
#atom-list > .botaoEletroafinidade label,

#atom-list > .botaoEletronegatividade label,
#atom-list > .botaoEletroafinidade label,
#atom-list > .botaoPaises label,
#atom-list > .botaoUsos label,

#atom-list > .botaoDensidade label,
#atom-list > .botaoPontoFusao label,
#atom-list > .botaoPontoEbulicao label,
#atom-list > .botaoEstadoFisico label,
#atom-list > .botaoCamadaEletronica label,
#atom-list > .botaoConfiguracaoEletronica label,
#atom-list > .botaoSeriesQuimicas label,
#atom-list > .botaoMassaAtomica label,
#atom-list > .botaoNumerosQuanticos label
{
    flex: 0 0 35%; /* Ocupa 30% da largura */

}

#atom-list > .botaoCalorEspecifico span,
#atom-list > .botaoCondutividadeEletrica span,
#atom-list > .botaoCondutividadeTermica span,
#atom-list > .botaoDureza span,
#atom-list > .botaoRaioAtomico span,
#atom-list > .botaoEnergiaIonizacao span,
#atom-list > .botaoEletroafinidade span,

#atom-list > .botaoEletronegatividade span,
#atom-list > .botaoEletroafinidade span,
#atom-list > .botaoPaises span,
#atom-list > .botaoUsos span,

#atom-list > .botaoDensidade span,
#atom-list > .botaoPontoFusao span,
#atom-list > .botaoPontoEbulicao span,
#atom-list > .botaoCamadaEletronica span,
#atom-list > .botaoEstadoFisico span,
#atom-list > .botaoConfiguracaoEletronica span,
#atom-list > .botaoSeriesQuimicas span,
#atom-list > .botaoMassaAtomica span,
#atom-list > .botaoNumerosQuanticos span

{
    flex: 1; /* Ocupa o restante da largura (70%) */
    text-align: right;
  white-space: normal;   /* permite quebra de linha */
  word-break: break-word;/* quebra palavras muito longas */
  overflow-wrap: break-word; /* versão moderna e recomendada */
}



#atom-list > .botaoCamadaEletronica > label,
#atom-list > .botaoConfiguracaoEletronica > label{
    white-space: normal;         /* Permite quebra de linha */
    word-break: keep-all;        /* Impede a quebra de palavras */
    overflow-wrap: normal;       /* Evita a quebra automática no meio das palavras */
}

/*

#atom-list li:nth-child(odd) {
    background-color: #ffffff; 
}

#atom-list li:nth-child(even) {
    background-color:#cfefff ; 
}
*/




li[data-id] {
  backface-visibility: hidden;  /* Evita embaçamento durante transformações */
  transform: perspective(1000px);  /* Força aceleração por GPU */
  will-change: transform;  /* Sinaliza ao navegador que a propriedade transform será modificada */
}

.familia {
    position: relative;
    display: inline-block;
    cursor: default; /* Define o cursor como seta padrão */
    perspective: 1000px; /* Define a profundidade 3D para o efeito de rotação */
}

.familia::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotateY(90deg); /* Começa com o tooltip "virado" */
    background-color: #f0f0f0;
    color: #000;
    white-space: normal; /* Permite a quebra de linha */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 99;
    font-size: max(1em, 10px);
    width: 100%; /* Largura 100% */
    height: 100%; /* Altura automática para permitir que o conteúdo se expanda */
    display: flex;
    justify-content: center; /* Alinha horizontalmente */
    align-items: center; /* Alinha verticalmente */
    overflow-wrap: break-word; /* Quebra as palavras para nova linha, se necessário */
    word-break: normal; /* Preserva a quebra normal de palavras */
}


.familia:hover::after {
    transform: translateX(-50%) rotateY(0deg); /* O tooltip vira para frente */
    opacity: 1;
    visibility: visible;
}



.periodo {
    position: relative;
    display: inline-block;
    cursor: default; /* Define o cursor como seta padrão */
    perspective: 1000px; /* Define a profundidade 3D para o efeito de rotação */
}

.periodo::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotateY(90deg); /* Começa com o tooltip "virado" */
    background-color: #f0f0f0;
    color: #000;
    white-space: normal; /* Permite a quebra de linha */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 99;
    font-size: max(1em,10px);
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center; /* Alinha horizontalmente */
    align-items: center; /* Alinha verticalmente */
}

.periodo:hover::after {
    transform: translateX(-50%) rotateY(0deg); /* O tooltip vira para frente */
    opacity: 1;
    visibility: visible;
}




.periodoLantanoidesActinoides {
    position: relative;
    display: inline-block;
    cursor: default; /* Define o cursor como seta padrão */
    perspective: 1000px; /* Define a profundidade 3D para o efeito de rotação */
}

.periodoLantanoidesActinoides::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotateY(90deg); /* Começa com o tooltip "virado" */
    background-color: #f0f0f0;
    color: #000;
    white-space: normal; /* Permite a quebra de linha */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 99;
    font-size: max(0.6em,8px);
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center; /* Alinha horizontalmente */
    align-items: center; /* Alinha verticalmente */
}

.periodoLantanoidesActinoides:hover::after {
    transform: translateX(-50%) rotateY(0deg); /* O tooltip vira para frente */
    opacity: 1;
    visibility: visible;
}






.inputTemperaturaFusao{
    
    z-index: 999;
}

@font-face {
  font-family: 'Segoe Ui', Roboto, Arial, Helvetica, serif, sans-serif;
  src: url('/path/to/font.woff2') format('woff2');
  font-display: swap; /* Substitua a fonte personalizada por uma fonte padrão enquanto carrega */
}


html{
    font-size: calc(1.8 * var(--proporcaoTela));
    font-family:  'Segoe Ui', Roboto, Arial, Helvetica, serif, sans-serif;
}


body{
    font-family:  'Segoe Ui', Roboto, Arial, Helvetica, serif, sans-serif;
    font-style: normal;
    margin: 0;
    background: #f0f0f0;
}

        #mainImage {
            width: 6em;
            height: 6em;
        }

main{
    
    display: flex;
   flex-direction: column;
    
    padding:0;

}



main > article{
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    
    overflow-x: auto;
    /* novobarraLateral zh */
    /*background-image: url('https://img.freepik.com/vetores-gratis/fundo-de-carnaval-plano_23-2150044427.jpg');*/
    background-size: cover;
    background-position: center;
         order:1;

}



body > *  {
    padding: 0 min((100% - 100 * var(--proporcaoTela)) / 2, (100% - var(--minimo) / var(--encolher-barralateral) * var(--fatorGrupos) - 0.7rem) / 2.1);
}


aside{
    
     display: flex; 
     flex-basis: var(--quadrado);
     background-color: white;
    /* box-shadow: 0.08em 0.08em 0 rgba(116, 116, 116, 0.171), -0.04em -0.04em 0 rgba(116, 116, 116, 0.171);*/
    margin: 0px 4px;
    margin: 0.1rem calc(0.1rem* 1.8);
    margin-left: 0px;
}


/*** Margins ***/
header              { margin-bottom: 0.1rem; }
.Notice             { margin: 0.7rem 0.1rem 0; }
main,
ol,
figure              { margin: 0.1rem calc(0.1rem* 1.8); }



header div, header span{
    display: flex; /* Coloca os elementos na mesma linha */
    vertical-align: center; /* Alinha os elementos verticalmente */
    margin: 3px 5px 2px 5px; /* Adiciona margem entre os elementos */
}

header #menu{
        display: inline; /* Coloca os elementos na mesma linha */

    
}

header button {
    
        display: inline-block; /* Coloca os elementos na mesma linha */
    vertical-align: center; /* Alinha os elementos verticalmente */
    margin:2px; /* Adiciona margem entre os elementos */
    width: max(1.2em, 14px);
    height: max(1.2em, 14px);
    
}

header button svg {
    
        display: inline-block; /* Coloca os elementos na mesma linha */
    width: max(1.2em, 22px);
    height: max(1.2em, 22px);
}

/*** CSS para o rodapé ***/

#rodape {
    width: 100%;
    background-color: #f0f0f0; /* Cor de fundo clara */
    padding: 10px 0; /* Espaçamento superior e inferior */
    margin: 0px;

}

#footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Proporção 1:2:1 */
    gap: 20px; /* Espaçamento entre os itens */
    padding: 0 20px; /* Espaçamento lateral */
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo */
}

#footer-content div {
    text-align: center;
    font-size: 14px; /* Tamanho da fonte */
    padding: 0px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
}

.sobreNos {
    background-color: #4CAF50; /* Cor de fundo do botão "Sobre nós" */
    color: #fff; /* Texto branco */
}

.politicasPrivacidade {
    background-color: #2196F3; /* Cor de fundo do botão "Políticas de Privacidade" */
    color: #fff; /* Texto branco */
}

.faleConosco {
    background-color: #f44336; /* Cor de fundo do botão "Fale conosco" */
    color: #fff; /* Texto branco */
}

/* Efeito Hover */
#footer-content a {
    text-decoration: none;
    color: inherit; /* Usa a cor do elemento pai */
    font-weight: bold;
    display: block; /* Faz o link ocupar toda a área do item */
    transition: background-color 0.3s ease, color 0.3s ease;
}

#footer-content a:hover {
    background-color: #333; /* Cor de fundo ao passar o mouse */
    color: #fff; /* Texto branco ao passar o mouse */
}

/* Ajusta o ícone e o texto */
#footer-content a span {
    display: flex;
    align-items: center;
    justify-content: center;
}


/*************************** GERAL  (fim) *****************************/


/************************** DENDRO DO HEADER (inicio) ********************************/


h1, p{
    display: none;
}


/*
#logo{
            font-weight: bold;
            font-size: max(1em, 12px);
            color: grey;
            background-color: #fff;
            display: inline-block;
            cursor: pointer;
        }
#logo{
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

#logo:hover {
    transform: scale(1.1) rotate(5deg);
}
*/






#logo {
    font-size: max(1rem, 16px);
    font-weight: bold;
    color: #333;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1ch; 
    /* Evite transições de width (causa reflow) */
}

#logo img{

 width: max(1.8em, 46px);
}

#logo span {
    position: absolute;
    overflow: hidden;
    color: #0078d7;
    /* Remova width: 0 e use transform para animação */
    transform: translateX(-100%); /* Inicia fora da tela */
    opacity: 0;
    transition: opacity 0.3s ease; 
}



header > div {
    align-items: center;
    max-width: 100%; /* Garante que não ultrapasse a largura da janela */
    text-align: center;
        gap: 0.5em;
}

header > div img{
    align-items: center;
    width: 100%; /* Garante que não ultrapasse a largura da janela */
      image-rendering: crisp-edges; /* alguns navegadores usam esse valor */
  image-rendering: pixelated; /* preserva pixels sem suavização */

}



header > div img:hover{
 transform: scale(1.1);

}

header div button{
justify-content: center;
width:100%;
    
}




header div button em {
    margin-left: 0px;
    text-align: center;
    font-size: max(0.5em, 10px);

}

    
    
header > div label{
    
 text-align: center;
    font-size: max(0.5em, 10px);
    overflow-wrap: break-word;
    width: 100%; /* Garante que a largura seja limitada pelo contêiner pai */
    display: block; /* Garante que o label seja tratado como um bloco */
    white-space: normal;

}



header > div > button:hover {
    transform: scale(1.1);
}
/*

#expandirCompactar{
        background-color: #00000000;
    color: white;
    /*padding: 7px;*/
    /*
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    /*
    
    outline: none;
    display: flex;
    text-align:center;
    align-items:center;
    border-radius: none;
}
*/
.corSerieAtual{
    
    width: max(1.5em, 12px);
    height: max(1.5em, 12px);
    border: 1px solid #00000020;
}
#expandirCompactar{
    
        width:  max(2em, 20px);   
    height: max(2em, 20px);  
}


#barraPropriedades{
               width: 10px;
                height: 100%;
               
                background-color: #d6d6d6;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                margin: 0.1rem 1px;
                z-index: 2;
                border-radius: 15px 0px 0px 15px;
    
}

/*
#nomenclatura,
#barraPropriedades:hover {
    background-color: #00000005;
}



#nomenclatura:active,
#barraPropriedades:active {
    background-color: #3316c4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}
*/

#expandirCompactar {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box; /* garante que padding e border não aumentem o tamanho */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* impede que conteúdo extrapole */
  position: relative; /* para posicionamento absoluto se precisar */
}

.ExpandirPixel {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* mantém proporção e não distorce */
  display: block;
  padding: 0.78em;
  box-sizing: border-box;
  position: relative;
}


#expandirCompactar:hover {
   /* background-color: #45a049;*/
}



.divTemperatura{
    


    color: white;
    /*padding: 7px;*/
    border: none;
   /* border-radius: 5px;*/
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
   /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    outline: none;
    display: flex;
    flex-direction: column;
    text-align:center;
    align-items:center;
  /*  border: 1px solid rgba(0, 0, 0, 0.2);*/
    /*width: 100%;*/
}


.divTemperatura div{
    
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
    align-items: center;
}



.divTemperatura span{
    
    margin:0;
    color:grey;
    font-size: max(0.7em, 10px);
    
    
}

.divTemperatura label{
    
    color:grey;
    font-size: max(0.4em, 6px);
}


/****** BARRA DE BUSCA ********/
           .dropdown {
            position: relative;
            display: inline-block;
            width: 200px;
            
        }


    
        
        .dropdown-content {
            display: none; /* Inicialmente escondido */
        }
        .dropdown-content.show {
            display: flex; /* Mostrar quando ativo */
        }        
        
             
        .dropdown-content.show {
            display: flex; /* Mostrar quando ativo */
        }
      


.dropdown {
    position: relative;
    width: min-content;
    
}

.dropdown-input {
    width: 16em;
    padding: 6px;
    box-sizing: border-box;
    font-size: max(0.7em, 16px);
    box-sizing: border-box; /* Inclui padding e border no tamanho total */
    border-radius: 0.5em;
    border: 1px solid #ddd;
    box-sizing: border-box;
    cursor: pointer;
}

.dropdown-content {
    display: none; /* Inicialmente escondido */
    position: fixed; /* Posição fixa para sobrepor ao conteúdo */
    z-index: 1000; /* Garantir que fica sobre os outros elementos */
    background: white; /* Fundo branco para o dropdown */
    border: 1px solid #ccc; /* Borda para o dropdown */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Sombra para o dropdown */
    max-height: 50vh; /* Altura máxima de 50% da altura da viewport */
    overflow-y: auto; /* Rolagem vertical se ultrapassar a altura máxima */
    width: 100%; /* Largura total do input */
    top: 50px; /* Posicionar logo abaixo do input */
    left: 0;
    flex-direction: column; /* Garantir que os itens estejam em coluna */
    font-size: max(1em, 14px);
}

.dropdown-content div {
    padding: 10px;
    cursor: pointer;
}

.dropdown-content div:hover {
    background-color: #f1f1f1;
}


        .search-icon {
        
            cursor: pointer;
    }
        


/************************** DENDRO DO MAIN (inicio) ********************************/


/******** DENTRO DO ASIDE (Inicio) ****************/
.nomeElemento3D{
    
    font-size: max(0.8em, 12px);
    text-align: center;
    color:grey;
    background-color: white;
    margin: 2px;
}

.nomeElemento3D.fullscreen {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    z-index: 9999999;
    width:6em;
    color: black;
    border-radius: 8px;
    /*padding: 20px;*/
    box-sizing: border-box;
    font-size: 2em; /* Aumenta a fonte para 5rem quando expandido */
    transition: transform 0.3s ease, font-size 0.3s ease; /* Adiciona transição suave */
   /* position: fixed;*/
    position: fixed;
    
    top: 8em;

}

aside ul > li   {
    /*min-height: var(--altura-linha);*/

}

.Collapse aside,
.Reset aside    {
    opacity: 0;
    flex-basis: 0;
    visibility: hidden;

}


.Reset aside {
     --min-rows: 0;

}


.Reset  {
    --proporcaoTela: min(1vw, 1.51vh + (var(--groups) - 18) * 0.095vh);
}



/**** ordem da barra lateral e da tabela periodica ao lado*******/
aside{
    order: 0;
    height: auto;
    display:flex;
    flex-direction: column;
}

.principaisUsos{
    
    color: green;
    font-size:max(1em, 12px);
    
}

.blocoPropriedades aside  {
    flex-direction: column;
    flex-shrink: 0;


}


.blocoPropriedades aside figure {
    align-self: center;
    font-size: 2.1em;
    height: 3.5em;
    width: 3.5em;
    flex: unset;
}

.blocoPropriedades aside ul > li {
   /* min-height: 2.5em;
    
    padding: 0 calc(0.1rem * 1.5);
        padding: 0.5rem;*/

}


aside figure    {
    font-size: 2.8em;
    padding: var(--margin);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    flex: 0 0 calc(var(--quadrado) - 0.7rem);
    min-width: 0;
    white-space: nowrap;

}


.blocoPropriedades{
    --larguraTela-quadrado: 20;
}




.blocoPropriedades .propriedadesBarraLateral    {
    flex-grow: 1;
    flex-basis: 0;
  height: 100%;
  overflow-y: auto;
  direction: ltr; /* garante a barra à direita */

}

.blocoPropriedades .propriedadesBarraLateral > ul {

    overflow: auto;
    display:flex;
    flex-direction: column;
    justify-content: space-between;


    
}


.blocoPropriedades .propriedadesBarraLateral > *  {
    display: initial;
}



.blocoPropriedades main > article     {
    transition: width 0.3s linear; 
    min-width: 0;
}



.blocoPropriedades[data-expansao="15"],

.blocoPropriedades {
    --encolher-barralateral: calc(1 - (var(--larguraTela-quadrado) + 2) / 100);
}




.blocoPropriedades[data-expansao="15"] aside > figure {
    display: none;
}






/*
.blocoPropriedades canvas     {
    height: unset;
}
*/


  .propriedadesBarraLateral {
    display: flex;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Alinha o conteúdo verticalmente */
    height: 100vh; /* Ajusta a altura da seção para ocupar toda a altura da viewport */
    align-content: flex-start


  }


.propriedadesBarraLateral{
    
  /*  font-size: min(1.8 * var(--proporcaoTela) * var(--encolher-barralateral) * 33, var(--fonte-minima)* 38);*/
    font-size: max(1rem, 12px);
    display:block;
    overflow-x: hidden;
        position: relative;
     overflow-y: scroll;
             direction: rtl; /* Muda a direção do texto para da direita para a esquerda */
    overflow-y: scroll; /* Adiciona uma barra de rolagem vertical se necessário */

    display: flex;
    flex-wrap: wrap; /* Permite que os átomos se movam para a linha seguinte se não houver espaço suficiente */
    justify-content: center; /* Centraliza os átomos horizontalmente */
    align-items: center; /* Alinha os átomos verticalmente */



}



/*css da barra de scroll das propriedades atômicas*/
/* Barra de rolagem moderna para a barra lateral de propriedades atômicas */
.propriedadesBarraLateral::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Fundo da barra (trilha) */
.propriedadesBarraLateral::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 10px;
}

/* Barra de rolagem (thumb) */
.propriedadesBarraLateral::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #bbb, #999);
  border-radius: 10px;
  border: 2px solid #f0f0f0; /* dá a sensação de espaçamento interno */
  transition: background 0.3s ease;
}

/* Efeito ao passar o mouse */
.propriedadesBarraLateral::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #888, #666);
}



.propriedadesBarraLateral > ul {

    overflow: auto;
    display:flex;
    flex-direction: column;
    
        list-style-type: none; /* Remove as bolinhas ou números dos itens da lista */
    padding: 0; /* Remove o preenchimento padrão */
    margin: 0; /* Remove a margem padrão */
    display: flex;
    justify-content: center; /* Centraliza os itens da lista horizontalmente */
    
    
}
.propriedadesBarraLateral > * {


    direction: ltr; /* Retorna a direção do texto para da esquerda para a direita para os elementos internos */

    font-size: 0.65em;
    min-width: 100%; /* scroll-snap-align: start; */
    



     }
     
     
     /* tamanho do atomo lateral */
.propriedadesBarraLateral > ul >.espacoAtomos > .atomo {

         font-size: max(0.85em, 8px);
}
     
     

.propriedadesBarraLateral ul > li > label   {
    margin-inline-end: 0.1rem;
    white-space: nowrap;
    flex-grow: 1;
    text-align: left;
    
}



.propriedadesBarraLateral ul > li > *   {
    overflow-wrap: break-word;
    hyphens: auto;
   /* z-index: 99;*/
}

.propriedadesBarraLateral ul > .espacoAtomos > .atomo  {
    
    z-index: 999;
}


     
/* Hidden properties, must be done early */
.propriedadesBarraLateral .Resets,
.propriedadesBarraLateral .Compounds        {
    
   /* display: none !important;*/
    display: block;

}

.propriedadesBarraLateral ul > li > label   { margin-inline-end: var(--margin); white-space: nowrap; flex-grow: 1; }

.propriedadesBarraLateral ul > li > *       { overflow-wrap: break-word; hyphens: auto; }


/* dentro da lista propriedades */

     button[data-model="schrodinger"] {
    flex: 1 1 auto;
    padding: 0;
    font-size: 10px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    border: none;
    cursor: not-allowed;
    color: hsl(0, 0%, calc(50% - var(--progress, 0) * 30%));
    transition: color 0.3s ease, background 0.3s ease;

    /* Gradiente de fundo representando progresso */
    background: linear-gradient(
        to right,
        #f0f0f0 0%, /* fundo inicial mais claro */
        #f0f0f0 calc(var(--progress, 0) * 100%),
        white calc(var(--progress, 0) * 100%),
        white 100%
    );
}
 
.espacoAtomos{
    
    display: flex;
    flex-direction: column; /* Alinha os átomos em coluna (verticalmente) */
    align-items:center;
    justify-content:center;
    cursor: pointer;
    /*height: 12em;*/
    margin: 5px;

}

.atomo {
    display: none; /* Inicialmente, todos os átomos estão ocultos */
   /* margin: 10px; /* Adiciona espaço entre os átomos */
    text-align: center; /* Centraliza o texto dentro de cada átomo */
    
    /*background: radial-gradient(circle, white, white, #ffea03);*/
    background: none;
    
    margin-top: 50px;
}

/* Exibe o primeiro átomo como padrão */
.atomo:first-child {
    display: flex; /* Use block em vez de flex se não houver elementos filhos que precisam ser flexíveis */
}


/*********************************************/



/*  BARRA LATERAL */
.linhaPropriedades {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffffcc; /* leve transparência para efeito moderno */
  /*border: 1px solid #e0e0e0; /* borda sutil */
  border-radius: 6px; /* cantos levemente arredondados */
  padding: 0.6em 1em;
  margin: 0.2em 0.3em;
  color: #2e2e2e;
  font-size: max(0.58rem, 10px);
  font-weight: 500;
  box-shadow: 0 0 0 1px #e0e0e0;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}


/* Efeito hover suave */
.linhaPropriedades:hover {
  background-color: #f0faff; /* tom suave de azul */
  transform: translateY(-1px); /* efeito de “flutuar” levemente */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  /*z-index: 5; /* traz pra frente se estiver sobreposto */
}

/* Efeito ativo (clicado) */
.linhaPropriedades:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Efeito de destaque opcional para item selecionado */
.linhaPropriedades.ativo {
  background-color: #e3f3ff;
  border-color: #5cc2ff;
  box-shadow: 0 0 0 2px rgba(92, 194, 255, 0.3);
}

/* Tipografia interna */
.linhaPropriedades span,
.linhaPropriedades p {
  margin: 0;
  padding: 0;
  line-height: 1.4em;
  font-weight: 700;
}

/* Animação de brilho leve ao passar o mouse */
.linhaPropriedades::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(45, 190, 252, 0.08),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.linhaPropriedades:hover::after {
  opacity: 1;
}





.linhaPropriedadesParticulas{
        display:flex;
        justify-content: left;
    
}

.subtituloPropriedades > label,
.linhaPropriedades > label{
    font-size: max(0.58rem, 10px);
    font-weight: normal;
    color: black;
        text-align:left;
        

}



/********* DENTRO DO ASIDE (fim) **********/



/********* DENTRO DO ARTICLE (Inicio) **********/

ol{

display: grid;
transform-style: preserve-3d;
grid-template-columns: repeat(var(--grupos), minmax(0, 1fr));
grid-gap: var(--lacuna-na-grade);
padding: 0.1rem 0.7rem 0.7rem 0.1rem;
box-shadow: 0.08em 0.08em 0 rgba(116, 116, 116, 0.171), -0.04em -0.04em 0 rgba(116, 116, 116, 0.171);
background-color: white;

}


ul, ol{
    list-style-type: none;
    padding-inline-start: 0;
   /* background: white;
       gap: max(0.01rem, 2px)*/

}


ol{
    font-size: max(1.8 * var(--proporcaoTela) * var(--encolher-barralateral) / var(--fatorGrupos), var(--fonte-minima) * var(--encolher-barralateral) *1.15);
    min-width: calc(var(--minimo) * var(--fatorGrupos) - 2 * 0.7rem);
}



ol.principal > li:not(.boxOculta, .verticalTransicaoInterna, .actinoidesDentro, .actinoidesFora, .lantanideosDentro, .lantanideosFora, .Lantanideos5771, .Lantanideos6, .regiaoCentral, .legenda, .actinideos7, .actinideos89103, .barraDeSeparacaoLantAct, .periodo, .familia, .barraSobreNaoMetais, .todosNomes ){
   
   /* display: block;*/
    line-height: 1;

    white-space: nowrap;
    padding: 0.1em 0px;
    /*padding: 0px;*/
    /*border-radius: 0.1em 0.1em 0.1em 0.1em;*/
    cursor: pointer;
     transition: filter 2s ease;
    gap: 0.02em;
     flex-direction: column;
     justify-content: space-between;
   /* width: 2.8em;
     height: 3em;
*/
}

 li .familia{
    
        cursor: default;

}

.configuracaoEletronicaBase{
    
    display: none;
    
}
ol > li >strong{
    
    /*padding: max(0.08em, 2px) 0 0 0;*/
        margin-left: max(0.1em, 2px);
}


li >.barraDeSeparacaoLantAct{
    letter-spacing: normal;
}



ol li > *,
.boxExtra > * {

   /*deixa as linhas (inline) dentro da caixa uma embaixo da outra(n atomico, simbolo, nome, PM)*/
   display: block;
   /* deixa a altura entre as 4 linhas a uma distância de 1*/
   line-height: 1;
   /*padding: var(--almofada-elemento);*/
   font-style: normal; font-weight: normal;
   padding: 0.01em 0px;
}


figure strong,
ol > * > div > strong,
ol > * > div > span      {
    /*color: black;*/
    font-size: 0.6em;
    font-weight: normal;
}

ol > * > strong{
    
        font-size: 0.55em;
        text-align: left;

}


.seriesQuimicasCentral  > * > strong{
        font-size: 0.6em;
    font-weight: normal;
}


ol > * > .simboloQuimico{
    margin-left: max(0.1em, 2px);
    color: black;
    font-size: max(1em, 12px);
    text-align: left;
       /* margin: 0px 0.2em;*/
   /* text-align: left;*/
    /*text-shadow: 5px 5px 15px white, 0 0 5px white; */

}



ol > li{
    
    outline: 0px solid white;
    padding: 0.1em;
    transition:	outline 0.05s linear;

border-width: max(0.01em, 0.05px);
border-color: rgba(0,0,0,0);

/*
border-color: rgba(0,0,0,0.05);
*/

    border-style: solid;
    
}


.listaPontoFusao{
    border: 0px;
   /* background: antiquewhite;*/
}



/*** Element boxes ***/
mostradorid b,
ol > * > b      { font-size: 0.65em; font-weight: normal; }





/********* dentro da tabela   ***********/


.familia {
    text-align: center;
}




.periodo, .familia  {
    color: var(--group);
    line-height: 1;
    font-size: 0.7em;
    display: block;
    text-align: center;
    font-style: normal;
    font-weight: normal;
}

.periodo {
    display: flex; /* Define o contêiner como flex */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    
}





.Lantanideos6, .actinideos7{
    border:none;
   /* margin-right: var(--fixedgridgap);*/
    display:none;
}


.todosNomes{
    border:none;
    display: flex;
    justify-content: center;
    align-items: center;


}

.todosNomes div{
        width: 100%;
    height: 100%;
}

.familia{
    text-align: center;
    border: none;
}
.barraDeSeparacaoLantAct    {
   font-size: max(0.8em, 9px);
    padding:4px;
    margin: 0.1rem 0.7rem;
    align-self: center;
}



.Lantanideos5771,
.actinideos89103    {
    border:none;
    font-size: 0.65em;
    align-self: center;
    text-align: center;
}


.legenda,
.barraSobreNaoMetais {
    font-size: max(1em, 12px);
    align-self: center;
    text-align: center;
}

.legenda > span{
        font-size: max(0.4rem, 10px);

    
}

.rupturaEscandio,
.boxOculta {
    display: none;
    border:none;
}


.elemento>em{
    visibility: visible;
   /*
    font-size: max(0.33em, 4px);*/

}

.elemento>data {
    text-overflow: ellipsis;
    overflow: hidden;
   /* padding: 0px 0px max(0.4em, 3px) 0px;*/
}




li > .nomesHiperGrandes{
    letter-spacing: -0.055em;
    transform: translateX(-12%) scaleX(0.8); /* Achata a fonte na direção horizontal *//* Desloca o texto 10 pixels para a esquerda */

}

li > .nomesMuitoGrandes {
    letter-spacing: -0.04em;
    transform: translateX(-12%) scaleX(0.8); /* Combina o deslocamento e o achatamento */
}


li > .nomesExtensos{
    letter-spacing: 0.017em;
    transform: translateX(-12%) scaleX(0.85); /* Combina o deslocamento e o achatamento */

}
li > .nomesMedios{
    letter-spacing: -0.05em;
}





/* Adiciona uma borda ao passar o mouse sobre o elemento somente se nenhum elemento estiver selecionado */
.elementoSelecionado,
.elemento{
            transition: outline-width 3s ease, outline-color 3s ease; /* Transição suave para a largura e cor da borda */
            outline-width: 0.10em; /* Aumenta a largura da borda ao passar o mouse */
            outline-color: transparent; /* Altera a cor da borda ao passar o mouse */
            outline-style: solid; /* Define o estilo da borda */    
  
            
}
.elemento:hover {

            outline-width: 0.1em; /* Aumenta a largura da borda ao passar o mouse */
            outline-color: rgb(45, 190, 252); /* Altera a cor da borda ao passar o mouse */
            outline-style: solid; /* Define o estilo da borda */
              z-index: 10; /* traz o elemento pra frente */

}


/* Garante que o :hover funcione para elementos com a classe .elementoSelecionado, mesmo quando .no-hover está aplicada */
.elementoSelecionado:hover {
    outline: 2px solid #0581ed !important ; /* Ajuste o estilo da borda conforme necessário */

}



.elementoSelecionado{
    
    outline: 2px solid #0581ed;
      z-index: 10; /* traz o elemento pra frente */


}

/* Remove a borda do :hover se qualquer elemento tiver a classe .elementoSelecionado */
.no-hover .elemento:hover {
    
    outline: none;
          z-index: 1; /* traz o elemento pra frente */

}


/*** Series Colors ***/
.metaisAlcalinos,
figure.Alkali           {
    
    background-color: var(--metaisAlcalinos);


}
.metaisAlcalinosTerrosos       { background-color: var(--metaisAlcalinosTerrosos); }
.transicaoExterna     { background-color: var(--transicaoExterna); }
.representativos      { background-color: var(--representativos); }
.semiMetais       { background-color: var(--semiMetais); }
.gasesNobres       { background-color: #ffd6ff; }
.lantanideos       { background-color: var(--lantanideos); }
.naoMetais   { background-color: var(--naoMetais); }
.actinideos        { background-color: var(--actinideos); }
.desconhecidos       { background-color: var(--desconhecidos); }
.VerticalInner      { background-color: var(--divider); border-color: var(--divideroutline); }
.lantanideosDentro{
    
  /*  background-color: var(--lantanideos);*/
}

.actinoidesDentro {
  /*  background-color: var(--actinideos);*/
    
}


/********* DENTRO DO ARTICLE (fim) **********/


/************************** DENDRO DO MAIN (fim) ********************************/
    



@supports (margin: clamp(5px, 2vw, 20vh)) {
    
    :root, footer { --quadrado:   calc(var(--larguraTela-quadrado) * max(var(--minimo) / var(--encolher-barralateral) / 100, var(--proporcaoTela))); }

.blocoPropriedades    {
    --proporcaoTela: min(calc(0.9vw + 0.1vh), calc(var(--grupos) * 0.092vh + 0.21vh));
        --encolher-barralateral: calc(1 - (var(--larguraTela-quadrado) + 2) / 100);


}  


    ol{
            font-size: max(1.8 * var(--proporcaoTela) * var(--encolher-barralateral) / var(--fatorGrupos), var(--fonte-minima) * var(--encolher-barralateral));

        
    }
    .atomo.fullscreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw; /* 80% da largura da tela */
    height: 100vh; /* 80% da altura da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    z-index: 999999;
    color: black;
    border-radius: 8px;
    /*padding: 20px;*/
    box-sizing: border-box;
    font-size: 3em; /* Aumenta a fonte para 5rem quando expandido */
    
    transition: transform 0.3s ease, font-size 0.3s ease; /* Adiciona transição suave */
}
    
}




@media (max-width: 768px) { /* Also in --min */
	main > article			{ overflow-x: auto;
	
	    
	    
	}
	
	.atomo.fullscreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw; /* 80% da largura da tela */
    height: 100vh; /* 80% da altura da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    z-index: 999999;
    color: black;
    border-radius: 8px;
    /*padding: 20px;*/
    box-sizing: border-box;
    font-size: 3em; /* Aumenta a fonte para 5rem quando expandido */
    
    transition: transform 0.3s ease, font-size 0.3s ease; /* Adiciona transição suave */
}

	
	
}



@media (max-width: 1365px) { /* --min * --groupfactor */
	:root:not([data-expansao="0"]) main > article { overflow-x: auto; }
}



@media (max-width: 1300px) { 

:root{
    
    --minimo: 690px;
}
    .blocoPropriedades                {
        --larguraTela-quadrado: 22;

    }
    
    body > *  {
    padding: 0 min((100% - 100 * var(--proporcaoTela)) / 2, (100% - var(--minimo) / var(--encolher-barralateral) * var(--fatorGrupos) - 0.7rem) / 2.1);

}

 
    
}




aside ul > li               {/* min-height: var(--row-height); */}



mostradorid > output > * { line-height: 1; display: block; font-style: normal; font-weight: normal; }
mostradorid .simboloQuimico, li > .simboloQuimico  { font-weight: 600; }






/************** CELULAR (inicio) ******************/

@media (max-width: 550px) {

:root{


    --minimo: 880px;
    

}


 

#logo {
    font-size: max(0.7rem, 10px);
    font-weight: bold;
    color: #333;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3ch; 
    /* Evite transições de width (causa reflow) */
}




	main > article			{ overflow-x: auto;
	
	    
	    
	}

.propriedadesDentroCaixinha{
    
    display: flex;
    height: 100%;
    justify-content: flex-start;
    flex-direction: column;
    position: absolute;
    right: 1px;
    top: 0px;

}
#reviewScreen {
  text-align: center;
  position: absolute;
          background: #292929;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: auto;
        padding: 2em;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin: none;
}




    .modal-content {
      background: #fff;
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
          justify-content: center;
    align-content: center;
    align-items: center;
      flex-direction: column;
              overflow: auto;

    }


.propriedadesDentroCaixinha span {

    /*font-size: max(0.25em, 3px);*/
    font-size: 0.2em;
    text-align: right;
           /* padding: 0.01rem 0px;*/
    line-height: 1;
    display: inline-block; /* Para consistência */

}



    .propriedadesDentroCaixinhaLegenda span{
        font-size: max(0.45em, 7px);
    text-align: right;
    display: none;
        padding: 0.01em 0px;
    line-height: 1;
    gap: 0.01em;
    
}

.propriedadesDentroCaixinhaLegenda .caixinhaEletronsCamadaLegenda,
.propriedadesDentroCaixinhaLegenda .caixinhaConfEletronicaLegenda{
    
        font-size: max(0.45em, 7px);

}

.CaixinhaLegenda span{
    
    display: none;
        font-size: max(0.45em, 7px);
        white-space: nowrap;
        color: grey;
        padding: 0.01em 0px;
        line-height: 1;

}


/*
#expandirCompactar{
        color: #0093ff;

        width: 35px;
    height: 35px;
}

*/
#barraPropriedades{
               width: 15px;
                height: 100%;
               
                background-color: #bafff7;   
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                z-index: 2;
                margin: 0.1rem calc(0.1rem* 1.8);
    
}

#botaoTabelaPaises,
#botaoTabelaUsos{

    padding: 7px;
    
}


#botaoTabelaUsos,
#botaoTabelaPaises,
#botaoTabelaEstruturaAtomica,
#botaoTabelaConfiguracaoEletronica,
#botaoTabelaCamadaEletronica,
#botaoTabelaEstadoFisico,
#botaoTabelaEletronegatividade,
#botaoTabelaEletroafinidade,
#botaoTabelaDensidade,
#botaoTabelaPontoFusao,
#botaoTabelaPontoEbulicao,
#botaoTabelaMassa,
#nomenclatura {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    outline: none;
    display: flex;
    text-align:center;
    align-items:center;
    width:max(2em, 36px);
    height:max(2em, 36px);
}







.dropdown-input {
    width: 10em;
    padding: 6px;
    box-sizing: border-box;
    font-size: max(0.7em, 16px);
    box-sizing: border-box; /* Inclui padding e border no tamanho total */
    border-radius: 0.5em;
    border: 1px solid #ddd;
    box-sizing: border-box;
    cursor: pointer;
}


    

aside{
    order: 0;
    height: auto;
    display:flex;
    flex-direction: column;
}


.tabelaCompleta{
    order:0;
            overflow: auto;
}


ul, ol{

       gap: max(0.01rem, 2px)

}

aside{
    
     display: none; 
     flex-basis: 50%;
     background-color: white;
    /* box-shadow: 0.08em 0.08em 0 rgba(116, 116, 116, 0.171), -0.04em -0.04em 0 rgba(116, 116, 116, 0.171);*/
    margin: 0px 4px;
    margin: 0.1rem calc(0.1rem* 1.8)
}


}

/*********  CELULAR (fim)  ***********/




.h{
    border-radius: 0.1em;

    grid-column: 1;
    grid-row: 1;
    background-color: var(--naoMetais);



}
.alc{
   /* writing-mode: vertical-lr;*/
   border-radius: 0.1em;

    grid-column-start: 1;
    grid-row: 2 / span 3;
    writing-mode: vertical-lr;
    background-color: var(--metaisAlcalinos);

    transition: filter 0.5s ease;
    width: 100%;

}
/*
.alcTexto{
    grid-column-start: 1;
    grid-row: 2 / span 4;
    writing-mode: vertical-lr;




}*/
.ter{
    
    border-radius: 0.1em;
    writing-mode: vertical-rl;
    grid-column: 2;
    grid-row:  2 / span 3;
    background-color: var(--metaisAlcalinosTerrosos);
    word-break:inherit;
    overflow-wrap:break-word;
}



.lan{
    border-radius: 0.1em;

    grid-column: 3 / span 7;
    grid-row: 6;
    background-color: var(--lantanideos);



}
.act{


    border-radius: 0.1em;


    grid-column: 3 / span 7;
    grid-row: 7;
    background-color: var(--actinideos);


}
.ext{
    grid-column: 3 / span 4;
    grid-row: 3 / span 2;
    background-color: var(--transicaoExterna);
    border-radius: 0.1em;


}

.rep{




    border-radius: 0.1em;

    grid-column: 7 / span 2;
    grid-row: 4;
    background-color: var(--representativos);








}
.sem{
    grid-column: 7 / span 2;
    grid-row: 3;
    background-color: var(--semiMetais);


    border-radius: 0.1em;

}


.nao{
    grid-column: 7 / span 2;
    grid-row: 2;
    background-color: var(--serieNaoMetais);
    border-radius: 0.1em;

}

.gas{
    writing-mode: vertical-lr;

    border-radius: 0.1em;

    grid-column: 9;
    grid-row: 1 / span 4;
    background-color: var(--gasesNobres);

}


/* posição no GRID das series quimicas*/




ul#seriesQuimicas{


    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-template-rows: 2;
    background-color: rgba(255, 221, 221, 0.507);
    justify-items: center;
    display: none;
   
    }
   


.seriesGasesNobres{

    grid-column: 14;
    grid-row: 1;
}
.seriesElementosRepresentativos{
    grid-column: 1 / span 10;
    grid-row: 1;

}
.seriesTransicaoExterna{
    grid-column: 11;
    grid-row: 1;


}
.seriesTransicaoInterna{
    grid-column: 12 / span 2;
    grid-row: 1;


}
.seriesMetaisAlcalinos{

    grid-column: 1;
    grid-row: 2;
}


.seriesMetaisAlcalinosTerrosos{

    grid-column: 2;
    grid-row: 2;
}


.seriesMetaisRepresentativos{

    grid-column: 3;
    grid-row: 2;
}


.seriesNaoMetais{

    grid-column: 4;
    grid-row: 2;
}


.seriesSemiMetais{

    grid-column: 5;
    grid-row: 2;
}



.seriesGrupoBoro{

    grid-column: 6;
    grid-row: 2;
}

.seriesGrupoCarbono{
    grid-column: 7;
    grid-row: 2;
}

.seriesGrupoNitrogenio{

    grid-column: 8;
    grid-row: 2;
}


.seriesCalcogenios{

    grid-column: 9;
    grid-row: 2;
}


.seriesHalogenios{

    grid-column: 10;
    grid-row: 2;
}



figure > strong{

    font-size: 3em;
}

ul > li > strong{


    font-size: 0.5em;
    text-align: left;
    align-items: left;
    justify-content: left;
    font-weight: normal;
    line-height: 1.2;


}

/* posição no GRID */

.regiaoCentral{
    border:none;
    grid-column: 4 / span 10;
    grid-row: 2 / span 3;
}




[data-expansao="15"] .regiaoCentral { grid-column-end: span 14; }




.g3 {
    grid-column-start: calc(var(--grupos) - 15);
}



.verticalTransicaoInterna > div {
    width: 50%; /* Cada div ocupa 50% da largura */
    display: flex;
    justify-content: center; /* Centraliza o conteúdo dentro de cada div */
    align-items: center; /* Alinha o conteúdo verticalmente */
}

.actinoidesFora,
.actinoidesDentro{
        grid-column-start: 4;
    grid-row: 8;
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    
}

.lantanideosFora,
.lantanideosDentro{
        grid-column-start: 4;
    grid-row: 7;
    font-size: 0.8em;
        display: flex;
    flex-direction: column;
    justify-content: space-between;
        cursor: pointer;

}

.actinoidesDentro strong,
.lantanideosDentro strong{
    
    font-size: max(0.6em, 6px);
}


.actinoidesDentro .simboloQuimico,
.lantanideosDentro .simboloQuimico{
    
    font-size: max(0.95em, 9.5px);
    text-align:center;
    margin: 0px;
}


.actinoidesFora{
            grid-column-start: 4;
    grid-row: 11;
    font-size: 0.8em;
    display: flex;
    justify-content: center;
    align-items: center


}


.lantanideosFora{
            grid-column-start: 4;
    grid-row: 10;
    font-size: 0.8em;
    display: flex;
    justify-content: center;
    align-items: center


}

.verticalTransicaoInterna > div > em {

  border: none;
    font-size: 0.6em;
    line-height:1;
  /*  writing-mode: vertical-rl;*/
    text-align:center;
  /*  padding: 5em 0px;*/
    color: hsl(0, 0%, 0%);
        /* Centralização com flexbox */
   /* margin-top: -5em;*/
    cursor: pointer;
    transition: transform 0.1s ease; /* Define a transição */
    grid-column-start: 4;
    grid-row: 7;


}

.verticalTransicaoInterna > div > strong:hover,
.verticalTransicaoInterna > div > em:hover {
     transform: scale(1.1);
}


.verticalTransicaoInterna > div > strong {

  
    font-size: 0.6em;
    line-height: 2;

    /*writing-mode: vertical-rl;*/
    text-align:left;
   /* padding: 5em 0px;*/
    color: hsl(0, 0%, 0%);
    text-align: center;

   /* margin-top: 5em;*/
    cursor: pointer;
    transition: transform 0.1s ease; /* Define a transição */
    grid-column-start: 4;
    grid-row: 8;
}


.verticalTransicaoInterna {
    display: flex;
    flex-direction: row;
    background-color: var(--actinideos);
    box-shadow: inset 0px -3em var(--actinideos), inset -1.4em 3.2em var(--lantanideos);
    grid-column-start: 4;
    grid-row: 7 / span 2;
    border: none;
}






.boxExtra{
    border:none;
    grid-column-start: 3;
    grid-row-start: 2;
}









.barraSobreNaoMetais{
    border:none;
    font-size: max(1em, 12px);
    align-self: center;
    text-align: center;
   grid-column-end: span 5;
   grid-row-start: 2;
   height: 100%;
   width: 100%;
   display:flex;
   
}


.barraSobreNaoMetais > select{
    
       background-color: #fafafa;
         width: 100%;

         /* Remove a seta padrão */
  appearance: none;       /* Para navegadores WebKit e Blink (Chrome, Safari, etc.) */
  -webkit-appearance: none;
  -moz-appearance: none;   /* Para navegadores Firefox */
  border: 0px;
  
}





.legenda{

    /*background-color: #f0f0f0;*/
    font-weight: bold;


font-size: 1.2em;
display: flex;
flex-direction: row;
/*line-height: 1.6;*/


grid-column: 1 / span 3;
grid-row: 9 / span 3;
border: 2px dotted rgba(0, 0, 0, 0.199);
/*margin: 0.2em 0.2em;
border-radius: 0.4em;
padding:0.2em;*/
margin: 3px 0.3em;

}

.legendaLinhaEstadoFisico{
    
    display: flex;
    flex-direction:row;
    justify-content: center;
align-items: flex-end;
justify-content: start;
gap: 0.6em;

}

.legendaLinhaEstadoFisico strong{
 
 font-size: max(0.7em, 8px);   
}




.nomesLegendas {
    
    display: flex;
    flex-direction: column;
 /* display: grid;
  grid-template-columns: repeat(2, 1fr); /* Define duas colunas de igual largura */
    text-align: center; /* Centraliza o texto dentro de cada div */
    background: #f9f9f9;
    border: 1px #e3e3e3;
border-style: none dashed none none;

    
    
}

.divLegendaSolido, 
.divLegendaLiquido,
.divLegendaGasoso, 
.divLegendaRadiativo, 

.divLegendaDesconhecido{
    
    cursor: pointer;
    font-size: max(1em, 10px);
    font-weight: normal;
   /* padding:5px 0px;*/
    width: 100%;
}

.divLegendaSolido{
    color: black;
}

.divLegendaLiquido{
    
    color: blue;
}

.divLegendaGasoso{
    
    color: red;
}


.divLegendaSolido:hover {
  background: black;
  color: white;
}

.divLegendaLiquido:hover {
  background: blue;
  color: white;
}

.divLegendaGasoso:hover {
  background: red;
  color: white;
}

.divLegendaDesconhecido:hover {
  background: grey;
  color: white;
}


.divLegendaRadiativo:hover {
  background: #d8ff85;
  color: black;
}

strong {
  font-weight: normal;
}

.divLegendaDesconhecido{
    
    color: #747474;
    /*text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;*/
}

.legenda > em{
    
    display: flex;
    justify-content:center;
        display:none;

}
.legendaLinhaEstadoFisico  {
    display: flex;
    align-items: center


}
.legendaLinhaEstadoFisico svg,
.legendaLinhaEstadoFisico img {
   margin-left: 3px;


}

.legendaSolido{
    font-weight: bold;

    color:black;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    
}

.legendaLiquido{
    font-size: 1em;
    font-weight: bold;

    color:rgb(0, 60, 224);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.legendaGasoso{
    font-size: 1em;
    font-weight: bold;
    

    color:rgb(194, 13, 0);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.legendaSolido img,
.legendaLiquido img,
.legendaDesconhecido img{
    
    width: 0.7em;
}

.legendaGasoso img{
    
    width: 0.8em;
}


.legendaLiquido img{
    
    width: 0.5em;
}


.legendaDesconhecido{
    font-size: 1em;
    font-weight: bold;

    color: #363636;
    display: flex;
    justify-content: center;
    align-items: flex-end;

}

.legenda > strong {


    font-size: 0.6em;
    font-weight:normal;
        font-weight: bold;

}


.legenda > em {


    font-size: 0.5em;
    display:none;
}






.barraDeSeparacaoLantAct{
    grid-column-end: span calc(var(--grupos) - 4);





}





.lantanideos{
    grid-row-start: 10;
}






.actinideos{
    grid-row-start: 11;
}


.Lantanideos5771{
    grid-column-start: 4;
    grid-row-start: 7;
    z-index: 2;


}


.Lantanideos6{



    grid-column-start: 4;
    grid-row-start: 10;


}



.actinideos89103{



    z-index: 2;
    grid-column-start: 4;
    grid-row-start: 8;
}


.actinideos7{




    grid-column-start: 4;
    grid-row-start: 11;
}




li.lantanideos{



    grid-row-start: 10;


}


li.actinideos{


    grid-row-start: 11;


}



header{

    background-color: #69c2c2;
    background-color: white;
    display: flex;

    width: 100%;
    overflow-x: auto; /* Permite rolar horizontalmente */
    white-space: nowrap; /* Evita que os elementos quebrem linha */
    flex-direction:row;
        align-items: center;
        justify-content: space-between;

}






button{
    /*margin: 0.6em;*/
    font-size: 0.8em;
    /*font-family:'Segoe Ui', Roboto, Arial, Helvetica, serif, sans-serif;*/
   
}