﻿body {
    min-width: 350px;
    font-size: 16px !important;
}

.col-md-6 {
    width: 73% !important;
    float: right;
    margin-right: 1.2%;
    padding-bottom: 3%;
}

.imgenti {
    display: block;
}

.row1 {
    display: flex;
}

.ddni2 {
    width: 30% !important;
    display: flex;
    flex-direction: column;
    margin-left: 2%;
}

.ddni3 {
    width: 70% !important;
}

.ddni4 {
    max-width: 90% !important;
}

.ddni5 {
    margin-top: 0px;
    margin-left: 1% !important;
}

.ddni9 {
    padding-left: 6px !important;
}

.ddni10 {
    max-width: 81% !important;
}

.ddni11 {
    padding-left: 2% !important;
}

.ddni12 {
    max-width: 67% !important;
}

.ddni14 {
    display: grid !important;
    margin-right: 2%;
    max-width: 98% !important;
}

.ddni15 {
    margin-left: 1% !important;
    max-width: 98% !important;
}

.grid {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}
.grid-style-1 {
    width: 69%;
    white-space: normal; /* Permite quebra de linha */
    word-wrap: break-word; /* Força a quebra de palavras longas */
}

/* Estilos gerais para o modo de alto contraste */
.alto-contraste {
    background-color: black !important;
    color: white !important;
}

.navbar-inverse {
    background: #2e93dd !important;
    position: sticky !important;
    margin-bottom: 0px !important;
}

.alto-contraste .navbar-inverse {
    background: black !important;
    border-bottom: solid 1px;
    border-color:beige;
    padding-bottom: .2%;
}

.alto-contraste .well,
.alto-contraste .col-md-4 {
    background-color: beige;
}

/* Estilos específicos para o menu colapsável (panel-group) */
.alto-contraste .panel-primary .panel-heading {
    background-color: white !important;
    color: black !important;
}

/* Estilos para os links dentro do menu, garantindo que o texto fique preto */
.alto-contraste .panel-primary .panel-heading a {
    color: black !important;
}

.alto-contraste .list-group-item,
.alto-contraste .label-primary {
    background-color: white !important;
    color: black !important;
}

/* Caso o menu use outros componentes ou links, adicionando estilos mais gerais */
.alto-contraste a {
    color: black !important;
    background-color: white !important;
}

.alto-contraste .btn-default,
.alto-contraste .btn-primary,
.alto-contraste .btn-sm,
.alto-contraste .btn-primary a {
    color: black !important;
    background-color: yellow !important;
}

    .alto-contraste .btn-warning,
    .alto-contraste .btn-warning a {
        color: black !important;
        background-color: #f0ad4e !important;
        border-color: red !important;
    }
    /* Para garantir que o texto de todos os títulos também seja preto */
    .alto-contraste h1,
    .alto-contraste h2,
    .alto-contraste h4,
    .alto-contraste h5,
    .alto-contraste tr,
    .alto-contraste th,
    .alto-contraste td,
    .alto-contraste p,
    .alto-contraste .alert-info,
    .alto-contraste .modal-content {
        color: black !important;
    }

    .alto-contraste .lead  {
        background-color:transparent !important;
    }
    .alto-contraste .modal-content,
    .alto-contraste h3{
        color: white !important;
        background-color: black !important;
    }

    .alto-contraste tr,
    .alto-contraste th,
    .alto-contraste td,
    .alto-contraste p {
        color: black !important;
        background-color: beige;
    }

    .alto-contraste .static-color-label,
    .alto-contraste .control-label, 
    .alto-contraste .text-muted {
    color: black !important; /* Força a cor preta */
    }

    .alto-contraste .col-md-6,
    .alto-contraste .form-horizontal {
        background-color: beige !important;
    }

    .alto-contraste .container footer p {
        color: white !important;
        background-color: black;
    }

    .alto-contraste .orgao,
    .alto-contraste .panel-body {
        background-color: transparent !important;
     //   color: blue !important; 
    }

.alto-contraste .text-primary {
    background-color: black !important;
    color: white !important;
}

    .alto-contraste .form-control,
    .alto-contraste .search-box {
        border-color: black !important;
        border: 3px solid !important;
        
    }

    .alto-contraste .modal-title,
    .alto-contraste .ddni1 {
        color: white !important;
    }

    select {
        margin-left: 10px !important;
    }

.alto-contraste .imgAcessib {
    background: beige;
    border-radius: 10px;
    border: solid 3px;
    border-color: beige;
    margin-top: 20px;
}

.btn-primary:hover,
.btn-menu:hover,
.list-group-item:hover {
    background-color: darkblue !important;
    color: white !important;
}

.alto-contraste .btn-primary:hover,
.alto-contraste .btn-menu:hover,
.alto-contraste .list-group-item:hover {
    background-color: khaki !important;
    color: black !important;
}

.alto-contraste .panel-primary .panel-heading .panel-title a {
    background-color: transparent !important;
}



/* Header da página */
.BoxHeader {
    display: flex;
    justify-content: space-between; /* Espaça o texto e a imagem */
    align-items: center; /* Alinha os itens verticalmente */
    background: #c0def3;
    padding: 1vw 4vw; /* Padding relativo ao tamanho da tela */
    margin-bottom: 1%;
    box-sizing: border-box;
    width: 100%; /* Ocupa a largura total da tela */
    max-height: 200px; /* Limite de altura */
    overflow: hidden; /* Impede que o conteúdo ultrapasse o limite da BoxHeader */
    margin-top: 1%;
    border-radius: 6px;
}

/* Container de texto */
.text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Coloca os elementos de texto em coluna */
    justify-content: space-between;
}

