html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color:var(--bs-light);
}


privacy {
	margin: auto;
	margin-top:unset;
	text-align: right;
}


privacy a {
	font-size:0.75rem;
	text-transform: uppercase;
	text-decoration:unset;
	font-family:"Barlow";
	letter-spacing:0.0225px;
	font-weight:600;
}


.form-signin .is-invalid[type="checkbox"] {
	background-color:var(--bs-red);
}


.form-signin {
	margin: auto;
	margin-bottom:unset;
	background-color:var(--bs-white);
}

.formarea {
	background-color:var(--bs-blue-light);
	color:var(--bs-white);
}


.formarea .is-invalid {
	color:var(--bs-red) !important;
	}


.idpic {
	background-image: url("/nrw/javax.faces.resource/images/backgrounds/elba-signinteaser.jpg.xhtml");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}



@media (max-width: 767px) {
	
	.vpi-logo {
		margin-left:auto;
		background-repeat: no-repeat;
	}
	
	.form-signin {
		width: 100vw;
	}
	
	privacy {
		width: 100vw;
		padding:10px;
		background-color:#ffffff;
		text-align:center;
	}
	
	privacy spam {
		font-size:0.875rem;
		text-align:center;
		display:block;
		width:100%;
		margin-bottom:5px;
	}
	
	.logoarea {
		width: 100%;
		height:190px;
		padding: 40px;
		display: flex;
	}
	
	.idpic {
		display:none;
	}
	
	.formarea {
		width: 100vw;
		min-height:calc(100vh - 234px);
		padding: 40px;
		display: flex;
		flex-direction: column;
	}
	
	.formarea h1 {
		font-size:1.5rem;
		letter-spacing: 0.32px;
		line-height:1.5rem;
		text-shadow: 0px 5px 50px #00000029;
	}
	

}

@media (min-width: 768px) {
	
	.form-signin {
		width: 85vw;
		height:max-content;
		min-height:auto;
		display:flex;
	}
	
	
	privacy {
		width: 85vw;
		padding:10px 0 10px 0px;
	}
	
	privacy spam {
		font-size:0.875rem;
		float:left;
	}
	
	.logoarea {
		width: 190px;
		padding: 40px;
		display:flex;
		flex-direction:column;	
	}
	
	.idpic{
		display:none;
	}
	
	.formarea {
		width: calc(85vw - 190px);
		min-height:calc(100vh - 80px);
		height: max-content;
		padding: 95px 40px 40px 40px;
		display:flex;
		flex-direction:column;
	}
	
	.formarea h1 {
		font-size:2.5rem;
		letter-spacing: 0.32px;
		line-height:2.5rem;
		text-shadow: 0px 5px 50px #00000029;
	}

}

@media (min-width: 992px) {
	privacy {
		width: calc(100vw - 80px);
		height:25px;
	}
	
	.form-signin {
		width: calc(100vw - 80px);
		height:max-content;
		min-height:auto;
		display:flex;
	}
	
	.logoarea {
		width: 190px;
		padding: 40px;
		display:flex;
		flex-direction:column;
	}
	
	.idpic {
		display:flex;
		width: calc(50% - 85px);
	}
	
	.formarea {
		width: calc(50% - 85px);
		min-height:calc(100vh - 80px);
		height: max-content;
		padding: 95px 40px 40px 40px;
		display:flex;
		flex-direction:column;
	}
	
	.formarea h1 {
		font-size:2.5rem;
		letter-spacing: 0.32px;
		line-height:2.5rem;
		text-shadow: 0px 5px 50px #00000029;
	}
}

@media (min-width: 1200px) {
	privacy {
		width: calc(100vw - 80px);
		height:25px;
	}
	
	.form-signin {
		width: calc(100vw - 80px);
		height:max-content;
		min-height:auto;
		display:flex;
	}
	
	.logoarea {
		width: 190px;
		padding: 40px;
		display:flex;
		flex-direction:column;
	}
	
	.idpic {
		display:flex;
		width: calc(50% - 85px);
	}
	
	.formarea {
		width: calc(50% - 85px);
		min-height:calc(100vh - 80px);
		height: max-content;
		padding: 95px 50px 40px 50px;
		display:flex;
		flex-direction:column;
	}
	
	.formarea h1 {
		font-size:2.5rem;
		letter-spacing: 0.32px;
		line-height:2.5rem;
		text-shadow: 0px 5px 50px #00000029;
	}
}

@media (min-width: 1440px) {
	
	privacy {
		width: 1440px;
		height:50px;
	}
	
	.form-signin {
		width: 1440px;
		height: max-content;
		min-height: auto;
		display:flex;
	}
	
	.logoarea {
		width: 190px;
		padding: 40px;
		display:flex;
		flex-direction:column;
	}
	
	.idpic {
		display:flex;
		width: 628px;
	}
	
	.formarea {
		width: 622px;
		min-height: 860px;
		height: max-content;
		padding: 95px 73px 40px 79px;
		display:flex;
		flex-direction:column;
	}
	
		
	.formarea h1 {
		font-size:4rem;
		letter-spacing: 0.32px;
		line-height:4rem;
		text-shadow: 0px 5px 50px #00000029;
	}

}