/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 28/08/2014, 18:43:52
    Author     : MC001
*/

/*			LOCKSCREEN			*/
body:not(.link) {
    background:url('../../../../Common/images/eobra.com.br/background.gif') no-repeat right bottom;
    overflow:hidden;
}

.brand {
    position:fixed !important;
    left: 10% !important;
    top: calc(50% - 51px) !important;
    transform: scale(.7,.7);
    /* margin-left:-32px !important; */
}

@-webkit-keyframes boxSignAnimate{from{opacity:0;top:60%;}to{opacity:1;top:50%;}}
@keyframes boxSignAnimate{from{opacity:0;top:60%;}to{opacity:1;top:50%;}}

.signIn{
	position:fixed;
	right: 0;
	bottom:0;
	width:100%;
	max-width:600px;
	top: calc(50% - 160px);
	height:100%;
	padding-right: 5%;
}

/*          LOCKSCREEN          */
.lockScreen,.boxCenter {
	position:absolute;
	left:50%;
	top:50%;
	min-width:320px;
	height:auto;
	text-align:center;
	color:#FFF;
	transform: translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%); /* IE 9 */
	-webkit-transform:translate(-50%, -50%); /* Safari and Chrome */
	
	animation: boxSignAnimate .7s ease-out;
	-ms-animation: boxSignAnimate .7s ease-out;
    -webkit-animation: boxSignAnimate .7s ease-out;
}
.lockScreen{
	width:290px;
}
.lockScreen div[user-cod]{
	display:block;
	float:left;
	width:100%;
}
.lockScreen div[user-cod]:after{
	position:static;
	float:left;
	text-align:center;
	font-size:20px;
	width:100%;
}
.lockScreen div[user-cod] p {
	position:relative;
	left:50%;
	margin-left:-43px;
	width:80px;
	height:80px;
	border-radius:80px;
    border:3px solid RGBA(0,0,0,0.2);
    float:left;
	position:relative;
    background-size:115% auto;
	background-position:-3px -3px;
	background-repeat:no-repeat;
    -webkit-box-shadow: 0px 0px 0px 3px rgba(200, 200, 200, 0.15);
    -moz-box-shadow:    0px 0px 0px 3px rgba(200, 200, 200, 0.15);
    box-shadow:         0px 0px 0px 3px rgba(200, 200, 200, 0.15);
}
.lockScreen .btnUnlock {
	float:right;
	line-height:22px;
}
.lockScreen .input-group{
	width:205px;
	float:left;
	margin:0px;
}
.lockScreen .input-group input{
    font-size:13px;
}
.lockScreen > span.why{
	opacity:0;
}
.lockScreen.ulST > span.why{
	opacity:1;
	display:block;
	text-align:center;
	font-size:12px;
	line-height:30px;
}
.lockScreen > span.pwdIncorrect,
.lockScreen > span.pwdBlocked,
.lockScreen.pwdBlocked .input-group,
.lockScreen.pwdBlocked .btnUnlock{
    opacity:0;
	position:absolute;
	z-index:-1;
}
.lockScreen.pwdBlocked > span.pwdBlocked,
.lockScreen > span.active{
	position:static;
    opacity:1;
	float:left;
	width:100%;
	text-align:center;
	line-height:40px;
}
.lockScreen.pwdBlocked > span.pwdBlocked{
	font-size:16px;
	background:red;
	border-radius:10px;
}
.lockScreen .btn-simple{
	width:50%;
	float:left;
	line-height:30px;
}

.ballonErro.show{
	margin-top:17px;
}
/*              SIGNIN          */
.boxSignInt {
    background:var(--color-1);
    overflow:hidden;
    padding: 10px;
    height:100%;
    width: 300px;
    max-width:300px;
    color:#000;
    float:right;
    /* margin-right:5%; */
}
.boxSignInt input:not(.inputHide){
	width:calc(100% - 10px) !important;
	margin: 24px 0 5px 0;
	border-top:0 !important;
	border-right:0 !important;
	border-left:0 !important;
	border-radius:0;
	background-color:transparent !important;
	outline:0px;
	padding:5px;
	box-shadow:none !important;
	color:var(--font-color) !important;
}



/* form starting stylings ------------------------------- */
.group{
  position:relative;
}
.group:not(:last-child()){
  margin-bottom: 30px;
}
input 				{
  font-size: 15px;
  font-weight:300;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }
