:root {
    --cor-escura-nivel1: rgb(0, 61, 118); /* 100% */
    --cor-escura-nivel2: rgb(25, 80, 131); /* 90% */
    --cor-escura-nivel3: rgb(51, 99, 145); /* 80% */
    --cor-escura-nivel4: rgb(76, 118, 158); /* 70% */
    --cor-escura-nivel5: rgb(102, 138, 172); /* 60% */
    --cor-clara-nivel1: rgba(242, 245, 248); /* 5% */
    --cor-clara-nivel2: rgba(229, 235, 241); /* 10% */
    --cor-clara-nivel3: rgba(217, 226, 234); /* 15% */
    --cor-clara-nivel4: rgba(204, 216, 227); /* 20% */
    --cor-clara-nivel5: rgba(191, 206, 220); /* 25% */
}

/* Elementos genéricos */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1,
h2 {
    font-weight: normal;
    margin: 1rem 0 0.5rem;
}

h1 {
    font-size: 1.25rem;
    color: var(--cor-escura-nivel1);
}

h2 {
    font-size: 1.15rem;
    color: var(--cor-escura-nivel3);
}

h3 {
    font-size: 1.05rem;
    color: var(--cor-escura-nivel5);
}

p {
    margin: 0.25rem 0;
}

ol, ul {
    margin-left: 1.25rem;
}

ol > li,
ul > li {
    padding-bottom: 0.125rem;
}

ol > li > ul,
ul > li > ul {
    list-style-type: square;
}

ol > li > ul > li > ul {
    list-style-type: disc;
}

a {
    color: var(--cor-escura-nivel4);
}

a:visited {
    color: var(--cor-escura-nivel1);
}

sup {
    font-size: 0.75rem;
    text-decoration: underline;
}

/* Classes genéricas */

.kpi-esquerda,
.kpi-cima,
.situacao {
    background-size: 1.25rem;
    background-repeat: no-repeat;
}

.kpi-esquerda,
.situacao {
    background-position: 0 center;
    padding-left: 1.5rem;
}

.kpi-cima {
    background-position: center 0;
    padding-top: 1.5rem;
}

.kpi-esquerda.alto,
.kpi-cima.alto,
.situacao.normal {
    background-image: url(../imagens/icones/compartilhados/kpi-alto-situacao-normal.svg);
}

.kpi-esquerda.medio,
.kpi-cima.medio,
.situacao.atencao {
    background-image: url(../imagens/icones/compartilhados/kpi-medio-situacao-atencao.svg);
}

.kpi-esquerda.baixo,
.kpi-cima.baixo,
.situacao.problema {
    background-image: url(../imagens/icones/compartilhados/kpi-baixo-situacao-problema.svg);
}

.tarefa.concluida {
    color: #377d22;
}

.tarefa.pendente {
    color: #C00000;
}

.telefone-celular,
.telefone-residencial,
.telefone-trabalho {
    background-size: 1.25rem;
    background-position: 0 center;
    background-repeat: no-repeat;
    padding-left: 1.5rem;
}

.telefone-celular {
    background-image: url(../imagens/icones/compartilhados/telefone-celular.svg);
}

.telefone-residencial {
    background-image: url(../imagens/icones/compartilhados/telefone-residencial.svg);
}

.telefone-trabalho {
    background-image: url(../imagens/icones/compartilhados/telefone-trabalho.svg);
}

.formula {
    display: inline-block;
    background-color: var(--cor-clara-nivel1);
    border: 1px solid var(--cor-escura-nivel5);
    padding: 0.25rem 0.5rem;
}

.grande {
    font-size: 1.25rem;
}

/* Tarefa em execução */
.tarefa-em-execucao {
    display: none;
    height: 3.5rem;
    width: 100%;
    background-size: 2.25rem;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../imagens/icones/compartilhados/tarefa-em-execucao.svg);
    margin: 1rem 0;
}

.tarefa-em-execucao.branco {
    background-image: url(../imagens/icones/compartilhados/tarefa-em-execucao-branco.svg);
}


/* Mensagem para usuário */
.mensagem-usuario {
    display: none; /* Layout: display: flex; */
    align-items: center;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.75rem;
    padding: 0.5rem;
    margin: 1rem 0;
}

.mensagem-usuario > .icone {
    border-width: 0.25rem;
    border-style: solid;
    border-radius: 1.25rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    background-size: 1.5rem;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
}

.mensagem-usuario.advertencia {
    border-color: #f5931B;
    background-color: #FEF4E9;
}

.mensagem-usuario.advertencia > .icone {
    border-color: #f5931B;
    background-image: url(../imagens/icones/mensagem-usuario/advertencia.svg);
}

.mensagem-usuario.informacao {
    border-color: #01579C;
    background-color: #EFF3F9;
}

.mensagem-usuario.informacao > .icone {
    border-color: #01579C;
    background-image: url(../imagens/icones/mensagem-usuario/informacao.svg);
}

.mensagem-usuario.erro {
    border-color: #C00000;
    background-color: #FAE8E7;
}

