/* CSS Document */
/* ============================================================================= */
/* ================================ RESET ====================================== */
/* ============================================================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

input,
fieldset {
	box-sizing: border-box;
}

/* ============================================================================= */
/* ================================ LAYOUT ===================================== */
/* ============================================================================= */

	body {
		background: url(../img/bg.jpg) repeat-x center top #EEE;
		color: #333;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		line-height: 24px;
		margin: 0;
		padding: 0;
	}
	
	#wrapper {
		max-width: 1024px;
		margin: 50px auto;
	}
	
	#header {
		margin-bottom: 35px;
		display: flex;
		align-items: center;
	}
	
	#header h1 {
		line-height: 23px;
		padding: 0 20px;
	}

	#header img {
		height: auto;
		width: 220px;
	}

	#conteudo {
		max-width: 800px;
	}
	
	a {
		color: #666;
		transition: all .2s ease;
	}

	a:hover {
		color: #333;
	}

	.conteudo-centralizado {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 16px;
	}

	.conteudo-centralizado > * {
		display: flex;
		margin: 0 8px;
	}

	#frame {
		display: flex;
		flex-direction: row;
	}

	#menu {
		margin-right: 32px;
		width: 190px;
	}

	#menu ul li a {
		border-left: 7px solid #999999;
		border-right: 0px solid #f7f8fd;
		border-top: 0px solid #f7f8fd;
		border-bottom: 1px solid #999999;
		display: block;
		text-decoration: none;
		padding: 6px 0 6px 7px;
    	line-height: 18px;
	}

	#menu ul li a:hover {
		background-color: rgba(0, 0, 0, .1);
	}

	#menu h2 {
		padding-bottom: 12px;
    	text-align: left;
	}

	#bt-menu {
		display: none;
	}

	#menu .recolher {
		display: none;
	}

	.layout-column {
		display: flex;
		flex-direction: column;
	}

	.sempre-row {
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}
	#FaseAtual {
		color: red;
		/* background:rgb(0, 255, 34); */
		font-style:arial ;

	}

	.FaseAtualTooltip {
		position: relative;
		display: inline-block;
		border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	  }
	  .FaseAtualTooltip .tooltiptext {
		visibility: hidden;
		width: 120px;
		background-color: #555;
		color: #fff;
		text-align: center;
		padding: 5px 0;
		border-radius: 6px;
	  
		/* Position the tooltip text */
		position: absolute;
		z-index: 1;
		bottom: 125%;
		left: 50%;
		margin-left: -60px;
	  
		/* Fade in tooltip */
		opacity: 0;
		transition: opacity 0.3s;
	  }	  

	  
	/* Tooltip arrow */
	.FaseAtualTooltip .tooltiptext::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}
	
	/* Show the tooltip text when you mouse over the tooltip container */
	.FaseAtualTooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}

