/************************************************************************ Fontes ********************************************************************/

@font-face {
    font-family: 'grosso';
    src: url(../fontes/Meutas-Bold.otf);
}
@font-face {
    font-family: 'grosso2';
    src: url(../fontes/Fontfabric\ \ MullerNarrowMedium.otf);
}

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



/************************************************************************ Header ********************************************************************/

.navbar-nav .nav-link {
    margin: 20px;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 30px;
}

.navbar-nav .nav-link:hover {
    color: #FFD700 !important;
}

.navbar-nav .nav-link.active {
    color: #FFD700 !important;

}

.logo {
    margin-top: 10px;
    height: 85px;
}

.navbar {
    background-color: #f8f9fa;
}

.webicon {
    margin-left: 15px;
    width: 28px;
    /* Tamanho padrão */
    height: 28px;
    /* Tamanho padrão */
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Transições suaves */
    fill: #5a5a5aef;
    /* Cor padrão (cinza escuro) */
}

.webicon:hover {
    color: #5a5a5aef;
    transform: scale(1.2);
    /* Aumenta o tamanho */
    filter: brightness(1.9) sepia(5) saturate(5);
    /* Torna a imagem amarela */
}

/******* dropdown *******/

/* Remove a setinha do dropdown */
.navbar .dropdown-toggle::after {
    display: none;
    border: 0;
}

/* Remove as bordas e a sombra do dropdown */
.navbar .dropdown-menu {
    border: none;
    box-shadow: none;
    background-color: #f8f9fa;
    text-align: center;
    /* Centraliza o texto no menu dropdown */
}

/* Centraliza o texto dos itens do dropdown */
.navbar .dropdown-menu .dropdown-item {
    text-align: center;
    font-size: 13px;
    color: #5a5a5aef;
    font-weight: bold;
}

/* deixa a navbar fixa no topo*/
.menu {
    background-color: #f8f9fa;
    color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 15;
}

.drop{
    padding: 6px !important;
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #f8f9fa;
}

/* Centraliza as logos */
.logos {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: -10px;
}

/* Centraliza a barra de navegação */
.navbar {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Centraliza os links */
.navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Remove a cor azul ao clicar no item do dropdown */
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active {
    background-color: #f8f9fa;
    /* Cor de fundo desejada */
    outline: none;
    /* Remove o contorno padrão */
    box-shadow: none;
    /* Remove qualquer sombra que possa aparecer */
}

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



/***************************************************************** Tabelas ******************************************************************************/

.table-container1 {
    font-size: 20px;
    width: 600px;
    font-family: 'grosso2';
    margin-left: 15px;
    margin-top: 20px;

}
.table-container2{
    font-family: 'grosso2';
    font-size: 20px;
    width: 600px;
    margin-right: 15px;
    margin-top: 20px;

}

.conteiner2{
    display: flex;
    justify-content: center; /* Centralizar as tabelas */
}

th, td {
    padding: 5px;
}

.td{
    border: none; /* Remove as bordas internas */

}

.th1{
    height: 70px; /* Ajuste a altura conforme necessário */
    padding: 10px; /* Aumenta o espaçamento interno */
    font-size: 1.2em; /* Aumenta o tamanho da fonte, se desejado */
    background-color: #f0f0f0; /* Adiciona uma cor de fundo, se desejado */
    text-align: left; /* Alinha o texto à esquerda, ajuste conforme necessário */
    background-color: #FFD700;

}


/* Alternar cores de fundo para as linhas */
tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Cinza claro */
}

tbody tr:nth-child(odd) {
    background-color: #e0e0e0; /* Cinza escuro */
}

/************* Tabela oculta **************/

.hidden-row {
    display: none;
}

.expand-button {
    cursor: pointer;
    background-color: #FFD700;
    color: #333;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    font-weight: bold;
    border-radius: 5px;
    width: 90%;
    transition: background-color 0.3s;
}

.expand-button:hover {
    background-color: #e0c600;
}



/******************************************************************* tabelas informativas *****************************************************************************/


.tabela-container {
    display: flex;
    justify-content: center; /* Centralizar as tabelas */
}

/* Estilo para a primeira linha da tabela1 (cabeçalho) */
.tabela1 th {
    border: none; /* Removendo a borda do título */
    background-color: #FFD700; /* Fundo amarelo para o título */
    padding: 3px; /* Reduzindo o padding */
    
}

/* Estilo apenas para a primeira linha (cabeçalho) da tabela1 */
.tabela1 tr:first-child th {
    background-color: #FFD700; /* Fundo amarelo */

}

/* Estilo para a segunda linha da tabela1 (sem fundo amarelo) */
.tabela1 tr:nth-child(2) td {
    background-color: transparent; /* Remover fundo amarelo */
}

