html,body{height:100%;margin:0;padding:0;}
body{background-color:#1984f6;background-position:center;background-size:cover;background-repeat:no-repeat;min-height:100vh;font-family:'Roboto', sans-serif;}

#page-login{
	display: block;
	z-index: 100;
}

.login-wrapper
	{
	    position: absolute;
	    left: 0;
	    top: 0;
	    height: 100%;
	    width: 100%;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    background-color:#1984f6;
	}

	.login-logo
	{
	    height: auto;
	    width:80px;
	    height:80px;
	    max-width:100%;
	    max-height: 100%;
	    background: url(../../../images/logo_onl.png) no-repeat;
	    background-size: contain;

	    margin-left:calc(50% - 40px);
	    margin-bottom: 60px;

	}


	.login-form-title
	{
	    color:#fff;
	    background-color: #1984f6;
	    text-transform: uppercase;
	    margin-left: 0px;
	    font: 14px/16px circular-medium,sans-serif!important;
	    text-align: left;
	    margin-bottom: 30px;
	}


	.login-card-header
	{
	    margin-bottom: 20px;
	}

	
	.login-wrapper{
	    height:auto;
	    background-color:#1984f6;
	    margin:0px;
		width:100%;
		height: 100%;
	}


	.box.back{transform:scale(.95);-webkit-transform:scale(.95);-ms-transform:scale(.95);top:-20px;opacity:.8;z-index:-1;}
	
	.login-wrapper .example-form{min-width:100%;max-width:300px;width:100%;}
	.login-wrapper .example-full-width,.login-wrapper .btn-block{width:100%;}
	.login-wrapper mat-card-header{text-align:center;width:100%;display:block;font-weight:700;}
	.login-wrapper mat-card-header mat-card-title{font-size:30px;margin:0;}
	

	.login-user{
		width:100%;
		height: auto;
		margin-bottom: 10px;
		color: rgba(255,255,255,0.87)!important;
	}

	.login-user:focus{
		border-bottom: 1px solid #ced4da!important;
		color:rgba(255,255,255,0.87)!important;
	}

	.login-pwd{
		width:100%;
		height: auto;
		margin-bottom: 20px;
		color: rgba(255,255,255,0.87)!important;
	}

	.login-pwd:focus{
		border-bottom: 1px solid #ced4da!important;
		color:rgba(255,255,255,0.87)!important;
	}


	.login-button	{
		width: 100%;
		color: white!important;
		margin: auto;
	
	}

	.login-icon	{
		color:white;
	}


	.login-txt__label{
		color: white!important;
	}



@media screen and (max-width: 640px)
{
    .box
    {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
         box-shadow: 0 0px 0px 0px rgba(0,0,0,.14), 0 0px 0px 0px rgba(0,0,0,.12), 0 0px 0px rgba(0,0,0,.2);
		min-width: 300px;
		height: 85%;
		margin-top: 90px;
    }
    
}

@media screen and (min-width: 640px)
{
   
    	.box
	{
	    box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 3px rgba(0,0,0,.12), 0 4px 5px rgba(0,0,0,.2);
	    background-color: rgba(25,132,246,.9);
	    width:100%;
	    padding:20px;
		max-width: 450px;
	}


	

}