body{
	font-family:Calibri;
	background-color:#292929;
	color:#DEDFDF;
}
button, input{
	background-color:#292929;
	color:#DEDFDF;
	border-color:#DEDFDF;
	padding:5px;
}
button{
	font-weight:bold;
	padding:15px;
}

.metaInfo{
	border:1px solid #DEDFDF;
	padding:20px;
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #040605; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; 
    background-color: #040605;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 2;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.achievementsList{
	display:flex;
	justify-content:flex-start;
	flex-direction:row;
	flex-wrap:wrap;
}
.achievementCompletion{
	position:absolute;
	right:4px;
	bottom:4px;
	z-index:1;
	text-shadow:1px 1px #040605;
	color:65917E;
	font-size:12pt;
}
.achievementContainer{
	margin:12px;
}
img.achievementIcon{
	width:64px;
	height:64px;
	padding:8px;
}
img.achievementUNLOCKED{
	border:1px solid #DEDFDF;
}
img.achievementREVEALED, img.achievementLOCKED{
	border:1px solid #8B8B8B;
	filter: grayscale(100%) brightness(50%);
}