form button { cursor:pointer; }
input[type=checkbox] { cursor:pointer; }
label#pwFctrlLabel:hover { cursor:pointer; }
label#pwFctrlLabel::before { content:"👁"; color:#000099; left:31px; position:relative; background: aliceblue; border:1px solid #000099; border-radius:5px; padding:3px; padding-right:5px; width:30px; z-index:299; }
input[type=text]#pwField { color:#FFFFFF; padding-left:33px; }
input[type=checkbox]#pwFctrl { display:none; width:0px; }
input[type=checkbox]#pwFctrl:checked ~ input[type=text]#pwField { color:#000000; }
input[type=checkbox]#pwFctrl:checked ~ label#pwFctrlLabel::before { content:"🗨️"; }

form::before {
	animation-name:fadeIn;
	animation-duration:0.5s;
	animation-delay:1500s;
	animation-fill-mode:forwards;
	background-color:yellow;
	border:2px solid #990000;
	border-radius:5px;
	box-shadow: 5px 5px 5px grey;
	content:"⚠ WARNING: Form expiring!";
	color:#000000;
	display:block;
	font-family:"courier new",monospace;
	font-size:1em;
	font-weight:bold;
	height:0em;
	left:50%;
	margin-left:auto;
	margin-right:auto;
	opacity:0;
	overflow:hidden;
	position:fixed;
	text-align:center;
	top:25%;
	width:0px;
	transform: translateX(-50%);
	transition-property: opacity, height, width;
	transition-duration: 0.5s, 0.5s, 0.5s;
	z-index:300;
}

form::after {
	animation-name:fadeIn;
	animation-duration:0.5s;
	animation-delay:1799s;
	animation-fill-mode:forwards;
	background-color:#FF0000;
	border:2px solid #990000;
	border-radius:5px;
	box-shadow: 5px 5px 5px grey;
	content:"⚠ ERROR: Form expired!";
	color:#FFFFFF;
	display:block;
	font-family:"courier new",monospace;
	font-size:1em;
	font-weight:bold;
	height:0em;
	left:50%;
	margin-left:auto;
	margin-right:auto;
	opacity:0;
	overflow:hidden;
	position:fixed;
	text-align:center;
	top:25%;
	width:0px;
	transform: translateX(-50%);
	transition-property: opacity, height, width;
	transition-duration: 0.5s, 0.5s, 0.5s;
	z-index:300;
}


@keyframes fadeIn {
	from { opacity:0; height:0em; width:0px; }
	to { opacity:1; height:1.8em; width:300px; }
}