@import "https://code.getmdl.io/1.3.0/material.indigo-pink.min.css";

/*background*/
body{
	/*background-color: #fafafa;*/
	background-color: rgba(245, 245, 245);
	/*background-image: url(/assets/img/background-login-img.png);*/
	position: relative;
    height: 100%;
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 0;
	overflow: hidden;
}

h2, h1, h3, h4{
	margin: 0;
}

*:not(i) {
	font-family: 'Nunito', sans-serif !important;
}

.header-loading-bar-outer {
	z-index: 10;
	width: 100%;
	position: absolute;
	height: 5px;
	left: 0;
	top: 0;
	/*background: #434343ff;*/
}

	.header-loading-bar {
		height: 5px;
		position: absolute;
		width: 100%;
		/*background: #f89406;*/
		background: #666;
		overflow: hidden;
	}
	
		.header-loading-bar #header-loading-block {
			position: absolute;
			left: -40%;
			width: 40%;
			height: 100%;
			display: block;
			top: 0;
			/*background: rgba(255,255,255,0.4);*/
			
			/*box-shadow: inset 15px 0px 15px -7px #f89406, */
   /*           inset -15px 0px 15px -7px #f89406;*/
   
   		/*box-shadow: inset 15px 0px 15px -7px #ccc, */
     /*         inset -15px 0px 15px -7px #ccc;*/
     
     	background: linear-gradient(
			  to left,
			  rgba(255, 255, 255, 0) 0%,
			  rgba(255, 255, 255, 0.7) 10%,
			  rgba(255, 255, 255, 0.7) 90%,
			  rgba(255, 255, 255, 0) 100%
			);
			
			x-transition: all 1s ease-in-out;
			animation: headerLoadingAni 1.5s infinite;
		}
		
		@keyframes headerLoadingAni {
		  0% {
		    left: -40%;
		  }
		  100% {
		    left: 140%;
		  }
		}

.bt-loading-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(/assets/img/eloading2.gif); 
	background-size: 100%;
	height: 30px; 
	width: 30px; 
	margin: auto;
}

.id-logo{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
	padding-bottom: 10px; 
	padding-right: 10px;
	font-weight: 100;
	margin-top: 20px;
}

.id-logo li{
	display: inline;
	padding-right: 10px;
	font-size: 20px;
	font-weight: 100;
}

.id-logo img{
	float: left;
	padding-right: 10px;
}

.id-logo .id-logo-image {
	background: url('/assets/img/endevre-id-logo-icon.svg');
	background-size: cover;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	float: left;
}

/* login background box */
.background_box{
	position: absolute;
    width: 300px;
    margin: auto;
    padding: 20px 40px 40px;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	height: 450px;
	border-radius: 8px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}

.background_box::before,.background_box::after{
    content: "";
    position: absolute;
    width: 100%;height: 100%;
    top: 3.5px;left: 0;
    background: #fff;
    z-index: -1;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    border: 1px solid #ccc;

}

.background_box::after{
    top: 5px;
    z-index: -2;
    -webkit-transform: rotateZ(-2deg);
     -moz-transform: rotateZ(-2deg);
      -ms-transform: rotateZ(-2deg);

}

.login_profile{
	text-align: center;
	display: block;
	line-height: 10px;
}

.login_profile h1 h2{
	text-align: center;
}

.login_profile h2{
	font-size: 15px;
	font-weight: 100;
	color: #333;
	/*letter-spacing: 0.7px;*/
	padding: 5px 5px;
	margin: auto;
	width: fit-content;
	/*border: solid 1px #ccc;*/
	/*border-radius: 30px;*/
	/*border-bottom: solid 1px #333;*/
}

.login_profile h1{
	font-size: 25px;
	font-weight: 500;
}

/* login background box top */
.login_background_box_top{
	width: 466px;
	height: 83px;
	left: 487px;
	top: 169px;

	background: rgba(117, 181, 255, 0.72);
	border-radius: 5px;
}

.background_box .input-container {
  position: relative;
  margin-bottom: 30px;
  width: 100%;
}
	.background_box .input-container-2f {
		width: 40px;
		height: 40px;
		float: left;
		margin-right: 10px;
	}
		.background_box .input-container-2f input {
			font-size: 30px !important;
			height: 40px !important;
			text-align: center;
			padding: 10px 0;
		}
		.background_box .input-container-2f .bar {
			bottom: -10px !important;	
		}
		
.background_box .input-container input {
  outline: none;
  z-index: 1;
  position: relative;
  background: none;
  width: 100%;
  height: 20px;
  border: 0;
  color: #212121;
  font-size: 15px;
  font-weight: 400;
  margin-top: 10px;
}
.background_box .input-container input:focus ~ label {
  color: #000000;
  -webkit-transform: translate(-12%, -50%) scale(0.75);
          transform: translate(-12%, -50%) scale(0.75);
  font-size: 16px;
}
.background_box .input-container input:focus ~ .bar:before, .background_box .input-container input:focus ~ .bar:after {
  width: 50%;
  /*width: 70%;*/
}
.background_box .input-container input:valid ~ label {
  color: #9d9d9d;
  -webkit-transform: translate(-12%, -50%) scale(0.75);
          transform: translate(-12%, -50%) scale(0.75);
  /*-webkit-transform: translate(-12%, -50%) scale(0.3);*/
  /*        transform: translate(-12%, -50%) scale(0.3);*/
}
.background_box .input-container label {
  position: absolute;
  top: -5px;
  left: 0;
  color: #757575;
  /*font-size: 12px;*/
  font-size: 14px;
  font-weight: 300;
  line-height: 30px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.background_box .input-container .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}