.mensagem-usuario.erro > .icone {
    border-color: #C00000;
    background-image: url(../imagens/icones/mensagem-usuario/erro.svg);
}

.mensagem-usuario.sucesso {
    border-color: #377D22;
    background-color: #ECF2E9;
}

.mensagem-usuario.sucesso > .icone {
    border-color: #377D22;
    background-image: url(../imagens/icones/mensagem-usuario/sucesso.svg);
}

.mensagem-usuario.largura-fixa {
    width: 50rem;
}

.mensagem-usuario > .mensagem > * {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Estrutura da página web */

html,
button,
input,
select,
textarea {
    font-family: "Segoe UI", "-apple-system", BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif;
    font-size: 16px;
}

html,
body {
    height: 100vh;
    background-color: #fff;
}

body > section.conteiner {
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-size: 1rem;
}

body > section.conteiner > header,
body > section.conteiner > main {
    min-width: 100rem;
}

body > section.conteiner > header > form#formulario-cabecalho {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--cor-clara-nivel4);
    height: 4.75rem;
    border-top: 1px solid var(--cor-escura-nivel1);
    border-bottom: 1px solid var(--cor-escura-nivel1);
    border-radius: 0;
}

body > section.conteiner > header > form#formulario-cabecalho > #sistema-plataforma,
body > section.conteiner > header > form#formulario-cabecalho > #sessao,
body > section.conteiner > header > form#formulario-cabecalho > #usuario {
    min-height: 3.75rem;
    max-height: 3.75rem;    
    margin: 0 0.5rem;
}

body > section.conteiner > header > form#formulario-cabecalho > #logo-evento {
    height: 2rem;
    margin: 0 0.5rem;
}

body > section.conteiner > header > form#formulario-cabecalho > menu {
    margin: 0 0.5rem;
}

body > section.conteiner > header > form#formulario-cabecalho > #sistema-plataforma {
    flex: 1;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: center;
    font-size: 1.15rem;
    color: var(--cor-escura-nivel1);
    white-space: nowrap;
    min-width: 25rem;
}

body > section.conteiner > header > form#formulario-cabecalho > #sistema-plataforma > img {
    height: 3rem;
    margin-right: 1rem;
}

body > section.conteiner > header > form#formulario-cabecalho > section.info-icone-grande-esquerda-texto {
    background-color: var(--cor-clara-nivel1);
    padding: 0.5rem 1rem 0.5rem 3rem;
    border-radius: 0.5rem;
    background-size: 2.5rem;
    background-position: 0.25rem center;
    background-repeat: no-repeat;
}

body > section.conteiner > header > form#formulario-cabecalho > section#sessao {
    display: flex;
    align-items: center;
    background-image: url(../imagens/icones/cabecalho/sessao.svg);
}

body > section.conteiner > header > form#formulario-cabecalho > section#sessao > section > label[for="tempo-restante-sessao"],
body > section.conteiner > header > form#formulario-cabecalho > section#sessao > section > output#tempo-restante-sessao {
    display: block;
}

body > section.conteiner > header > form#formulario-cabecalho > section#sessao > section > output#tempo-restante-sessao.tempo-critico-sessao {
    color: #c00000;
}

body > section.conteiner > header > form#formulario-cabecalho > section#sessao > section > label[for="tempo-restante-sessao"] {
    font-weight: bold;
}

body > section.conteiner > header > form#formulario-cabecalho > section#sessao > img#restaurar-tempo-sessao {
    margin-left: 0.5rem;
    width: 1.5rem;
}

body > section.conteiner > header > form#formulario-cabecalho > section#usuario {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0.5rem 1rem 0.5rem 3rem;
    background-image: url(../imagens/icones/cabecalho/usuario.svg);
}

body > section.conteiner > header > form#formulario-cabecalho > section#usuario > output#nome-completo-usuario,
body > section.conteiner > header > form#formulario-cabecalho > section#usuario > output#perfis-usuario {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

body > section.conteiner > header > form#formulario-cabecalho > section#usuario > output#nome-completo-usuario {
    font-weight: bold;
    line-height: 0.85rem;
}

body > section.conteiner > header > form#formulario-cabecalho > button#botao-sair {
    color: #fff;
    background-color: var(--cor-escura-nivel3);
    margin: 0 0.5rem;
}

body > section.conteiner > header > form#formulario-cabecalho > button#botao-sair:hover {
    background-color: var(--cor-escura-nivel1);
}

/* Telas */

/* Avaliação */

body > section.conteiner > main {
    display: none; /* Layout - display: flex; */
    flex: 1;
    flex-direction: row;
}

body > section.conteiner > main > section#item-candidato,
body > section.conteiner > main > aside {
    max-height: calc(100vh - 4.75rem);
    overflow: auto;
}

body > section.conteiner > main > section#item-candidato {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--cor-clara-nivel1);
}

body > section.conteiner > main > section#item-candidato > section#ferramentas-avaliacao {
    display: flex;
    align-items: center;
    justify-content: stretch;
    border-bottom: 1px solid var(--cor-escura-nivel1);
    background-color: var(--cor-escura-nivel4);
    min-height: 4rem;
}

