@charset "utf-8";
/* CSS Document */
/* ///////////////////////

Version: 2.4.3
Lastmod: 2023-06-15

/////////////////////// */


section#offlineHint > span.statusBar > div#mastertime { margin-top: 3px; }
section#offlineHint > span.statusBar > a { 
    pointer-events: none !important;
    background-color: cadetblue;
    padding: 1px 48px 1px 24px;
    background-position: 80px 3px;
    margin-right: -14px; 
}

html, body { display:block; width:100%;  box-sizing: border-box; position: relative; margin:0 0; padding:0px; }
html { height:100vh; }



	html { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; }
	body { background-image: url("png/login-logo.png"); background-position: center 36px; background-repeat: no-repeat; background-size: 200px; display: flex; justify-content: space-around; min-height:80vh; align-items: center; }
main { display:block; flex:1;}



	form.login { display:block; width:300px; box-sizing: border-box; position: relative; padding:107px 16px 30px 16px; margin:168px auto 24px auto; float:none; background: rgba(255,255,255,1.00); text-align: center; -webkit-box-shadow: 1px 1px 18px 0 rgba(0,0,0,0.2); box-shadow: 1px 1px 18px 0 rgba(0,0,0,0.2);
	background-image: url("svg/lock-icon.svg"); background-position: center 18px; background-size: 90px; background-repeat: no-repeat; border-radius: 5px; 	}	

	form.login > input, form.login > button { display:inline-block; position: relative; width:100%; text-align: center; margin:4px 0px; padding:10px; box-sizing: border-box; background: rgba(245,245,245,1.00); color:rgba(70,70,70,1.00); outline: none; border:0px; font-size:1.85rem; font-weight: 100 !important; font-family: inherit !important; }

	form.login > input:not([type="submit"]) 		{ border-bottom: 0px; background:transparent; font-size:2.5rem; letter-spacing:3px; }
	form.login > input:not([type="submit"]):focus 	{ border-bottom: 0px; background:transparent; font-size:2.5rem; letter-spacing:3px; }
	form.login > input:not([type="submit"]):hover 	{ border-bottom: 0px; background:transparent; font-size:2.5rem; letter-spacing:3px; }

	form.login > input:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }

	form.login > button[type="submit"],
	form.login > input[type="submit"] 				{ 
		
		background-color: rgba(13,69,135,1.00); 
		color:#fff; 
		opacity:0.7;
		margin-top: 0px; 
		border-radius: 12px; 
		text-transform: uppercase; 
		background-image:url("svg/unlock-icon.svg"); 
		background-size: 24px; 
		background-repeat: no-repeat; 
		background-position: -32px center; 
		font-weight:400 !important;
		padding:18px 10px; 
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none; 
		
		
		
			-webkit-transition: all 300ms ease-in-out;
			-moz-transition: all 300ms ease-in-out;
			-ms-transition: all 300ms ease-in-out;
			-o-transition: all 300ms ease-in-out;
			transition: all 300ms ease-in-out;		
		
		

	}
	
	form.login > button[type="submit"]:hover,
	form.login > input[type="submit"]:hover { background-color: rgba(32,136,70,0.90); opacity:1; cursor:pointer; background-position: 20px center;  color:rgba(255,255,255,0.70) }
	
	form.login > button[type="submit"]:focus,
	form.login > input[type="submit"]:focus { background-color: rgba(32,136,70,1.00); opacity:1; cursor:pointer; background-position: 230px center; color:rgba(255,255,255,0.70) }

	form.login > button[type="submit"]:active,
	form.login > input[type="submit"]:active { background-color: rgba(48,48,48,1.00);  opacity:0.8; background-position: 340px center; color:rgba(255,255,255,0.40) }