.background_box .input-container .bar:before, .background_box .input-container .bar:after {
  content: '';
  position: absolute;
  background: #000000;
  width: 0;
  height: 2px;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.background_box .input-container .bar:before {
  left: 50%;
}
.background_box .input-container .bar:after {
  right: 50%;
}

.errorRedBar, .errorRedBar:before, .errorRedBar:after {
	background-color: #F03434 !important;
}

.errorRedLabel {
	color: #F03434 !important;
}

.main-body {
	position: absolute;
	white-space: nowrap;
	height: 450px;
	width: 300px;
	overflow: visible;
}

.hide {
	width: 0 !important; 
}

.slide-left-an {
	overflow: visible;
	width: 0%;
	height: 100%;
	
}

.sign-up-text {
	bottom: 10px;
	position: absolute;
	width: 100%;
	left: 0;
	font-size: 12px;
	color: grey;
	text-align: center;
}

.sign-up-text a{
	color: grey;
}

.signup-gdob{
}

.signup-gdob li{
	display: inline;
}

.display-warning {
	margin-top: -30;
    color: #F03434;
    font-size: 10px;
    position: absolute;
}

.bottom-text a {
	text-decoration: underline;
}

.bottom-text a:hover {
	cursor: pointer;
}

/* login box username */
.login_box{
	width: 407px;
	height: 62px;
	left: 516px;
	top: 316px;

	background: rgba(255, 255, 255, 0.54);
	border-radius: 10px;
}

/* login button */
.login{
	width: 318px;
	height: 62px;
	left: 561px;
	top: 567px;

	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.19);
	box-sizing: border-box;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}

.login_profile{
}

.login_profile img{
	height: 70px;
	border-radius: 50%;
}

.sI-welcome {
	line-height: 0.7; 
	padding-top: 30px;
}

.sI-welcome h2 {
	font-size: 25px;
}

.sI-welcome h3 {
	font-size: 13px; font-weight: 100; line-height: 13px;
}

/* login button google */
.glogin{
	width: 318px;
	height: 62px;
	left: 561px;
	top: 649px;

	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.19);
	box-sizing: border-box;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}


/* sign up button */
.signup{
	width: 318px;
	height: 62px;
	left: 560px;
	top: 731px;

	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.19);
	box-sizing: border-box;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}


/* login box password */
.password_box{
	width: 407px;
	height: 62px;
	left: 516px;
	top: 408px;

	background: rgba(255, 255, 255, 0.54);
	border-radius: 10px;
}

.submit-container{
	float: right;
}

.submit-container input{
	border: none;
	cursor: pointer;
	background-color: #efefef;
}

/* Sign Up CSS */
.box1{
	display: block;
}

.box2{
	display: none;
}

.box3{
	display: none;
}

.background_box .input-container .barError:before, .background_box .input-container .barError:after{
	background: #e60000;
}

.background_box::before,.background_box::after{
	display: none;
}

.background_box::after{
	display: none;
}

#slide {
    position: relative;
	visibility: hidden;
    left: -100px;
    -webkit-animation: slide 0.3s forwards;
    animation: slide 0.75s forwards;
    animation-delay: 0.25s;
	float: left;
	color: #808080;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.4px;
	line-height: 20px;
	margin-left: 10px;
	/*font-family: 'Roboto', sans-serif;*/
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
	50% { 
		visibility: hidden; 
		opacity: 0.1;
	}
    100% { 
		left: 0 ;
		visibility: visible; 
		opacity: 1;
	}
}

/**********************/
/***** MOBILE CSS *****/
/**********************/

@media only screen and (max-width: 500px) {
	#slide {
		font-weight: 300;
		font-size: 18;
	}

	.header-loading-bar-outer {
		top: 10px;
	}

	.main-body {
		position: relative;
		width: 100%;
	}

	.sI-welcome h2 {
		font-size: 30px;
	}

	.sI-welcome h3 {
		font-size: 17px; font-weight: 250; line-height: 17px;
	}

	#uSiF h2 {
		font-weight: 400;
	}

	.background_box .input-container input {
		font-size: 18px;
		height: 30px;
	}

	.background_box .input-container label {
		font-size: 15px;
		line-height: 40px;
	}

	.background_box{
		position: fixed;
		padding: 20px 40px 40px;
		text-align: left;
		background: #fff;
		border: 1px solid #ccc;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		height: calc(100% - 40px);
		width: calc(100% - 80px);
		margin: 0, 0, 0, 0;
	}
	
	.background_box::before,.background_box::after{
		display: none;
	}

	.background_box::after{
		display: none;
	}


}