/* Ajustes para o título */
.title-container h1 {
    font-size: 5vw !important;
    color: white !important;
    text-shadow: 3px 5px 5px #05366c;
    margin: 0; /* Remove margem para ajustar bem */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alto-contraste .title-container h1 {
    color: blue !important;
    text-shadow: 0px 0px 0px;
}

/* Ajustes para o subtítulo */
.subtitle-container h2 {
    font-size: 2.5vw !important;
    color: #808080 !important;
    margin: 0; /* Remove margem */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alto-contraste  .subtitle-container h2 {
    color: black !important;
}

/* Ajuste do botão MAIS iNFORMAÇÕES >> */
.button-container {
    max-height: 90%;
    margin-top: 2%;
}

.button-container p {
    margin: 0; /* Remove margem ao redor do botão */
    background-color:transparent;
}

.button-container a {
    font-size: clamp(12px, 0.6vw, 32px) !important;
    padding: 0.5vw 1vw;
    display: inline-block;
    text-align: center;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap; /* Garante que o texto não quebre */
    overflow: hidden;
    text-overflow: ellipsis;
}

li a:hover {
    background-color: darkblue !important;
}

.alto-contraste li a:hover {
    background-color: khaki !important;
    border-left: solid 1px;
    border-right: solid 1px;
}

.button-container a:hover {
    background-color: darkblue !important;
}

.alto-contraste .button-container a:hover {
    background-color: khaki !important;
}

/* Ajustes para a imagem */
.image-container {
    flex-shrink: 0;
    max-width: 25%; /* A imagem ocupa até 25% da largura */
}

.image-container img {
    width: 100%;
    height: auto;
    max-height: 180px; /* Ajusta para caber no limite da BoxHeader */
    object-fit: contain;
}



@media (max-width: 2560px) {
    .title-container h1 {
        font-size: 3vw !important;
    }
    .subtitle-container h2 {
        font-size: 1.5vw !important;
    }
}

/* Estilos para telas intermediárias - 1440px */
@media (max-width: 1440px) {
    .title-container h1 {
        font-size: 5vw !important;
    }

    .subtitle-container h2 {
        font-size: 2.5vw !important;
    }
}

/* Estilos para telas médias - 1024px */
@media (max-width: 1024px) {
    body {
        font-size: 12px !important;
    }

    .title-container h1 {
        font-size: 6vw !important;
    }

    .subtitle-container h2 {
        font-size: 3vw !important;
    }

    .col-md-6 {
        //width: 70% !important;
        margin-right: 1.5% !important;
    }
    .ddni12 {
        max-width: 67% !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 11px !important;
    }

    .BoxHeader {
        flex-direction: column; /* Alinha os elementos verticalmente em telas pequenas */
        align-items: center;
        max-height: none; /* Removendo o limite de altura para dispositivos menores */
        margin-top: 3%;
    }

    .title-container h1 {
        font-size: 8vw !important;
    }

    .subtitle-container h2 {
        font-size: 3.5vw !important;
    }

    .text-content {
        max-width: 100%; /* O texto ocupa 100% da largura em telas pequenas */
        text-align: center;
    }

    .image-container {
        display: flex; /* Aplica flexbox */
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        max-width: 100%; /* A imagem ocupa 100% da largura */
    }

    .BoxHeader img {
        width: 50%; /* Imagem ocupa 100% da largura em telas pequenas */
        max-height: auto; /* Remove limite de altura em telas menores */
    }

    /* Botão ajustável para telas menores */
    .BoxHeader p a {
        font-size: 2.5vw; /* Texto do botão proporcional para telas pequenas */
        width: auto; /* O botão se ajusta ao conteúdo em telas pequenas */
        max-width: none; /* Remove limite de largura para telas pequenas */
        padding: 1vw 2vw; /* Padding mais largo para telas menores */
    }

    .boxSearch {
        display: none;
    }

    .navbar-collapse {
        max-height: fit-content !important;
    }

    .button-container a {
        width: 95% !important;
    }

    .col-md-6 {
        margin-top: 1%;
        margin-right: 2% !important;
    }

    .imgenti {
        display: flex;
        margin-left: 20%;
    }
    .ddni5 {
        margin-bottom: 0 !important;
    }

    .ddni6 {
        margin-bottom: 3% !important;
        margin-top: 1% !important;
    }
    .ddni12 {
        max-width: 81% !important;
    }
}

@media (max-width: 425px) {
    .title-container h1 {
        font-size: 7vw !important;
    }

    .col-md-6 {
        margin-top: 2%;
        margin-right: 4% !important;
        width: 92% !important;
    }

    .imgenti {
        display: flex;
        margin-left: 10%;
    }
    .row1 {
        display:block;
    }

    .ddni6 {
        margin-left: 30% !important;
        margin-bottom: 3% !important;
        margin-top: 1%;
    }

    .ddni7 {
        max-width: 100% !important;
    }
    .ddni8 {
        font-size: 6vw;
    }
    .ddni9 {
        padding-left: 1% !important;
    }
    .ddni10 {
      max-width: 98% !important;
    }
    .ddni12 {
        max-width: 95% !important;
    }
    .ddni13 {
        display: grid;
        margin-right: 2%;
    }
    .ddni14 {
        display: grid !important;
        margin-right: 2%;
        max-width:98% !important;
    }

    .ddni15 {
        margin-left: 3% !important;
    }
    .grid {
        width: 100%;
    }
    .grid-style-1 {
        min-width: 300px;
    }   
}

    @media (max-width: 375px) {
        .imgenti {
            display: flex;
            margin-left: 5%;
        }
    }



   