/* Estilo para a linha "Informações" da tabela2 */
.tabela2 tr:first-child {
    background-color: #FFD700; /* Fundo amarelo */

}
.tabela2 {
    font-size: 20px;
    width: 600px;
    height: 500px;
    font-family: 'grosso2';
    margin-left: 15px;
    margin-top: 20px;

}
.tabela1{
    font-family: 'grosso2';
    font-size: 18px;
    width: 450px;
    height: 200px;
    margin-right: 15px;
    margin-top: 20px;

}
.tabela1 th {

    padding: 4px; /* Reduzindo o padding */
    font-size: 18px; /* Ajustando o tamanho da fonte, se necessário */
    text-align: center; /* Centralizando o texto */
}

.tabela2 td {
    text-align: center; /* Centralizando o texto */
}

.tabela2 tr:first-child {
    background-color: #FFD700; /* Fundo amarelo */
    font-weight: bold; /* Deixando o texto em negrito */
}

.tabela2 .td2{
    padding: 3px; /* Aumentando o padding para dar mais espaço */
    text-align: center; /* Centralizando o texto */
}




/*********************** titulos da tabela **********************/

.titulo1{
    text-align: center;
    background-color:#eaeaec;
    transition: color 0.3s; /* Suaviza a transição da cor */
    color: rgb(126, 124, 124);
    font-family: "grosso";

}

.titulo1:hover {
    color: #7d60ff; /* Amarelo */
}

.hidden-row {
    display: none;
  }
  
  .hidden-row.visible {
    display: table-row;
  }

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



/**************************************************************** Formulario **********************************************************************************************/


.conteiner3 {
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    font-family: "grosso";
    color: rgb(126, 124, 124);
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100px;
    transition: color 0.3s; /* Suaviza a transição da cor */
}

.conteiner3:hover {
    color: #7d60ff; /* Amarelo */
}

.bodi{
    background-color:#eaeaec;
}

.conteiner4 {
    display: flex;               /* Ativa o uso de flexbox */
    justify-content: center;     /* Centraliza os formulários horizontalmente */
    align-items: flex-start;     /* Alinha os itens no topo */
    padding: 20px;               /* Adiciona espaço interno */
    gap: 20px;                   /* Espaço entre os formulários */
    width: 100%;                 /* Garante que ocupe toda a largura da página */
    flex-wrap: wrap;             /* Permite que os elementos quebrem linha em telas menores */
}

.form-title {
    text-align: center;          /* Centraliza o texto do título */
    font-size: 24px;             /* Define o tamanho da fonte do título */
    margin-bottom: 20px;         /* Espaço entre o título e os formulários */

}

.formulario1, .formulario2 {
    margin-top: -25px;
    width: 100%;                  
    padding-bottom: 50px;               /* Adiciona preenchimento interno */
    padding: 60px;
    background-color: #fff;      /* Cor de fundo */
    box-sizing: border-box;      /* Inclui padding na largura */
    border-top-left-radius: 10px;  /* Arredonda a borda superior esquerda */
    border-top-right-radius: 10px; /* Arredonda a borda superior direita */
    border-bottom-left-radius: 10px;  /* Arredonda a borda superior esquerda */
    border-bottom-right-radius: 10px; /* Arredonda a borda superior direita */
}

.formulario1{
    margin-bottom: -120px;
}

.formulario2{
    margin-bottom: -60px;
}

form {
    margin: 0;                   /* Remove margens do formulário */
    font-family: 'grosso2', sans-serif; /* Aplica a fonte "GROSSO" apenas ao formulário */
    margin-bottom: 20px;


}


.form-control:focus {
    border-color: #FFD700 !important;         /* Altera a cor da borda ao focar */
    box-shadow: 0 0 5px #FFD700 !important;  /* Adiciona uma sombra amarela ao focar */

}

#inputPeso, #inputValor {
    width: 100%; /* Aumenta a largura em 155% */
}

label[for="inputPeso"] {
    margin-left: 3px;
}

label[for="inputValor"] {
    margin-left: 101px;
}

/* Centraliza o botão */
.button-container {
    display: flex;
    justify-content: center;   /* Centraliza o botão horizontalmente */
}

button[type="submit"] {
    background-color: #FFD700;  /* Cor de fundo amarelo */
    color: #fff;                 /* Cor do texto, ajustada para branco para melhor contraste */
    border: none;                /* Remove borda padrão */
    padding: 10px 20px;         /* Ajusta o preenchimento do botão */
    border-radius: 5px;         /* Adiciona bordas arredondadas */
    cursor: pointer;             /* Muda o cursor para indicar que é clicável */
    width: 50%;                  /* Ajuste de largura do botão, opcional */
}

button[type="submit"]:hover {
    background-color: #FFC300;   /* Cor de fundo ao passar o mouse */
}

.valor{
    margin-left: 20px;
}

.form-title {
    color: #FFD700;
    align-items: center;
    display: flex;
    text-align: center; /* Centraliza o texto */
    font-size: 30px;    /* Tamanho da fonte */
    margin-bottom: 20px; /* Espaço abaixo do título */
    margin-top: -23px;
}


#inputValor{
    width: 137%;
    margin-left: 40px;
}

#inputPeso{
    width: 130%;
}