.container {
      display: flex;
      flex-direction: column; /* Coloca os elementos em coluna */
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .header {
      width: 100%; /* Ocupa 100% da largura do container */
      padding: 20px 0 0 0;
      
    }

    .content {
      display: flex;
      flex-wrap: wrap; /* Permite quebra de linha caso necessário */
    }

    .box {
      flex: 1 1 44%; /* Largura: 50% por padrão */
      padding: 20px 0;
      text-align: center;
    }

   
   .datas_container{
    width: 100%;
    height: 30px;
   }
   
   .datas_horas,
   .datas_dia{
    width:100%;
    height: 15px;
    float: left;
    margin:0;
    padding:0;
   }
   
   .data_dia{
    width:20%;
    height: 15px;
    float: left;
    margin:0 -1px 0 0;
    padding:0;
    border-right: 1px solid #000;
    text-align: center;
    font-size: 12px;
   }
   
   .data_horas{
    width:20%;
    height: 15px;
    float: left;
    margin:0 -1px 0 0;
    padding:0;
    border-right: 1px solid #000;
   }
   
   .data_hora{
    text-align: center;
    font-size: 10px;
    width:12.5%;
    height: 15px;
    float: left;
    margin:0;
    padding:0;
   }
 
 .slidecontainer {
   width: 90%; 
   height: 60px;
   float: left;
 }
 
 /* The slider itself */
 .slider {
   -webkit-appearance: none;  /* Override default CSS styles */
   appearance: none;
   width: 100%; /* Full-width */
   height: 25px; /* Specified height */
   background: #d3d3d3; /* Grey background */
   outline: none; /* Remove outline */
   opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
   -webkit-transition: .2s; /* 0.2 seconds transition on hover */
   transition: opacity .2s;
 }
 
 /* Mouse-over effects */
 .slider:hover {
   opacity: 1; /* Fully shown on mouse-over */
 }
 
 /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
   width: 25px; /* Set a specific slider handle width */
   height: 25px; /* Slider handle height */
   background: #1b055e; /* Green background */
   cursor: pointer; /* Cursor on hover */
 }
 
 .slider::-moz-range-thumb {
   width: 25px; /* Set a specific slider handle width */
   height: 25px; /* Slider handle height */
   background: #1b055e; /* Green background */
   cursor: pointer; /* Cursor on hover */
 }
 
 .input{
   float: left;
   font-size: 20px;
   margin-right: 8px;
 }
 
 .local{
     width: 100%;
     float: left;
    padding: 12px 0 20px 20px;
 }
 
 .w100{
     width: 100%;
     float: left;
 }
 
 .content_mapas{
     width: 520px;
     padding: 20px 0;
     margin: 0;
     padding: 0;
     float: left;
 }
 
 .mapas{
    width: 80%;
    margin: 0 auto;
    padding: 0;
 }
 
 .menu_topo{
   width: 100%;
   margin: 20px 0;
   padding: 0;
   height: auto;
   float: left;
 }
 
 .label_botoes{
     font-size: 12px;
     font-weight: bold;
     margin: 12px 0;
     text-align: right;
     width: 100px;
     float: left;
 }
 
 
 #mapas{
     width: 100%;
     max-width: 1100px;
     float: left;
 }
 
.mapa{
    width: 3200px;
    height: 1200px;
    float: left;
}


