@import '~bootstrap';

// h3 {
// 	font-size: 23px; 
// }

// h4 {
// 	font-size: 17px; 
// }

// h1, h2, h3, h4, h5, h6 {
// 	font-family: "Open Sans", sans-serif;
// 	font-weight: 300; 
// }

html, body, .auth-page {
	min-height: 100vh;
	color: #fff;
	font-family: Arial;
	font-size: 14px; 
}

.forget-password h4 {
	font-size: 14px;
	margin-top: 20px; 
}

.forget-password h4 a, .relogin a {
	color: #efdfef; 
}

.forget-password h4 a:hover {
	text-decoration: none;
	color: #c6c6c6; 
}

.auth-page {
	display: flex;
	flex-direction: column;
	background-size: cover;
	background-position: center; 
}

.auth-page .content-wrapper {
	display: flex;
	justify-content: center; 
}

.auth-page .content {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-bottom: 10px; 
}

.auth-page .content .logo {
	max-width: 380px;
	width: 100%;
	background-color: rgba(100, 100, 100, 0.5);
	display: flex;
	align-items: center;
	padding: 20px 8px; 
}

.auth-page .content .logo img {
	width: 100%; 
}

.lock {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(25, 25, 25, 0.9);
	max-width: 380px;
	width: 100%;
	text-align: center; 
}

.user-details h1 {
	margin-bottom: 0; 
}

.lock .lock-user-img {
	max-width: 150px;
	width: 100%;
	border-radius: 12px; 
}

.lock-info {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px; 
}

.lock-info .lock-icon {
	font-size: 22px;
	background-color: #f05025;
	line-height: 22px;
	padding: 8px 12px;
	margin-right: 10px;
	margin-left: -10px;
	border-radius: 50%; 
}

.login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(60, 20, 15, 0.75);
	max-width: 380px;
	width: 100%;
	border: 1px solid #8a7f7f;
	position: relative;
	overflow-x: hidden; 
}

.login form, .lock form {
	width: 100%;
	transition: transform .5s ease, opacity .3s;
	padding: 15px 20px; 
}

.login form .invalid-feedback {
	margin: 5px 0px;
	font-size: 12px;
	color: #dc6361; 
}

.login form .has-error .invalid-feedback {
	display: block;
}

.input-icon {
	position: relative;

	&> span {
		color: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 32px;
		
		i {
			z-index: 3;
			width: 16px;
			height: 16px;
			font-size: 16px;
		}
	}
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff; 
}

.input-icon > .form-control {
	padding-left: 33px; 
}

.green.btn {
	color: white;
	background-color: #35aa47; 
}

.btn {
	padding: 7px 20px;
	border-radius: 0;
	font-size: 14px;
	// margin: 2px 2px 10px;
	font-weight: 400; 
}

.login .form-title {
	font-size: 32px;
	margin-bottom: 25px; 
}

.login form input {
	border-radius: 0;
	border: 0;
	border-color: white !important;
	box-shadow: unset; 
}

.login span.input-group-text {
	border-radius: 0;
	background-color: #eaeaea; 
}

.login form.forget-form {
	opacity: 0;
	transform: translateX(380px);
	position: absolute; 
}

.relogin-btn {
	font-size: 12px;
	padding: 7px 18px; 
}

.lockform-input {
	margin: 20px 0px 10px; 
}

.lockform-input .form-control {
	min-width: 100px; 
}

.relogin {
	text-align: left; 
}

.visible-ie9 {
	display: none; 
}

.visible-ie8 {
	display: none; 
}

.auth-page .copyright {
	width: 100%;
	text-align: center;
	padding: 10px 0px 2px;
	color: #f7e7e7;
	background-color: rgba(0, 0, 0, 0.5);
	margin-top: auto; 
}

.copyright .lang-select {
	list-style: none;
	display: inline-block; 
}

.copyright .lang-select img {
	margin-right: 5px; 
}

.copyright a {
	color: #fff; 

	&:hover {
		text-decoration: none;
		color: #efefef;
	}
}

.copyright .lang-select ul.dropdown-menu {
	background-color: #000; 
}
.copyright .lang-select ul.dropdown-menu li {
	min-width: 140px; 
}
.copyright .lang-select ul.dropdown-menu a {
	display: block;
	padding: 5px 0px 3px 10px; 
}

.copyright .lang-select .dropdown-menu .active > a {
	background-color: #0d0d0d; 
}

.copyright .lang-select .dropdown-menu a:hover {
	background-color: #2b2b2b;
	color: #fdfdfd; 
}

.copyright .lang-select .dropdown-menu .active > a:after {
	content: '\f00c';
	/* http://fontawesome.io/3.2.1/icon/ok/ */
	font-family: 'FontAwesome';
	float: right;
	margin-right: 8px; 
}

@media (min-width: 768px) {
	.auth-page .content {
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		margin-top: 100px;
		min-height: 400px; 
	}

	.auth-page .content .logo {
		max-width: 400px;
		background-color: rgba(250, 250, 250, 0.8);
		align-items: center; 
	}

	.login, .lock {
		max-width: 320px; 
	}

	.lock form {
		padding: 15px 30px; 
	} 
}