/* Estilos gerais */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #3c4350, #353a46);
}

.header {
    text-align: center; /* Centraliza o conteúdo horizontalmente */
    margin-top: 20px; /* Espaçamento superior */
}

.title-box {
    padding: 10px;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(3, 3, 3, 0.3);
    background: linear-gradient(to bottom, #596275, #a7a5a5);
    font-family: Times New Roman;
    transition: transform 0.3s ease; /* Adiciona uma transição suave à propriedade transform */
    color :aquamarine
}

.title-box:hover {
    transform: scale(1.1); /* Aumenta a escala do elemento em 10% quando o mouse está sobre ele */
}


.box {
    /*border: 2px solid #333;  Adiciona uma borda sólida */
    padding: 20px; /* Adiciona preenchimento interno */
    margin: 20px; /* Adiciona margem ao redor da caixa */
    border-radius: 10px; /* Adiciona cantos arredondados */
    background: linear-gradient(to bottom, #7f8c8d, rgb(160, 159, 159));;
    box-shadow: 0 0 30px rgba(3, 3, 3, 0.3);
    transition: background-color 0.1s ease; 
    
}
.box:hover {
    background: linear-gradient(to bottom, #a7a5a5, #596275);
    
}



.box2 {
    display: inline-block; /* exibe as caixas em linha */
    /*border: 2px solid #333;  Adiciona uma borda sólida */
    padding: 20px; /* Adiciona preenchimento interno */
     /* Adiciona margem à direita da caixa */
    border-radius: 10px; /* Adiciona cantos arredondados */
    background: linear-gradient(to bottom, #7f8c8d, rgb(160, 159, 159));
    box-shadow: 0 0 30px rgba(3, 3, 3, 0.3);
    transition: background-color 0.1s ease; 
}

.box2:hover {
    background: linear-gradient(to bottom, #a7a5a5, #596275);
}




@keyframes animateTitle {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}


.box2 {
    margin: 20px;
    margin-left: 14%;
    text-align: center;
}





#orcamento_title {
    text-align: center; /* Define o alinhamento do texto como centralizado */
}


#logo {
    position: fixed;
    top: 30px; /* Distância do topo */
    right: 17px; /* Distância da direita */
    width: 100px; /* Largura fixa da imagem */
    height: auto; /* Altura ajustada automaticamente para manter a proporção */
    animation: floatAnimation 3s ease-in-out infinite alternate; /* Adiciona a animação */
    opacity: 0.5; /* Define a opacidade da marca d'água */
    pointer-events: none; /* Garante que a marca d'água não seja clicável */
}

/* Adiciona animação de flutuação */
@keyframes floatAnimation {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

#logo2 {
    position: fixed;
    top: 30px; /* Distância do topo */
    left: 17px; /* Distância da esquerda */
    width: 100px; /* Largura fixa da imagem */
    height: auto; /* Altura ajustada automaticamente para manter a proporção */
    animation: floatAnimation2 3s ease-in-out infinite alternate; /* Adiciona a animação */
    opacity: 0.5; /* Define a opacidade da marca d'água */
    pointer-events: none; /* Garante que a marca d'água não seja clicável */
}

/* Adiciona animação de flutuação */
@keyframes floatAnimation2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}

h2 {
    color: #050505; /* Altera a cor do texto para um tom de roxo */
    font-size: 35px; /* Altera o tamanho da fonte para 24 pixels */
    font-family: Arial, sans-serif; /* Altera a família da fonte */
    
}

.scrollable-table {
    max-height: 300px; /* Altura máxima da tabela */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se necessário */
    border-collapse: collapse;
}

.container {
    margin: 20px;
}


/* Estilos dos botões de pesquisa */
#pesquisar_empresa,
#botao_pesquisar {
    padding: 8px 16px;
    font-size: 16px;
    background-color: #424857; /* Alterado para azul */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: transform 0.3s, background-color 0.3s ;
    
}

#pesquisar_empresa:hover,
#botao_pesquisar:hover {
    background-color: #8b97b1; /* Alterado para uma tonalidade mais escura de azul quando hover */
    transform: scale(1.1);
}

#botao_salvar_json {
    padding: 8px 16px;
    font-size: 16px;
    background-color: #424857; /* Cor de fundo azul */
    color: white; /* Texto branco */
    border: none;
    cursor: pointer;
    margin-top: 10px; /* Adicionando um espaçamento superior */
    margin-bottom: 10px;
    border-radius: 5px;
    margin-left: auto; /* Centralizando na tela horizontalmente */
    margin-right: auto; /* Centralizando na tela horizontalmente */
    display: block; /* Definindo como bloco de nível */ 
    transition: transform 0.3s, background-color 0.3s ;
}

#botao_salvar_json:hover {
    background-color: 	#8b97b1; /* Cor mais escura quando hover */
    transform: scale(1.1);
    
}

/* Estilos da tabela */
table {
    width: 100%;
    max-height: 300px; /* Altura máxima da tabela */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se necessário */
    border: 1px solid #ddd;
    color: rgb(250, 252, 252)
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #a4b0be;
    position: sticky;
    top: 0;
    z-index: 1; /
}

/* Estilos da tabela de destino */
.table-container {
    width: 100%;
    max-height: 300px; /* Altura máxima da tabela */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se necessário */
    border: 1px solid #ddd; /* Adicione borda para separar visualmente a tabela */
}

#tabela_destino {
    width: 100%;
    border-collapse: collapse;
}

#tabela_destino th,
#tabela_destino td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

#tabela_destino th {
    background-color: #a4b0be;
    position: sticky;
    top: 0;
    z-index: 1; /
}

/* Estilos do modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(128, 124, 124);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background: linear-gradient(to bottom, #5c677a, #353a46);
    margin: 15% auto;
    padding: 20px;
    
    
    border-radius: 9px;
    color: #ffffff;
    opacity: 0.9; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    width: 40%;
    
}

.close {
    color: #808080;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: rgb(124, 120, 120);
    text-decoration: none;
    cursor: pointer;
}

#modal-content {
    text-align: center;
}


.my-button {
    background-color: #4CAF50; /* Cor de fundo padrão */
    color: white; /* Cor do texto */
    padding: 10px 20px; /* Espaçamento interno */
    border: none; /* Sem borda */
    border-radius: 5px; /* Borda arredondada */
    cursor: pointer; /* Cursor ao passar */
    font-size: 16px; /* Tamanho da fonte */
    transition: transform 0.3s, background-color 0.3s ;
}

.my-button:hover {
    background-color: rgba(53, 150, 56, 0.664); /* Cor mais escura quando hover */
    transform: scale(1.1);
}