.c3w22rank {
    width: 150px;
    position: relative;
    overflow: hidden;
}
.c3w22rank-back, .c3w22rank-character, .c3w22rank-text, .c3w22rank-text2, .c3w22rank-progress {
    background-image: url("/images/rankset/c3trial/ranks.png");
    position: absolute;
}
.c3w22rank-back {
    width: 150px;
    height: 20px;
    background-position: -69px -128px;
    bottom: 7px;
    left: 0;
}
.c3w22rank-progress {
    height: 18px;
    left: 1px;
    bottom: 8px;
    max-width: 148px;
    background-position: -69px -148px;
}
.c3w22rank-good .c3w22rank-progress {
    background-color: #386BF7;
}
.c3w22rank-bad .c3w22rank-progress {
    background-color: #F93838;
}
.c3w22rank-text, .c3w22rank-text2 {
    width: 69px;
    height: 10px;
}
.c3w22rank-text {
	font-size: 0;
    bottom: 19px;
    left: 4px;
}
.c3w22rank-text2 {
    bottom: 9px;
    left: 14px;
}

.c3w22rank-bad.c3w22rank-rank1 .c3w22rank-text {
    background-position: 0 0;
}
.c3w22rank-bad.c3w22rank-rank2 .c3w22rank-text {
    background-position: 0 -20px;
}
.c3w22rank-bad.c3w22rank-rank3 .c3w22rank-text {
    background-position: 0 -40px;
}
.c3w22rank-bad.c3w22rank-rank4 .c3w22rank-text {
    background-position: 0 -60px;
}
.c3w22rank-bad.c3w22rank-rank5 .c3w22rank-text {
    background-position: 0 -80px;
}
.c3w22rank-good.c3w22rank-rank1 .c3w22rank-text {
    background-position: 0 -100px;
}
.c3w22rank-good.c3w22rank-rank2 .c3w22rank-text {
    background-position: 0 -120px;
}
.c3w22rank-good.c3w22rank-rank3 .c3w22rank-text {
    background-position: 0 -140px;
}
.c3w22rank-good.c3w22rank-rank4 .c3w22rank-text {
    background-position: 0 -160px;
}
.c3w22rank-good.c3w22rank-rank5 .c3w22rank-text {
    background-position: 0 -180px;
}
.c3w22rank-bad.c3w22rank-rank1 .c3w22rank-text2 {
    background-position: 0 -10px;
}
.c3w22rank-bad.c3w22rank-rank2 .c3w22rank-text2 {
    background-position: 0 -30px;
}
.c3w22rank-bad.c3w22rank-rank3 .c3w22rank-text2 {
    background-position: 0 -50px;
}
.c3w22rank-bad.c3w22rank-rank4 .c3w22rank-text2 {
    background-position: 0 -70px;
}
.c3w22rank-bad.c3w22rank-rank5 .c3w22rank-text2 {
    background-position: 0 -90px;
}
.c3w22rank-good.c3w22rank-rank1 .c3w22rank-text2 {
    background-position: 0 -110px;
}
.c3w22rank-good.c3w22rank-rank2 .c3w22rank-text2 {
    background-position: 0 -130px;
}
.c3w22rank-good.c3w22rank-rank3 .c3w22rank-text2 {
    background-position: 0 -150px;
}
.c3w22rank-good.c3w22rank-rank4 .c3w22rank-text2 {
    background-position: 0 -170px;
}
.c3w22rank-good.c3w22rank-rank5 .c3w22rank-text2 {
    background-position: 0 -190px;
}
.c3w22rank-character {
    width: 64px;
    height: 64px;
    right: 0;
    bottom: 0;
}
.c3w22rank-bad.c3w22rank-rank1 .c3w22rank-character {
    background-position: -69px 0;
}
.c3w22rank-bad.c3w22rank-rank2 .c3w22rank-character {
    background-position: -133px 0;
}
.c3w22rank-bad.c3w22rank-rank3 .c3w22rank-character {
    background-position: -197px 0;
}
.c3w22rank-bad.c3w22rank-rank4 .c3w22rank-character {
    background-position: -261px 0;
}
.c3w22rank-bad.c3w22rank-rank5 .c3w22rank-character {
    background-position: -325px 0;
}
.c3w22rank-good.c3w22rank-rank1 .c3w22rank-character {
    background-position: -69px -64px;
}
.c3w22rank-good.c3w22rank-rank2 .c3w22rank-character {
    background-position: -133px -64px;
}
.c3w22rank-good.c3w22rank-rank3 .c3w22rank-character {
    background-position: -197px -64px;
}
.c3w22rank-good.c3w22rank-rank4 .c3w22rank-character {
    background-position: -261px -64px;
}
.c3w22rank-good.c3w22rank-rank5 .c3w22rank-character {
    background-position: -325px -64px;
}

.c3w22rank-bad.c3w22rank-rank1, .c3w22rank-bad.c3w22rank-rank2, .c3w22rank-good.c3w22rank-rank1, .c3w22rank-good.c3w22rank-rank2 {
    height: 34px;
}
.c3w22rank-bad.c3w22rank-rank3 {
    height: 55px;
}
.c3w22rank-bad.c3w22rank-rank4, .c3w22rank-good.c3w22rank-rank3 {
    height: 39px;
}
.c3w22rank-bad.c3w22rank-rank5 {
    height: 64px;
}
.c3w22rank-good.c3w22rank-rank4 {
    height: 44px;
}
.c3w22rank-good.c3w22rank-rank5 {
    height: 55px;
}

@keyframes c3-candy-glow {
	0% {
		filter: drop-shadow(1px 1px 2.5px rgba(255, 255, 0, 0)) drop-shadow(-1px -1px 2.5px rgba(255, 255, 0, 0)) drop-shadow(-1px 1px 2.5px rgba(255, 255, 0, 0)) drop-shadow(1px -1px 2.5px rgba(255, 255, 0, 0));
	}
	
	16%, 25% {
		filter: drop-shadow(1px 1px 2.5px rgba(255, 255, 0, 0.15)) drop-shadow(-1px -1px 2.5px rgba(255, 255, 0, 0.15)) drop-shadow(-1px 1px 2.5px rgba(255, 255, 0, 0.15)) drop-shadow(1px -1px 2.5px rgba(255, 255, 0, 0.15));
	}
	
	50% {
		filter: drop-shadow(1px 1px 2.5px rgba(255, 255, 0, 0)) drop-shadow(-1px -1px 2.5px rgba(255, 255, 0, 0)) drop-shadow(-1px 1px 2.5px rgba(255, 255, 0, 0)) drop-shadow(1px -1px 2.5px rgba(255, 255, 0, 0));
	}
}

@keyframes c3-candy-text {
	to {
		transform: translate(0, -16px);
		opacity: 0;
	}
}

#c3-candy {
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	border: none !important;
	background: none !important;
	cursor: pointer;
	outline: none;
	animation: 4s infinite 2s c3-candy-glow;
	transition: transform 0.5s, opacity 0.5s;
	box-shadow: none;
}

#c3-candy:hover {
	transform: rotate(-45deg);
}

#c3-candy.exiting {
	animation: none;
	transform: translate(0, -16px);
	opacity: 0;
}

#c3-candy + div {
	font-size: 1.1em;
	color: white;
	text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
	transition: all 0.5s;
	pointer-events: none;
	animation: 0.5s 2.5s forwards c3-candy-text;
}