body > section.conteiner > main > section#item-candidato > section#ferramentas-avaliacao > section#secao-mascara,
body > section.conteiner > main > section#item-candidato > section#ferramentas-avaliacao > section#secao-vazia-oposta-mascara {
    width: 28.75rem;
    color: #fff;
    padding: 0 1rem;
}
 
body > section.conteiner > main > section#item-candidato > section#midias-item-candidato {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    height: calc(100vh - 4.75rem - 4rem);
    overflow: auto;
}

body > section.conteiner > main > section#item-candidato > section#midias-item-candidato > img {
    border: 1px solid #999;
    box-shadow: rgba(0, 0, 0, 0.25) 0 0 1rem;
}

body > section.conteiner > main > aside {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: var(--cor-clara-nivel4);
    border-left: 1px solid var(--cor-escura-nivel1);
}

body > section.conteiner > main > aside > section {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao {
    flex-direction: row;
    color: #fff;
    background-color: var(--cor-escura-nivel1);
    padding: 0.5rem;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao > button#botao-contrair-expandir-barra-lateral-avaliacao {
    border-style: none;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao > section#titulo-barra-lateral-avaliacao {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao > section#titulo-barra-lateral-avaliacao > section.titulo-principal {
    margin-left: 0.25rem;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao > section#titulo-barra-lateral-avaliacao > section.avaliacoes-hoje {
    display: flex;
    align-items: flex-start;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao > section#titulo-barra-lateral-avaliacao > section.avaliacoes-hoje > div#barra-progresso-avaliacoes-hoje {
    display: flex;
    margin: 0.25rem 0 0 0.5rem;
    height: 1rem;
    width: 7.5rem;
    border: 0.125rem solid #fff;
    border-radius: 0.5rem;
    background-color: #fff;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao > section#titulo-barra-lateral-avaliacao > section.avaliacoes-hoje > div#barra-progresso-avaliacoes-hoje > div#indicador-progresso-avaliacoes-hoje {
    background-color: var(--cor-escura-nivel3);
    width: 0%;
    border-radius: 0.375rem;
}

body > section.conteiner > main > aside > section#barra-titulo-barra-lateral-avaliacao > section#titulo-barra-lateral-avaliacao > section.meta-diaria-avaliacoes {
    margin-right: 0.25rem;
}

body > section.conteiner > main > aside > section > section#formularios-avaliacao {
    display: flex;
    flex-direction: column;
    width: 40rem;
}

body > section.conteiner > main > aside > section > section#formularios-avaliacao > menu#menu-formularios-avaliacao {
    align-self: center;
    margin: 0.5rem 0 1rem;
}

body > section.conteiner > main > aside > section > menu#menu-vertical-formularios-avaliacao {
    display: none; /* Layout - display: flex; */
}

body > section.conteiner > main > aside > section > section#formularios-avaliacao > form {
    margin-bottom: 1rem;
}

/* Tabelas */

/* Tabela de grade-específica */

table.grade-especifica {
    border-collapse: collapse;
}

table.grade-especifica > thead > tr > th,
table.grade-especifica > tbody > tr > td,
table.grade-especifica > tfoot > tr > th {
    border-width: 1px;
    border-style: solid;
}

table.grade-especifica > thead > tr > th,
table.grade-especifica > tfoot > tr > th {
    padding: 1rem 0.5rem;
}

table.grade-especifica > tbody > tr > td {
    padding: 0.375rem 0.5rem;
    vertical-align: middle;
}

table.grade-especifica > thead > tr > th,
table.grade-especifica > tfoot > tr > th {
    border-color: var(--cor-escura-nivel3);
    background-color: var(--cor-escura-nivel3);
    color: #fff;
    font-weight: normal;
    text-align: left;
}

table.grade-especifica > thead > tr > th > button.contrair-cima-expandir-baixo {
    background-color: var(--cor-escura-nivel3);
    background-image: url(../imagens/icones/compartilhados/contrair-expandir-baixo-branco.svg);
}

table.grade-especifica > thead > tr > th > button.contrair-cima-expandir-baixo:hover {
    background-color: var(--cor-escura-nivel5);
}

table.grade-especifica > tbody > tr.separador-inferior > td {
    border-bottom-width: 0.25rem;
}

table.grade-especifica > tbody > tr .forte {
    font-weight: bold;
}

table.grade-especifica > tbody > tr .enfase {
    font-style: italic;
}

table.grade-especifica > tbody > tr > td > button.contrair-cima-expandir-baixo {
    border-style: none;
    background-image: url(../imagens/icones/compartilhados/contrair-expandir-baixo-branco.svg);
}

/* Tabela de monitoramento */

table.monitoramento {
    border-collapse: collapse;
    margin-top: 1rem;
}

table.monitoramento > thead {
    background-color: #fff;
    position: sticky;
    inset-block-start: -1rem;
}

