.badge{
	/* background-color: rgba(0,0,200,0.3); */
    z-index: 1;
	
    display: inline-block;
    position: absolute ;
    white-space: nowrap;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
}

.badge > .links{
	text-align: left;
	display: inline-block;
	padding-left: 0.5em;
}

.badge > .links >  .icon{
	height: 3em;
	width: 3em;
	margin: 0.5em 0 0 0;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	display: inline-block;
	color: white;

	cursor: pointer;
}



.badge > .links >  .home.icon{
	background-image:url(../img/main/icon-home.png);
}

.badge > .links >  .home.icon:hover{
	background-image:url(../img/main/icon-home-hov.png);
}

.badge > .links > .fs.icon{
	background-image:url(../img/main/icon-fs.png);
}
.badge > .links > .fs.icon:hover{
	background-image:url(../img/main/icon-fs-hov.png);
}


.badge > .links > .email.icon{
	background-image:url(../img/main/email.png);
}
.badge > .links > .email.icon:hover{
	background-image:url(../img/main/email-hov.png);
}

.badge > .links > .support.icon{
	background-image:url(../img/main/support.png);
}
.badge > .links > .support.icon:hover{
	background-image:url(../img/main/support-hov.png);
}


.badge > .links >  .fuel.icon{
	width:12em;
	background-image:url(../img/main/fuel-empty.png);
}

/* WARN ONLY IN SPACE */
.space .badge > .links >  .fuel.icon.warning{
	background-image:url(../img/main/fuel-warning.png);
	
}

.space .badge > .links >  .fuel.icon.warning .full{
	animation: warning 1s infinite;
}

@keyframes warning {
	0%{ 
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.1);
	}
	100%{
		opacity: 0;
		transform: scale(1);
	}
}

.badge > .links >  .fuel.icon > .full{
	height: 100%;
	overflow: hidden;
}

.badge > .links >  .fuel.icon > .full > img{
	height: 100%;
}




.badge > .links >  .sound.icon{
	background-image:url(../img/main/sound-on.png);
}
.badge > .links >  .sound.icon:hover{
	background-image:url(../img/main/sound-on-hov.png);
}
.badge > .links >  .sound[data-value="off"].icon{
	background-image:url(../img/main/sound-off.png);
}
.badge > .links >  .sound.icon[data-value="off"]:hover{
	background-image:url(../img/main/sound-off-hov.png);
}




.badge > .links >  .music.icon{
	background-image:url(../img/main/music-on.png);
}
.badge > .links >  .music.icon:hover{
	background-image:url(../img/main/music-on-hov.png);
}
.badge > .links >  .music.icon[data-value="off"]{
	background-image:url(../img/main/music-off.png);
}
.badge > .links >  .music.icon[data-value="off"]:hover{
	background-image:url(../img/main/music-off-hov.png);
}




.badge .links .icon.username{
	width: 12em;
	background-image:url(../img/main/badge.png);
	background-position: left;
	background-size: auto 100%;
	cursor: pointer;
	position: relative;
}

.badge .links .icon.username span{
	position: absolute;
	left: 3em;
	right: 3em;
	top: 0;
	bottom: 0.2em;
	line-height: 3em;
	text-align: center;
	font-weight: bold;
	color: black;
	white-space: nowrap;
	overflow: hidden;
}

.badge > .links >  .icon.username:hover{
	background-image:url(../img/main/badge-hov.png);
}


body.video .badge > .links .icon.username,
body.galaxicon .badge > .links .icon.username{
	display: none;
}

.badge > .links .icon.fuel{
	display: none;
}

body.game .badge > .links .icon.fuel,
body.space .badge  > .links .icon.fuel{
	display: inline-block;
}  







.forms{
	width: 100%;
	height: 100%;
	z-index: 3;
	background-color: rgba(0,48,50,0.3);
	top: 0;
		position: absolute;
	z-index: 3;
	text-align: center;
	font-size: 1em;
	display: none;
}

@media screen and (max-width: 801px) {
	.forms{
		font-size: 0.8em;
	}
}


.forms .form{
	width: 100%;
	max-width: 450px;
	background: white;
	padding: 1em;
	border-radius: 1em;
	display: none;
	position: relative;

	box-sizing: border-box;
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;

	max-height: 70%;
    overflow-y: auto;
    overflow-x: hidden;

	-webkit-box-shadow: 0px 0px 60px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 60px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 60px 5px rgba(0,0,0,0.2);

}

.forms .form .round.x{
	position: absolute;
	right: 0;
	top: 0;

	width: 2em !important;
    height: 2em !important;
    margin: 0.25em;

	background: transparent;
}

.forms .form .errors{
	clear: both;
	color: orange;
	text-align: right;
}


.forms > .form > *{
	padding: 0.5em;
	margin: 0.1em;
	/* color: white; */
} 

.forms .form label{
	float: left;
	clear: both;
	
}
.forms .form input{
	float: right;
	background-color: paleturquoise;
}

.forms .form button{
	float: left;
	clear: both;
	width: 100%;
	background: lightgreen;
	margin: 1em 0;
}



.forms .form button.register{
	background: lightblue;
}

.forms .form button.confirm{
	background: lightseagreen;
}

.forms .form button.logout{
	background: lightcoral;
}



@media screen and (max-width: 801px){
	.badge > .links >  .icon{
		height: 2em;
		width: 2em;
	}

	.badge > .links >  .icon.username,
	.badge > .links >  .icon.fuel{
		height: 2em;
		width: 8em;
	}

	.badge .links .icon.username span {
	    left: 2em;
	    right: 2em;
	    font-size: 0.66em;
	    top: 0;
	    bottom: 0.2em;
	    line-height: 3em;
	    text-align: center;
	    font-weight: bold;
	    color: black;
	}

	.forms{
		height: 100% !important;
	}

}