/*
 *
 * Documento de estilo geral para ser usado em todas as se��es
 *
 */
 
@charset "UTF-8";


/*  topo heraer internos
    ---------------  */

header.header-cli {
	margin: 0px;
	padding: 0px;
	width: 100%;
}
	
div.topo-general-menu {
	align-items: center;
	display: flex;
	height: 50px;
	justify-content: flex-end;
	padding-right: 30px;
	}

	nav.general-topo-menu {
		display: flex;
		gap: 30px;
	}

	nav.general-topo-menu > div { 
		height: 40px;
		line-height: 40px;
		vertical-align: middle;
	}


div#header_cli_area {
	background: url(../../images/meubairrotem_bg_topo_internas.jpg) top center;
	display: none;
	width: 100%;
}

div.header-cli-nav {
	align-items: center;
	background: url(../../images/pontos_sublinhado.gif) #f0f0f0;
	border-bottom: #cccccc 3px solid;
	display: flex;
	height: 70px;
	justify-content: space-between;
	padding-right: 30px;
	}
	
	div.cli-nav-menu {
		color: #006ECF;	
		font-size: 32px;
		height: 70px;
		line-height: 70px;
		vertical-align: middle;
		text-align: center;
		width: 70px;
	}

	figure.cli-topo-logo {
		padding-top: 12px;
		width: 240px;
	}

	figure.cli-topo-logo > img {
		width: 100%;
		border: none;
	}

	div.header-cli-local {
		flex: 1;
		align-items: center;
		display: flex;
		gap: 20px;
		justify-content: flex-end;
		}

		div.cli-local-cidade {
			display: table;
			color: #006ECF;
			height: 60px;
			padding-top: 10px;
			}

			div.cli-local-cidade > h2 {
				font-family: Inter, sans-serif;
				font-size: 22px;
				font-weight: 700;
				line-height: 60px;
				vertical-align: middle;
			}

		div.cli-local-bairro {
			align-items: center;
			background: rgba(0, 0, 0, 0.25);
			border-radius: 50px;
			display: flex;
			padding: 5px;
			width: 100%;
		}

		div.cli-bairro-label {
			color: #ffffff;
			font-size: 16px;
			height: 30px;
			line-height: 30px;
			margin-right: 10px;
			padding-left: 10px;
			vertical-align: middle;
			width: 60px;
		}

		.formCliSelectTopo {
			border: none;
			background: transparent;
			color: #00539c;
			font-family: Inter, sans-serif;
			font-size: 20px;
			font-weight: 700;
			outline: none;
			max-width: 100%;
			width: 100%;

			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none; 

			background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
			background-repeat: no-repeat;
			background-position: right 8px center;
			background-size: 28px;
		}

div.general-local-buscar {
	background: rgba(255, 255, 255, 0.4);
	border-radius: 60px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 15px;
	width: 80%;
	}

	div.general-buscar-form { 
		display: flex;
		gap: 15px;
		height: 50px;
		justify-content: space-between;
		}
		
		div.general-buscar-edit {
			background: #ffffff;
			border-radius: 50px;
			padding-top: 5px;
			padding-bottom: 5px;
			width: 100%;
		}

		.inputSearchTopo {
			background: none;
			border: none;
			color: #b8b6b6;
			font-size: 30px;
			height: 40px;
			line-height:40px;
			vertical-align: middle;
			text-align: right;
			width: 50px;
		}

		.inputEditTopoBuscar {
			border: none;
			font-size: 20px;
			height: 40px;
			line-height: 40px;
			padding: 0px;
			padding-left: 10px;
			width: 80%;
			max-width: 80%;
		}

		div.general-buscar-btn {
			width: 150px;
			}

			div.general-buscar-btn > button { 
				background-color: #006ECF;
				border-radius: 50px;
				border: none;
				color: #ffffff;
				font-size: 22px;
				height: 50px;
				padding: 10px;
				width: 150px;
			}