@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed');

shtml, body {
	font-family: 'Fira Sans Extra Condensed', sans-serif;
	font-size: 2vh;
	background-color: var(--color);
/*	 background: url(../../images/main.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
	padding: 0;
	margin: 0;
}
*{margin:0;padding:0;}

#login{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	text-align:center; 
	border:0px solid  var(--color);
}
#refresh{
	font-size:30px;color:#fff;cursor:pointer;
}
#login .login-logo{width:5vh;}
#login .login-btn{
	float:right;
	padding:.7vh;
	line-height: 5vh;
	border:.7vh solid  var(--color);
	font-size:5.5vh;
	cursor:pointer;
	text-decoration:none;
	margin-top:-4vh;
	margin-left:-6vh;
	background: var(--color-sat);
	color: var(--color-light);
	position:absolute;
	z-index:1;
	-moz-border-radius:6vh;
	-khtml-border-radius:6vh;
	-webkit-border-radius:6vh;
	border-radius:6vh;
	opacity:1;
}
#login .login-btn:hover {
		background: var(--color-dark);
	
}

#login .login-input {
		font-family: 'Fira Sans Extra Condensed', sans-serif;
	font-size: 3vh;
	padding: 4px 14px 6px 14px;
	-moz-box-shadow: 2px 2px 5px #789;
	-webkit-box-shadow: 2px 2px 5px #789;
	box-shadow: 2px 2px 5px #789;
	border-radius: 0px;		
	border:1px solid  var(--color-sat);
	margin:2px;
}

.login-input-d {
  --w: .5ch;   /* control the width for each letter */
  --g: .15em; /* the gap between letters */
  --b: 1px;   /* the border thickness */
 
  --c: #999;
  --_n: attr(maxlength type(<integer>)); 
  font-size: 70px;
  line-height: 1.5; /* control the height */
  letter-spacing: var(--w);
  font-family: monospace;
  width: calc(var(--_n)*(1ch + var(--w)));
  padding-left: calc((var(--w) - var(--g))/2);
  clip-path: inset(0 calc(var(--w)/2) 0 0);
	border:none;
  background: repeating-linear-gradient(90deg,
      var(--c) 0 var(--b),#0000 0 calc(1ch + var(--w) - var(--g) - var(--b)),
      var(--c) 0 calc(1ch + var(--w) - var(--g)),#0000 0 calc(1ch + var(--w))),
    conic-gradient(at calc(100% - var(--g) - 1px) var(--b),#0000 75%,var(--c) 0) 
     0 0/calc(1ch + var(--w)) calc(100% - var(--b));

}
.login-input-d:focus-visible {
  --c:#ccc;
}

@supports not (d:attr(d type(*))) {
.login-input-d { --_n: 4;}
}




#login .login-text{color: var(--color-light);}

#ap-fly {
	display:block;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width:50vh;
	border:1px solid  var(--color-sat);
	background-color:var(--color-light);
    z-index:2;
	box-shadow: 1px 1px 400px 400px var(--color-dark);
}
#ap-fly div{padding:10px;}
.pagetitle {
	height: 35px;
	background-color: var(--color-dark);
	color:var(--light);
	font-size:2vh;
	font-weight: bold;

}
.pt_l{width:50vh;text-align: left;padding: 10px 0 0 10px;}
.pt_m{width:100vh;text-align:center;}
.pt_r{width:50vh;text-align:center;padding: 10px 10px 0 0;}
.pt_l i{font-size:3vw;}

.app-lang-txt{background:none;color:var(--color-light);border:none;cursor:pointer;margin: 3px;}
.app-lang-txt:hover{color:var(--color-light);}
.app-lang-txt-active{font-weight: bold;}

.app-lang-img{width:30px;opacity:0.6;}
.app-lang-img:hover{opacity:1;}
.app-lang-img-active{opacity:1;}

.app-lang-sel{
  padding:5px;
	font-size:  15px;	
	background:var(--color-light);
	color:var(--color-steel);
	border:none;
}
.login-text{
	color: var(--color-light);
	}
.lgText{
	color: var(--color-lignt)!important;
	background: var(--color)!important;
	border: none;
	cursor:pointer;
	margin:0 10px 0 10px;
}


@media (max-width: 600px) {
	.ams-main-l{display:none;}
}