* {
  margin: 0;
  font-family: "ocr-aregular";
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
  font-family: "ocr-aregular";
  src: url("font/ocr-aregular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


/* width */
::-webkit-scrollbar {
  width: 5px;
 height: 0;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #c0c0c0; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff; 
}


body {
  
  overflow-x: hidden;
  
  background-color: #000000;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */


}
body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.about-bar::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}


  /* about*/


.menugrupo {

  width: 100%; 
  height: auto;
  max-height: 70px;
  display: flex; 
  justify-content: center;
}

.menu_about {
width: auto; height: auto;display: flex; justify-content: center;align-items: center;
}

.menu_fases{width: auto; height: auto;margin: 5px; 
  display: flex; flex-direction: row; 
  justify-content: space-between; align-items: center;
  border: 1px solid white; 
  border-radius: 50px;
  backdrop-filter: blur(15px);}
.menu_fases-container{
  width: auto; 
  height: auto;margin: 10px 0; display: flex; 
  flex-direction: row; justify-content: space-between;
  border-radius: 50px;}

  .title {
    color: rgb(255, 255, 255);
    margin: 0%;
       width: 360px;


    display: block;
    text-align: left;

    padding:10px 15px;

    z-index: 100;
    font-size: 22px;
    transition: 0.2s ease-in;
  
  }



  .title:hover{

color: #ffffff;
cursor: pointer;
transition: 0.3s ease-in;
font-style: underline;

}



span.typing1{  font-style: italic;}
  

b.arrow{display: none;}

.title:hover b.arrow{ display: inline-block; font-size: 2vw; }


  .about-bar {
position: fixed;
    display: flex
;
    top: 0%;
    left: 0px;
    height: 0px;
    width: 100%;
    z-index: 9999;
    overflow: hidden;
    /* padding-top: 100px; */
    transition: 0.5s 
cubic-bezier(0, 0.84, 0, 0.98);
    backdrop-filter: blur(40px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;



  }


  .title-about{
    
width: 65%;
        margin-left: auto;
        margin-right: auto;
        display: flex
;
        color: rgb(136, 136, 136);
        font-size: 18px;
        line-height: 22px;
    overflow-y: hidden;
    margin-top: 0;
        align-items: center;
        justify-content: space-between;
  }

.menu{
  display: inline-block;
}

.menucontainer{
  top: 5%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 999;
    width: 100%;
    height: auto;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-between;

}


.top{
  position: fixed;
  border-bottom: 1px solid white;
  width: 90%;
  height: 5%;
  left: 5%;
  top: 0%;
  z-index: 99;
}
.toparquivo{
  position: fixed;
    border-top: 1px solid white;
    background-color: #000000;;
    filter: blur(10px);
   width: 100%;
        height: 25%;
        left: 0;
    top: -5%;
    z-index: 89;
}
.left{
  position: fixed;
  border-right: 1px solid white;
  width: 5%;
  height: 90%;
  top: 5%;
  z-index: 999;
  left: 0%;
}



.bottomarquivo{
position: fixed;
    filter: blur(20px);
    width: 100%;
    height: 100px;
    left: 0;
    background-color: #000000;
    bottom: 0%;
    z-index: 90;
}

.bottom{
  position: fixed;
  border-top: 1px solid white;
  width: 90%;
  height: 5%;
  left: 5%;
  background-color: rgba(0, 0, 0, 0);
  bottom: 0%;
  z-index: 999;
}


.right{
  position: fixed;
  border-right: 1px solid white;
  right: 5%;
  height: 90%;
  top: 5%;
  z-index: 999;

}


  



/* blur layer index  */
.top2{
  position: fixed;
  background-color: #00000091;
 
  width: 100%;
  height: 5%;
  left: 0%; 
  top: 0%;
  z-index: 9;
}


.left2{
  position: fixed;
  background-color: #00000091;

  width: 5%;
  height: 90%;
  top: 5%;
  z-index: 9;
}


.bottom2{
  position: fixed;
  background-color: #00000091;
  width: 100%;
  height: 5%;
  left: 0%;
  bottom: 0%;
  z-index: 9;
}


.right2{
  position: fixed;
  background-color: #00000091;
top: 5%;
  right: 0%;
  width: 5%;
  height: 90%;
 
  z-index: 999;

}





.blank2 {
 
    top: 10%;
    position: fixed;
    z-index: 100;
    height: auto;
    display: flex;
    font-size: 22px;
    width: 100%;
    color: #ffffff00;
    background-color: #00000000;
    border: 0px solid white;
    text-decoration: none;
    align-items: center;
    justify-content: center;
}


  .carousel-container {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      max-width: 100%;
      width: 100%;
       overflow-x: auto;
  white-space: nowrap; /* if using inline items */
  /* optional: smooth for manual scroll too */
  scroll-behavior: smooth;
    }

    .arrow {
      cursor: pointer;
      font-size: 1.5rem;
      user-select: none;
      padding: 0.5rem;
      border-radius: 50%;
    color: white;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: background 0.2s ease;
    }

    .arrow:hover {

        color: rgb(202, 202, 202);
    }

    .carousel {
      display: flex;
      gap: 0.5rem;
      overflow-x: auto;
      scroll-behavior: smooth;
      list-style: none;
      margin: 0;
      padding: 0;
      scrollbar-width: none; /* Firefox */
      align-items: flex-start;
       position: relative;
     mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

    .carousel::-webkit-scrollbar {
      display: none; /* Chrome/Safari/Edge */
    }

    .carousel li {
      flex-shrink: 0;
    }





.legenda1{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex
;
    flex-direction: column;
    z-index: 1;
    text-align: center;
    align-items: center;
 
}


 

.legendainfo{
position: fixed;
    white-space: nowrap;
    display: flex
;
bottom: 0;
    height: 0;
 width: 90%;
    gap: 15px;
    margin: 5% !important;
    padding: 15px 0px;
    margin: 0 auto;
    flex-direction: column;
    z-index: 80;
border: 1px solid white;
border-radius: 15px;
    backdrop-filter: blur(15px);
    color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.legendainfo p{
 
  margin-left: auto;
  margin-right: auto;

    font-size: 14px;
    line-height: 16px;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  z-index: 80;

  color: white;
  text-align: center;

}
.legendatexto{
 
 display: flex
;
    flex-direction: column;
    color: white;
    text-align: center;

}

.legendatexto p{
 
  margin-left: auto;
  margin-right: auto;

    font-size: 14px;
    line-height: 16px;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  z-index: 80;

  color: white;
  text-align: center;

}
.legendatitle-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: auto;
  height: auto;
  padding: 5px 10px;
  border-bottom: 1px solid white;
  margin-bottom: 5px;
}
.closelegendainfo{
      position: absolute;
    top: 15px;
    right: 15px;
    color: white;
    font-size: 30px;
    line-height: 32px;
    z-index: 2000;
    cursor: pointer;
    transition: all 0.3s 
ease-in;
}


.headerarquivo{
   top: 0px;
position: fixed;
width: 100%;
z-index: 10;

height: 10vw;
}

.background{
  top: 0px;
position: fixed;
width: 100%;
z-index: 10;
background-color: #000000ab;
height: 10vw;
filter: blur(5px);
}


.mapa{
 
margin: 10px;
padding: 5px 15px;
 width: auto;
  border: 1px solid rgba(255, 255, 255, 0);
  background-color: #00000091;
  z-index: 100;
  font-size: 20px;
  transition: all 0.2s ease-in;
    text-decoration: none;
      border-radius: 50px;
    
}

.mapa:hover{
  background-color: #ffffff50 !important;
   transition: all 0.2s ease-in;
   border: 1px solid white;
   border-radius: 50px;
}

.mapa-ativo{
 
margin: 10px;
padding: 5px 15px;
 width: auto;
  z-index: 100;
 font-size: 20px;
  transition: 0.2s ease-in;
   border-radius: 50px;
    text-decoration: none;
  border: 1px solid white;
  background-color: #ffffff50 !important;
   transition: all 0.2s ease-in;
}

.mapa-ativo:hover{


  background-color: #ffffff50 !important;
  transition: 0.2s ease-in;
    border: 1px solid white;
   border-radius: 50px;

}




.arquivo{
padding: 5px 15px;
 width: auto;
align-items: center;

  z-index: 100;
 font-size: 20px;
  text-decoration: none;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0);
margin: 10px;
 transition: 0.2s ease-in; 
 
   border-radius: 50px;
}
.arquivo:hover{
  border: 1px solid white;
   border-radius: 50px;
  transition: 0.2s ease-in;

  background-color: #ffffff50 !important;
 
}

.arquivo-ativo{
margin: 10px;
padding: 5px 15px;
 width: auto;
align-items: center;
  border: 1px solid white;
   border-radius: 50px;
  z-index: 100;
 font-size: 20px;

  text-decoration: none;
  text-align: center;

 transition: 0.2s ease-in;  
  background-color: #ffffff50 !important;
}

.arquivo-ativo:hover{
  background-color: #ffffff50 !important;
  background: transparent ;
border-bottom: 2px solid white;
  transition: 0.2s ease-in;
 
}



.rede{
margin: 10px;
padding: 5px 15px;
 width: auto;
  z-index: 100;
 font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0);
      text-decoration: none;
      transition: 0.2s ease-in;
       border-radius: 50px;
}
.rede:hover{
  border: 1px solid white;
   border-radius: 50px;
  transition: 0.2s ease-in;
  background-color: #ffffff50 !important;
}

.rede-ativo{
 
margin: 10px;
padding: 5px 15px;
 width: auto;
  z-index: 100;
 font-size: 20px;
    border: 1px solid rgb(255, 255, 255);
   border-radius: 50px;
      text-decoration: none;
      transition: 0.2s ease-in;
      background-color: #ffffff50 !important;
}
.rede-ativo:hover{
  background-color: #ffffff50 !important;
  border-bottom: 2px solid white;
  transition: 0.2s ease-in;
   border: 1px solid white;
   border-radius: 50px;
}



.addmore{
 
    display: flex
;
    margin: 10px;
    padding: 0px 20px 0px;
    width: 79%;
    height: 70%;
border-radius: 50px;
  z-index: 100;
 font-size: 20px;
  color: #000000 !important;
  background-color: white !important;
  transition: 0.2s ease-in;
 border: 1px solid white;
    text-decoration: none;
  align-items: center;
    justify-content: center;
  
}
.addmore:hover{
  border-bottom: 2px solid white;
  font-style: none !important;
  transition: 0.2s ease-in;
    color: #000000 !important;
    background-color: white;
}

.addmore-ativo{
 
  margin: 0%;
padding: 5px 15px;
 width: auto;

  z-index: 100;
 font-size: 20px;
  color: #000000;
  
  transition: 0.2s ease-in;
border-right: 1px solid white;
  border-left: 1px solid white;
    text-decoration: none;
    border-bottom: 10px solid white;
  
}
.addmore-ativo:hover{
  background: url(R1.jpeg);
   animation: changeBg 0.2s infinite;
  border-bottom: 2px solid white;
  font-style: none !important;
  transition: 0.2s ease-in;
}



.addmore .icon {
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #00000000;
    border-radius: 22px;
}
.addmore .icon::before {
    display: block;
    position: absolute;
    content: '';
top: 13px;
    left: 7px;
    width: 15px;
    height: 3px;
    background: currentColor;
}
.addmore .icon::after {
    display: block;
    position: absolute;
    content: '';
 top: 7px;
    left: 13px;
    width: 3px;
    height: 15px;
    background: currentColor;
    transition: rotate 0.5s ease;
}


.noise{
 
  margin: 0%;
  margin: 2.8% 0% 0%;
  left: 5%;
  position: fixed;
  z-index: 50;
  font-size: 1.8vw;
  background: url(R1.jpeg);
   animation: changeBg 0.2s infinite;
  transition: 0.2s ease-in;
  width: 90%;
  height: 2.5vw;
  border: 1px solid white;
  text-decoration: none;
 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.noise2{
 
  margin: 0%;
  margin: 3.5% 0% 0%;
  left: 5%;
  position: fixed;
  z-index: 50;
  font-size: 1.8vw;
  background: url(R1.jpeg);
  animation: changeBg 0.2s infinite;
  transition: 0.2s ease-in;
  width: 90%;
  height: 2.5vw;
  border: 1px solid white;
  text-decoration: none;
 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}



@keyframes changeBg{
 50%  {background: url(R.jpeg);}
}

.aviso{
 
  bottom: 0px;
  left: 0;
  position: fixed;
  display: flex
;
  padding: 10px 0;
  color: white;
  z-index: 130;
  font-size: 14px;
  transition: 0.2s ease-in;
  width: max-content;
  height: auto;

  border-top: 1px solid white;
  text-decoration: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #000000;
  will-change: transform;
  flex-direction: row;
}

p.contentaviso.animated {
    animation: slider-top-banner 30s 
linear 0s infinite;
}

@keyframes slider-top-banner {
	from {
		transform: translateX(0)
	}
	to {
		transform: translateX(-100%)
	}
}


.introduction{
  position: fixed;
  width: 100%;
  text-align: center;
  top: 45%;

  margin-right: auto;
  margin-left: auto;
  color: white;
  font-size: 14px;
}



  .texto{
    width: 65%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
    display: flex
;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    padding-top: 2%;
    justify-content: flex-start;

  
  }

  

  .about{ 
  position: relative;
        color: white;
        font-size: 18px;
        line-height: 22px;
        width: 100%;
        height:100%;
        overflow-y: scroll;
        padding-right: 0%;
    
  }
  
  .names {
    padding-left: 5%;
  position: relative;
  width: 20%;
  color: rgb(255, 255, 255);
  font-size: 0.95vw;
  display: block;
  overflow-y: hidden;
  }
 
.mapafilter_container{
left: 50%;
    width: 100%;
    height: auto;
    /* -webkit-transform: translateX(-50%); */
    /* transform: translateX(-50%); */
    /* top: 150px; */
    border: 1px solid white;
    border-radius: 30px;
    color: rgb(255, 255, 255);
    padding: 10px;
    /* text-align: left; */
    /* position: fixed; */
    z-index: 5;
    transition: 0.2s 
ease-in;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
}


.mapafilterbtn{
    display: flex;
    flex-direction: row;
    /* color: black; */
    /* background-color: #ffffff50 !important; */
    flex-wrap: nowrap;
    border: 1px solid #ffffff00;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.2s 
ease-in;
}
.mapafilterbtn:hover{
border: 1.5px solid white;
 background-color: #ffffff93 !important;
transition: all 0.2s ease-in;
}
.mapafilterbtn-active{
display: flex;
    flex-direction: row;
    color: black;
 background-color: #ffffff50 !important;
    flex-wrap: nowrap;
    border: 1px solid white;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.2s ease-in;
}

.mapafilterbtn-active:hover{
border: 1.5px solid white;
 background-color: #ffffff93 !important;
transition: all 0.2s ease-in;
}
p.radiofiltermapa{

  width: 10px;
  height: 10px;
  color: white;
  border: 2px solid white;
flex: 1 0 auto; 
  border-radius: 50%;
}

.filtrohover:hover{
  background: rgb(255, 255, 255);
}

p.radiofilter2{
color: white;
  width: auto;
  position: relative;

  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0);
}



.radiofiltercontainer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
padding: 5px 10px;
    font-size: 15px;
    list-style: none;
    align-items: center;
}

