div.jumbotron.login{
	height:100%;
	width:100%;
	padding:0;
}

/* -- login screen -- */
div.container.login {
	position: absolute;
    top: calc(50% - (250px/2));
    left: calc(50% - (350px/2));
    max-width: 350px;
    width: 100%;
}
div.container.login h1{
	margin-bottom:35px;
	color:white;
}
div.container.login input{
	width: 100%;
	color: #ffffff;
    margin-bottom: 20px;
    background-color: rgba(0,0,0,0.1);
}
div.container.login a:not(.button){
	font-weight:bold;
	font-size:15px;
	line-height:50px;
	padding:0;
	text-decoration:underline;
}
div.container.login a:hover{
	text-decoration:none;
}

form#reg_form div.container select.validating,
form#reg_form div.container textarea.validating,
form#reg_form div.container input.validating{
	border-bottom-width: 1px !important;	
}
form#reg_form div.container select.wrong,
form#reg_form div.container textarea.wrong,
form#reg_form div.container input.wrong{
	border-bottom-color:rgb(167, 6, 6);	
	background-color: rgba(255, 227, 227, 0.2);
}

form#reg_form div.container select,
form#reg_form div.container input{
	width: 94%;
	float:right;
}

div.container.login div.message.shown{
	border-left: 3px solid;
    padding: 10px;
    margin-bottom: 10px;	
	background-color: #defccb;	
}
div.container.login div.message.wrong{
    background-color: #ffdddd;
}
div.container.login div.message.shown:not(.wrong){
	border-left-color: #2c7637 !important;
}


body input::placeholder{
	color: #fff;
}	

/* -- login side image -- */

div.jumbotron.login .col{
	height:100%;
}
div.jumbotron.login .col.loginSide{
	background: linear-gradient(
				  rgba(255, 255, 255, 0.85), 
				  rgba(255, 255, 255, 0.85)
				), url(../images/login_background.jpg);

	background-position: top left, center center;
	background-size: 100%, cover;
	background-repeat:no-repeat;
}

div.jumbotron.login .col.loginSide img.logo{
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	max-width:500px;
	transform: translateY(-50%) translateX(-50%);
}

/* ------------------------ */


@media (max-width: 768px){
	div.jumbotron.login .col{
		margin:0;
		padding:0;
	}
	div.container.login{
		width: 100% !important;
		top: 30%;
		left: 0;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
	}
}
@media (max-width: 767px){
	div.container.login div.editField table td{
		width: 100% !important;
		display: block;
		float: left;
	}
}