html, body {
    background-color: var(--cor-clara-nivel5);
}

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

img.logo-cebraspe {
    height: 4rem;
}

/* Formulários */

form {
    width: 42rem;
}

form > section.corpo > *:nth-child(n+2):nth-last-child(n+2) {
    margin: 1rem 0;
}

form > section.corpo > div.mensagem-usuario {
    margin: 0;
}

form > section.corpo fieldset {
    margin-left: 1rem;
    padding: 0.5rem 0;
    width: 100%;
    border: 1px solid var(--cor-escura-nivel5);
    border-radius: 0.75rem;
}

form > section.corpo fieldset > legend {
    margin-left: 1rem;
    padding: 0 0.5rem;
    color: var(--cor-escura-nivel1);
}

form > section.corpo label {
    padding: 0.125rem;
}

form > section.corpo ul.controles {
    list-style: none;
    padding: 0;
    margin: 0;
}

form > section.corpo ul.controles > li {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

form > section.corpo ul.controles > li > label {
    text-align: right;
    margin-right: 0.5rem;
}

/* Formulário de autenticação do primeiro fator */

form#formulario-autenticacao-primeiro-fator {
    display: block; /* Layout: display: block; */
}

form#formulario-autenticacao-primeiro-fator > header {
    background-image: url(../imagens/icones/autenticacao/cadeado.svg);
}

form#formulario-autenticacao-primeiro-fator > section.corpo,
form#formulario-autenticacao-primeiro-fator > aside {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
}

form#formulario-autenticacao-primeiro-fator > section.corpo ul.controles > li > label {
    min-width: 4.5rem;
}

form#formulario-autenticacao-primeiro-fator input#nome-usuario {
    width: 7.5rem;
    margin-right: 0.5rem;
}

form#formulario-autenticacao-primeiro-fator input#senha {
    width: 27rem;
}

form#formulario-autenticacao-primeiro-fator > aside.primeiro-acesso-esqueci-minha-senha {
    background-color: var(--cor-clara-nivel1);
}

#logo-evento {
    height: 2rem;
}

#logo-cliente-1 {
    height: 2.5rem;
}

#logo-cliente-2 {
    height: 2rem;
}

#logo-cliente-3 {
    height: 5rem;
}

/* Formulário de primeiro acesso ou esquecimento de senha */

form#formulario-primeiro-acesso-ou-esquecimento-senha {
    display: none; /* Layout: display: block; */
}

form#formulario-primeiro-acesso-ou-esquecimento-senha > header {
    background-image: url(../imagens/icones/autenticacao/cadeado.svg);
}

form#formulario-primeiro-acesso-ou-esquecimento-senha > section.corpo > section {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

form#formulario-primeiro-acesso-ou-esquecimento-senha > section.corpo ul.controles > li > label:first-child {
    min-width: 6.5rem;
}

form#formulario-primeiro-acesso-ou-esquecimento-senha input#cpf-validacao {
    width: 7.5rem;
    margin-right: 0.5rem;
}

form#formulario-primeiro-acesso-ou-esquecimento-senha input#email-validacao {
    width: 25rem;
}

form#formulario-primeiro-acesso-ou-esquecimento-senha li#item-lista-controles-codigo-validacao-cpf-email {
    display: none; /* Layout: display: flex; */
}

form#formulario-primeiro-acesso-ou-esquecimento-senha input#codigo-validacao-cpf-email {
    width: 4.5rem;
}

form#formulario-primeiro-acesso-ou-esquecimento-senha li#item-lista-controles-nova-senha {
    display: none; /* Layout: display: flex; */
}

form#formulario-primeiro-acesso-ou-esquecimento-senha input#nova-senha {
    width: 9.75rem;
    margin-right: 0.75rem;
}

form#formulario-primeiro-acesso-ou-esquecimento-senha input#nova-senha-de-novo {
    width: 9.75rem;
}

form#formulario-primeiro-acesso-ou-esquecimento-senha > section.corpo > div.mensagem-usuario {
    margin-bottom: 0;
}

/* Formulário de instalação do aplicativo gerador de senha única baseada em tempo */

form#formulario-instalacao-configuracao-aplicativo-segundo-fator {
    display: none; /* Layout: display: block; */
}

form#formulario-instalacao-configuracao-aplicativo-segundo-fator > header {
    background-image: url(../imagens/icones/autenticacao/cadeado.svg);
}

form#formulario-instalacao-configuracao-aplicativo-segundo-fator > section.corpo > h1 {
    margin-bottom: 1rem;
}

form#formulario-instalacao-configuracao-aplicativo-segundo-fator > section.corpo > section {
    display: flex;
    padding: 0;
}

form#formulario-instalacao-configuracao-aplicativo-segundo-fator > section.corpo > section > img {
    margin-right: 1rem;
}

/* Seção com link para nagegação entre as telas */

section#secao-navegacao-formularios {
    display: none;
    margin-top: 1rem;
}

section#secao-navegacao-formularios > button#botao-navegacao-formularios {
    background: none;
    border-style: none;
    padding: 0;
    cursor: pointer;
    color: var(--cor-escura-nivel1);
    text-decoration: underline;
}