.icon    {
	/* background-image: url('content/textures/matcap_blue.png'); */
	background-position: center;
	background-size: cover;
	background-color: #2197FF;
	width: 10vmin;
	height:10vmin;
	border-radius: 50%;
	transition: all 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	border: 1vmin solid #0a73d0;
	opacity: 1;
	}    

.icon.small {
	width: 6.6vmin;
	height:6.6vmin;
	border-width: 0.32vmin;
	}
.icon.xl {
	width: 16vmin;
	height:16vmin;
	border-width: 1.25vmin;
	}

.icon.xxl {
	width: 44vmin;
	height:44vmin;
	border-width: 2.5vmin;
	opacity: 0.666;
	}
	

.icon.hint {
	opacity: 0.4;
	}
		
	



.icon.active {
	border: 1vmin solid gold;
	width: 16vmin;
	height:16vmin;
	background-color: hsl(208, 91%, 43%); 
	}

.icon.inactive {
	width:  7vmin;
	height: 7vmin;
	border: 0.8vmin solid #5393cb; 
	filter:grayscale( 60%);
	background-color: #094274; 
	opacity: 0.3;
	}

.icon:hover { transition: border-color 1s; border-color:rgb(133, 225, 255) !important; }
.embed       {width:10%;display:flex;flex-direction:row;justify-content: center;                 float: left;}
.floatleft   { float: left; margin: 0 1em 0 0 ; display:inline;}
.bottomright { position: fixed;             bottom: 2vh; right: 5vw; }
.topright    { position: fixed  !important; top:    2vh; right: 1vw; }
.topleft     { position: fixed  !important; top:    2vh; left:  1vw; }
.icon.top    {	z-index: 9;	}

.icon		 {background-color: #33A0EA;/* position: absolute; */}
.icon.save   {	background-image:  url('content/gui/cloud.png'         ); 	}
.icon.play   {	background-image:  url('content/gui/play.png'          ); 	}
.icon.pause  {	background-image:  url('content/gui/pause.png'         ); 	}
.icon.shop   {	background-image:  url('content/gui/ToothStarOwned.png'); 	}
.icon.exit   {	background-image:  url('content/gui/back.png'          ); 	}
.icon.delete {	background-image:  url('content/gui/trash.png'         ); 	}
.icon.cancel {	background-image:  url('content/gui/up.png'            ); 	}
.icon.girl   {	background-image:  url('content/gui/girl.png'          ); 	}
.icon.boy    {	background-image:  url('content/gui/boy.png'           ); 	}
.icon.child  {	background-image:  url('content/gui/child.png'         );   }
.icon.left   {	background-image:  url('content/gui/hand.png'          ); 	transform: scaleX(-1);	}
.icon.right  {	background-image:  url('content/gui/hand.png'          );   }
.icon.spawn  {	background-image:  url('content/gui/spawn.png'         );   }
.icon.guest  {	background-image:  url('content/gui/guest.png'         );   }
/* .icon.save   {	background-image:  url('content/gui/save.png'          );   } */
.icon.rewind {	background-image:  url('content/gui/rewind.png'        );   }
.icon.replay {	background-image:  url('content/gui/rewind.png'        );   }
.icon.home   {	background-image:  url('content/gui/home.png'          );   }
.icon.budd   {	background-image:  url('content/gui/budd.png'          );   }
.icon.buffy   {	background-image:  url('content/gui/buffy.png'         );   }

.upperleft {
	position: absolute;
	top: 5vmin;
	left: 5vmin;
}
.upperright {
	position: absolute;
	top: 5vmin;
	right: 5vmin;
}

.icon.save   {
	background-color: #33A0EA;	}

#gui>.icon.account   {
    position: absolute; 
    top:2vh;
	left:unset;
    right: 2vw; 
	padding: 5vmin 0vmin 0vmin 0vmin;
}

ul#burger {
	border: 1.2vmin solid gold;
	border-radius: 2.6vmin;
	padding: 1vmin;
	background-color: rgba(44, 38, 2, 0.475);	
	display:flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
ul#burger li {
	border: .1vmin solid gold;
	display: block;
	border-radius: .5vmin;
	min-width: 6vmin;
	min-height: 1.2vmin;
	margin: .5vmin;
	background-color: gold;
	list-style: none;
}




.allIcons {
	position : absolute;
	bottom: 3vh; 
	display: flex; 
	flex-direction: row;
	flex-wrap: wrap; 
	justify-content: space-evenly;
	align-items: flex-end;
	align-content: center;
	width: 100%;
	padding: 0;
	margin: 0;
}