.radiofiltercontainer.active p.radiofilter{
  background: rgb(255, 255, 255);

}


  ul.mapscontainer{
  list-style: none;
   padding: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  


  ul.radio{
z-index: 1;
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 100%;
    padding: 10px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    gap: 5px;
    list-style: none;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .CloseBTNlexicon1{
    color: white;
    /* float: right; */
margin-left: 10px;
    margin-bottom: 10px;
    font-size: 50px;
    z-index: 2000;
    cursor: pointer;

    transition: all 0.3s ease-in;
  }



.CloseBTNlexicon1:hover{

  transition: all 0.3s ease-in;

}



   /* a LINKS */

   
 
   a.mapa:link, .mapa-ativo:link, a.arquivo:link, a.arquivo-ativo:link, a.rede:link, a.rede-ativo:link, a.addmore:link, a.addmore-ativo:link, a.blank:link   {
    color: rgb(255, 255, 255);
    text-decoration: none;
    }
   
      
    a.mapa:visited, .mapa-ativo:visited, a.arquivo:visited, a.arquivo-ativo:visited, a.rede:visited, a.rede-ativo:visited, a.title:visited, a.addmore:visited, a.addmore-ativo:visited, a.blank:visited, a.redebtn:visited {
      color: rgba(255, 255, 255, 0.5);
    background-color: transparent;
    text-decoration: none;
    }
    
    a.mapa:hover, .mapa-ativo:hover,a.arquivo:hover, a.arquivo-ativo:hover, a.rede:hover, a.rede-ativo:hover, a.addmore:hover, a.redebtn:hover, a.addmore-ativo:hover {
      color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
   
  
  
    }
    
    a.mapa:active,a.arquivo:active, a.rede:active, a.title:active, a.addmore:active, a.redebtn:active {
      color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    }
    


  
a.ppitags{
  color: rgb(192, 192, 192);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0);
  
}

a.ppitags:hover{
  color:#ffffff;
  border: 1px solid white;
  border-radius: 10px;
  font-style: italic;
}

a.redebtn:link  {
  color: rgba(255, 255, 255, 0.432);
  background-color: transparent;
  text-decoration: none;
  }

.active  {
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
    }


  a.mapafilterbtn:active{
    color: rgb(255, 255, 255);
    background-color: transparent;
    text-decoration: none;
  } 


 a.mapafilterbtn:link{
  color: rgb(255, 255, 255);
    text-decoration: none;
 }

 a.mapafilterbtn:visited{
  color: rgb(255, 255, 255);
  background-color: transparent;
  text-decoration: none;
 }



 .mapafilter_legend{
  margin-top: 55vh;
  color: rgb(255, 255, 255);
  right: 22vw;
  display: block;
  text-align: left;
  position: fixed;
  z-index: 70;
  transition: 0.2s ease-in;
}


.mapafilterlegend{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

p.radiofilterfreguesia{

  width: 2vh;
  height: 0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: rgba(255, 255, 255, 0.404); 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}



p.radiofilterfreguesia0{

  width: 10px;
  height: 100%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #85ff85; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesia100{

  width: 10px;
  height: 100%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #5cff5c; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesia200{

  width: 10px;
  height: 100%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #00e000; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesia300{

  width: 10px;
  height: 100%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #008f00; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}


p.radiofilterfreguesia300plus{

   width: 10px;
  height: 100%;
  /* padding: 0.2vh 0.2vh; */
  background-color: #003d00; 
  border: 2px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterponto{

  
  height: 0.1vw;
  margin-top: 10%;
  margin-left: 20%;
  margin-right: 12%;
  padding: 0.2vh 0.25vh;
  color: white;
  border: 1px solid white;
  background-color: rgb(0, 0, 0);
 
  /* flex: 1 0 auto; */
  border-radius: 50%;
}
p.radiofilterponto2{


  height: 10px;
  width: 10px;

  color: white;
  border: 1px solid white;
  background-color: rgb(255, 255, 255);
 
  /* flex: 1 0 auto; */
  border-radius: 50%;
}
p.radiofilterfreguesia{

  width: 2vh;
  height:0.8vw;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: rgba(255, 255, 255, 0.404); 
  border: 1px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}

p.radiofilterfreguesiablack{
  width: 11vh;
  height: 0.8vw;
  margin-left: 0%;
  margin-top: 1%;
  /* padding: 0.2vh 0.2vh; */
  background-color: rgb(0, 0, 0); 
  border: 1px solid white;
  /* flex: 1 0 auto; */
  border-radius: 0%;
}



p.radiofilterstreetart{

  height: 0.1vw;
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 12%;
  padding: 0.2vh 0.25vh;
  color: white;
  border: 1px solid white;
  background-color: rgb(0, 255, 21);
  /* flex: 1 0 auto; */
  border-radius: 50%;
}

p.radiofilterartepublica{

  height: 10px;
  width: 10px;
  padding: 1px;
  color: white;
  border: 1px solid white;
  
  /* flex: 1 0 auto; */
  border-radius: 50%;
}


.radiofilterlegend{
display: flex
;
    flex-wrap: nowrap;
    width: auto;
    font-size: 15px;
    list-style: none;
    flex-direction: row;
    justify-content: center;
align-items: center;
    gap: 5px;
}


.imagepopup {
  width:50%;
  height: 50%;
  align-content: center;
  padding: 0%;
  border: 0px solid rgb(255, 255, 255);
  cursor: pointer;

}



ul.accordion { list-style-type: none; }


.accordion {
  width: 100%;
     min-width: 250px;
backdrop-filter: blur(15px);
border: 1px solid white;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  overflow: hidden;
}

.accordion .link {
  cursor: pointer;
  display: block;
  padding: 15px 25px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  border-radius: 30px;
  border-bottom: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li { 

    max-width: 260px;
}

.accordion li .link{ 

  padding: 10px 10px;
    margin: 5px 5px;
}

.accordion li.open { 

padding: 5px;
max-width: 265px;
}

.accordion li:last-child .link { border-bottom: 0; }

.accordion li i {
  position: absolute;
 
  left: 12px;
  font-size: 18px;
  color: #ffffff;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
   -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}


.accordion li.open .link { 
  color: #000000; 
background-color: #ffffff;
border-radius: 30px;
    padding: 10px 10px;
    margin: 5px 5px;
}



.accordion li.open i { color: #000000; }

.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/

 .accordion li.open .submenu li { 
list-style: none;

}



.submenu {
  display: none;
backdrop-filter: blur(15px);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
    font-size: 14px;
 
    padding: 10px;
    text-align: left;
    margin: 10px auto 0px;
    bottom: 100%;
    /* left: 0; */
    width: 100%;
    z-index: 10;
    
}
.submenu li p {
  color: #FFF;
  padding: 5px 0;
}
.submenu a {
  display: block;
  text-decoration: none;
  color: #d9d9d9;
  padding: 12px;
  padding-left: 42px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.submenu a:hover {
  background: #b63b4d;
  color: #FFF;
}





/* sliderlegenda -----------------------------*/
.sliderlegenda {
 display: none;
}

.mapnav{
display: flex;
    gap: 15px;
margin: 0px auto 50px;
align-items: flex-end;
}


.sliderlegenda {
    width: 50px;
 
    justify-content: center;
    color: rgb(0, 0, 0);
    margin: 5px;
    padding: 5px 10px;
    border-radius: 30px;
    background-color: white;
    cursor: pointer;
}

 .sliderlegenda:hover {
    width: 50px;
 
    justify-content: center;
    color: rgb(255, 255, 255);
    margin: 5px;
    padding: 5px 10px;
    border-radius: 30px;
 
    background-color: rgb(102, 102, 102);
    transition: all 0.3s ease;
}



/* optional: rotate chevron */
.sliderlegenda i {
  transition: transform 0.3s ease;
}
.sliderlegenda.active i {
  transform: rotate(180deg);
}





.drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
        gap: 6px;
        margin-top: 0px;
  font-family: 'ocr-aregular', sans-serif;
  font-size: 0.9rem;
  color: rgb(255, 255, 255);
  opacity: 1;
  animation: fadeInHint 1s ease-out 0.5s forwards;
  pointer-events: none;
  position: absolute;
  backdrop-filter: blur(15px);
}

.drag-icon {
  font-size: 1.2rem;
  animation: dragWiggle 2s ease-in-out infinite;
  display: inline-block;
}





@keyframes dragWiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes fadeInHint {
  from { opacity: 1; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}










.img-preview {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.preview-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaflet-zoom-animated .img-preview {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.leaflet-zoom-hide .img-preview {
  opacity: 0;
}

.preview-icon {
  cursor: pointer;
}

.preview-icon:hover .img-preview {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1200px) {
    .title {
     width: 400px;
    }

  }


 @media only screen and (max-width: 900px) {
  .submenu {

    font-size: 10px;
    line-height: 12px;

    
}
  ul.mapscontainer {
    list-style: none;
    padding: 0;
    display: flex
;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
  ul.radio {
    width: 100%;
   
}
.accordion li.open {
    padding: 5px;

}

.sliderlegenda {
 display: block;
}
.mapnav.active {
 
    max-height: 0;
  opacity: 0;
  margin: 20px auto 0px;
      -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

 

  .mapnav {
     max-height: 600px;
   
  overflow: hidden;
    -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
 
    display: flex;

    gap: 10px;
    margin: 20px auto 50px;
        align-items: stretch;
        flex-direction: column;
        
}
 .menu_fases-container{
margin: 0px 0;}

 .title {
     width: 250px;
 font-size: 14px;
    }

    .mapa{
      margin: 5px;
 font-size: 14px;
}
.mapa-ativo{
  margin: 5px;
 font-size: 14px;
}
    .arquivo{
      margin: 5px;
 font-size: 14px;
}
.arquivo-ativo{
  margin: 5px;
 font-size: 14px;
}
    .rede{
      margin: 5px;
 font-size: 14px;
}
.rede-ativo{
  margin: 5px;
 font-size: 14px;
}
.addmore{
  margin: 5px;
 font-size: 14px;
}

.accordion li {
       max-width: 250px;
}

  p.radiofilter2{
        font-size: 10px;
        line-height: 12px;

    position: relative;
    top: 0px;
    padding-left: 5px;
    white-space: nowrap;
  }

  
.freguesiascontainer {
    width: 100%;
   
    justify-content: center;
}
.carousel-container {

    max-width: 100%;
    width: 100%;

}
  .container {
  
   top: 10em;
  }
  button.freguesiatag {

    font-size: 14px !important;
    white-space: inherit !important;
  }
  .arrow {
    cursor: pointer;
    font-size: 1rem;

    padding: 0 0.5rem;
 
}

  .toparquivo {
    height: 20%;
  
  }



.tagbtn {
  font-size: 10px;
  text-decoration: none;

}

}

 @media only screen and (max-width: 768px) {

.drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
right: 0;
        gap: 6px;
        margin-top: 0px;
  font-family: 'ocr-aregular', sans-serif;
  font-size: 0.8rem;
  opacity:1;
  animation: fadeInHint 2s ease-out 0.5s forwards;
  pointer-events: none;
}
.drag-icon {
  font-size: 0.8rem;
  display: inline-block;
}


  .aviso{
  font-size: 12px;

}
  .blank2 {
 
    top: 13%;
 
}

.accordion .link {
    padding: 10px 10px;
    font-size: 12px;
    line-height: 14px;
font-weight: 300;
}
 
.legenda1 {
    position: fixed;
    bottom: 0px;
    width: 100%;
            height: auto;
  
    display: flex;
flex-direction: column;
        z-index: 1;
        text-align: center;
        justify-content: center;
}
.legendainfo{

margin: 0;
}
  .legendainfo p{

    font-size: 8px;
    line-height: 10px;


}
  .legendatexto p{

    font-size: 12px;
    line-height: 14px;


}

.closelegendainfo {

    font-size: 15px;
    line-height: 17px;

}
.CloseBTNlexicon1 {
    color: white;
    /* float: right; */
    margin-left: 10px;
    font-size: 30px;
    z-index: 2000;
    cursor: pointer;
    transform: rotate(90deg);
    transition: all 0.3s ease-in;
}
.title-about {
  width: 85%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
    color: rgb(136, 136, 136);
    font-size: 14px;
    line-height: 16px;

}
.about {
    position: relative;
    color: white;
    font-size: 12px;
    line-height: 14px;
    width: 100%;
 height: 100%;
    overflow-y: scroll;
    padding-right: 0%;
}

.about-bar {
    position: fixed;
    display: flex
;
    top: 0%;
    left: 0px;
    height: 0px;
    width: 100%;
    z-index: 9;
    overflow: hidden;
    /* padding-top: 100px; */
    transition: 0.5s 
cubic-bezier(0, 0.84, 0, 0.98);
    backdrop-filter: blur(40px);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: center;
}

 
.mapafilter_container{
 
    padding: 5px;
 
}
.texto {
    width: 85%;
height: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex
;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    padding-top: 5%;
    flex-direction: column;
            justify-content: flex-start;
}
.names {
    padding-left: 0%;
      padding-top: 5%;
    position: relative;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
          font-size: 12px;
        line-height: 14px;
    display: block;
}
.menucontainer {
  
    overflow: visible;
}
.accordion li .link {
    padding: 5px 15px;
    /* margin: 5px 5px; */
}
.blank {
  top: 13%;
}
.menugrupo {
  margin-top: 25px;
    width: 100%;
    height: auto;
max-height: 100%;
    display: flex
;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
}