@CHARSET "UTF-8";

html
{
	min-width: 20rem;
}

.main-container
{
  	min-width: 20rem;
	border: 1rem solid var(--primary);
  	padding: 3.5rem 3rem;
}

#application-name 
{
	line-height: 3rem;
	margin-bottom: 2.5rem;
}

#logo
{
	display: none;
}

.form-group:first-child 
{
  	height: 4.5rem;  
}
	
.invalid-feedback 
{
	font-size: 1.3rem;
}

#password-updated-hint, #password-constraints 
{
	margin-bottom: 2rem;
}

@media (min-width: 36em) 
{ 
	.main-container
	{
		width: 31rem;
 		padding: 3.5rem 4.5rem;
	}
	
	#logo
	{
		display: inline-block;
		height: 3rem;
	}
	
	#logo path
	{
		fill: var(--gray);
	}
}

@media (min-width: 36em) and (max-width: 47.99em) and (orientation: landscape)
{ 
	#login-container
	{
		width: 34rem;
	}
	
	#login-container form
	{
	    display: flex;
	    justify-content: space-between;
	}	
	
	#login-container .form-groups
	{
		padding-right: 3rem;
	}

	#login-container .form-buttons
	{
		margin-top: 3.9rem;
		flex-direction: column;
	}			
	
	#login-container h3, #login-container h5
	{
		text-align: center;
	}
}	

@media (min-width: 48em) 
{ 
	.main-container
	{
		width: 43rem;
	}	
}