#mapa1,
#mapa2,
#mapa3{
    width: 16000px;
    height: 1200px;
    position: absolute;
    z-index: 1;
    top:0;
    left: 0;
}

 #mapa2,
 #mapa3{
     display: none;
 }
 
 #selecoes{
     float: left;
     width: 100%;
 }
 
 .botao_zoom,
 .botao_mapa{
   margin: 0 4px;
    padding: 4px;
    width: 70px;
    font-size: 16px;
   float: left;
   background-color: #ccc;
 }
 
 .botao_zoom{
   width: 50px;
   font-size: 20px;
   line-height: 18px;
 }
 
 .graficos{
     float: left;
     width: 600px;
     padding: 20px;
 }
 
 .canva{
     width: 500px;
     height: 220px;
 }
 
 .grafico{
     width: 100%;
     margin: 0;
     float: left;
 }

 .grafico_frame{
     width: 100%;
     margin: 0;
     float: left;
 }
 
 .envoltorio_mapa{
     position: relative;
     width: 400px;
     height: 400px;
     border: 0;
     margin: 0;
     padding: 0;
     overflow: hidden;
   float: left;
 }
 
 .info{
     float: left;
     width: 90%;
     height: auto;
     border: 1px solid #000;
     margin: 20px;
     padding: 0;
     font-size: 20px;
 }
 
 .info_data{
     width: 100%;
     text-align: center;
     font-weight: bold;
     font-size: 20px;
     float: left;
     border-bottom: 1px solid #000;
     padding: 8px 0;
 }
 
 .vd{
   color: rgb(0, 116, 17);
 }
 
 .am{
   color: rgb(211, 211, 22);
 }
 
 .lr{
   color: rgb(196, 115, 10);
 }
 
 .vm{
   color: #d33;
 }
 
 .info_aviso{
     font-size: 18px;
     float: left;
     padding: 12px;
     font-weight: bold;
     width: 100%;
 }
 
 
 .info_dados{
     font-size: 16px;
     float: left;
     padding: 6px 0 0 12px;
     width: 90%;
     text-align: left;
 }
 
.comentario{
   font-weight: bold;
   font-size: 20px;
   width: 100%;
   margin: 0;
   padding: 12px 0;
   text-align: center;
}

 .logo{
    width: 200px;
    height: 200px;
  }
 
 .grupo_botoes{
     width: auto;
     padding: 2px 0 0 0;
     float: left;
 }
 
 .escala{
     width: 80px;
     height: 380px;
     position: relative;
     overflow: hidden;
     margin: 20px auto;
 }
 
 
 .img_escala{
     width: 240px;
     height: 380px;
     position: absolute;
     left:0;
 }
 
 .lateral{
     float: left;
     margin: 0;
     padding: 0;
     width: 120px;
 }
 
 .textos_escala{
   float: left;
   width: 100%;
   text-align: center;
 }

 .seletor_local{
   float: left;
   padding: 20px;

}
 

 .fonte_header {
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    margin: 0;
    text-align: left;
    text-transform: none;
    color: #000000;
    margin: 20px 0 0 20px;
    float: left;
    text-align: left;
}
 

.datahora{
  position: absolute;
  top:0;
  width: 160px;
  height: 20px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  z-index: 2;
  padding: 2px 6px;
}

.escondido{
   display: none;
}

#municipio{
   display: block;
}

#praia{
   display: none;
}

.conteudo{
   height: auto;width: 100%;background-color: #fff;float: left;
}

.fonte_praia{
   width: 100%;
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
    float: left;
}

.img_praia{
   width: 100%;
}

#info3{
   height: 260px;
}

.info_header,
.info_praia{
   width: 90%;
   font-size: 20px;
   margin: 20px 0 0 20px;
   text-align: left;
   float: left;
}

.div_info_praia{
   width: 100%;
   display: none;
   font-size: 12px;
   margin: 12px 0;
   text-align: left;
   float: left;
}



.outer-container {
   width: 90%; /* Define a largura visível da div externa */
   max-width: 500px;
   overflow-x: auto; /* Habilita barra de rolagem horizontal */
   border: 0;
   padding: 10px;
   margin: 20px;
}

.inner-container {
   display: inline-block; /* Content gets treated as one block */
   width: 500px; /* Largura maior que a da div externa para forçar rolagem */
   padding: 0;
   margin: 0;
}







  /* Estilo para telas menores */
  @media (max-width: 768px) {
    .box {
      flex: 1 1 100%; /* Cada div ocupa 100% da largura */
    }
  }