input:disabled 		{ color:#e8e8e8 !important; }

/* LABEL ======================================= */
label 				 {
  color: var(--font-color);
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top: 0px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

/* active state */
input:disabled ~ label, 
input:read-only ~ label,
input:focus ~ label, 
input:valid ~ label,
input:-webkit-autofill ~ label		{
  top:-20px;
  font-size:14px;
  color:var(--font-color);
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:3px; 
  width:0;
  bottom:4px; 
  position:absolute;
  background:var(--font-color)	; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}


#recaptcha{
	position:relative;
	left:50%;
	transform:translate(-50%,0);	
	display:table;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	 transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}


.boxBrand{
    width: 280px;
    max-height:140px;
    height:140px;
    margin:20px 0;
    text-align:center;
    padding:30px 20px;
    max-width:300px;
    float:right;
    position:  relative;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.boxBrand > img{
	max-height:inherit;
	left: 15px; 
	right: 15px;
	top: 50%;
	width: calc(100% - 30px);
	position:  absolute;
	transform: translateY(-50%);
}


@-webkit-keyframes boxSignLoadingAnimate{from{opacity:1;margin-top:10px;}to{opacity:0.5;margin-top:120px;}}
@keyframes boxSignLoadingAnimate{from{opacity:1;margin-top:10px;}to{opacity:0.5;margin-top:120px;}}

.boxCenter.loading:after{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	z-index:1000;
}
.boxCenter.loading:before{
	content:'';
	position:absolute;
	top:30px;
	left:30px;
	margin:20px 110px;
	width: 50px;
	height: 50px;
	border: 4px solid #fff;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite;
}
.boxCenter.loading .boxSignInt:not(.extLogin){
	margin-top:120px;
	opacity:0.5;
	animation: boxSignLoadingAnimate .2s ease-out;
	-ms-animation: boxSignLoadingAnimate .2s ease-out;
    -webkit-animation: boxSignLoadingAnimate .2s ease-out;
}

.signInput {
    width: auto;
    margin: 0px auto;
    display:  table !important;
    line-height:initial !important;
    min-height:10px !important;
    height:10px;
    padding:6px 15px !important;
	background-color:var(--font-color) !important;
	color:var(--color-1);
}

.signIn .error{
    opacity:0;
    line-height:20px;
}
.signIn .loadingMsg,
.signIn .error.show{
    opacity:1;
    text-align:center;
    background-color:var(--font-color);
    color:var(--color-1);
    line-height:30px;
    /* margin-bottom:10px; */
    /* display: inline-grid; */
    width:100%;
}

.signUp {
    float:left;
    margin-right:1% !important;
    margin-left:8%;
	padding:0px;
	margin-top:0px;
    font-size:20px;
    font-weight:bold;
	color:#FFF;
    -webkit-text-shadow: 1px 1px #000;
    -moz-text-shadow: 1px 1px #000;
	text-shadow: 1px 1px #000;
}
.signUp:hover{
	color:rgba(28, 202, 204, 1);
}
.loginGoogle,.loginFacebook {
	width:38%;
	font-size:11px;
	line-height:12px;
	white-space:normal;
	float:left;
	margin:0px;
}
.loginFacebook {
	margin-left:8%;
}
.loginGoogle {
	margin-right:8%;
}

.loginGoogle i ,.loginFacebook i {
	position:relative;
	float:left;
	font-size:2.3em;
	margin:0px !important;
}

.orDiv {
	width:8%;
	float:left;
	text-align:center;
	font-size:12px;
	position:relative;
	margin-top:10px;
	color:#CCC;
}

.forgotPass{
    width:84%;
    margin:-7px 8% 5px;
	font-size:11px;
	text-align:right;
	color:RGB(190,190,190);
	cursor:pointer;
	float:right;
}
.forgotPass:hover{
	text-decoration:underline;
    color:RGB(100,100,100);
}

/*		TERMS		*/
.boxWhite,
.boxTerms{
	min-width:280px;
	width:90% !important;
	max-width:600px;
	background:white;
	color:black;
	padding:20px;
	min-height:400px;
	max-height:420px;
        border-radius:3rem;
	text-align:justify;
	text-indent:30px;
	overflow:auto;
	position:relative;

} 
.boxWhite{
	min-height:auto;
}

@media all and (max-width:500px), all AND (max-height:750px){
	.boxBrand{
			max-height:100px !important;
            height:100px !important;
            padding:0 20px;
        }
	.signIn{
		top: initial;
		height:auto;
		right: 0;
		left:50%;
		position:absolute;
		padding:0;
	}
	.boxBrand,
	.boxSignInt{
		/* float:none; */
	}
	
}
@media all and (max-width:500px){
	.brand{
		top:50px !important;
		left:50% !important;
		transform:translate(-50%,0) scale(.7,.7);
	}

	.signIn{
		transform:translate(-50%,0);
		width:320px;
	}

}
@media all and (max-height:750px){
	.boxBrand{
		max-height: 100px;
		padding:0 20px;
		margin:0;
	}
	.brand{
		top:50% !important;
		left: 5% !important;
		transform:translate(0%,-50%) scale(.7,.7);
	}
	.signIn{
		padding-right:20px;
		width:auto !important;
	}

}


.messageOver{
	position:fixed;
	left:50%;
	top:40px;
	text-align:center;
	background:var(--color-1);
	color:var(--font-color);
	padding:20px 30px;
	transform:translate(-50%,0);
	display:none;
}
.messageOver.active{
	display:initial;
}
.messageOver * {
	font-size:14px;
}
.messageOver h3 {
	font-size:20px;
	font-weight:100;
}
.messageOver .b {
	font-size:20px;
}
.messageOver > div{
	position:absolute;
	right:-10px;
	top:-10px;
	background:#333;
	color:#FFF;
	width:30px;
	height:30px;
	border-radius:50%;
	line-height:30px;
	font-size:15px;
        cursor:pointer;
}