table.monitoramento > thead > tr:last-child > th {
    background-color: var(--cor-escura-nivel3);
    border-top-style: none;
    height: 2px;
    padding: 0;
}

table.monitoramento > tbody > tr:nth-child(2n+1) {
    background-color: var(--cor-clara-nivel1);
}

table.monitoramento > thead > tr > th,
table.monitoramento > tbody > tr > td,
table.monitoramento > tbody > tr > th,
table.monitoramento > tfoot > tr > th,
table.monitoramento > tfoot > tr > td {
    padding: 0.75rem;
}

table.monitoramento > thead > tr > th,
table.monitoramento > tbody > tr > th,
table.monitoramento > tfoot > tr > th {
    color: var(--cor-escura-nivel3);
    text-align: left;
}

table.monitoramento > thead > tr:nth-child(2) > th:first-child,
table.monitoramento > thead > tr > th:nth-child(n+2),
table.monitoramento > tbody > tr > *:nth-child(n+2),
table.monitoramento > tfoot > tr > *:nth-child(n+2) {
    border-left: 1px solid var(--cor-clara-nivel5);
}

table.monitoramento > thead > tr:nth-child(n+2) > th,
table.monitoramento > tbody > tr:nth-child(n+2) > *,
table.monitoramento > tfoot > tr:nth-child(n+2) > * {
    border-top: 1px solid var(--cor-clara-nivel5);
}

table.monitoramento > thead > tr > th.desbloquear,
table.monitoramento > thead > tr > th.bloquear,
table.monitoramento > thead > tr > th.visualizar {
    padding: 0 1.5rem;
    background-size: 2rem;
    background-position: center;
    background-repeat: no-repeat;
}

table.monitoramento > thead > tr > th.bloquear {
    background-image: url(../imagens/icones/compartilhados/bloquear.svg);
}

table.monitoramento > thead > tr > th.desbloquear {
    background-image: url(../imagens/icones/compartilhados/desbloquear.svg);
}

table.monitoramento > thead > tr > th.visualizar {
    background-image: url(../imagens/icones/compartilhados/visualizar.svg);
}

table.monitoramento > tbody > tr > td > button.botao-bloquear,
table.monitoramento > tbody > tr > td > button.botao-desbloquear,
table.monitoramento > tbody > tr > td > button.botao-visualizar {
    background-color: var(--cor-escura-nivel3);
    background-size: 1.75rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 2.25rem;
    height: 2.25rem;
}

table.monitoramento > tbody > tr > td > button.botao-bloquear {
    background-image: url(../imagens/icones/compartilhados/bloquear-branco.svg);
}

table.monitoramento > tbody > tr > td > button.botao-desbloquear {
    background-image: url(../imagens/icones/compartilhados/desbloquear-branco.svg);
}

table.monitoramento > tbody > tr > td > button.botao-visualizar {
    background-image: url(../imagens/icones/compartilhados/visualizar-branco.svg);
}

table.monitoramento > tbody > tr > td > button.botao-visualizar:hover {
    background-color: var(--cor-escura-nivel1);
}

table.monitoramento > tfoot > tr.equipe > * {
    color: #fff;
    background-color: var(--cor-escura-nivel5);
}

table.monitoramento > tfoot > tr.nacional > * {
    color: #fff;
    background-color: var(--cor-escura-nivel3);
}

/* Tabela de descrições das colunas das tabelas de monitoramento */

table.descricoes-variaveis-monitoramento {
    border-collapse: collapse;
}

table.descricoes-variaveis-monitoramento > tbody > tr:nth-child(2n+2) {
    background-color: var(--cor-clara-nivel1);
}

table.descricoes-variaveis-monitoramento > tbody > tr > th {
    padding: 0.5rem 0.5rem 0.5rem 0;
    color: var(--cor-escura-nivel3);
    border-right: 2px solid var(--cor-escura-nivel3);
    text-align: left;
}

table.descricoes-variaveis-monitoramento > tbody > tr > td {
    padding: 0.5rem;
}

table.descricoes-variaveis-monitoramento > tbody > tr:nth-child(n+2) > th,
table.descricoes-variaveis-monitoramento > tbody > tr:nth-child(n+2) > td {
    border-top: 1px solid var(--cor-clara-nivel5);
}

table.descricoes-variaveis-monitoramento > tbody > tr > td > ul {
    margin-left: 1.25rem;
}

table.descricoes-variaveis-monitoramento > tbody > tr > th.bloquear,
table.descricoes-variaveis-monitoramento > tbody > tr > th.desbloquear,
table.descricoes-variaveis-monitoramento > tbody > tr > th.visualizar {
    background-size: 2rem;
    background-position: left center;
    background-repeat: no-repeat;
}

table.descricoes-variaveis-monitoramento > tbody > tr > th.bloquear {
    background-image: url(../imagens/icones/compartilhados/bloquear.svg);
}

table.descricoes-variaveis-monitoramento > tbody > tr > th.desbloquear {
    background-image: url(../imagens/icones/compartilhados/desbloquear.svg);
}

