/* CSS para o formulario de login Apenas */

body {
	background: #252525 url("../images/login/bg_login.jpg") no-repeat top center;
}
#topo{
	text-align: center;
	font-size: 18px;
	padding: 25px 0 0;
	margin: 0px;
	width: 100%;
	color: #DADADA;
	text-shadow: 0px 2px 2px #000;
	font-weight: 200;
}
#corpo{
	width: 100%;
	padding: 100px 0px; 
}
#rodape{
	width: 100%;
	color: #FFF;
	clear: both;
	padding: 0px;
}
	#rodape .wrapper{
		width: 550px;
		margin: 0px auto;
		text-align: left;
		color: #FFF;
		padding: 30px 0px;
		font-weight: 300;
		position: relative;
	}
	#rodape .logo_rodape{
		background: transparent url("../images/login/logo_rodape.png") no-repeat center right;
		display: block;
		position: absolute;
		top:0;
		right:0;
		color: transparent;
		width: 200px;
		height: 90px;
	}


/** FORMULARIO **/

#login_form{
	width: 790px;
	height: 240px;
	margin: 0px auto;
	position: relative;
	left: -20px;
	padding: 0px;
	background: transparent url(../images/login/logo_login.png) no-repeat 60px -10px;
}

#form_container{
	margin-left: 500px;
	position: relative;
	border: 1px solid #606060;
}
#form_container .bg{
	background-color: #FFF;
	opacity: 0.06;
	position: absolute;
	width: 100%;
	height: 100%;
}

.form{
	margin: 0;
	padding: 15px 0 25px 42px;
	border: 0;
	position: relative;
	width: 72%;
	height: auto;
	z-index: 10;
}
.form .field label{	
	display:block;
	height: 22px;
	float:left;
	font-size: 14px;
	padding-top: 10px;
	color: #DADADA;
}

.form .field{
	display: block;
	width: 100%;
	padding: 0px;
	margin: 0px 0px 5px;
	clear: both;
}
.form .input {
	background-color: transparent;
	border: 0px;
} 
.form .input_alert{
	width:25px;
	height: 16px;
	margin: 0px;
	float: left;
	text-align: left;
}
.form .required:not([disabled]):not([readonly]){
	background-color: #FFF;
	border: 1px solid #DDD !important;
	width: 195px;
	box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
}
	.form .required:hover:not([disabled]):not([readonly]){
		border-color: #DDD !important;
	}
.form .required:not([disabled]).error{
	background: #FBE3E4; 
	color: #D12F19; 
	border-color: #FBC2C4 !important;
}
	.form .required:not([disabled]).error:hover{
		border-color: #DF99A9 !important;
	}


#usuario{
	font-size: 14px;
	padding: 4px;
	color: #666;
	box-shadow: inset 0 1px 1px #CCC;
}
#senha, #senha_confirma{
	padding: 4px;
	color: #666;
	box-shadow: inset 0 1px 1px #CCC;
}

.button{
	margin: 18px 0px 0px 0 !important;
	width: 60%;
	padding: 10px !important;
	font-size:14px;
	border: 0px !important;
	cursor: pointer;
	color: #FFF;
	background-color: #096982;
}
.button:hover{
	background-color: #0C83A0;
}

#links{
	margin: 20px 15px 0 0px;
	text-align: right;
	color: #FFF;
}
	#links a{
		font-size: 12px;
		color: #888;
		text-decoration: none;
	}
	#links a:hover{
		color: #FFF;
	}
	

/** RECUPERAR SENHA **/
.recupera_senha #logo{
	background: 		transparent url(../images/logo_erp.png) no-repeat center -20px;
	border: 			0;
	height: 			174px;
	margin:	 			25px 0;
}
.recupera_senha #corpo{
	padding: 			0;
}
.recupera_senha #corpo p{
	color: 				#CCC;
}

.recupera_senha #login_form{
	background-image: 	none;
}

.recupera_senha h1{
	color: 				#E27125;
	text-indent: 		0;
	font-size:			20px;
	margin: 			0 0 4px 0;
}

.recupera_senha #form_container{
	width:				500px;
	margin-left:		150px;
}
.recupera_senha #form_container .tempo_esgotado{
	padding-left: 		17px;	
}
.recupera_senha .bg-recuperar-senha{
	top: 				0;
	z-index:			-1;
}
.recupera_senha .frases{
	margin-left: 		150px;
}

.recupera_senha a{
	font-size: 			12px;
	color: 				#888;
	text-decoration: 	none;
}
.recupera_senha a:hover{
	color: 				#FFF;
}
.recupera_senha #verifica_usuario, .recupera_senha #cancelar, .recupera_senha #trocar_senha{
	width: 				100px;
}
.recupera_senha #verifica_usuario{
	margin-left: 		-7px !important;
}

.showpass {
    position: absolute;
    top: calc(50% + 7px);
    right: 15px;
    z-index: 2;
    cursor: pointer;
}

/* RWD */
#rodape .wrapper p {
	color: #CCC !important;
}
@media only screen and (max-width: 767px) {
	#corpo {
		padding: 0px;
	}		
	#login_form {
		background-position: center -5px;
		background-size: 205px;
		padding: 100px 0 !important;
		left: 0 !important;
		width: 270px;
		padding: 100px;
		height: 150px;
	}		
	.showpass {
		top: calc(50% + 25px);
	}

	#form_container{
		margin-left: 0;
		padding: 20px;
	}
	#form_container input {
		width: 100%;
		box-sizing: border-box;
		display: block;
		height: 31px;
		margin-bottom: 10px;
	}
	#form_container input[type="password"] {
		margin-bottom: 10px;
	}
	.form{
		width: 100%;
		padding: 0;
	}
	#rodape .wrapper {
		width: 100%;
	}		
}