form.cwa_login_loginform,
form.cwa_login_logoutform
{
	text-align: center;
}

form.cwa_login_loginform > div,
form.cwa_login_logoutform > div
{
	max-width: 20cm;
	max-width: min(20cm, 100%);
	min-width: min(10cm, 100%);
}

form.cwa_login_loginform
{
	box-shadow: 0 0 9px #000000ff;
}

form.cwa_login_loginform > div
{
	padding: 5mm;
	margin: 1cm auto;
}

form.cwa_login_logoutform > div
{
	margin: 2.5mm auto;
}

form.cwa_login_loginform > div > p
{
	width: 20cm; /* if setting width or max-width value - esp. in combination with % and min(), works on the element, but parent form will enlarge !!! */
}

div.cwa_login_logoutelement
{
	position: relative;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(192, 192, 192, 0.5);
}

div.cwa_login_logouticon
{
	width: 15mm;
	height: 15mm;
	background-size: 10mm;
	overflow: clip;
}

div.cwa_login_logouticon > span:first-child
{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-Index: 1;
}

div.cwa_login_logouticon.cwa_login_floating
{
	position: fixed;
	top: 5mm;
	right: 5mm;
	z-index: 2;
}

div.cwa_login_logouticon.cwa_login_floating > span:first-child
{
	z-index: 3;
}

div.cwa_login_logouticon.isexpired,
div.cwa_login_logouticon.almostexpired,
div.cwa_login_logouticon.beforeexpired,
div.cwa_login_logouticon.plentyoftime
{
	background-size: 66.66%;
	background-position: center 25%;
}

div.cwa_login_logoutelement.isexpired
{
	background-color: rgba(192, 0, 0, 0.75);
}

div.cwa_login_logoutelement.almostexpired
{
	background-color: rgba(160, 64, 0, 0.75);
}

div.cwa_login_logoutelement.beforeexpired
{
	background-color: rgba(128, 128, 0, 0.75);
}

div.cwa_login_logoutelement > span.timeoutbar
{
	display: block;
	position: absolute;
	left: 0px;
	height: 17.5%;
	background-color: rgba(255, 255, 255, 0.5);
}

div.cwa_login_logouticon > span.timeoutbar
{
	bottom: -1px;
/*	top: -1px; */
/*	width: 50%; */
}