body {    
	background-position: top center;	
	background-size: cover;
	height: 100vh;
}

#Container 			{ z-index: 3; position: relative;} 

#ToyShaderWrap		{ display: none;}

.lgn-Logo img		{ z-index: 5; position: relative;}
.lgn-zone-wrapper 	{ background: linear-gradient( 180deg , rgb(255 255 255 / 54%) 0%, rgb(255 255 255 / 610%) 0%, rgb(255 255 255 / 45%) 38%, rgb(255 255 255 / 0%) 76%); 
					  backdrop-filter: blur(2px); height: 100%; }

.white-space-normal {
	white-space: normal
}

.lgn-BoxWrapper { margin-top: 50px; }

.lgn-Logo-Wrapper img 		 { width: 200px; margin-top: 50px; position: relative; }
.lgn-White-Circle    		 { width: 400px; height: 200px; position: absolute; left: -98px; background: radial-gradient(farthest-side, rgba(255,255,255,1) -16%, #ffffff00 83%); top: -27px; z-index: 1; }
.lgn-White-Circle-small      { width: 100%; height: 200%; position: absolute; left: 0px; background: radial-gradient(farthest-side, rgb(255 255 255 / 65%) 0%, #ffffff00 70%); top: -26px; z-index: -1; }

.lgn-subtitle { margin-top: -10px; text-transform: uppercase; line-height: 30px; }

.lgn-box                       { background-color: white; padding:10px; border-radius: 3px; box-shadow: 0px 5px 10px #00000025;}
.lgn-input-wrapper             { background-color: #E9EEF4; border:1px solid #0000001e;  border-radius: 5px; box-shadow: 0px 0px 10px inset #00000027;display: flex;  
								 flex-direction: row; align-items: center; font-family: 'Dosis'; }
.lgn-input-wrapper input       { background-color:transparent; border:1px; flex-grow: 1; }
.lgn-input-wrapper select {    background-color: transparent !important; border: 0px solid #000 !important; flex-grow: 1;    margin-right: 10px;}
.lgn-input-wrapper input:focus { outline: transparent; }
.lgn-input-wrapper select:focus { outline: transparent; }
.lgn-input-wrapper i           { padding: 8px 10px 8px 10px;  font-size: 1.2em; color: #456489 }

.videoWrap {object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: url(grid.png); z-index: 2; opacity: 0.3;  }

.ToyShaderWrap {object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1;  }
.videoFit { object-fit: cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1; }

#txtDeveloper { color:white}
#PortalName { color: rgb(103 111 137); text-shadow: 0px 2px 1px rgb(255 255 255); font-size: 1.65em;  }
#ServerName { color: #575757; text-shadow: 0px 1px 8px white; font-size: 1.1em;  }

.Log_Version { background-color: #ffffff; padding: 0px 10px 0px 10px; font-size: 0.8em; border-radius: 50px; color:#676f89; border:1px solid #00000036; }

.lgn-text-recover { font-size: 0.80em; line-height: 15px; font-weight:normal }

.flip                     	{ -webkit-perspective: 800; perspective: 800; position: relative; }
.flip .cardflip.flipped   	{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.flip .cardflip           	{ -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; transform-style: preserve-3d; transition: 0.5s; }
.flip .cardflip .face     	{ -webkit-backface-visibility: hidden ; backface-visibility: hidden ; z-index: 2; }
.flip .cardflip .front    	{ position: absolute; z-index: 0; }
.flip .cardflip .front img	{ width: 270px; height: 100%; }
.flip .cardflip .img      	{ position: relative; width: 270px; height: 178px; z-index: 1; border: 2px solid #000; }
.flip .cardflip .back     	{ -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.inner                    	{ margin:0px !important; }

.list-pnlInfoDEV			{ list-style: none;    display: flex;    flex-wrap: wrap;    align-items: center;    justify-content: unset; }
.list-pnlInfoDEV li			{ background-color: #ffffffc9;border-radius: 2px;margin: 2px;padding: 7px;color: #40a640;font-family: monospace;text-shadow: 0px 1px 1px #ffffff;font-size: 1.1em;border: 1px solid #ffffff61;}
.list-pnlInfoDEV li strong	{ color: #6d6c6c; }


/*login_modal */
.modal-login 			{ display: none; position: absolute;width: 100%;height: 100%;  }
.modal-wrapper 			{ position: absolute;width: 100%;height: 100%;background-color: #6784901a;z-index: 10;display: flex;align-items: center;justify-content: center;backdrop-filter: blur(2px);}
.modal-contents 		{ width: 50%;height: 50vh;border-radius: 10px;box-shadow: 0px 0px 13px #00000078;position: relative;}
.modal-contents iframe  { border-radius: 10px; } 
.LoginModal-Close 		{ position: absolute;right: -21px;background-color: #565d69;padding: 9px; width: 42px;
						  border-radius: 35px;text-align: center;font-size: 23px;color: white; border:1px solid white; box-shadow: 0px 0px 8px white;top: -17px; cursor: pointer; transition: 0.4s all;}
.LoginModal-Close:hover 		{ background-color: white; color: black; border:1px solid black}
						  
.LoginModal-Close i		{ margin: 0px;  }

@media screen and (min-width: 767px) {


	#LogVersion_Top { display: none;}
	#LogVersion_Bottom { display: block;}

}

@media screen and (max-width: 767px) {

	#PortalInfo { border-radius: 5px; background-color: #ffffffa8; border-radius: 5px; margin: 10px 6px;}

	.lgn-zone-wrapper  	  { display: flex; align-items: center; flex-direction: column; justify-content: center;  }
	.lgn-Logo-Wrapper img { width: 120px; margin-top: 20px; position: relative; }
	.lgn-BoxWrapper { margin-top:unset; width: 100%; }
	.lgn-box { width: 100%;}

	.lgn-zone-wrapper {
		background: linear-gradient( 180deg, rgb(255 255 255) 0%, rgb(136 152 180 / 20%) 35%, rgb(241 241 241 / 0%) 38%, rgb(255 255 255 / 58%) 76%);
		backdrop-filter: blur(0px);
		position: absolute;
		top: 0px;
	}

	#txtDeveloper { color: black}
	#LoginClient { display: none;}
	#DeveloperSignature {display:none !important;}

	#PortalName { color: rgb(103 111 137); text-shadow: 0px 2px 1px rgb(255 255 255); }
	#ServerName { color: #575757; text-shadow: 0px 1px 8px white; }


}