/* 
.allIcons .icon {
    border-color: red;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-content: flex-start;
}


.allIcons .icon .jumps {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-content: flex-start;
	width: 120%;
	height: 100%
}

.allIcons .icon .jumps .shop {
	width: 5rem;
	height:5rem;
}

.allIcons .icon .jumps .play {
	width: 8rem;
	height:8rem;
} */



/*home screen icons */

.iconcluster {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	margin:0 -10vh;
}

.iconcluster .icon.player {
    display: flex;
    flex-direction: column-reverse;
	align-items: center;
	}		

.iconcluster .icon.shop {
	position: relative;
	left:   7rem;
	width:  4rem;
	height: 4rem;
	}		
.iconcluster .icon.play {
	position: relative;
	right:  7rem;
	width:  10rem;
	height: 10rem;
	}
.iconcluster .icon .name {
	position: relative;
    bottom: 1rem;
	font-size: 2rem ;
	text-align: center;
    }
						
			

.icon .icon {
    position: relative;
    top: 0;
    left: 0;
    width:  37%;
    height: 37%;
    border-radius: 50%;
    background-color: #33A0EA;
    border: .5vmin solid #0a73d0;
    transition: all 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
    }

.icon  .icon.shop {
    background-image:  url('content/gui/ToothStarOwned.png');
    width:  19%;
    height: 19%;

    }

    
.icon .name {
	position: relative;
	bottom: -90%;
	left: 0%;
	text-align: center;
	font-size: 1.73rem;
	overflow: visible;
	font-weight: 300;
	color: rgb(64, 210, 255);
	width: 200%;
	text-shadow: 5px 5px 12px #000000;
	}
.icon .name.issue {
    font-size: 1.6rem;
    background-color: rgb(255, 155, 6);
    font-weight: 800;
    color: rgb(178, 6, 6);
    width: 200%;
    }

.icon.fade,
.fade {
	transition: opacity 2.5s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	opacity: 0;
	}



.icon.account > .name {
	position: relative;
	text-align: center;
	left:-50%;
	bottom: -89%;
	color: rgb(103, 197, 255);
	}
	
.icon  .icon.shop {
	background-image:  url('content/gui/ToothStarOwned.png');
	width:  19%;
	height: 19%;
	}

/* while editing user account (join) */

.user .name {
	font-size: 1.8rem;
	text-align: center;
	color: rgb(169, 222, 255);
	}

.user .icon.pic {
	width: 16vmin;
	height: 16vmin;

	}

.user .icon.child {
	width: 10vmin;
	height:10vmin;
	border-width: 0.75vmin;
	}

	
/**********************************************************************************************/
/***                                   TOOTHSTAR                                            ***/
/**********************************************************************************************/

      
	.toothstar {
		position: absolute;
		left: 10vw;
		top: 10vh;
		border: none;
		width: 16vmin;
		height: 16vmin;
		z-index: 5;

		background-image: url("/content/gui/ToothStarButton.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		transform: translate(-50%,-50%);
		transform-origin: 50% 50%;
		transition: top 1s linear,left 1s ease-in-out, opacity 2s ease-in-out;
		z-index: 3;
		display: flex;
		flex-direction: column-reverse;
		align-content: center;
		justify-content: flex-end;
		align-items: center;
		color: rgb(7, 9, 67);
		font-weight: 900;
		} 

/*** variants***/
    .toothstar.bank {
		position: absolute;
		top: 20vh;  left: 20vw;
		width: 20vmin;
		height: 20vmin;
		font-size: 4.5vmin;
		z-index: 7;
		justify-content: center;
		pointer-events: none;
		}     
			
	.toothstar.empty        { background-image: url("/content/gui/ToothStarEmpty.png");         }            
	.toothstar.owned        { background-image: url("/content/gui/ToothStarOwned.png");         }            
	.toothstar.unaffordable { background-image: url("/content/gui/ToothStarUnaffordable.png");  color: rgb(255, 0, 0); }            

/*** elements ***/

	.toothstar.bank .balance {
		position: relative;
		top: -4vh;
		}
	.toothstar .price {
		width: 10vmin;
		height: 10vmin;
		font-size: 3vmin;
		}            

	.toothstar label {
		position: relative;
		top: 80%;
		color: gold;
		background-color: rgba(1, 13, 80, 0.53);
		border-radius: 1.5vh;
		font-size: 40%;
		text-wrap: nowrap;
		overflow:visible;
		text-align: center; 
		padding:0.5vh 2vh;
		width:fit-content;
		}

	.toothstar.bank label {
		position: relative;
		top: 65%;
		color: rgba(255, 255, 255, 0.9);
		text-wrap: nowrap;
		border: none !important;  
		font-size: 3vh;
		text-align: center;
		width:fit-content;
		}