/* Reset básico */
body {
    margin: 0; /* Remove a margem padrão do corpo */
    font-family: 'Montserrat', sans-serif; /* Define a fonte Montserrat como padrão */
    background: url('/Content/images/portal/bg.png') no-repeat center center fixed; /* Define uma imagem de fundo centralizada e fixa */
    background-size: cover; /* A imagem de fundo cobre toda a área */
    display: flex; /* Usa flexbox para o layout do corpo */
    flex-direction: column; /* Define a direção do flex como coluna */
    min-height: 100vh; /* Garante que o corpo tenha, no mínimo, a altura da janela de visualização */
}

/* Estilo do cabeçalho */
header {
    background-color: #3B3B3B; /* Define a cor de fundo do cabeçalho */
    color: white; /* Define a cor do texto como branca */
    width: 100%; /* O cabeçalho ocupa 100% da largura da tela */
    padding: 10px 0; /* Padding vertical de 10px */
    box-sizing: border-box; /* Inclui o padding na largura total */
}

.header-container {
    display: flex; /* Usa flexbox para o layout do container do cabeçalho */
    justify-content: space-between; /* Espaça os itens igualmente */
    align-items: center; /* Alinha os itens ao centro verticalmente */
    max-width: 1200px; /* Largura máxima de 1200px */
    width: 100%; /* Ocupa 100% da largura disponível */
    margin: 0 auto; /* Centraliza horizontalmente */
}

header .logo {
    height: 40px; /* Define a altura do logo */
}

h1.titulo-header {
    width: 380px; /* Define a largura do título do cabeçalho */
    font-size: 20px; /* Define o tamanho da fonte */
    line-height: 1.4em; /* Define a altura da linha */
    font-weight: 400; /* Define o peso da fonte */
}

/* Estilo do conteúdo principal */
main {
    display: flex; /* Usa flexbox para o layout do conteúdo principal */
    flex: 1; /* O conteúdo principal ocupa o espaço restante verticalmente */
    margin-top: 70px; /* Margem superior de 70px */
    margin-bottom: 70px; /* Margem inferior de 70px */
    max-width: 1200px; /* Largura máxima de 1200px */
    width: 100%; /* Ocupa 100% da largura disponível */
    margin-left: auto; /* Centraliza horizontalmente */
    margin-right: auto; /* Centraliza horizontalmente */
}

.left-section, .right-section {
    flex: 1; /* Ambas as seções ocupam igualmente o espaço disponível */
    box-sizing: border-box; /* Inclui o padding na largura total */
}

.informative-box {
    background: #efefef; /* Define a cor de fundo */
    padding: 20px; /* Padding de 20px */
    border-radius: 25px; /* Borda arredondada com raio de 25px */
    height: 75%; /* Define a altura como 75% */
    max-height: 540px;
    overflow: hidden; /* Esconde o conteúdo que ultrapassar a área */
    border-style: solid; /* Estilo da borda sólido */
    border-width: 10px; /* Largura da borda de 10px */
    border-color: #353535; /* Cor da borda */
}

.informative-content {
    height: 100%; /* Altura de 100% */
    overflow-y: auto; /* Permite rolagem vertical */
}

h2.titulo-boletim {
    color: white; /* Define a cor do texto como branca */
    font-size: 30px; /* Define o tamanho da fonte */
    font-weight: 700; /* Define o peso da fonte */
    margin: 0; /* Remove a margem */
}

a.historico-link {
    color: white; /* Define a cor do texto como branca */
    font-size: 30px; /* Define o tamanho da fonte */
    font-weight: 700; /* Define o peso da fonte */
    margin: 0; /* Remove a margem */
}

/* Estilo da barra de rolagem */
.informative-content::-webkit-scrollbar {
    width: 5px; /* Largura da barra de rolagem */
}

.informative-content::-webkit-scrollbar-thumb {
    background-color: red; /* Cor do polegar da barra de rolagem */
    border-radius: 10px; /* Borda arredondada */
}

.informative-content::-webkit-scrollbar-track {
    background: transparent; /* Fundo transparente */
}

.informative-content table {
    width: 100%; /* Largura de 100% */
    border-collapse: collapse; /* Colapsa as bordas da tabela */
    font-size: 13px; /* Define o tamanho da fonte */
}

.informative-content th, .informative-content td {
    text-align: left; /* Alinha o texto à esquerda */
    padding: 8px; /* Padding de 8px */
    border-bottom: 1px solid #666; /* Borda inferior */
    color: red; /* Cor do texto */
}

.informative-content td {
    color: black !important; /* Cor do texto em células, sobrescreve outras definições */
}

/* Mudar cursor do mouse pra click e acinzentar background de rows no boletim */
tbody tr:hover {
    cursor: pointer;
    background-color: #bcbcbc;
}

