@font-face {
  font-family:'rohnroundedmedium';
  src: url(rohnroundedmedium.ttf);
}


.monsterquest {    position: relative;
  font-family:'rohnroundedmedium';
    border: 2px solid rgba(255, 255, 255, 0.05);
    background-image: url(../img/home.png);
    background-size: cover;
    margin: 0 auto;
    width: 85%;

    border-radius: 10px;
    margin-bottom: 50px; align-items: center;}

.monsterquest table { width:80%; margin-top: 50px;}
.monsterquest table td { padding: 20px;}
.monsterquest .rewardsbuttom { border-top: 1px outset #333;}
.monsterquest table td.rewardsimagen {  border-left:1px outset #333; width: 40%; }
.monsterquest table td.rewardsimagen img { padding: 3px;}
.monsterquest table td.rewardsname { font-size:0.95rem; color: beige; font-weight: 400; line-height: 20px; text-shadow: 1px 1px 1px #000; }
.monsterquest table td.rewardsname .prex{ font-size:1.2rem; color: aquamarine; font-weight:600; margin-bottom: 10px; }
.monsterquest .testxd {
    position: absolute;
    text-align: center;
    line-height: 52px;
    width: 52px;
    height: 52px;
    border-radius: 0 0px 10px 0;
    top: 0;
    left: 0;
    z-index: 1;
    color: #D35400;
    font-size: 1.5rem;
	font-weight: bolder;
    border-right: 2px solid rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}


 .monsterquest .testxd2 {
	position: absolute;
	text-align: center;
	top: -50px;
	right: -20px;
	z-index: 1;
	color: #fff;
}
.monsterquest .testxd2 img { max-width:120px;; }
.monsterquest .testxd2 .progress {position: relative;z-index: 2; margin-bottom: 1px;} 

/* RAINBOW TEXT */
.rainbow {

	/* Chrome, Safari, Opera */
	-webkit-animation: rainbow 1s infinite;

	/* Internet Explorer */
	-ms-animation: rainbow 1s infinite;

	/* Standar Syntax */
	animation: rainbow 1s infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow {
	0% {
		color: #ffca4f;
	}

	25% {
		color: #f28f0c;
	}

	50% {
		color: #664400;
	}

	75% {
		color: #5eaeeb;
	}

	100% {
		color: #ffffff;
	}
}

/* Internet Explorer */
@-ms-keyframes rainbow {
	0% {
		color: #ffca4f;
	}

	25% {
		color: #f28f0c;
	}

	50% {
		color: #664400;
	}

	75% {
		color: #5eaeeb;
	}

	100% {
		color: #ffffff;
	}
}

/* Standar Syntax */
@keyframes rainbow {
	0% {
		color: #ffca4f;
	}

	25% {
		color: #f28f0c;
	}

	50% {
		color: #664400;
	}

	75% {
		color: #5eaeeb;
	}

	100% {
		color: #ffffff;
	}
}
/* This is an example, feel free to delete this code */
.tooltip-container {
	position: relative;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 17px;
	padding: 0.7em 1.8em;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	color: #fff;
}

.tooltip {
	position: absolute;
	width: 100%;
	 font-family:'rohnroundedmedium';
	min-width: 250px;
	font-size: 1rem;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) scale(0.8);
	transform-origin: bottom;
	padding: 0.3em 0.6em;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
	background: #222227;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	
}

.tooltip::before {
	position: absolute;
	content: "";
	height: 0.6em;
	width: 0.6em;
	bottom: -0.2em;
	left: 50%;
	transform: translate(-50%) rotate(45deg);
	background: #222227;
}

.tooltip-container:hover .tooltip {
	top: -45px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) scale(1);
}

.tooltip-container:hover {
	transform: scale(0.9);
}