/*============================================== Login =========================================================================*/
#login-container {
	margin:0 auto;
	margin-bottom: 20px;

	text-align:center;
	
	/* this is for borders */
	box-shadow: 0 0 10px 0 #1b1b1b;
	-webkit-box-shadow: 0 0 10px 0 #1b1b1b;
	-moz-box-shadow: 0 0 10px 0 #1b1b1b;
	
	background-color: aliceblue;
	border-radius: 20px;
	
	width:30%;
	position:fixed;
	top:20%;
	left: 35%;
}

#login-title {
	padding-top: 2%;
	/* padding-bottom: 5%; */
}
.form-signin {
	margin:0 auto;
	width:85%;
	padding-bottom: 20px;
}

.input-group, .form-control {
	z-index:1;
}

#login-buttons-div {
	margin-bottom:10px;
}
.login-buttons {
	width: 48%;
	/* float: left; */
	
	margin: 1% 1%;
}

#remember-me {
	padding-bottom: 10px;
}
#forgot-password {
	padding-top: 5px;
	padding-bottom: 10px;
}

#remember a {
	
	text-decoration: none;
}

#togglePassword {
	cursor: pointer;
    position: absolute;
    top: 26%;
    right: 15px;
    z-index: 99;
}

/*====================================== Media =================================================================*/ 

/* Use a media query to add a break point at 600px: */
@media screen and (max-width:600px) {
	#login-container {
		width:80%;
		left:10%;
	}
}