/**
* CSS da Area de login
*
* @author Jean Yoshioka
* @copyright Hypnobox
* @date 06/08/2014
*/

html{
	background:none;
}

/**
* @description
* Gera o background da página
*/
body{
	background: url('../img/bg-login.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/**
* @description
* Caixa de login com imagem no background
* centralizado na tela
*/
.box-login{
	position:absolute;
	width:317px; /*445px*/
	height:317px; /*445px*/
	padding:64px; /*445px*/
	margin-left:-222.5px;
	left:50%;
	margin-top:-222.5px;
	top:50%;
	background-image:url('../img/login/bg-box-login.jpg');
	background-repeat:no-repeat;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 1);
	box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 1);
	z-index:2;
}

.bg-preto-login{
	position:fixed;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity:0.85;
	-moz-opacity:0.85;
	filter:alpha(opacity=85);
	z-index:1;
}

/**
* @description
* Texto centralizado
*/
.box-login p.info{
	width:100%;
	margin-bottom:30px;
	line-height:16px;
	text-align:center;
}

/**
* @description
* Logo centralizado
*/
.logo{
	width:100%;
	text-align:center;
	margin-top:38px;
	margin-bottom:50px;
	margin-left: 0px!important;
}

/**
* @description
* Div que cria uma caixa para o input
*/
.input-custom{
	background:#ffffff;
	height:21px;
	padding:0 6px;
	margin-top:10px;
	border:1px solid #e1e1e1;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
/**
* @description
* Input (tipo texto) transparente da div(input-custom)
*/
.input-custom input[type='text']{
	background:transparent;
	font-size:12px;
	margin:3px 0;
	padding:0;
	border:0;
}
/**
* @description
* Input (tipo senha) transparente da div(input-custom)
*/
.input-custom input[type='password']{
	background:transparent;
	font-size:12px;
	margin:3px 0;
	padding:0;
	border:0;
}
/**
* @description
* Div que cria uma caixa para o input com borda vermelha
*/
.input-custom.error{
	border-color:#f36d6d;
	box-shadow:0px 0px 6px #f59b9b;
}

/**
* @description
* Caixa esqueci minha senha com imagem no background
* centralizado na tela
*/
.box-esqueciminhasenha{
	margin-top:10px;
	margin-left:7px;
	width:310px;
}

/**
* @description
* Botão customizado para área de autenticação
*/
.button-custom{
	position:absolute;
	bottom:65px;
	left:50%;
	margin-left:-73px;
	background:url('../img/login/btn-seta.png') no-repeat scroll right center #adcc59;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow:3px 3px 8px 0px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:3px 3px 8px 0px rgba(50, 50, 50, 0.4);
	box-shadow:3px 3px 8px 0px rgba(50, 50, 50, 0.4);
	clear:both;
}
/**
* @description
* Botão customizado para área de autenticação
* caso a tag BUTTON for utilizado
*/
.button-custom button{
	float:left;
	background:transparent;
	border:0;
	font-family:Arial, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#ffffff;
	cursor:pointer;
	width:146px;
	height:35px;
	line-height:36px;
	text-align:center;
	text-transform:uppercase;
	text-shadow:0px 0px 3px rgba(255, 255, 255, 0.8);
}
/**
* @description
* Botão customizado para área de autenticação
* caso a tag A for utilizado
*/
.button-custom a{
	float:left;
	font-family:Arial, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#ffffff;
	cursor:pointer;
	width:146px;
	height:35px;
	line-height:37px;
	text-align:center;
	text-transform:uppercase;
	text-shadow:0px 0px 3px rgba(255, 255, 255, 0.8);
	text-decoration:none;
}

/**
* @description
* Caixa de notificação caso o sistema 
* encontre algum erro no formulário
*/
.notificacao-login-error{
    display:none;
	background:#e2edc5;
    padding:10px 0;
    width:445px;
    -webkit-border-bottom-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomright:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-right-radius:8px;
	border-bottom-left-radius:8px;
	-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 1);
	box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 1);
} 
/**
* @description
* Imagem da caixa de notificação
*/
.notificacao-login-error img{
	margin-bottom:5px;
}
/**
* @description
* Texto da caixa de notificação
*/
.notificacao-login-error p.info{
	float:left;
	font-family:Arial, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#575151;
	width:100%;
	text-align:center;
}

/**
* @description
* Botão de voltar
*/
.btn-voltar{
	position:absolute;
	bottom:5px;
	left:5px;
	cursor:pointer;
	text-indent:-999px;
	background:url('../img/login/btn-voltar.png') no-repeat;
	width:71px;
	height:24px;
}

/**
* @description
* Imagem para tela de confirmação de esqueci minha senha
*/
.img-sucesso{
	float:left;
	width:100%;
	text-align:center;
	margin-bottom:40px;
}

.box-login .input-token {
	background: #ffffff;
	border-radius: 6px;
	display: block;
	float: left;
	margin-top: 26px;
	padding: 4px 4px 4px 12px;
	width: 301px;
}
.box-login .input-token > input[type='text'] {
	background: transparent;
	border: 0;
	color: #4d4d4d;
	float: left;
	font-family: 'open_sans_condensedbold', Arial, sans-serif;
	font-size: 24px;
	height: 34px;
	line-height: 34px;
	width: 157px;
}
.box-login .input-token > input[type='text']::-webkit-input-placeholder {
	font-size: 12px;
}
.box-login .input-token > input[type='text']::-moz-input-placeholder {
	font-size: 12px;
}
.box-login .input-token > input[type='text']:-ms-input-placeholder {
	font-size: 12px;
}
.box-login .input-token > button {
	background: url('../img/login/btn-seta.png') no-repeat scroll right center #adcc59;
	border: 0;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
	float: left;
	font-family: 'open_sans_condensedbold', Arial, sans-serif;
	font-size: 15px;
	height: 34px;
	text-align: center;
	text-transform: uppercase;
	width: 144px;
}
.box-login .input-token > button:hover {
	text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.8);
}
.box-login .box-app {
	float: left;
	margin-top: 80px;
	text-align: center;
	width: 100%;
}
.box-login .box-app > img {
	display: inline-block;
}

