@CHARSET "ISO-8859-1";


/* =============================================== */
/* 		LOGIN SCREEN                               */
/* With animation : login panel appears and disapears dynamically */
/* =============================================== */
.loginScreen {
/* 	background-image: url("../img/web-pattern1_light.jpg"); */
/* 	background-repeat: repeat-x repeat-y; */

	display: table;
	width:100%;
	height:100%;
	position:absolute;
	padding:0;
	
	/*background:#f6f6f6;*/
}
.loginScreenBackground {
	width:100%;
	height:100%;
	opacity:0;
	background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */	
}
/* Each element correspond to 1 JPG file, the choice is made randomly in PHP */
.loginScreenBackground-1 {	background-image: url("../img/login/b01.jpg");}
.loginScreenBackground-2 {	background-image: url("../img/login/b02.jpg");}
.loginScreenBackground-3 {	background-image: url("../img/login/b03.jpg");}
.loginScreenBackground-4 {	background-image: url("../img/login/b04.jpg");}
.loginScreenBackground-5 {	background-image: url("../img/login/b05.jpg");}
.loginScreenBackground-6 {	background-image: url("../img/login/b06.jpg");}
.loginScreenBackground-7 {	background-image: url("../img/login/b07.jpg");}
.loginScreenBackground-8 {	background-image: url("../img/login/b08.jpg");}
.loginScreenBackground-9 {	background-image: url("../img/login/b09.jpg");}
.loginScreenBackground-10 {	background-image: url("../img/login/b10.jpg");}
.loginScreenBackground-11 {	background-image: url("../img/login/b11.jpg");}
.loginVerticalAlign {
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}
.loginHorizontalAlign {
	width:20vw;
	min-width:400px;
	height:22vh;
	min-height:330px;
	background-color:#fff;
	
	margin:auto;
	padding:15px;
	
	border-radius: 3px;
}
.loginHorizontalAlign h2 {
	margin-top:10px;
}

@-webkit-keyframes login-In-kfanim 	{   0%   { opacity: 0; transform: scale(0.9); }  	100% { opacity: 1; transform: scale(1.0); }}
@-moz-keyframes login-In-kfanim 	{   0%   { opacity: 0; transform: scale(0.9); }  	100% { opacity: 1; transform: scale(1.0); }}
@-o-keyframes login-In-kfanim 		{   0%   { opacity: 0; transform: scale(0.9); }  	100% { opacity: 1; transform: scale(1.0); }}
@keyframes login-In-kfanim 			{   0%   { opacity: 0; transform: scale(0.9); }  	100% { opacity: 1; transform: scale(1.0); }}

@-webkit-keyframes login-Out-kfanim {   0%   { opacity: 1; transform: scale(1.0); } 	100%   { opacity: 0; transform: scale(0.80); }  }
@-moz-keyframes login-Out-kfanim 	{   0%   { opacity: 1; transform: scale(1.0); } 	100%   { opacity: 0; transform: scale(0.80); }  }
@-o-keyframes login-Out-kfanim 		{   0%   { opacity: 1; transform: scale(1.0); } 	100%   { opacity: 0; transform: scale(0.80); }  }
@keyframes login-Out-kfanim 		{   0%   { opacity: 1; transform: scale(1.0); } 	100%   { opacity: 0; transform: scale(0.80); }  }

@keyframes login-Out-background-kfanim 		{   0%   { background:rgba(255, 255, 255, 0);  } 	100%   { background-image:none; background:rgba(255, 255, 255, 1);  }  }

.login-In {
	-webkit-animation: login-In-kfanim 0.3s forwards; /* Safari 4+ */
	-moz-animation:    login-In-kfanim 0.3s forwards; /* Fx 5+ */
	-o-animation:      login-In-kfanim 0.3s forwards; /* Opera 12+ */
	animation:         login-In-kfanim 0.3s forwards; /* IE 10+, Fx 29+ */
  	animation-iteration-count: 1;
}
.login-Out {
	-webkit-animation: login-Out-kfanim 0.18s forwards; /* Safari 4+ */
	-moz-animation:    login-Out-kfanim 0.18s forwards; /* Fx 5+ */
	-o-animation:      login-Out-kfanim 0.18s forwards; /* Opera 12+ */
	animation:         login-Out-kfanim 0.18s forwards; /* IE 10+, Fx 29+ */
  	animation-iteration-count: 1;
}

@keyframes shake {
  10%, 90% {    transform: translate3d(-1px, 0, 0);  }
  20%, 80% {    transform: translate3d(2px, 0, 0);  }
  30%, 50%, 70% {    transform: translate3d(-4px, 0, 0);  }
  40%, 60% {    transform: translate3d(4px, 0, 0);  }
}
.login-Shake {
	animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}
/* goal of this : fade to white at login */
.backgroundWhiteForOut {
	width:100%;
	height:100%;
}
.backgroundWhiteForOutAnim {
	animation: login-Out-background-kfanim  0.2s forwards; /* IE 10+, Fx 29+ */
  	animation-iteration-count: 1;
}
.logoOperator160 {
	background-image: url("../../kp-content/operator_img/NAVBAR_LOGO.png");
	background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */	
    width:160px;
    height:46px;
    margin:auto;
}

.loginInputShadow {
	-webkit-box-shadow: inset -1px 0px 5px 0px rgba(230,230,230,1);
	-moz-box-shadow: inset -1px 0px 5px 0px rgba(230,230,230,1);
	box-shadow: inset -1px 0px 5px 0px rgba(230,230,230,1);
}

.loginInputGroup {
	margin-bottom:0.5rem;
}
.loginInputBorder {
	border:1px solid #ddd;
}
.loginInputBorderFailed {
	border:1px solid red;
}