table.descricoes-variaveis-monitoramento > tbody > tr > th.visualizar {
    background-image: url(../imagens/icones/compartilhados/visualizar.svg);
}

/* Menus */

menu {
    display: flex;
    padding: 0.25rem;
    margin: 0;
    list-style: none;
    background-color: var(--cor-clara-nivel1);
    border-radius: 0.5rem;
}

menu.vertical {
    flex-flow: column nowrap;
}

menu > li {
    cursor: default;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
}

menu > li:hover {
    background-color: var(--cor-clara-nivel2);
}

menu > li.icone-grande-sem-texto {
    background-size: 2.5rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
}

menu > li.icone-grande-esquerda-texto {
    background-size: 2.5rem;
    background-position: 0.5rem center;
    background-repeat: no-repeat;
    padding: 0.75rem 0.75rem 0.75rem 3.25rem;
}

menu > li.icone-grande-esquerda-texto-seta {
    background-size: 2.5rem, 1rem;
    background-position: 0.5rem center, right center;
    background-repeat: no-repeat, no-repeat;
    padding: 0.75rem 1.5rem 0.75rem 3.25rem;
}

menu > li.marcado {
    border: 1px solid var(--cor-escura-nivel3);
    background-color: var(--cor-clara-nivel3);
}

menu > li.separador-menu-horizontal {
    padding: 0.25rem 0;
    margin: 0 0.75rem;
    border-right: 1px solid var(--cor-clara-nivel5);
}

menu > li.separador-menu-vertical {
    padding: 0 0.25rem;
    margin: 0.25rem 0;
    border-bottom: 1px solid var(--cor-clara-nivel5);
}

menu > li > menu {
    display: none;
}

menu > li:hover > menu {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin-left: -3.5rem;
    margin-top: 0.75rem;
    box-shadow: 0.25rem 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
}

/* Formulários e controles */

form {
    border-radius: 0.75rem;
}

form > header {
    border-left: 1px solid var(--cor-escura-nivel1);
    border-top: 1px solid var(--cor-escura-nivel1);
    border-right: 1px solid var(--cor-escura-nivel1);
    color: #fff;
    border-radius: 0.75rem 0.75rem 0 0;
    background-color: var(--cor-escura-nivel1);
    background-size: 2rem;
    background-position: 0.375rem;
    background-repeat: no-repeat;
    padding: 0.75rem 1rem 0.75rem 3rem;
}

form > section.corpo {
    padding: 1rem;
    background-color: var(--cor-clara-nivel1);
}

form > aside {
    background-color: var(--cor-clara-nivel4);
}

form > footer {
    display: flex;
    justify-content: center;
    background-color: var(--cor-clara-nivel2);
    padding: 1rem;
}

form > footer.vertical {
    flex-direction: column;
    align-items: center;
}

form > footer.vertical > div.mensagem-usuario {
    display: none;
    align-self: stretch;
    margin-top: 0;
}

form > footer > button {
    margin: 0 0.5rem;
}

form > section.corpo,
form > aside,
form > footer {
    border-left: 1px solid var(--cor-escura-nivel1);
    border-right: 1px solid var(--cor-escura-nivel1);
}

form > section.corpo > section {
    padding: 0.5rem;
}

form > footer:last-child,
form > aside:last-child {
    border-radius: 0 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--cor-escura-nivel1);
}

form > footer > button {
    width: 10rem;
}

input, select,
select > option,
button, textarea {
    border: 1px solid var(--cor-escura-nivel3);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}

select {
    background-color: #fff;
}

button {
    background-color: var(--cor-clara-nivel3);
    padding: 0.25rem 0.5rem;
}

textarea {
    resize: none;
}

button:hover {
    background-color: var(--cor-clara-nivel4);
}

button.icone-pequeno-sem-texto {
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.25rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* Avisos & Monitoramento & Ajuda */

body > section.conteiner > section#avisos,
body > section.conteiner > section.monitoramento,
body > section.conteiner > section.ajuda {
    flex-grow: 1;
    padding: 1rem;
    overflow: auto;
}

body > section.conteiner > section#avisos > h1.titulo-ajuda,
body > section.conteiner > section.monitoramento > h1.titulo-ajuda,
body > section.conteiner > section.ajuda > h1.titulo-ajuda {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--cor-escura-nivel3);
    background-color: var(--cor-escura-nivel3);
    color: #fff;
    margin: 0;
    padding: 0.5rem 1rem 0.5rem 3.25rem;
    background-size: 2.5rem;
    background-position: 0.25rem center;
    background-repeat: no-repeat;
}

body > section.conteiner > section#avisos > h1.titulo-ajuda > button.contrair-cima-expandir-baixo,
body > section.conteiner > section.monitoramento > h1.titulo-ajuda > button.contrair-cima-expandir-baixo,
body > section.conteiner > section.ajuda > h1.titulo-ajuda > button.contrair-cima-expandir-baixo {
    background-color: var(--cor-escura-nivel3);
    background-image: url(../imagens/icones/compartilhados/contrair-expandir-cima-branco.svg);
}

