/*
   Nesse arquivo estão definidos os estilos dos elementos das telas "Bloqueio de Navegador Incompatível"
	e "Alerta de Navegador Desatualizado". Essas telas foram implementadas no chamado 348524, e serão exibidas
	quando a tela de login do sistema for acessada nas seguintes versões dos navegadores:

		- Google Chrome < 55
		- Mozilla Firefox < 50
		- Opera < 42
		- Apple Safari < 537
		- Microsoft Edge < 15
		- Microsoft Internet Explorer < 10

	Avistará um alerta/mensagem na tela informando que o navegador precisa ser atualizado e que a partir do dia 08/06 o acesso será bloqueado.
*/

/* Definição dos ícones dos navegadores nas duas telas */
div#bloqueio_navegador_incompativel .sugestoes-download-navegadores .icone_navegador,
div#alerta_navegador_desatualizado .sugestoes-download-navegadores .icone_navegador {
	margin-left: 10px;
	font-size: 35px;
	text-decoration: none;
}


/* **************************************** */
/* ** BLOQUEIO DE NAVEGADOR INCOMPATÍVEL ** */
/* **************************************** */

div#bloqueio_navegador_incompativel .float-left {
	float: left;
}

/* Background da tela de bloqueio */
div#bloqueio_navegador_incompativel {
	margin: 0;
	height: 100vh;
	width: 100vw;
	position: fixed;
	background: rgba(231, 76, 60, 0.85);
	color: #FFF;
	text-align: center;
	z-index: 9999;
	top: 0;
	left: 0;
}
div#bloqueio_navegador_incompativel div#bloqueio_navegador_incompativel_dados {
	margin-top: 10%;
}

/* Ícone de alerta na tela de bloqueio */
div#bloqueio_navegador_incompativel span#bloqueio_navegador_incompativel_icone {
	font-size: 130px;
}

/* Título da tela de bloqueio */
div#bloqueio_navegador_incompativel h1#bloqueio_navegador_incompativel_titulo {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 50px;
}

/* Mensagem da tela de bloqueio */
div#bloqueio_navegador_incompativel div#bloqueio_navegador_incompativel_mensagem {
	margin-left: calc(50% - 250px);
	max-width: 250px;
	text-align: left;
}

/* Div que contém os ícones dos navegadores */
div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_sugestoes {
	margin-top: 10px;
}

/* Definição de cor ícones dos navegadores */
div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_sugestoes .icone_navegador {
	color: rgb(255, 255, 255);
}
div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_sugestoes .icone_navegador:hover {
	color: rgb(220, 220, 220);
}

/* Linha que divide a mensagem dos ícones dos navegadores */
div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_divisor {
	margin-left: 15px;
	margin-right: 15px;
	height: 75px;
	width: 1px;
	background: #FFF;
}

/* Div com o botão para voltar a tela de login */
div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_voltar {
	margin-top: 110px;
	width: 100%;
	position: absolute;
	display: block;
	height: 50px;
	text-align: center;
}

/* Botão para voltar a tela de login */
div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_voltar #bloqueio_navegador_incompativel_btn_voltar {
	cursor: pointer;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	background-color: #FFF;
	border: none;
	color: rgba(231, 76, 60, 0.85);
	padding: 8px 10px 8px 10px;
}
div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_voltar #bloqueio_navegador_incompativel_btn_voltar:hover {
	background: rgb(220, 220, 220);
}


/* **************************************** */
/* *** ALERTA DE NAVEGADOR DESATUALIZADO ** */
/* **************************************** */

/* Background da tela de aviso */
div#alerta_navegador_desatualizado {
	text-align: center;
}

/* Título da tela de aviso */
div#alerta_navegador_desatualizado #alerta_navegador_desatualizado_titulo {
	font-size: 20px;
}

/* Mensagem da tela de aviso */
div#alerta_navegador_desatualizado #alerta_navegador_desatualizado_mensagem {
	margin-top: 20px;
}

/* Definição de cor ícones dos navegadores */
div#alerta_navegador_desatualizado #alerta_navegador_desatualizado_sugestoes .icone_navegador {
	color: rgb(50, 50, 50);
}
div#alerta_navegador_desatualizado #alerta_navegador_desatualizado_sugestoes .icone_navegador:hover {
	color: rgb(75, 75, 75);
}


/* **************************************** */
/* ******* AJUSTES DE RESPONSIVIDADE ****** */
/* **************************************** */

@media(max-width: 650px) {
	div#bloqueio_navegador_incompativel .float-left {
		float: none;
	}

	div#bloqueio_navegador_incompativel div#bloqueio_navegador_incompativel_mensagem {
		margin: 0 auto;
		max-width: 75%;
		text-align: center;
	}

	div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_divisor {
		margin: 15px 0px 15px 0px;
		height: 1px;
		width: 200px;
		margin-left: calc(50% - 100px);
		background: #FFF;
	}
	div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_voltar {
		margin-top: 50px;
	}
}

@media(max-height: 600px) {
	div#bloqueio_navegador_incompativel div#bloqueio_navegador_incompativel_dados {
		margin-top: 5%;
	}
}

@media(max-height: 400px) {
	div#bloqueio_navegador_incompativel {
		overflow-y: scroll;
	}
	div#bloqueio_navegador_incompativel div#bloqueio_navegador_incompativel_dados {
		margin: 20px;
	}
	div#bloqueio_navegador_incompativel #bloqueio_navegador_incompativel_voltar {
		margin-top:  20px;
	}
}