html
{
	height: 100%;

}


body
{
    
	height: 100%;
	top: 0px !important;
	
	min-width: 320px;
	min-height: 560px;
	
	font-family: Arial; 
	
}


.header
{
	
	position: relative;
	display: table;
	margin: auto;
	
	width: 100%;
	height: 50px;
	
	box-sizing: border-box;
	
	!background-color: #333333;
	!border: 1px solid black;
	
}



.body-container
{
	
	position: relative;
	display: table;
	margin: auto;
	
	
	width: 100%;

	/* Firefox */
	height: -moz-calc(100% - 100px);
	/* WebKit */
	height: -webkit-calc(100% - 100px);
	/* Opera */
	height: -o-calc(100% - 100px);
	/* Standard */
	height: calc(100% - 100px);

	
		
	padding: 0px;
	box-sizing: border-box;
	
	background-color: #ffffff;
	!border: 1px solid red;
	
}



.footer
{
	
	position: relative;
	display: table;
	margin: auto;
	
	
	width:100%;
	height: 50px;
	
	padding:0px;
	box-sizing: border-box;

	color: #000000;
	
	background-color: #ffffff;
	!border: 1px solid black;
	
}


.form-signin
{
	
  	margin: 0;
	position: absolute;
 
 	max-width: 360px;
	 
  	left: 50%;
  	top: 20%;

	transform: translate(-50%, -20%);	

}


.form-section
{
	
	position: absolute;
	display: table;
	margin: auto;
	
	margin-top: 10px;
	margin-bottom: 10px;

	/* Firefox */
	width: -moz-calc(100% - 20px);
	/* WebKit */
	width: -webkit-calc(100% - 20px);
	/* Opera */
	width: -o-calc(100% - 20px);
	/* Standard */
	width: calc(100% - 20px);
	
	padding: 40px 40px 40px 40px;
	
	box-sizing: border-box;
	border-radius: 4px;
	
	
	!background-color: #ffffff;
	border: 1px solid #d4dbe0;

	box-shadow: 0px 4px 8px #e7e7e7;

	font-family: Arial; font-size: 16px; color: #000000; font-weight: normal; text-decoration : none;
  	
}



.field-label
{
	
	position: relative;
	display: table;
	margin: auto;
	
	width: 100%;
	padding: 10px 0px 10px 0px;
	box-sizing: border-box;
	
	font-size: 17px;
	
	
	!border: 1px solid red;
		
}


.field-input
{
	
	position: relative;
	display: table;
	margin: auto;
	
	width: 100%;
	padding: 10px 0px 10px 0px;
	-padding: 10px 0px 20px 0px;
	box-sizing: border-box;
	
	
	!border: 1px solid red;
		
}



.form-action
{
	
	position: relative;
	display: table;
	margin: auto;
	
	width: 100%;
	padding: 10px 0px 10px 0px;
	box-sizing: border-box;	
	
	!border: 1px solid red;
		
}




.error-message
{

  	margin: 10px 0px 10px 0px; 
  	padding: 10px 0px 10px 0px;
	
  	background-color: #ffbbbb;
  	text-align: center;
  
  	box-sizing: border-box;
  	border-radius: 2px;  
  
  	font-size: 15px;
  	color: #000000;
	
	border: 1px solid red;
 
}


.error-input
{
   
  	padding: 4px 4px 0px 4px;
  
  	box-sizing: border-box;
  	border-radius: 2px;  
  
  	font-size: 15px;
  	color: #ce0010;
	
	!border: 1px solid red;
 
}




.error-0
{ 
	
	border: 1px solid #767676;

}



.error-1
{ 
	
	border: 1px solid #ce0010;

}



form
{
	margin: 0px;
	padding: 0px;
}



input[type=text],[type=password]
{
	
	width:100%;
	height: 42px;
	
	padding: 20px;
	font-size: 17px;
	
	box-sizing: border-box;
	
}



input[type=text]:hover,[type=password]:hover 
{ 
	
	border: 1px solid #ce0010;		
	background-color: #fbfbfb;
	
}


input[type=text]:focus,[type=password]:focus 
{ 
	
	box-sizing: border-box;
	box-shadow: 0 0 3px #ce0010;
	
	outline: 1px solid #ce0010;
	border: 1px solid #ce0010;
	
}




input[type=submit]
{
  
	width: 100%;
	height: 40px;
	
	-padding: 8px 4px 7px 4px;
	
	font-size: 18px;
	!color: #ffffff;
  
	!cursor: pointer;
	box-sizing: border-box;
  
	!border-radius: 2px;  
	!border: 1px solid red;

}





.vh-center
{

  	margin: auto;
	position: absolute;
  
  	left: 50%;
  	top: 25%;

	transform: translate(-50%, -25%);
  
	!border: 1px solid black;

}



.height-10px {height: 10px;}
.height-20px {height: 20px;}
.height-30px {height: 30px;}
.height-40px {height: 40px;}
.height-50px {height: 50px;}


.border	{border: 1px solid red;}



@media only screen and (max-width: 520px) 
{


.form-section
{
	padding: 40px 20px 40px 20px;
}



}