.nine-box{
	--star-potential-bg-color: #009721;
	--high-potential-bg-color: #00AE21;
	--potential-gem-bg-color: #FFD85D;
	--high-performer-bg-color: #00AE21;
	--core-player-bg-color: #FFD85D;
	--inconsistent-player-bg-color: #FF6F47;
	--solid-performer-bg-color: #FFD85D;
	--average-performer-bg-color: #FF6F47;
	--risk-bg-color: #FF0000;


	--lado: 500px;
	--nine-box-width:var(--lado);
	--nine-box-height:var(--lado);

	--item-nine-box-width: calc(var(--nine-box-width)/3);
	--item-nine-box-height: calc(var(--nine-box-height)/3);

	width:90%;
	max-width: var(--lado);
	max-height: var(--lado);
	background-color: transparent;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

/*
.nine-box:after{
  content: "";
  display: block;
  padding-bottom: 100%;
}
*/

.evaluado{
  margin: 0px;
  padding: 0px;
	--ladoEvaluado:30px;
	width: var(--ladoEvaluado);
	height: var(--ladoEvaluado);
/*  border-style: solid;*/
  border: 2px solid;
	border-radius: 50%;
  border-color: #DD82FF;
  color: #DD82FF;
  line-height: 25px;
  text-align: center;
  align-items: center;
	position: absolute;
	background-color:rgba(255,255,255,1);

}

.tituloEjex{
  font-size: 1.4em;
  text-align: center;
  align-items: center;
  position: absolute;
  bottom: -40px;
  left: calc(calc(var(--lado)/2) - 45px);
}

.tituloEjey{
  font-size: 1.4em;
  text-align: center;
  align-items: center;
  position: absolute;
  left: -80px;
  bottom: calc(var(--lado)/2);
  transform: rotate(-90deg);
}

.nine-box-risk{
  text-align: center;
  color: #fff;
  font-size: 4em;
  background-color: var(--risk-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-average-performer{
  text-align: center;
  color: #fff;
  font-size: 4em;
  background-color: var(--average-performer-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-solid-performer{
  text-align: center;
  color: #000;
  font-size: 4em;
  background-color: var(--solid-performer-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-inconsistent-player{
  text-align: center;
  color: #fff;
  font-size: 4em;
  background-color: var(--inconsistent-player-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-core-player{
  text-align: center;
  color: #000;
  font-size: 4em;
  background-color: var(--core-player-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-high-performer{
  text-align: center;
  color: #fff;
  font-size: 4em;
  background-color: var(--high-performer-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-potential-gem{
  text-align: center;
  color: #000;
  font-size: 4em;
  background-color: var(--potential-gem-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-high-potential{
  text-align: center;
  color: #fff;
  font-size: 4em;
  background-color: var(--high-potential-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.nine-box-star-potential{
  text-align: center;
  color: #fff;
  font-size: 4em;
  background-color: var(--star-potential-bg-color);
  width: var(--item-nine-box-width);
  height: var(--item-nine-box-height);
  max-width: 33%;
  max-height: 33%;
}

.tooltipNineBox{
  display: flex;
  position: relative;

}

.infoDetalle{
  position: absolute;
/*  top: 100;
  left:140;*/
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 50px rgba(0,0,0,0.2);
  width:250px;
  z-index: 1000;
  opacity: 0;
  transition: .3s ease all;
  transform: translateY(15px);
}

.infoDetalle.activo{
  opacity: 1;
  transform: translateY(0px);
}

.cuadrante{
  margin: 30px;
}

.tituloGrupo h3{
  color: #666666;
}

.grupo1 h4{
  color: #009721;
  font-size: 21px;
  margin-top:30px;

}

.grupo2 h4{
  color: #ffd85d;
  font-size: 21px;
  margin-top:30px;

}

.grupo3 h4{
  color: #ff6f47;
  font-size: 21px;
  margin-top:30px;

}

.grupo4 h4{
  color: #ff0000;
  font-size: 21px;
  margin-top:30px;

}