@charset "utf-8";

.trophy-container {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	justify-content: center;
}

.item-trophy {
	position: relative;
	margin: 10px;
	padding: 2px;
	padding-top: 4px;
	left: 0px;
	top: 0px;
	height: 54px;
	max-width: 54px;
	background-color: #3A3A3A;
	border-radius: 6px;
	text-align: left;
	cursor: pointer;
	/* transition: max-width 0.2s ease-out; */
	overflow: hidden;
}

.item-trophy:hover {
	max-width: 800px;
	/* transition: max-width 0.2s ease-in; */
}

.item-trophy .trophy-tooltip {
	position: relative;
	top: -70px;
	left: 60px;
	text-align: left;
	opacity: 0%;
}

.item-trophy:hover .trophy-tooltip {
	opacity: 100%;
	/* transition: .1s;
	transition-delay: .3s; */
	padding-right: 70px;
}

.trophy-tooltip-line1 {
	font-weight: 600;
}

.trophy-tooltip-line2 {
	font-size: 0.8em;
	color: #DDD;
}

.trophy-tooltip-line3 {
	font-size: 0.8em;
	color: #DDD;
}

.zero {
	opacity: 35%;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray;
        /* OPTIONAL: hide completely */
    /* display: none; */
}

.zero:hover {
	opacity: 90%;
	-webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
	filter: none;
    text-overflow: inherit;
    overflow: visible;
}