html {
    height: 100%;
    overflow-y: visible; 
}
body {
	width: 100wh;
	height: 90vh;
	color: black;
	background-image: url("login_background.jpg");
	background-color: black;
	background: rgba(76, 175, 80, 0.3);
	/*background: linear-gradient(25deg, #001a57, #23A6D5, #00d2f3, #00d1b2, #3be8b0);*/
	/*background: linear-gradient(45deg, #436f8e, #4d9db3, #394956, #006699);*/
	background: linear-gradient(-35deg, #01051a, #000014, #050f2c, #00103d);
	background-size: 170% 120%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 35s ease infinite;
}

.logo{
	font-weight: unset !important;
}

.login-but{
	transition: all .5s ease;
	background-color: transparent;
	border: 1px solid #00d8ff;
}

.clockin_link{
	transition: all .8s ease;
	background-color: transparent;
	border: 1px solid #00ff00;
}

.login-but:hover {
    border-bottom: 2px solid #00d8ff;
    background-color: #003a70;
}

.clockin_link:hover {
    border-bottom: 2px solid #00ff00;
    background-color: #006400;
}
.clockin_link span{
	margin-left: 5%;
}
.remember-me{
	margin-left: 14px;
}

.login-textboxes{
	border: none !important;	
	border-bottom: 1px solid #14d4f4 !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: #fff;
	/*text-indent: -60px;*/
    text-align: -webkit-center;
}
.show_pswrd .fa-eye-slash{
	color: #4b7395;
}
.form-control:focus {
    box-shadow: none !important;
}

.login-textboxes :focus{
	border: 0px ;
	border-bottom: 1px solid;
	background:transparent;
	border-color: #14d4f4;
}

.login-icons{
	border: none !important;	
	border-bottom: 1px solid #14d4f4 !important;
	background: none !important;
	color: #00ff00;
}
input:-webkit-autofill {    
    -webkit-text-fill-color: #fff;
}
input:-webkit-autofill:focus {     
    -webkit-text-fill-color: #fff;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
body:before, body:after {
    width: 100%;
    position: static;
    content: normal;
}
h3 {
    margin: 0;
}
.page-back {	
    padding: 50px 0;	
    min-height: 100%;
    overflow: hidden;
    background-size: cover;
    position: relative;
    box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.3);
}

.login-page .login-form-div {
	left: 25%;
	background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}
.login-page .login-content,
.login-page .reg-content {
	/*border-radius: 10px;*/
	min-height: 285px;
	opacity: 0.9;
    background-color:rgba(0, 0, 30, 0.7);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    padding-bottom: 20px;
	text-align:center;
}
.loading_message{
	margin-top: 20%;
	text-align: center;
}
.login-page .div-title {
    margin: 20px 0;
}

.text-danger2 {
    color: #fb8a2e;
}

.text-danger3 {
    color: #ff322e;
}

.text-danger3:hover {
  color: #ffb900;
}

.text-danger3:visited {
  color: #ff6600;
}

.slider {
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  position: absolute;
  display: block;		
  flex-shrink: 0;
  height: 100%;
  animation-duration: 40s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.recent-users{
	overflow: auto;
	display: none;
    justify-content: space-around;
}
.user_selected img {
	opacity: 1 !important;
	border: 2px solid #21d0ef !important;
}
.recent-user{
	display: inline-block;
    padding: 6px 7px;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 5px;
}
.recent-user img:hover{
	border: 2px dashed #12c2e2;
	opacity: 0.8;
}
.recent-user img {
	opacity: 0.6;
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px dashed #12c2e2;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.slide-1{
	animation-name: anim-1;
}

.slide-2{
	animation-name: anim-2;
}

.delayed_load{
	display: none;
}

.loading_message{
	display: none;
}


@keyframes anim-1 {
	0%, 8.3% { left: 3%; opacity: 0; }
	8.3%,25% { left: 5%; opacity: 1; }
	33.33%, 100% { left: 15%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: 3%; opacity: 0; }
	41.63%, 58.29% { left: 5%; opacity: 1; }
	66.66%, 100% { left: 15%; opacity: 0; }
}

.login-page .input-group .input-group-addon {
    border-radius: 0;
}
.login-page .custom-checkbox {
    float: left;
}
.login-page .checkbox {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 6px;
    padding-left: 1px;
}
.login-page .checkbox-text {
    line-height: 22px;
}
.login-page .checkbox label {
    cursor: pointer;
    font-weight: 400;
    margin-bottom: 0;
    padding-left: 0px;
    margin-top: 0;
}
.login-page .input-group .input-group-addon i, .login-page input[type="checkbox"] {
    width: 30px;
}
.login-page .input-group .input-group-addon i {
    padding-left: 10px;
    padding-right: 10px;
}

.login-page .registration-form-action {
    background-color: white;
    padding: 20px;
}
.login-page .registration-form-div {
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
    background: #FFF;
}

.login-page .registration-left-div {
    padding-left: 0;
    padding-right: 0px;
}
.login-page .registration-right-div {
    padding-left: 0;
    padding-right: 0;
}
.login-page .reg-content {
    padding-bottom: 20px;
}
.login-page .login-form-links {
	/*border-radius: 10px;*/
	height: auto;
	top: 50%;
	position: relative;
	min-height: 250px;
	color:#c4dff6;
    padding: 10px;
    margin-top: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    background-color:rgba(0, 0, 0, 0.2);
	overflow: hidden;
}
.div-captcha-left {
    padding-right: 0;
}
.div-captcha-right {
    padding-left: 0;
}@media (max-width: 767px) {
	.login-page .login-form-div {
		width: 50%;
	}
	.login-page .logo img{
		float:center;
		width: 20%;
		height: auto;
	}
	.login-page .link2 {
		max-height: 20%;
	}
	.login-page .login-form-links {		
		min-height: 100px;
	}
	.login-page .login-form-div {
		width: 80%;
	}
}
@media (max-width: 767px) {
	.login-page .div-title {
     top: 5px;
	}
	.login-page .login-form-links {		
		min-height: 110px;
	}
	.login-page .logo img{
		width: 60%;
		height: 30%;
	}
	.login-page .login-form-div {
		width: 95%;
	}
    .login-page .registration-left-div {
        padding-right: 0px;
    }
    .login-page .registration-right-div {
        padding-left: 0px;
    }
    .div-captcha-left {
        width: 50%;
        float: left;
    }
    .div-captcha-left img {
        width: 100%;
        height: 34px;
    }
    .div-captcha-right {
        width: 50%;
        float: left;
    }
}