/* ===== MENU ===== */
body {
    font-family: Arial, Helvetica, sans-serif;

    /* Garantir que o gradiente ocupe toda a tela */
    background: #32a9d8;
		
/*linear-gradient(135deg, #1fa2d6, #7cc3df);

    color: #0b3c4d;
    margin: 0;
    padding: 0;
    
    /* Garantir que a altura mínima seja a altura da tela */
    min-height: 100vh;
}
	
	/* MENU SUPERIOR */

.topo{
background:#e6e6e6;
height:55px;
display:flex;
align-items:center;
padding:0 20px;
box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.logo{
font-weight:bold;
font-size:10px;
margin-right:40px;
}

.topo a{
margin-right:20px;
text-decoration:none;
color:#444;
font-weight:500;
}

.topo .direita{
margin-left:auto;
}



	
/* ===== MAPA ===== */

svg {
    width: 90%;  /* Garantir que o mapa ocupe toda a largura disponível */
    height: auto; /* Ajustar a altura automaticamente para manter a proporção */
    max-heigt: 100vh; /* Garantir que a altura máxima do mapa não ultrapasse a altura da tela */
    margin-top: 70px; /* Ajustar a margem superior para não sobrepor o topo */
}

path{
fill:white;
stroke:#1fb3d6;
stroke-width:1;
transition:0.2s;
}

.ativo{
fill:#0b5e7a;
cursor:pointer;
}

.ativo:hover{
fill:#083f52;
}

/* ===== POPUP ===== */

#popup {
    position: absolute;
    display: none;
    width: 200px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    
    /* Ajustes no padding e margem */
    padding: 8px;  /* Ajuste do padding para evitar grandes espaços */
    margin: 0;

    /* Centralização do conteúdo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#popup p {
    margin: 0;  /* Remove margens extras nos parágrafos dentro do popup */
    padding: 0;
}

#popup #nome {
    font-weight: bold;
    margin-bottom: 5px;  /* Ajuste do espaçamento entre o nome e o resto do conteúdo */
}

#popup #capital {
    font-size: 12px;
    color: #333;  /* Cor para a capital */
    margin-top: 5px; /* Espaço superior para a capital */
}

#popup img{
width:100%;
}

.info{
padding:10px;
}

.bandeira{

vertical-align:middle;
margin-right:5px;
}

/* ===== REMOVER BARRA GOOGLE ===== */

.goog-te-banner-frame {
display:none !important;
}

.skiptranslate iframe {
display:none !important;
}

.goog-logo-link {
display:none !important;
}

.goog-te-gadget{
font-size:0px !important;
}

body{
top:0px !important;
}

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}


	.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
    width: 350px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: left;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}
.modalDialog1 {  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

-->

.topo{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;

background:#e6e6e6;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 15px;

box-shadow:0 2px 6px rgba(0,0,0,0.2);

z-index:999;

box-sizing:border-box;
}

.logo{
font-size:20px;
font-weight:bold;
}

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

.menu-centro{
display:flex;
align-items:center;
gap:4px;
}

.menu-btn{
background:#f5f5f5;
font-size: 14px;
border:none;
padding:8px 14px;
border-radius:20px;
cursor:pointer;
box-shadow:0 2px 4px rgba(0,0,0,0.15);
}


	
/* efeito do menu */

.menu-btn{

background:#f5f5f5;
border:none;

padding:8px 14px;

border-radius:20px;

cursor:pointer;

box-shadow:0 2px 4px rgba(0,0,0,0.15);

transition:all 0.25s ease;

}

/* efeito ao passar mouse */

.menu-btn:hover{

background:#0b5e7a;

color:white;

box-shadow:0 4px 8px rgba(0,0,0,0.25);

}

.menu-btn:hover{

background:#0b5e7a;
color:white;

transform:translateY(-1px);

}
	
/* lado direito */

.menu-direita{
display:flex;
gap:4px;
align-items:center;
flex-shrink:0;
}

.menu-direita input{
width:140px;
border:none;
border-bottom:2px solid #888;
background:transparent;
padding:4px;
outline:none;
}

.login{
background:#f5f5f5;
border:none;
padding:8px 16px;
border-radius:20px;
cursor:pointer;
}

/* ===== RESPONSIVO ===== */

@media (max-width:900px){

.menu-toggle{
display:block;
}

.menu-centro{
position:absolute;
top:70px;
left:0;
width:100%;
background:#e6e6e6;
flex-direction:column;
align-items:flex-start;
padding:20px;
display:none;
}

.menu-centro.active{
display:flex;
}

.menu-direita{
flex-direction:column;
align-items:flex-start;
width:100%;
}

.menu-direita input{
width:100%;
}

/* ===== REMOVER BARRA GOOGLE ===== */

.goog-te-banner-frame {
display:none !important;
}

.skiptranslate iframe {
display:none !important;
}

.goog-logo-link {
display:none !important;
}

.goog-te-gadget{
font-size:0px !important;
}

/* AJUSTE DO ESPAÇAMENTO ENTRE OS BOTÕES DO MENU SUPERIOR */

.topo .menu-centro {
    gap: 2px;
}

.topo .menu-centro a,
.topo .menu-centro button,
.topo .menu-direita a,
.topo .menu-direita button {
    margin-right: 0;
}

.topo .menu-btn {
    margin: 0;
    padding: 8px 12px;
}