/* Estilos para a .right-section */
.right-section {
    display: flex; /* Usa flexbox para o layout da seção direita */
    flex-direction: column; /* Direção do flex como coluna */
    align-items: flex-end; /* Alinha o conteúdo à direita */
    box-sizing: border-box; /* Inclui o padding na largura total */
    justify-content: center; /* Centraliza verticalmente */
}

.right-section .titulo-portal {
    color: red; /* Cor do texto */
    margin: 0; /* Remove a margem */
    font-size: 35px; /* Define o tamanho da fonte */
    margin-bottom: 25px; /* Margem inferior de 25px */
    font-weight: 800; /* Define o peso da fonte */
}

.right-section form {
    width: 100%; /* Ocupa 100% do espaço disponível */
    max-width: 350px; /* Largura máxima do formulário */
    box-sizing: border-box; /* Inclui o padding na largura total */
}

.right-section label {
    display: block; /* Exibe como bloco */
    margin-bottom: 8px; /* Margem inferior de 8px */
    text-align: left; /* Alinha o texto à esquerda */
}

.right-section input, input {
    width: 100%; /* Ajusta para 100% do contêiner pai */
    padding: 12px; /* Padding de 12px */
    margin-bottom: 15px; /* Margem inferior de 15px */
    border-radius: 25px; /* Borda arredondada com raio de 25px */
    box-sizing: border-box; /* Inclui o padding na largura total */
    font-size: 15px; /* Define o tamanho da fonte */
}

.password-container {
    position: relative; /* Define posição relativa para posicionar elementos internos */
}

.password-container input {
    width: 100%; /* Ajusta para 100% do contêiner pai */
    padding-right: 40px; /* Espaçamento interno à direita para o ícone */
}

.right-section a {
    display: block; /* Exibe como bloco */
    /*margin-top: 15px;*/ /* Margem superior de 15px */
    color: #bcbcbc; /* Cor do texto */
    text-decoration: none; /* Remove a decoração do texto */
    text-align: center; /* Alinha o texto ao centro */
    font-size: 14px; /* Define o tamanho da fonte */
}

.right-section a:hover {
    color: white; /* Altera a cor do texto ao passar o mouse */
}

.button{
    width: 100%; /* Ocupa 100% do espaço disponível */
    padding: 14px; /* Padding de 14px */
    color: white; /* Cor do texto */
    border: none; /* Remove a borda */
    border-radius: 25px; /* Borda arredondada com raio de 25px */
    cursor: pointer; /* Define o cursor como ponteiro */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
    font-size: 16px; /* Define o tamanho da fonte */
    font-weight: 700; /* Define o peso da fonte */
    font-family: 'Montserrat', sans-serif; /* Define a fonte */
}

.negation.button {
    background-color: rgb(108, 117, 125); /* Mudar a cor de fundo para botões antagônico */
}

.confirmation.button{
    background-color: red; /* Cor de fundo */
}

.negation.button:hover {
    background-color: rgb(88, 97, 105); /* Mantém um tom mais escuro ao passar o mouse */
}


.right-section button[type="submit"] {
    width: 100%; /* Ocupa 100% do espaço disponível */
    padding: 14px; /* Padding de 14px */
    background-color: red; /* Cor de fundo */
    color: white; /* Cor do texto */
    border: none; /* Remove a borda */
    border-radius: 25px; /* Borda arredondada com raio de 25px */
    cursor: pointer; /* Define o cursor como ponteiro */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor de fundo */
    font-size: 16px; /* Define o tamanho da fonte */
    font-weight: 700; /* Define o peso da fonte */
    font-family: 'Montserrat', sans-serif; /* Define a fonte */
}

.right-section button[type="submit"]:hover, .confirmation.button:hover {
    background-color: #b30000; /* Mantém um tom mais escuro de vermelho ao passar o mouse */
}

.infos {
    color: white; /* Define a cor do texto como branca */
    font-size: 10px; /* Define o tamanho da fonte */
    text-align: end; /* Alinha o texto à direita */
    margin-top: 50px; /* Margem superior de 50px */
}

p {
    margin-block-end: 5px; /* Margem inferior de 5px */
    margin-block-start: 5px; /* Margem superior de 5px */
}

/* Estilo do rodapé */
footer {
    background-color: #3B3B3B; /* Cor de fundo */
    color: white; /* Cor do texto */
    width: 100%; /* Ocupa 100% da largura da tela */
    padding: 20px 0; /* Padding vertical */
    box-sizing: border-box; /* Inclui o padding na largura total */
    text-align: center; /* Alinha o texto ao centro */
}