.box-login-token {
	background: url('../img/login/bg-login-token.png') no-repeat #ffffff;
	border-radius: 10px;
	box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 1);
	height: 538px;
	padding: 15px;
	position: absolute;
	margin-left: -415px;
	left: 50%;
	margin-top: -284px;
	top: 50%;
	width: 800px;
	z-index: 2;
}
.box-login-token .block-logo {
	padding: 12px 0 16px;
	text-align: center;
}
.box-login-token .token-steps {
	margin-top: 20px;
	padding: 24px 0 12px;
	position: relative;
	text-align: center;
}
.box-login-token .token-steps:before {
	background: #000000;
	border-radius: 8px;
	content: '';
	height: 100%;
	left: 0;
	opacity: 0.05;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}
.box-login-token .token-steps > h2 {
	background: url('../img/login/bg-login-token.png') no-repeat #ffffff;
	border-radius: 8px;
	color: #545454;
	font-size: 15px;
	font-family: 'open_sans_condensedbold', Arial, sans-serif;
	padding: 6px 12px;
	position: absolute;
	text-transform: uppercase;
	top: -14px;
}
.box-login-token .token-steps.primeiro > h2 {
	background-position: -149px -109px;
	left: 134px;
}
.box-login-token .token-steps .box-app {
	background: url('../img/login/box-app.png') no-repeat;
	display: inline-block;
	height: 48px;
	width: 244px;
}
.box-login-token .token-steps .box-autenficacao {
	display: inline-block;
}
.box-login-token .token-steps.segundo > h2 {
	background-position: -221px -214px;
	left: 206px;
}
.box-login-token .token-steps .box-autenficacao .box-qrcode {
	background: #ffffff;
	border-radius: 8px;
	height: 162px;
	float: left;
	padding: 10px;
	width: 162px;
}
.box-login-token .token-steps .box-autenficacao .box-qrcode > img {
	display: block;
	height: 100%;
	width: 100%;
}
.box-login-token .token-steps .box-autenficacao .box-passo {
	float: left;
	margin-left: 30px;
	position: relative;
}
.box-login-token .token-steps .box-autenficacao .box-passo > i {
	background: #9db950;
	border: 4px solid #ececec;
	border-radius: 14px;
	color: #ffffff;
	font-size: 15px;
	font-family: 'open_sans_condensedbold', Arial, sans-serif;
	height: 20px;
	left: -16px;
	line-height: 20px;
	position: absolute;
	text-align: center;
	top: 1px;
	width: 20px;
}
.box-login-token .token-steps .box-autenficacao .box-passo > img {
	display: block;
	width: 160px;
}
.box-login-token .token-steps.terceiro > h2 {
	background-position: -177px -460px;
	left: 162px;
}
.box-login-token .token-steps .input-token {
	background: #ffffff;
	border-radius: 6px;
	display: inline-block;
	padding: 4px 4px 4px 12px;
}
.box-login-token .token-steps .input-token > input[type='text'] {
	background: transparent;
	border: 0;
	color: #4d4d4d;
	float: left;
	font-family: 'open_sans_condensedbold', Arial, sans-serif;
	font-size: 24px;
	height: 34px;
	width: 184px;
}
.box-login-token .token-steps .input-token > button {
	background: url('../img/login/btn-seta.png') no-repeat scroll right center #adcc59;
	border: 0;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
	float: left;
	font-family: 'open_sans_condensedbold', Arial, sans-serif;
	font-size: 15px;
	height: 34px;
	text-align: center;
	text-transform: uppercase;
	width: 144px;
}
.box-login-token .token-steps .input-token > button:hover {
	text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.8);
}

.alerta-cadastro {
	color: #f36d6d;
	font-family: 'open_sans_condensedbold', Arial, sans-serif;
	font-size: 12px;
	left: 70px;
	position: absolute;
	top: 200px;
}

.msg-error {
    float: left;
    margin-top: 14px;
    width: 100%;
}
.msg-error > p {
    color: #ff4242;
    font-family: 'open_sans_condensedbold', Arial, sans-serif;
    font-size: 14px;
    text-align: center;
}

.button-custom-sso{
	position:absolute;
	bottom:15px;
	left:50%;
	margin-left:-133px;
	background:url('../img/login/btn-seta.png') no-repeat scroll right center #345ca5;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow:3px 3px 8px 0px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:3px 3px 8px 0px rgba(50, 50, 50, 0.4);
	box-shadow:3px 3px 8px 0px rgba(50, 50, 50, 0.4);
	clear:both;
}

.button-custom-sso button{
	float:left;
	background:transparent;
	border:0;
	font-family:Arial, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#ffffff;
	cursor:pointer;
	width:146px;
	height:35px;
	line-height:36px;
	text-align:center;
	text-transform:uppercase;
	text-shadow:0px 0px 3px rgba(255, 255, 255, 0.8);
}
/**
* @description
* Botão customizado para área de autenticação
* caso a tag A for utilizado
*/
.button-custom-sso a{
	float:left;
	font-family:Arial, sans-serif;
	font-size:15px;
	font-weight:bold;
	color:#ffffff;
	cursor:pointer;
	width:266px;
	height:35px;
	line-height:37px;
	text-align:center;
	text-transform:uppercase;
	text-shadow:0px 0px 3px rgba(255, 255, 255, 0.8);
	text-decoration:none;
}