/* ============================================================================= */
/* ================================= FORM ====================================== */
/* ============================================================================= */

	h1, h2 {
		text-align: center;
		font-family: Helvetica, Arial, sans-serif;
		font-weight: lighter;
		font-variant: small-caps;
	}
	
	h1 {
		font-size: 18px;
		line-height: 18px;
		padding-top: 15px;
	}
	
	h2 {
		font-size: 18px;
		line-height: 17px;
		color: #800000;
		padding-bottom: 30px;
	}
		
	fieldset,
	.box {
		background: #FFF;
		padding: 20px;
		margin: 0 auto 40px auto;
		position: relative\9; /* IE */
		padding-top: 30px\9; /* IE */
	}

	fieldset.compacto {
		max-width: 410px;
		padding-top: 32px;
	}
	
	legend {
		background: #666;
		color: #FFF;
		font-weight: bold;
		font-variant: small-caps;
		line-height: 14px;
		padding: 5px 8px;
		position: absolute\9; /* IE */
		top: -12px\9; /* IE */
		left: 10px\9; /* IE */
	}

	input {
		padding: 8px;
	}
	
	input[type="radio"] {
		border: none !important;
	}

	select {
		padding: 6px;
	}
	
	input,
	legend,
	fieldset,
	select,
	.box {
		border: 1px solid #CCC;
		-moz-border-radius: 4px; /* Firefox */
		-webkit-border-radius: 4px; /* Safari, Chrome */
		border-radius: 4px; /* CSS3 */
	}
	
	/*TODO tiago.costa Verificar com o paulo ellery para criar um estilo */
	.erro-obrigatorio extends input{
		background-color: red;
	}
	
	input:focus {
		background: #FFD;
	}
	
	.botoes {
		text-align: center;
		margin-bottom: 40px;
	}
	
	.botoes input,
	button {
		background: #666;
		color: #FFF;
		padding: 8px 12px;
		border: none;
	}
	
	.botoes input:hover,
	button:hover {
		background: #555;
	}
	
	.obrigatorio {
		color: #800000;
	}

	input[disable],
	input[readonly] {
		background: none repeat scroll 0 0 #EEEEEE;
		color: #333333;
	}

	.valorInvalido {
		background: none repeat scroll 0 0 #FFEEEE;
		border: 1px solid #800000;
	}
	
	.campo {
		margin-bottom: 16px;
	}

	.campo,
	.linha {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-grow: 1;
	}

	.campo.nogrow {
		flex-grow: 0;
	}

	.coluna {
		display: flex;
		flex-direction: column;
	}

	.campo:last-child {
		margin-right: 0;
	}

	.campo > *,
	.linha > * {
		display: flex;
		margin-left: 8px;
		margin-right: 8px;
	}

	.campo label,
	.linha .campo:first-child {
		margin-left: 0;
	}

	.campo label {
		white-space: nowrap;
		display: block;
	}

	.campo label.wrap {
		white-space: normal;
	}

	.msgCampoInvalido {
		position: absolute;
		right: 12px;
		top: -25px;
		border: 1px solid;
		-moz-border-radius: 4px; /* Firefox */
		-webkit-border-radius: 4px; /* Safari, Chrome */
		border-radius: 4px; /* CSS3 */
		border: 1px solid #800000;
		background-color: #FFF;
		font-size: 11px;
		line-height: 11px;
		padding: 4px;
		color: #800000;
		min-width: 163px;
	}

.radios {
		margin: 0 0 20px 20px;
		line-height: 20px;
	}
	
	.avisos {
		margin-left: 25px;
		list-style: disc;
		color: #800000;
	}
	
/* ============================================================================= */
/* =========================== FORM CONFIRMACAO ================================ */
/* ============================================================================= */

	#frmConfirmacao, #frm {
		line-height: 21px;
		color: #666;
	}
	
	#frmConfirmacao label, #frm label {
		color: #000;
	}
	
	.declaracao {
		margin-bottom: 20px;
		font-style: italic;
		text-align: justify;
	}
	
/* ============================================================================= */
/* ===================== COMPROVANTE PRELIMINAR ================================ */
/* ============================================================================= */

	.destaque {
		font-style: italic;
		margin: 20px 0;
	}
	
	.assinatura {
		display: block;
		text-align: center;
		font-weight: bold;
	}

/* ============================================================================= */
/* ===================== COMPROVANTE DE INSCRICAO ================================ */
/* ============================================================================= */

	img#logoComprovante{
		visibility: hidden;
		display: none;
	}
	
	.textoDestaque{
		font-size: 1.5em;
		font-weight: bold;	
	}

/* ============================================================================= */
/* =============================== PÁGINA DE ERRO ============================== */
/* ============================================================================= */

	div#div_erro,
	div#div_erro h3,
	button#btn_imprimir
	{
		border: #CCC 1px solid;
		border-radius: 4px;	
	}
	
	div#div_erro
	{
		background: #FFF;
		margin-bottom: 40px;
		padding: 20px;
		box-sizing: border-box;
    	margin: 0 auto;
	}
	
	div#div_erro h3
	{
		background: #666;
		color: #FFF;
		font-variant: small-caps;
		font-weight: bold;
		line-height: 14px;
		padding: 5px 8px;
		display: inline;
		position: relative;
		top: -25px;
	}
	
	div#div_erro p
	{
		text-align: center;
	}
	
	div#div_erro code
	{
		display: block;
		margin-left: 32px;
		word-break: break-word;
	}
	
	div#div_trace_php
	{
		color: #880000;
	}
	
	div#div_trace_php h4
	{
		padding-bottom: 16px;
	}
	
	div#div_botoes_acao
	{
		text-align: right;
	}
	
	button#btn_imprimir
	{
		background: #666;
		color: #FFF;
		padding: 2px 8px; 
	}
	
