html{
     font-family: Arial;     
}

body{
     width: 100%
}

.row{
	margin:0;
}

.left_logo{
	padding:8% 2% 4%;
}

.load{ 
	padding:8% 4% 7%; 	
    background: #E8F5FD;  	
}

.main {	
	width:100%;
	height: 100%;	
}

.login_screen{
	height:auto; 
	padding-top:10%;
	padding-bottom:10%
}

.log_back{
	height:auto;
	background-color:rgba(255, 255, 255, 0.8);
}

.log_head{
	 width:100%;
     color: #FFF;
     background-color:#009;	
	 font-size:20px; 
     font: bold Arial, Helvetica, sans-serif;
	 font-weight:normal;	    
     font-family: Arial;
	 text-align: center ; 
	 padding-top: 5px;
}

.login_col{
	padding-top:1.5rem;
}

.error{
	color:#F00;
}

#alert-box{
    width:100%;
    margin-bottom:10px;
}

#alert-box .alert{
    width:100%;
    margin:0;
}

.logo {
    max-width: 100%;      /* responsive for mobile */
    max-height: 70px;     /* limit height */
    width: auto;          /* keep original ratio */
    height: auto;
    object-fit: contain;  /* prevent cropping/stretching */
}

@media screen and (max-width:48em) {
	.esys_logo {
		max-height:60%;
	}	
	
	.login_col{
		padding-top:0;
		margin-left:15px;
		margin-right:15px;	
	}	
	
	.left_logo{		
		padding:2% 40%;		
	}
}