<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.relative{
	position: 		relative;
}

.w3-container{
	padding:0;
}

.zh-title,
.zh-intro{
	padding: 0 16px;
}


.no-margin{
	margin:0;
}

.no-margin{
	margin:	0;
}

.map{
	position: relative;
	width: 100%;
}

.map svg{
	width: 100%;
}

.container-text{
	width: 100%;
}



.w3-opacity{
	opacity: 0.2!important;
}

@keyframes colorCliked {
    from {fill: #EF7A59;}
    to {}
}

@-webkit-keyframes colorCliked {
    from {fill: #EF7A59;}
    to {}
}


.both{
	clear: both;
}

circle{
	cursor: pointer;
}

select{
	display: block;
	margin: 20px auto;
	
}

@media(max-width: 600px){
	.textos{
		position: relative!important;
		width: 100%!important;
		display : block!important;
		
	}
	.w3-margin-left{
		margin: 0!important;
	}
	
	circle{
		r: 10;
	}

		
}

.botao-bairro{
	cursor: pointer;
}

.legenda-box{
	display: block;
	padding: 20px;
}

.legenda-box .legenda{
	margin: 5px auto;
}

.legenda-box .legenda .color{
	display: inline-block;
	width: 15px;
	height: 15px;
}

.legenda-box .legenda .color.vermelho{
	background-color: #AD1917;
}

.legenda-box .legenda .color.amarelo{
	background-color: #F9AF15;
}

@media all and (min-width: 550px){

	.map{
		position: relative;
		width: 60%;
		float: left;
	}
	
	.map svg{
		float: left;
		width: 100%;
	}
	
	.container-text{
		float: right;
		width: 40%;
	}

	select{
		
		width: 60%;
		
	}

	.legenda-box{
		display: block;
		position: absolute;
		bottom: 30px;
		right: 20px;
	}

}</pre></body></html>