body > section.conteiner > section#avisos > h1.titulo-ajuda > button.contrair-cima-expandir-baixo:hover,
body > section.conteiner > section.monitoramento > h1.titulo-ajuda > button.contrair-cima-expandir-baixo:hover,
body > section.conteiner > section.ajuda > h1.titulo-ajuda > button.contrair-cima-expandir-baixo:hover {
    background-color: var(--cor-escura-nivel5);
}

body > section.conteiner > section#avisos > section.texto-ajuda,
body > section.conteiner > section.monitoramento > section.texto-ajuda,
body > section.conteiner > section.ajuda > section.texto-ajuda {
    border: 1px solid var(--cor-escura-nivel3);
    padding: 1rem;
}

body > section.conteiner > section#avisos > section.texto-ajuda > h1,
body > section.conteiner > section.monitoramento > section.texto-ajuda > h1,
body > section.conteiner > section.ajuda > section.texto-ajuda > h1 {
    border-bottom: 1px dotted var(--cor-escura-nivel3);
}

body > section.conteiner > section#avisos > section.texto-ajuda > h1:first-child,
body > section.conteiner > section.monitoramento > section.texto-ajuda > h1:first-child,
body > section.conteiner > section.ajuda > section.texto-ajuda > h1:first-child {
    margin-top: 0;
}

body > section.conteiner > section.ajuda > section.texto-ajuda > h1.perfil {
    background-color: var(--cor-clara-nivel3);
    padding: 0.25rem 0.5rem;
}

/* Avisos */

body > section.conteiner > section#avisos {
    display: block; /* Layout - display: block; */
}

/* Monitoramento - Dúvidas pedagógicas */

body > section.conteiner > section#monitoramento-duvidas-pedagogicas {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Problemas de mídia */

body > section.conteiner > section#monitoramento-problemas-midia {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Consulta Individual */

body > section.conteiner > section#monitoramento-consulta-individual {
    display: none; /* Layout - display: block; */
}

body > section.conteiner > section#monitoramento-produtividade {
    display: none; /* Layout - display: block; */
}

body > section.conteiner > section#monitoramento-produtividade-equipe-nacional {
    display: none; /* Layout - display: block; */
}

body > section.conteiner > section#monitoramento-tempo-medio-avaliacao {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Aproveitamento de notas */
body > section.conteiner > section#monitoramento-aproveitamento-notas {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Desempenho */

body > section.conteiner > section#monitoramento-desempenho {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Distribuição de notas */

body > section.conteiner > section#monitoramento-distribuicao-notas {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Distribuição de situações */

body > section.conteiner > section#monitoramento-distribuicao-situacoes {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Panorama de convergência */

body > section.conteiner > section#monitoramento-panorama-convergencia {
    display: none; /* Layout - display: block; */
}

/* Monitoramento - Colaboradores */

body > section.conteiner > section#monitoramento-colaboradores {
    display: none; /* Layout - display: block; */
}

/* Ajuda - Orientações gerais */

body > section.conteiner > section#ajuda-orientacoes-gerais {
    display: none; /* Layout - display: block; */
}

/* Ajuda - Instruções de avaliação */

body > section.conteiner > section#ajuda-instrucoes-avaliacao {
    display: none; /* Layout - display: block; */
}

/* Ajuda - Critérios de discrepância */

body > section.conteiner > section#ajuda-criterios-discrepancia {
    display: none; /* Layout - display: block; */
}

/* Ajuda - Retreinamento */

body > section.conteiner > section#ajuda-retreinamento {
    display: none; /* Layout - display: block; */
}

/* Quadros de diálogo */

dialog {
    border-style: none;
    border-radius: 0.75rem;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
    margin: auto;
    max-width: 30rem;
}

dialog > form > header {
    background-image: url(../imagens/logos/cebraspe-branco.svg);
}

dialog > form > section.corpo {
    display: flex;
    align-items: center;
}

dialog > form > section.corpo > img {
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;

}

dialog > form > footer > button[value="default"] {
    color: #fff;
    background-color: var(--cor-escura-nivel3);
}

dialog > form > footer > button[value="default"]:hover {
    background-color: var(--cor-escura-nivel1);
}

#quadro-dialogo-atendimento-online {
    border-style: none;
    border-radius: 0.75rem;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
    margin: auto;
    max-width: 40rem; /* Aumentar a largura máxima para mais espaço */
    padding: 1rem; /* Adicionar preenchimento interno */
    background-color: #f9f9f9; /* Fundo claro para melhor visibilidade */
}