div.infotext { display:block; position: absolute; width:40%; height:auto; margin:25vh 30% 20px 30%; box-sizing: border-box; padding:40px 58px 48px 58px; font-weight:200; background: rgba(254,254,254,1.00); text-align: left; font-size:1.33rem; color: #333; -webkit-box-shadow: 4px 4px 32px 0 rgba(0,0,0,0.5); box-shadow: 4px 4px 32px 0 rgba(0,0,0,0.5); z-index:3; border-radius: 8px; }
div.popgb { display:block; z-index: 2; top:0px; left:0px; width:100%; height:100vh; position: fixed; background:rgba(0,0,0,0.80) }
div.close { display:block; position: absolute; top:10px; right:10px; text-align: center; box-sizing: border-box; padding:4px 13px 6px 12px; border-radius: 3px; color:#fff; background: rgba(73,73,73,1.00); cursor: pointer; font-weight: 100; opacity:0.8; }
div.close:hover { opacity:1; }




	a.INIT { display:block; position: fixed; top:40px; left:40px; font-weight:600; box-sizing: border-box; margin:12px auto 48px auto; padding:10px 20px 10px 48px; text-decoration: none; background-color:rgba(85,224,157,1.00); border: 1px solid rgba(85,224,157,1.00); width:auto; text-align: center; border-radius:8px; color:#fff; font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M8 23h8v-2H8v2zm8-21.99L8 1c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM16 15H8V5h8v10z'/%3E%3C/svg%3E");
		
		background-position: 10px center; background-size: 32px; background-repeat: no-repeat;

	}


	a.INIT:hover { border-color: rgba(85,224,157,1.00); color: rgba(85,224,157,1.00); background-color:azure; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(85,224,157,1.00)' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M8 23h8v-2H8v2zm8-21.99L8 1c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM16 15H8V5h8v10z'/%3E%3C/svg%3E"); }




div.versionInfo { display:inline-block; float: none; position: fixed; font-size:18px; box-sizing: border-box; color:rgba(0,52,81,1.00); padding:4px 32px; border-radius: 18px; line-height: 1.1; border:1px solid rgba(188,188,188,1.00); margin:20px auto; width:160px; text-align: center; bottom:12px; left:50%; margin-left: -80px; }





	div.pinpad { 
		
		display: inline-block; 
		position: relative; 
		float:left;
		clear:both;
		margin:2px auto 12px auto; 
		box-sizing: border-box; 
		opacity:0.8; 
		border-radius:11px;
		
		width:100%; 
		height:auto; 
		padding:3px 0px 7px 0px; 
		
	}

	div.pinpad div.keyinp { 
		
				display:inline-block; 
				height: auto; 
				position: 				relative; 
				text-align: 			center; 
				font-size: 				2rem; 
				margin: 				1% 1%; 
				width: 					31%; 
				padding: 				9px 8px 10px 8px; 
				box-sizing: 			border-box; 
				border-radius: 			5px; 
				-webkit-box-shadow: 	1px 1px 4px 0 rgba(0,0,0,0.7); 
				box-shadow: 			1px 1px 4px 0 rgba(0,0,0,0.7); 
		
							background: rgb(79,133,187); 
							background: -moz-linear-gradient(top,  rgba(79,133,187,1) 0%, rgba(79,133,187,1) 100%);
							background: -webkit-linear-gradient(top,  rgba(79,133,187,1) 0%,rgba(79,133,187,1) 100%); 
							background: linear-gradient(to bottom,  rgba(79,133,187,1) 0%,rgba(79,133,187,1) 100%);

				color: 					#fff;
				line-height: 			2.5rem; 
		
		

			-webkit-transition: all 300ms ease-in-out;
			-moz-transition: all 300ms ease-in-out;
			-ms-transition: all 300ms ease-in-out;
			-o-transition: all 300ms ease-in-out;
			transition: all 300ms ease-in-out;		
		
		  	-webkit-touch-callout: none; 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			user-select: none; 

	}

	div.pinpad div.keyinp:hover 	{ 

				cursor: 		pointer;
				background: 	black; 

	}