/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
body {
    overflow-x: hidden !important;
}

.btn-custom {
    background-color: #3a74b0; /* Cor de fundo personalizada (substitua pelo seu código de cor desejado) */
    color: #FFFFFF; /* Cor do texto (geralmente branco em botões coloridos) */
    border-color: #3a74b0; /* Cor da borda (substitua pelo seu código de cor desejado) */
}

.container-carousel-initial, 
.container-tables-initial {
    margin-left: auto;
    margin-right: auto;
}

.d-flex.flex-md-row {
    flex-direction: row;
}

.dark-background {
    background-color: #2a3867;
}

.hero {
    width: 100%;
    min-height: 25vh;
    position: relative;
    /*padding-bottom: 10px;*/
    padding: 30px 0 60px 0;
    display: flex;
    align-items: center;
    /*background: var(--gradient-hero);*/
}
  
.hero h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #FFFFFF;
}
  
.hero p {
    color: color-mix(in srgb, #FFFFFF, transparent 30%);
    /*margin: 5px 0 0px 3px;
    font-size: 15px;*/
    margin: 5px 0 20px 3px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}
  
.hero .animated {
    width: auto;
    height: 400px;
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

.initial-style {
    padding-left: 1rem;
    max-width: 95%;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

/*BARRA ESTAÇÃO*/
.bg {
    background-image: linear-gradient(rgba(22.75%,45.49%,69.02%,0.7), rgba(22.75%,45.49%,69.02%,1));
}

.raius-busca-estacoes-esquerdo {
    border-radius: 10px 0px 0px 10px;
    border: 1px solid;
}

.borda-esquerda {
    border-radius: 10px 0px 0px 10px;
    color: whitesmoke;
}

.borda-direita {
    border-radius: 0px 10px 10px 0px;
    color: whitesmoke;
}

.radius-botao-busca {
    border-radius: 10px 10px 10px 10px;
    background: #3a74b0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #293564, #3a74b0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #293564, #3a74b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: aliceblue;
}

.cor-botoes {
    background-color: #293564;
    border-color: #293564;
}

.raius-busca-estacoes-direito {
    border-radius: 0px 10px 10px 0px;
}

.text-cod-date span {
    font-size: 16px;
    margin-right: 5px;
    font-weight: bold;
}

.text-cod-date-conv {
    font-size: 16px;
    margin-right: 5px;
    font-weight: bold;
}

/*AVISOS E ALERTA*/
.tamanho-fonte-padrao {
    font-size: 1.2rem;
}

.tamanho-weight {
    font-weight: 500;
}

.margin-boletim {
    margin: 1.5rem 0;
}

.text-resume-boletim {
    text-align: justify;
    margin: 0 8px 0 8px;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #012e4d;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}

.carousel-control-next,
.carousel-control-prev {
    display: none;
}

/*LINHA HORIZONTAL AZUL*/
.hr-informacoes {
    position: static;
    left: 35.28%;
    right: 16.81%;
    top: 1%;
    bottom: 73.84%;
    border: 1px solid #3a74b0;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%); 
}

.ms-2 {
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
}

.me-3 {
    margin-right: 15px; /* Espaçamento entre os dois conjuntos (alerta e aviso) */
}

.margin-alerts {
    margin-top: .12rem;
}

.alert {
    padding: .50rem 1.25rem !important;
    margin-bottom: 30px;
}

.alerta-cor {
    background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}

.warning-cor {
    background: linear-gradient(270.27deg, #E5E5E5 -21.21%, rgba(241, 28, 207, 0.12) 112.33%);
}

.tamanho-fonte {
    font-size: 1.0rem;
}

.color-text-alert {
    font-weight: bold;
    opacity: 70%;
}

/*CARDS*/
.container-cards {
    display:flex;
    gap:1.80rem;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;
    align-items: stretch;
    padding-top: 5px;
}

.container-cards .formato-caixas {
    border-radius: 20px;
    overflow: hidden;
}

.formato-caixas {
        flex: 1 1 100%;
}

.dimensao-classe-estacao {
	height: 302px;
}

.card--main {
    display:flex;
    flex-direction:column;
    justify-content:space-between;

}
.card--main .card-header {
    position:relative;
    padding: 1rem 1.25rem;
    background-color: rgb(225, 233, 249);
}
.card--summary {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.card--summary .card-header {
    background-color: rgb(236, 241, 249);
    
}

.card--main .estilo-temperaturaReal {
    font-size:42px;
    color:coral;
    text-shadow: 1px 2px gray;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card--summary .estilo-temperatura-max {
    font-size:30px;
    color:red;
    text-shadow: 1px 1px gray;
}
.card--summary .estilo-temperatura-min {
    font-size:30px;
    color:#3a74b0;
    text-shadow: 1px 1px gray;
}
.card--summary .estilo-hora-tempMax {
    font-size: 16px;
    color: gray;
    font-weight: 600;
}
.card--summary .estilo-hora-tempMin {
    font-size: 16px;
    color: gray;
    font-weight: 600;
}

.card--summary .subtitulos-caixas {
    font-size: small;
}
.estilo-informacoes-caixas .list-group {
    list-style:none;
    padding-left:0;
    margin:0;
    justify-content:center;
}
.estilo-informacoes-caixas .list-group li {
    display:flex;
    font-size: 13px;
    align-items:center;
    justify-content:space-between;
    color: rgb(141, 78, 78);
    border-top: 1px solid #ccc;
    padding: 4px 0;
}
.fonte-valores {
    font-weight: bold;
}


/*BOLETIM*/
.fonte-nome-pesquisador {
    color: whitesmoke;
}

/* BOTÃO DE BUSCA */
.radius-input-busca {
    border-radius: 20px 20px 20px 20px;
}

.btn-estacao-message {
    border-radius: 5px;
    background: #3a74b0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #293564, #3a74b0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #293564, #3a74b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: aliceblue;
}

.btn-custom-message {
    width: 220px;
    padding: .300rem .8rem;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: left;
}

.btn-custom-message:hover {
    color: #fff;
    text-decoration: underline;
}

.d-md-block .text-white {
    font-size: 0.9rem;
    font-weight: 500;
}

.radius-botao-busca {
    border-radius: 0px 20px 20px 0px;
}

.search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1);
}

.search input {
    height: 60px;
    text-indent: 25px;
    border: 2px solid #d6d4d4;
}

.search input:focus {
    box-shadow: none;
    border: 2px solid rgb(100, 100, 116);
}

.search .fa-search {
    position: absolute;
    top: 20px;
    left: 16px;
}

.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    width: 110px;
}

.radius-boletins-titulo { 
    border-radius: 20px 0px 0px 20px !important;
    background: #3a74b0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #293564, #3a74b0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #293564, #3a74b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.fundo-boletins {
    background: linear-gradient(263.38deg, rgba(41, 53, 100, 0) -45.73%, #2D3966 -14.5%);
    border: 1px solid rgba(96, 183, 255, 0.6);
    filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.25));
    border-radius: 11px;
}

.botao-ver {
    background: rgba(152, 99, 247, 0.6);
    border: 1px solid rgba(31, 55, 119, 0.27);
    box-shadow: 0px 1px 1px #DEE5EE;
    border-radius: 15px;
}

/* CARD BOLETINS SECUNDÁRIO*/
.alinhamento-card {
	text-align: -webkit-center !important;
    font-size: 16px;
}

.card-table-grafic {
    margin: 0 25px;
}

.tamanho-card {
	max-width: 70rem !important;
}

.fonte11 {
	font-size: 0.90em; 
}

.cor-cabecalho {
    background-color: #3a74b0;
}

.animacao:hover {
    transition: all 0.80s ease;
    -webkit-transform: scale(1.03);
    transform: scale(1.02);
}

.radius-boletins-conteudo {
    border-radius: 15px !important;
}

.radius-botoes {
    border-radius: 15px 15px 15px 15px;
    width: 180px;
    font-size: 1rem;
}

.buttons-grafh {
    border-radius: 15px 15px 15px 15px;
    width: 100px;
}

.boletim:hover {
    text-decoration: underline;
}

/*TABELA */
.border-radius-componentes {
    border-radius: 10px;
}

.cor-botao-tabela {
    background-color: #f8f9fa;
    border-color: #ddd;
}

.margins-leitura {
    margin: 0 .25rem 3rem .25rem;
}

/*GRÁFICO*/
.fonte-grafico {
    font-size: 1.2rem;
}

.margin-text-agua {
    margin-left: 1.5rem;
}

.margin-spinner-agua {
    margin-left: 1.5rem;
}

/*BOTÃO GRÁFICO*/
.cor-botao-grafico {
    background-color: #3a74b0;
    width: 300px;
    margin: auto;
}

.borda-direita {
    border-radius: 0px 10px 10px 0px;
    color: whitesmoke;
}

.radius-botao-busca {
    border-radius: 10px 10px 10px 10px;
    background: #3a74b0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #293564, #3a74b0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #293564, #3a74b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: aliceblue;
}

.cardImgPrincipal {
	display: block;
  	margin-left: auto;
 	margin-right: auto;
    width: auto;
    height: 30px;
}

.cardImgSecundario {
	width: 15px;
	height: 15px;
}

.logoStacao {   
    height: 45px;
    background: white;
}

.logoUfgd {
    width: 120px; 
    height: 50px;
    background: white;   
}

.logoIfms {
    height: 45px !important;
    width: 130px;
    background: white; 
}

.table-balanco {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Permite um scroll mais suave no iOS */
}

.margin-desktop-calculo {
    margin: 1rem .25rem 0 .25rem;
}


@media only screen and (min-width: 4465px) {
    .col-desktop-table-leitura {
        flex-basis: auto;
    }
}

@media only screen and (min-width: 3700px) {
    .margin-boletim {
        margin-left: auto;
        margin-right: auto;
    }
    
}

@media only screen and (min-width: 2652px) {
    .container-cards .card.formato-caixas {
        flex: 0 0 800px !important;
    }

    .hero {
        min-height: 0;
    }
    .animation-desktop {
        margin-top: 60px;
    }
    .radius-boletins-conteudo {
        padding: 60px;
    }
}

@media only screen and (min-width: 2500px) {
    .container-carousel-initial {
        max-width: 3500px !important;
    }
}

@media only screen and (min-width: 2215px) {
    .margin-desktop-calculo {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media only screen and (min-width: 2086px) {
    .container-carousel-initial {
        max-width: 100% !important;
    }

    .container-cards .card.formato-caixas {
        flex: 0 0 600px;
    }

    .col-desktop {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .container-cards {
        justify-content: space-between;
    }
    .col-boletim-desktop {
        -webkit-flex: 0 0 28%;
        -ms-flex: 0 0 28%;
        flex: 0 0 28%;
        max-width: 28%;
    }
    .col-boletim-desktop2 {
        -webkit-flex: 0 0 71%;
        -ms-flex: 0 0 71%;
        flex: 0 0 71%;
        max-width: 71%;
    }
}

@media only screen and (min-width: 1670px) and (max-width: 2085px) {
    .container-carousel-initial {
        max-width: 1670px !important;
    }

    .container-cards .card.formato-caixas {
        flex: 0 0 500px;
    }

    .margin-boletim {
        justify-content: center;
    }
    .col-desktop {
        -webkit-flex: 0 0 90%;
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }
    .text-center-water {
        max-width: 1630px;
    }
    .container-cards {
        justify-content: space-between;
    }
    .margins-leitura,
    .margin-desktop-calculo {
        margin: 0 .50rem 3rem .50rem;
    }
    .animation-desktop {
        height: 300px;
    }
    .col-leitura-horario {
        -webkit-flex: 0 0 91.666667%;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }
}

@media screen and (min-width: 1518px) and (max-width: 1669px) {
    .container-carousel-initial {
        max-width: 1550px;
    }
    .container-cards {
        justify-content: space-around;    
    }
    .margin-boletim {
        margin: 1.5rem 1.8rem;
    }
}

@media screen and (min-width: 1518px) {
    .boletim-mobile {
        display: none;
    }
}

@media screen and (max-width: 1517px) {
    .animacao {
        display: none;
    }
    .margin-boletim-mobile {
        margin: 1rem 0.5rem 3rem 0.5rem;
    }
}

@media screen and (min-width: 1145px) and (max-width: 1517px) {
    .container-cards {
        justify-content: space-between;
    }
}

/* ≥ 1024px → 3 cards por linha */
@media screen and (min-width: 1024px) {
  .container-cards .formato-caixas{
    flex: 1 1 calc(33.333% - 1.25rem);
  }
}

@media only screen and (min-width: 1500px) {
    .radius-boletins-conteudo {
        border-radius: 5px !important;
    }
    
}

@media only screen and (min-width: 1343px) {
    .container-cards .formato-caixas {
        flex: 0 0 400px;
    }
    
}

@media screen and (min-width: 992px) and (max-width: 1343px) {
    .container-cards {
        justify-content: space-between;
    }
}


@media screen and (min-width: 992px) and (max-width: 1024px) {
    .container-cards {
        justify-content: center !important;
    }

}

/* Entre 680px e 1023px → 2 cards por linha */
@media (min-width: 680px) and (max-width: 1023px) {
  .container-cards .formato-caixas{
    flex: 1 1 calc(50% - 1.25rem);
  }
}

@media only screen and (max-width: 1024px) {
    .container-cards {
        display: flex;
    }
    #cardToday,
    #cardTodayNone {
        order: 1 !important;
    }
    #cardYesterday,
    #cardYesterdayNone {
        order: 2;
    }
}

@media only screen and (min-width: 993px) {
    .esconder-menu-compacto {
        display: none;
    }
    .deslocamento-offset {
        offset-inline-end: none !important;
    }
    .margin-hero-desk {
        margin-left: 1rem !important;
    }
}

@media (max-width: 992px) {
    .col-sm-12 {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .align-text-menu {
        text-align: left;
    }
    .navbar-nav .nav-link {
        padding: 0.475rem 0 0.475rem 1rem;
    }
    .nav-link{
        font-size: 0.9rem;
        font-weight: 800;
    }
    .d-md-block .text-white {
        font-size: 0.8rem;
    }
    .col-lg-10 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .esconder-imagem {
       display: none;
    }
    .fonte-menu {
        font-size: 12px !important;
    }
    .buttons-grafh-justify {
        justify-content: center;
    }
}

@media only screen and (max-width: 768px) {
    .pt-4 {
        padding-top: 1rem !important;
    }
    .tamanho-logo {
        max-width: none !important;
        width: 110px !important;
        height: auto !important;
    }
    .tamanho-fonte-padrao {
        font-size: 1rem;
    }
    .radius-botoes {
        width: 150px;
        font-size: 0.9rem;
    }
    .m-5 {
        margin: .5rem !important;
    }
    .radius-boletins-conteudo {
        border-radius: 5px !important;
    }
    .card-table-grafic {
        margin: 0;
    }
    .mr-5 {
        margin-right: 0rem !important;
    }
    .margin-text-agua {
        margin-left: 0;
    }
    .margin-spinner-agua {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) {
    .posicao {
        justify-content: center;
    }
}

@media only screen and (max-width: 767px) {
    .posicao {
        justify-content: start;
    }
    .d-flex.flex-md-row {
        flex-direction: column; /* Alinha verticalmente */
        text-align: center; /* Centraliza o texto */
    }
    /* Ajusta a margem entre o ícone e o texto no modo vertical */
    .d-flex.flex-md-row .ml-2 {
        margin-left: 0; /* Remove o espaçamento horizontal no modo vertical */
        margin-top: 10px; /* Adiciona espaçamento vertical entre o ícone e a mensagem */
    }
    /* Centraliza tudo no modo vertical */
    .alert {
        text-align: center;
    }
}

@media (min-width: 570px) and (max-width: 679px) {
    .formato-caixas {
        flex: 0 0 500px;
    }
}


@media only screen and (max-width: 670px) {
    #alertMessage .tamanho-fonte {
        font-size: 0.9rem;
    }
    .col-8 {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
}

@media (min-width: 641px) {
    .justify-carousel-colors {
        justify-content: end;
    }
}

@media (max-width: 640px) {
    .hero h1 {
        font-size: 35px;
        line-height: 36px;
    }
    .hero p {
        font-size: 16px;
        line-height: 24px;
    }
    .justify-carousel-colors {
        margin-top: 35px;
        justify-content: center;
    }
    .indicator-colors {
        margin-right: 0; /* Ajusta o espaçamento da margem direita */
    }
}

@media only screen and (min-width: 492px) {
    .align-text-balanco {
        justify-content: space-between;
    }
}

@media only screen and (max-width: 491px) {
    .align-text-balanco {
        justify-content: center;
    }
    .button-balanco {
        margin-top: 10px;
    }
    .titulo-tabela {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width: 475px) {
    .hero h1 {
        font-size: 28px !important;
        text-align: center;
    }
    .hero p {
        font-size: 16px;
        text-align: center;
    } 
    .align-buttons-section {
        justify-content: center;
    }
    .btn-custom-message {
        width: 180px;
    }
    .d-md-block .text-white {
        text-align: center;
    }
    .col-lg-10 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 429px) {
    .width-mobile-hr {
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
}

@media only screen and (max-width: 428px) {
    .col-md-4, .col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .width-mobile-hr {
        width: 100%;
    }
}

@media only screen and (min-width: 371px) {
    .justify-localizacoes {
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 370px) {
    .posicao {
        justify-content: center;
    }
    .logo-localizacoes {
        margin-top: 10px;
    }
    .justify-localizacoes {
        justify-content: center;
    }
    .text-cod-date span {
        font-size: 14px;
    }
}

@media only screen and (min-width: 338px) {
    .align-mobile {
        justify-content: space-between !important;
    }
}

@media only screen and (max-width: 337px) {
    .align-mobile {
        justify-content: space-between !important;
    }
    .margin-boletim {
        margin: 0.5rem;
    }
    .margin-boletim-mobile {
        margin: 1rem 0.5rem 3rem 0.5rem;
    }
}

@media only screen and (max-width: 320px) {
    body {
        overflow-x: auto !important;
    }
}

@media only screen and (max-width: 253px) {
    .btn-custom-message {
        width: 140px;
    }
}