.div1{
  height:275px;
  max-width:100%;
  background: linear-gradient(#CCCCCC, #000000);
  color:white;
  text-align: center;
  border: 2px solid grey;
}
.h11{
  font-size:8vw;
 max-width: 100%;
 color:white;
}
.forl{
  font-size:4vw;
 max-width: 100%;
}
.footer{
  height:100px;
  width:100%;
  background: linear-gradient(#CCCCCC, #000000);
  color:white;
  text-align:center;
  line-height:100px;
  border: 2px solid grey;
}
.p1{
  color:white;
}




.Div1{
max-width:100%;
height:300px;
display:flex;
justify-content: center; 
align-items: center; 
gap: 20px;


padding: 20px; border: 5px solid transparent; border-radius: 15px; 
background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #CCCCCC, #000000); 
background-origin: border-box; background-clip: padding-box, border-box;
}


.Div2{
width:25%;
height:250px;

  display: flex;
  flex-direction: column;

padding: 20px; border: 5px solid transparent; border-radius: 15px; 
background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #c6f8ff, #6b76ff); 
background-origin: border-box; background-clip: padding-box, border-box;
}

.h4leeeetre {
  margin-top: auto;
  background: linear-gradient(to right, #c6f8ff, #6b76ff);
  color:#000000;
  text-align:center;
}
.h4leeeetre:hover{
background:#DA70D6;
}

.Divimg{
text-align:center;
}
.imgns{
height:100px;
width:100px;
border-radius:8px;
}









.Upload{ width:250px; height:25px; border:solid 2px black; text-align:center; color:white; background:black; } 
.Btn2{ width:254px; height:50px; background:black; color:white; visibility: hidden; box-shadow: 0 0 10px #CCCCCC, 0 0 20px #FFFFFF inset; }


.pesqsearch{ width:100%; height:120px; background:#0d0d0d; color:#FFFFFF; border:2px solid #CCCCCC; border-radius:10px; padding:10px; box-sizing:border-box; overflow:auto; white-space:pre; font-family:Consolas, monospace; font-size:13px; box-shadow: 0 0 10px #CCCCCC, 0 0 20px #FFFFFF inset; } 
.pesqsearch1{ width:100%; height:40px; background:#0d0d0d; color:#FFFFFF; border:2px solid #CCCCCC; border-radius:10px; padding:10px; box-sizing:border-box; overflow:auto; white-space:pre; font-family:Consolas, monospace; font-size:13px; box-shadow: 0 0 10px #CCCCCC, 0 0 20px #FFFFFF inset; } 
.meuCanvas{ width:250px; height:250px; border:solid 2px black; }


.mc{
width:100%;
height:275px;
text-align:center;
}


.RESP1{

    width:100%;
    height:120px;

    background:#0d0d0d;

    color:#FFFFFF;

    border:2px solid #CCCCCC;

    border-radius:10px;

    padding:10px;

    box-sizing:border-box;

    overflow:auto;

    white-space:pre;

    font-family:Consolas, monospace;

    font-size:13px;

    box-shadow:
        0 0 10px #CCCCCC,
        0 0 20px #0d0d0d inset;
}

.inp1{
width:250px;
height:25px;
}

.optons{
width:100%;
height:40px;
text-align:center;
}
.imgsoptons{
width:45px;
height:100%;
border-radius:8px;
}
.imgsoptons:hover{
  background: linear-gradient(#FFFFFF, #333333); /* cores mais claras */
  transform: scale(1.05); /* aumenta levemente */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* sombra */
}

.calculator{
background:#000000; 
color:#FFFFFF; 
border:2px solid #CCCCCC;
}

.LateLong {
    display: flex;
    width: 100%;
    height: 40px;
    border: solid 2px grey;
    text-align: center;
    background: black;
    gap: 5px; /* Adiciona espaço entre os elementos */
    padding: 5px;
}

.canvasMeu01 {
    height:350px;
    width: 100%;
    border: solid 2px grey;
    background: #f0f0f0; /* Fundo para o canvas */
}

.Lati1, .Longi1 {
    background: linear-gradient(#DCDCDC, #FFFFFF);
    color: black;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    padding: 0 10px;
    border: 1px solid #888;
    min-width: 100px; /* Largura mínima */
}

.Lati1::placeholder, .Longi1::placeholder {
    color: black;
    font-size: 14px;
}

.Btn1 {
    width: 120px; /* Ajustei para caber melhor */
    height: 100%;
    border: solid 2px black;
    text-align: center;
    color: white;
    background: black;
    border-radius:8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.Btn1:hover {
    background: #333;
    border-color: #555;
}


.imgsoptons1{
width:45px;
height:50px;
}

.templa{
text-align:center;
}


.RESPC{

    width:100%;
    height:120px;

    background:#0d0d0d;

    color:#FFFFFF;

    border:2px solid #CCCCCC;

    border-radius:10px;

    padding:10px;

    box-sizing:border-box;

    overflow:auto;

    white-space:pre;

    font-family:Consolas, monospace;

    font-size:13px;

    box-shadow:
        0 0 10px #CCCCCC,
        0 0 20px #0d0d0d inset;
}


.percptback{
background:#000000;
text-align:center;
}
.icon{
  width:350px;
  height:350px;
    animation: cyber 4s infinite alternate;
}

@keyframes cyber{

    0%{
        filter:none;
    }

    100%{
        filter:
            grayscale(100%)
            brightness(1.25)
            contrast(.85);
    }

}

.TeG{
text-align:center;
border:2px solid black;
background:#000000;
}





.Canvas_formas {
    width: 300px;
    height: 300px;
    position: relative;
}

.imgsoptons1 {
    width: 45px;
    height: 50px;
    cursor: pointer;
    margin: 5px;
    transition: transform 0.2s;
}

/* Efeito visual ao passar o mouse nas formas */
.imgsoptons1:hover {
    transform: scale(1.1);
}

.formas10 {
    width: 100%;
    height: 60px; /* Aumentado para dar espaço às imagens de 50px */
    display: flex; /* Mudado de none para flex para funcionar o alinhamento */
    text-align: center;
    justify-content: center;
    align-items: center;
    background: black;
}

/* Garante que o canvas ocupe o espaço correto do container */
.mc {
    width: 100%;
    height: 100%;
    text-align:center;
}

.meuCanvas {
    width:300px;
    height:300px;
}
.objts3D{
text-align:center
}
.canvcanv {
  display: flex;       /* Ativa o Flexbox */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;    /* Centraliza verticalmente */
}

.myCanvaS3D {
  width: 600px;
  height: 600px;
  border: 2px solid black;
  display: block; /* Pode manter o block aqui sem problemas agora */
  background: white;
  cursor: grab;
}









/* Container da tabela */
#espaco-tabela {
    background-color: #000000;
    color: #ffffff; /* Garante que todo texto dentro da div seja branco */
    padding: 15px;
    border-radius: 8px; /* Opcional: deixa os cantos da área pretos arredondados */
}

/* Configurações estruturais da Tabela */
#espaco-tabela table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Permite que as colunas se dimensionem conforme o texto */
    margin-top: 10px;
}

/* Regras para TODAS as células (Cabeçalho e Dados) */
#espaco-tabela th, 
#espaco-tabela td {
    padding: 12px 10px;
    text-align: left;
    color: #ffffff; /* Força a cor branca em navegadores que herdam estilos antigos */
    
    /* Quebra de texto e ajuste automático */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    
    /* Linha divisória sutil para não ficar tudo jogado no fundo preto */
    border-bottom: 1px solid #333333; 
}

/* Estilo exclusivo do Cabeçalho (Th) */
#espaco-tabela th {
    background-color: #1a1a1a; /* Cinza bem escuro para contrastar com o fundo preto */
    font-weight: 600;
    border-bottom: 2px solid #4EA8DE; /* Linha azul (combina com a cor do seu gráfico) */
}

/* Efeito visual opcional: Destaca a linha quando você passa o mouse */
#espaco-tabela tbody tr:hover {
    background-color: #0c0c0c;
}





.saveslocal{

    width:100%;
    height:120px;

    background:#0d0d0d;

    color:#FFFFFF;

    border:2px solid #CCCCCC;

    border-radius:10px;

    padding:10px;

    box-sizing:border-box;

    overflow:auto;

    white-space:pre;

    font-family:Consolas, monospace;

    font-size:13px;

    box-shadow:
        0 0 10px #CCCCCC,
        0 0 20px #0d0d0d inset;
}