body {
    background-image: url('https://pbs.twimg.com/media/ESQr2rTX0AIhVOz?format=jpg&name=900x900');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    background-attachment: fixed;
    background-color: #d9d9e3;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte mais moderna */
}

.container {
    text-align: center;
    padding: 20px;
}

.itens {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    background: #ffffffc7; /* Fundo levemente transparente */
    padding: 10px;
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.subTitulos {
    margin: 10px;
    font-weight: 600; /* Texto em negrito */
}

.box-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px; /* Ajusta o espaçamento entre os inputs */
    margin-bottom: 10px; /* Espaçamento entre as linhas de boxes */
}

.box-input {
    flex-grow: 1;
    max-width: 120px; /* Limita a largura máxima de cada input */
}

.box_input {
    width: 100%;
    max-width: 150px;
    margin: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px; /* Bordas arredondadas */
}

#tipo_dos_box {
    justify-content: left;
    align-items: left;
}

#testes_, #descriptografia, #cod_unitario, #configuracao, #geracao_cartao, #mini_smart_wifi, #ativardes {
    border: 2px solid #007bff;
    max-width: 350px;
    margin: 20px auto;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 10px; /* Bordas arredondadas */
    background: #ffffffc7; /* Fundo levemente transparente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

#gerar_cartoes, #form_cod_unitario, #form_descriptografia, #form_mini_smart_wifi, #form_ativar_desativar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    padding: 10px;
}

#gerar_cartoes input, #form_cod_unitario input, #form_descriptografia input, #form_ativar_desativar, #form_mini_smart_wifi input {
    margin: 10px 0;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px; /* Bordas arredondadas */
    width: calc(100% - 20px); /* Largura total menos padding */
}

#entrada_config button, #gerar_cartoes button, #form_ativar_desativar button, #form_cod_unitario button, #form_descriptografia button, #form_mini_smart_wifi button {
    margin: 10px 0;
    padding: 10px 20px;
    border: none;
    border-radius: 5px; /* Bordas arredondadas */
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transição suave para o botão */
}

#entrada_config button:hover,#gerar_cartoes button:hover, #form_cod_unitario button:hover, #form_descriptografia button:hover, #form_mini_smart_wifi button:hover {
    background-color: #0056b3; /* Cor mais escura ao passar o mouse */
}

.tabela-decodificacao {
    width: 100%; /* A tabela ocupa 100% da largura do contêiner */
    margin: auto;
    border-collapse: collapse;
    border: 1px solid #007bff;
}

.tabela-decodificacao td {
    border: 1px solid #007bff;
    text-align: left;
    padding: 8px;
}

.tabela-decodificacao .rotulo {
    font-weight: bold;
}

.tabela-decodificacao .valor {
    text-align: right; /* Alinha os valores à direita */
}

@media (max-width: 768px) {
    .itens {
        flex-direction: column;
        align-items: flex-start;
    }

    .box_input, #gerar_cartoes input, #form_cod_unitario input, #form_descriptografia input {
        width: 100%; /* Ajusta a largura para dispositivos móveis */
    }
}