.bg{ background:url("../images/loginBg.jpg") left top no-repeat fixed; background-size: cover;}
.loginPanel{ min-height: 440px; position: absolute; top:50%; margin-top: -220px; left:50%; margin-left: -250px; width: 500px;  background: #fff; -webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.29);
box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.29);}
.loginPanel .topPanel{ width:100%; padding-left: 40px; float: left; padding-right: 40px; padding-bottom: 40px;}
.loginLogo{ float: left; padding-bottom: 10px; width: 100%; padding-top: 40px; padding-left: 40px;}
.loginPanel .topPanel h1{ font-size: 28px; line-height: normal; font-weight:normal; color:#1376b9; margin:0px;}
.loginPanel .topPanel p{ font-size: 16px; color:#000; font-weight: 600; }
.loginPanel .topPanel .emailInput{ margin-top: 7px; margin-top: 10px; background: #f1f1f1; border:2px solid #dfdfdf; box-shadow: none;
height: 50px; font-size: 20px; font-weight: 400; color:#000; 
 }
 .loginPanel .topPanel .emailInput:focus{ border:2px solid #7ac3f4; background: #fff;-webkit-box-shadow: 0px 0px 13px 0px rgba(122,195,244,1);
-moz-box-shadow: 0px 0px 13px 0px rgba(122,195,244,1);
box-shadow: 0px 0px 13px 0px rgba(122,195,244,1);}
.loginPanel .topPanel .forgotPass{ text-decoration: underline;  float:left; margin-top: 15px; background: none; padding: 0px; border:0px; font-size: 16px; font-weight: 600; }
.loginPanel .topPanel .forgotPass:hover{ text-decoration: none; }
.loginPanel .bottomPanel{  min-height: 91px; background: url("../images/btnBrder.png") left top repeat-x #f0f1f3; padding:20px 40px; padding-top: 25px; float:left; width: 100%; }
.loginPanel .bottomPanel .btn{ padding-top: 10px; padding-bottom: 10px; float:right; }
.errobox{ display: none; color:red !important; font-size: 16px; font-weight: 600; margin-top: 10px;}
.has-error .errobox{ display: block; }
.EmailNotMatch{ float: left; display: none; color:red !important; font-size: 16px; font-weight: 600; margin-top: 15px;}

.PasswrdSent{width: 100%; float: left; color: green; font-size:14px; font-weight: 600; padding-top: 10px; }
.PasswrdSentError{width: 100%; float: left; color: red; font-size:14px; font-weight: 600; padding-top: 10px; }

.loginPanel .topPanel .emailInput.checkMark{
	background-image: url("../images/checkMark.png");
background-repeat: no-repeat;
background-position: 96% center;
padding-right: 40px;
border:2px solid #7ac3f4;
background-color: none !important;

}

.loginPanel .topPanel .has-error .emailInput.checkMark{background-image:none; padding-right: 15px; }
.loginPanel .SignIn{ float: left; width: 100%; transition: all 0.3s ease-in-out; }
.loginPanel .PasswordDiv{ visibility: hidden; float: left; width: 100%; transition: all 0.3s ease-in-out; transform: translateX(100%);   position: absolute;
    top: 97px; }

.loginPanel .SignIn.setaside{ transform: translateX(-100%); visibility: hidden;  }
.loginPanel .PasswordDiv.setasideP{ transform: translateX(0%); visibility: visible; }
.loginPanel .loginWrper{ overflow: hidden; width: 100%; float: left; position: relative; }
.loginbtncls{ display: none; } 
.backtoEmail{ text-decoration: underline; display: none; float: left; color: #217DBC; font-size:16px; font-weight: 600; padding-top: 10px; }
.backtoEmail:hover{ text-decoration:  none; }
.backtoEmail::before{    content: " ";
    /* left: 0px; */
    position: absolute;
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-right: 8px solid #217DBC;
    margin-left: -22px;
    margin-top: 3px;}


 /********* Loader *********/

.db{ display: block; }

.PasswrdSent{ padding-left: 23px; background: url("../images/checkMarkGreen.png") left 13px no-repeat; }

@keyframes opacity-80-25-0-8 {
0% { opacity: 0.25; }
0.01% { opacity: 0.25; }
0.02% { opacity: 1; }
80.01% { opacity: 0.25; }
100% { opacity: 0.25; }
}

@keyframes opacity-80-25-1-8 {
0% { opacity: 0.25; }
12.51% { opacity: 0.25; }
12.52% { opacity: 1; }
92.51% { opacity: 0.25; }
100% { opacity: 0.25; }
}

@keyframes opacity-80-25-2-8 {
0% { opacity: 0.296969; }
25.01% { opacity: 0.25; }
25.02% { opacity: 1; }
5.01% { opacity: 0.25; }
100% { opacity: 0.296969; }
}

@keyframes opacity-80-25-3-8 {
0% { opacity: 0.414156; }
37.51% { opacity: 0.25; }
37.52% { opacity: 1; }
17.51% { opacity: 0.25; }
100% { opacity: 0.414156; }
}

@keyframes opacity-80-25-4-8 {
0% { opacity: 0.531344; }
50.01% { opacity: 0.25; }
50.02% { opacity: 1; }
30.01% { opacity: 0.25; }
100% { opacity: 0.531344; }
}

@keyframes opacity-80-25-5-8 {
0% { opacity: 0.648531; }
62.51% { opacity: 0.25; }
62.52% { opacity: 1; }
42.51% { opacity: 0.25; }
100% { opacity: 0.648531; }
}

@keyframes opacity-80-25-6-8 {
0% { opacity: 0.765719; }
75.01% { opacity: 0.25; }
75.02% { opacity: 1; }
55.01% { opacity: 0.25; }
100% { opacity: 0.765719; }
}

@keyframes opacity-80-25-7-8 {
0% { opacity: 0.882906; }
87.51% { opacity: 0.25; }
87.52% { opacity: 1; }
67.51% { opacity: 0.25; }
100% { opacity: 0.882906; }
}
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  background: #fff;
}
.se-pre-con .spinner-container{ position: fixed; top: 50%; left: 50%; }
.anmateLoader{animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 0% 0%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 0% 0%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 0% 0%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 0% 0%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 0% 0%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/}
/*
  @keyframes animationFrames{
  0% {
    width: 100%;
    height: 100%

  }
 
  100% {
    width: 500px;
    height: 450px;
    margin-left: -250px;
    margin-top: -205px;
    top:50%;
    left:50%;
  }
}
*/
.btn:focus,a:focus{outline: 2px dotted #003057 !important;
    outline-offset: 1px;}

@media (min-width: 320px) and (max-width: 550px)  {

  .loginPanel{ overflow: hidden; position: inherit !important; left:inherit !important; top: inherit !important; margin: 30px auto !important; width: 98%;  }
  .loginLogo{ padding-left: 20px; }
  .loginPanel .topPanel{ padding-left: 20px; padding-right: 20px; padding-bottom: 30px;}
  .loginPanel .topPanel p, .PasswrdSent,.EmailNotMatch, .errobox,.loginPanel .topPanel .forgotPass, .backtoEmail{ font-size: 14px; }
  .EmailNotMatch{ margin-top:0px; margin-bottom: 10px; width: 100%;  }
  .loginPanel .topPanel .emailInput{ font-size: 18px; }
  .loginPanel .topPanel h1{ font-size: 20px; }
  .PasswrdSent{ margin-top: 10px; }
  .backtoEmail{ margin-top: 10px; margin-bottom: 10px; }


@keyframes animationFrames{
  0% {
    width: 100%;
    height: 100%

  }
 
  100% {
    width: 100%;
    height: 100%;
    margin-left: inherit !important;
    margin-top: inherit !important;
    top:inherit !important;
    left:inherit !important;
  }
}




}


.errorMessage{ list-style: none; padding: 0px; margin:0px;}
.backendErrorPassword{ display: block;
}
.emailInput.checkMark + #forgotPasswordError{display: none;}
.forgotPass {
	cursor: pointer !important;
}

.resetScren .form-control.emailInput { margin-top: 0px !important}
input.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000 !important; opacity:1;
}
input.form-control::-moz-placeholder { /* Firefox 19+ */
  color: #000 !important; opacity:1;
}
input.form-control:-ms-input-placeholder { /* IE 10+ */
  color: #000 !important; opacity:1;
}
input.form-control:-moz-placeholder { /* Firefox 18- */
  color: #000 !important; opacity:1;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
	background-color: transparent !important;
	-webkit-box-shadow: 0 0 0 30px white inset !important;
	
}