/* ============================================================================= */
/* ============================ CAMPOS INVALIDOS =============================== */
/* ============================================================================= */

.valorInvalido {
	border: 1px solid #800000;
	background: #FFEEEE;
}

/* ============================================================================= */
/* =========================== FOLHA DE RESPOSTAS ============================== */
/* ============================================================================= */

.respostas td, .respostas th {
	border: 1px solid #aaa;
	padding: 4px;
	line-height: 14px;
	text-align: center;
}

.cinza td, .respostas th{
	background: #EEE;
}

.Grupo-I, .Grupo-II, .Grupo-III{
	float: left;
}

.Grupo-II, .Grupo-III {
	margin-left: 150px;
}

fieldset.legenda{
	float: right;
	margin-top: 50px;
	padding: 5px 10px 5px 10px; 
	line-height: 110%;
	border-color: #333;
}

fieldset.legenda legend{
	font-weight: normal;
	line-height: 100%;
	padding: 2px;
	background: #333;
}

.legenda {
	line-height: 16px;
	font-style: italic;
	float: right;
	margin-right: 30px;
	padding: 30px
}

/* ============================================================================= */
/* ======================== FORM ENVIO DE EMAIL ================================ */
/* ============================================================================= */

	#frmLoginPortalCandidato label, #frm label {
		color: #000;
		font-weight: bold;
	}
	
	#frmLoginPortalCandidato .enviando{
		display:    none;
	    position:   fixed;
	    z-index:    1000;
	    top:        0;
	    left:       0;
	    height:     100%;
	    width:      100%;
	    background: rgba( 255, 255, 255, .9 );
	}
	
	#frmLoginPortalCandidato .enviando div{
		position: fixed; /* or absolute */
		top: 30%;
		left: 50%;
	}

/* ============================================================================= */
/* =============================== CAPTCHA ===================================== */
/* ============================================================================= */

div.captcha {
	display: flex;
	justify-content: center;
}

/* ============================================================================= */
/* =========================== RESPONSIVIDADE ================================== */
/* ============================================================================= */

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

	#header {
		flex-direction: column;
	}

	#wrapper {
		margin: 10px auto;
	}

	fieldset,
	#div_erro {
		width: 90%;
	}

	#bt-menu {
		display: block;
		position: absolute;
		top: 10px;
		left: 10px;
		height: 48px;
		width: 48px;
		transition: all .2s ease;
		overflow: auto;
		opacity: 1;
	}

	#bt-menu.menu-on {
		height: 0px;
		width: 0;
		opacity: 0;
		overflow: hidden;
	}

	#menu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transition: all .2s ease;
		height: 0;
		overflow: hidden;
		opacity: 0;
		background-color: #EEE;
	}
	
	#menu.menu-on {
		overflow: auto;
		opacity: 1;
	}

	#menu h2 {
		display: none;
	}

	#menu ul li a {
		min-height: 36px;
		display: flex;
		align-items: center;
		align-self: center;
		justify-content: center;
	}

	#menu.menu-on .recolher {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		background-color: rgba(0, 0, 0, .1);
		width: 90%;
		margin: 16px auto;
	}

	.campo label {
		white-space: normal;
	}

	fieldset:not(.compacto) .campo,
	fieldset:not(.compacto) .linha {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	fieldset:not(.compacto) .linha .campo,
	fieldset:not(.compacto) .campo > *,
	fieldset:not(.compacto) .linha > * {
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
	}

	fieldset:not(.compacto) .linha {
		margin-bottom: 0;
	}

}