.footer-container {
    max-width: 1200px; /* Largura máxima de 1200px */
    width: 100%; /* Ocupa 100% da largura disponível */
    margin: 0 auto; /* Centraliza horizontalmente */
    display: flex; /* Usa flexbox para o layout */
    justify-content: center; /* Centraliza os itens */
    gap: 10px; /* Espaçamento entre os ícones */
}

footer img {
    height: 35px; /* Define a altura das imagens */
    margin-bottom: -5px; /* Margem inferior de -5px */
}

/* Estilo modals*/
#modalRecuperarSenha label{
    color: white;
}

h5.titulo-modal {
    color: white; /* Define a cor do texto como branca */
    font-weight: 700; /* Define o peso da fonte */
    margin: 0; /* Remove a margem */
    /*padding-bottom: 25px;*/ /* Padding inferior de 25px */
}

.trigger-content th, .trigger-content td {
    text-align: left; /* Alinha o texto à esquerda */
    padding: 8px; /* Padding de 8px */
    border-bottom: 1px solid #666; /* Borda inferior */
    color: red; /* Cor do texto */
}

.trigger-box {
    background: #efefef; /* Define a cor de fundo */
    padding: 20px; /* Padding de 20px */
    border-radius: 25px; /* Borda arredondada com raio de 25px */
    height: 75%; /* Define a altura como 75% */
    max-height: 540px;
    overflow: hidden; /* Esconde o conteúdo que ultrapassar a área */
    border-style: solid; /* Estilo da borda sólido */
    border-width: 10px; /* Largura da borda de 10px */
    border-color: #353535; /* Cor da borda */
}

#modalTriggers p{
    color:white;
}

#modalTriggers table {
    width: 100%;
}

.modal .modal-content {
    border-radius: 20px;
}

/* Media Queries para responsividade */

/* Telas pequenas (mobile) */
@media (max-width: 600px) {
    header {
        padding-top: 15px;
    }
    .header-container {
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }
    header .logo {
        height: 35px;
    }
    h1.titulo-header {
        font-size: 14px;
        text-align: center;
        width: 270px;
    }
    main {
        flex-direction: column-reverse;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 50px;
        margin-bottom: 50px;
        width: auto;
    }
    .right-section {
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }
    h2.titulo-portal {
        width: 100%;
        text-align: center;
        font-size: 25px;
        margin-bottom: 15px;
    }
    .right-section form {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .right-section input {
        padding: 14px;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .right-section button[type="submit"] {
        padding: 14px;
        font-size: 14px;
    }
    .infos {
        width: 100%;
        text-align: start;
        margin-top: 30px;
    }
    h2.titulo-boletim {
        font-size: 20px;
        text-align: center;
        padding-bottom: 10px;
    }
    .left-section {
        margin-top: 30px;
    }
}

/* Telas pequenas (tablet) */
@media (min-width: 601px) and (max-width: 900px) {
    .header-container {
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }
    h1.titulo-header {
        font-size: 15px;
        text-align: center;
        width: 300px;
    }
    main {
        flex-direction: column-reverse;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 50px;
        margin-bottom: 50px;
        width: auto;
    }
    .right-section {
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }
    h2.titulo-portal {
        width: 100%;
        text-align: center;
        font-size: 25px;
        margin-bottom: 15px;
    }
    .right-section form {
        max-width: 100%;
        padding-left: 20%;
        padding-right: 20%;
    }
    .right-section input {
        padding: 14px;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .right-section button[type="submit"] {
        padding: 14px;
        font-size: 14px;
    }
    .infos {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
    h2.titulo-boletim {
        font-size: 20px;
        text-align: center;
        padding-bottom: 10px;
    }
    .left-section {
        margin-top: 30px;
    }
}

/* Telas pequenas (Laptop) */
@media (min-width: 901px) and (max-width: 1250px) {
    header {
        padding-top: 15px;
    }
    .header-container {
        max-width: 1000px;
    }
    h1.titulo-header {
        font-size: 16px;
        text-align: end;
        width: 400px;
    }
    main {
        flex-direction: row;
        padding-left: 0px;
        padding-right: 20px;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: 1000px;
    }
    .right-section {
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }
    h2.titulo-portal {
        width: 100%;
        text-align: end;
        font-size: 25px;
        margin-bottom: 15px;
    }
    .right-section form {
        max-width: 350px;
    }
    .right-section input {
        padding: 14px;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .right-section button[type="submit"] {
        padding: 14px;
        font-size: 14px;
    }
    .infos {
        width: 100%;
        text-align: end;
        margin-top: 30px;
    }
    h2.titulo-boletim {
        font-size: 25px;
        text-align: start;
        padding-bottom: 10px;
    }
    .left-section {
        margin-top: 30px;
    }
}