#quadro-dialogo-atendimento-online {
    border-style: none;
    border-radius: 0.75rem;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5);
    margin: auto;
    max-width: 40rem; /* Aumentar a largura máxima para mais espaço */
    padding: 1rem; /* Adicionar preenchimento interno */
    background-color: #f9f9f9; /* Fundo claro para melhor visibilidade */
}

    #quadro-dialogo-atendimento-online > form > header {
        background-image: url(../imagens/logos/cebraspe-branco.svg);
        background-size: contain; /* Ajusta o logo ao tamanho do header */
        background-repeat: no-repeat; /* Não repetir a imagem do logo */
        padding: 1rem; /* Espaçamento interno para o header */
        text-align: center; /* Centraliza o texto do título */
        font-weight: bold; /* Aumenta o peso da fonte do título */
        font-size: 1.5rem; /* Tamanho da fonte do título */
    }

    #quadro-dialogo-atendimento-online > form > section.corpo {
        display: flex;
        flex-direction: column; /* Organiza os campos em uma coluna */
        gap: 1rem; /* Espaço entre os campos */
        margin-top: 1rem; /* Espaçamento acima da seção do corpo */
    }

        #quadro-dialogo-atendimento-online > form > section.corpo > label {
            margin-bottom: 0.5rem; /* Espaçamento abaixo de cada rótulo */
            font-weight: bold; /* Destaca os rótulos */
        }

        #quadro-dialogo-atendimento-online > form > section.corpo > input,
        #quadro-dialogo-atendimento-online > form > section.corpo > select,
        #quadro-dialogo-atendimento-online > form > section.corpo > textarea {
            width: 100%; /* Faz os campos ocuparem toda a largura */
            padding: 0.5rem; /* Adiciona preenchimento interno */
            border-radius: 0.25rem; /* Bordas arredondadas */
            border: 1px solid #ccc; /* Adiciona uma borda */
            font-size: 1rem; /* Tamanho da fonte nos campos */
        }

    /* Estilos unificados para o Atendimento Online */

    /* Estilizando a área de texto */
    #quadro-dialogo-atendimento-online textarea {
        resize: none; /* Impede o redimensionamento da área de texto */
        width: 100%; /* Define a largura para ocupar todo o espaço disponível */
        height: 5rem; /* Altura fixa */
        padding: 0.5rem; /* Preenchimento interno */
        border: 1px solid #ccc; /* Borda padrão */
        border-radius: 0.25rem; /* Bordas arredondadas */
    }

    /* Estilizando o footer do formulário */
    #quadro-dialogo-atendimento-online footer {
        display: flex;
        justify-content: flex-end; /* Alinha os botões à direita */
        gap: 1rem; /* Espaçamento entre os botões */
        margin-top: 1rem; /* Espaçamento acima do footer */
    }

    /* Estilizando os botões do footer */
    #quadro-dialogo-atendimento-online footer button {
        padding: 0.5rem 1rem; /* Adiciona preenchimento aos botões */
        border-radius: 0.25rem; /* Bordas arredondadas para os botões */
        border: none; /* Remove a borda padrão */
        background-color: var(--cor-escura-nivel3); /* Cor de fundo dos botões */
        color: #fff; /* Cor do texto dos botões */
        cursor: pointer; /* Cursor pointer para interação */
    }

    /* Alteração de cor no hover */
    #quadro-dialogo-atendimento-online footer button:hover {
        background-color: var(--cor-escura-nivel1); /* Cor do botão ao passar o mouse */
    }

.filtros-monitoramento {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

    .filtros-monitoramento input[type="radio"] {
        display: none;
    }

    .filtros-monitoramento label {
        padding: 0.5rem 1rem;
        border: 1px solid var(--cor-escura-nivel3);
        background-color: var(--cor-clara-nivel1);
        color: var(--cor-escura-nivel3);
        border-radius: 0.5rem;
        cursor: pointer;
    }

    .filtros-monitoramento input[type="radio"]:checked + label {
        background-color: var(--cor-escura-nivel3);
        color: #fff;
    }

.highlight {
    background-color: #d1e7dd; /* Verde claro */
    color: #0f5132; /* Verde escuro para o texto */
    font-weight: bold; /* Texto em negrito */
    border-radius: 4px; /* Arredondamento leve nos cantos */
    padding: 2px 4px; /* Espaçamento interno */
}

#tabela-desempenho {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

    #tabela-desempenho th, #tabela-desempenho td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #tabela-desempenho th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    #tabela-desempenho .verde, #tabela-desempenho .amarelo, #tabela-desempenho .vermelho {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        color: white;
        font-size: 0.8rem;
        line-height: 1.5rem;
        text-align: center;
    }

    #tabela-desempenho .verde {
        background-color: green;
    }

    #tabela-desempenho .amarelo {
        background-color: yellow;
        color: black; /* Contraste para amarelo */
    }

    #tabela-desempenho .vermelho {
        background-color: red;
    }

    #tabela-monitoramento-duvidas-pedagogicas thead th,
    #tabela-monitoramento-produtividade thead th,
    #tabela-monitoramento-tempo-medio-avaliacao thead th,
    #tabela-desempenho thead th {
        cursor: pointer; /* Mostra que o cabeçalho é clicável */
        transition: background-color 0.3s ease; /* Transição suave */
    }

    #tabela-monitoramento-duvidas-pedagogicas thead th:hover,
    #tabela-monitoramento-produtividade thead th:hover,
    #tabela-monitoramento-tempo-medio-avaliacao thead th:hover,
    #tabela-desempenho thead th:hover {
        background-color: #007bff; /* Cor de destaque */
        color: white; /* Texto branco */
    }

    /* Ajusta o cabeçalho da tabela */
    #tabela-monitoramento-duvidas-pedagogicas thead th,
    #tabela-monitoramento-produtividade thead th,
    #tabela-monitoramento-tempo-medio-avaliacao thead th,
    #tabela-desempenho thead th {
        position: relative; /* Necessário para alinhar o menu dentro do cabeçalho */
        padding: 5px;
    }

/* Destaque ao passar o cursor sobre os cabeçalhos */
/*#tabela-monitoramento-duvidas-pedagogicas thead th,
#tabela-monitoramento-duvidas-produtividade thead th,
#tabela-desempenho thead th {
    cursor: pointer;*/ /* Mostra que o cabeçalho é clicável */
    /*transition: background-color 0.3s ease;*/ /* Transição suave */
/*}

#tabela-monitoramento-duvidas-pedagogicas, thead th:hover,
#tabela-monitoramento-produtividade thead th:hover,
#tabela-desempenho thead th:hover {
    background-color: #007bff;*/ /* Cor de destaque */
    /*color: white;*/ /* Texto branco */
/*}*/

/* Ajusta o cabeçalho da tabela */
    /*#tabela-monitoramento-duvidas-pedagogicas thead th,
    #tabela-monitoramento-produtividade thead th,
    #tabela-desempenho thead th {
        position: relative;*/ /* Necessário para alinhar o menu dentro do cabeçalho */
        /*padding: 5px;
    }*/



/* Ícone de filtro no cabeçalho */
.icone-filtro {
    cursor: pointer;
    margin-left: 5px;
    font-size: 14px;
    position: relative;
}

/* Estilização do menu de filtro */
.menu-filtro {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    max-width: 300px;
    max-height: 200px;
    overflow-y: auto;
    color: #000; /* Garante que o texto fique visível */
    text-align: left; /* Alinha o conteúdo à esquerda */
}

/* Opções dentro do menu de filtro */
.menu-filtro-opcao {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px; /* Tamanho de texto ajustável */
}

    /* Checkbox das opções */
    .menu-filtro-opcao input {
        margin-right: 5px;
    }

/* Visibilidade do menu quando ativo */
.th-ativo .menu-filtro {
    display: block;
}

/* Corrige o alinhamento e espaçamento do texto */
.menu-filtro-opcao label {
    white-space: nowrap; /* Evita quebra de linha no texto */
    overflow: hidden; /* Esconde texto longo que não cabe */
    text-overflow: ellipsis; /* Adiciona reticências no final do texto longo */
    width: calc(100% - 25px); /* Deixa espaço para o checkbox */
}

/* Estilo para o botão aplicar no menu */
.menu-filtro button {
    display: block;
    margin: 10px auto 0; /* Espaçamento do botão */
    padding: 5px 10px;
    font-size: 14px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

    /* Botão hover */
    .menu-filtro button:hover {
        background-color: #0056b3;
    }

/* Adiciona um destaque para o menu quando visível */
.menu-filtro:focus-within {
    outline: 2px solid #007bff;
}

#quadro-dialogo-atendimento-online {
    position: fixed; /* Garante que o diálogo esteja fixo na tela */
    z-index: 9999; /* Eleva o diálogo acima de outros elementos */
    background: white; /* Garante que o fundo do diálogo seja visível */
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}

#quadro-dialogo-atendimento-online {
    background-color: #fff; /* Cor de fundo sólida */
}
.tabela-historico-mensagens {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

    .tabela-historico-mensagens th, .tabela-historico-mensagens td {
        border: 1px solid #ddd;
        padding: 0.5rem;
        text-align: left;
    }

    .tabela-historico-mensagens th {
        background-color: #f5f5f5;
        font-weight: bold;
    }

.visualizacao-imagem-problema-midia {
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    text-align: center;
}

.imagem-visualizacao-problema-midia {
    max-width: 100%;
    max-height: 80vh;
}

.botao-fechar-problema-midia {
    margin-bottom: 10px;
    background-color: #f44336;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
}

.botao-fechar-problema-midia:hover {
    background-color: #d32f2f;
}

#imagem-redacao {
    width: 500px; /* Largura desejada */
    height: auto; /* Ajusta proporcionalmente */
    display: block; /* Garante que a imagem seja exibida */
    margin: 0 auto; /* Centraliza a imagem */
}

#avaliacao-1 table.monitoramento thead th,
#avaliacao-2 table.monitoramento thead th,
#avaliacao-3 table.monitoramento thead th,
#avaliacao-4 table.monitoramento thead th,
#avaliacao-banca table.monitoramento thead th {
    background-color: #003366; /* Cor de fundo escura */
    color: white; /* Cor do texto branca */
    border: 1px solid #ccc; /* Borda visível */
    padding: 5px; /* Espaçamento interno */
    text-align: center; /* Centraliza o texto */
}