* {
  overflow-anchor: none !important;
}

@font-face { 
  font-family: "Muli-Regular"; 
  font-weight: normal; 
  src: url("../fonts/Muli-Regular.ttf") format("truetype");
}

@font-face { 
  font-family: "Muli-Bold"; 
  font-weight: bold; 
  src: url("../fonts/Muli-Bold.ttf") format("truetype"); 
}

@font-face { 
  font-family: "Muli-Black"; 
  font-weight: bold; 
  src: url("../fonts/Muli-Black.ttf") format("truetype"); 
}

.modal-open {
  overflow: hidden;
}

div[modal-backdrop] {
  z-index: 70;
}

#triangle {
  position: absolute;
  rotate: 180deg;
  bottom: -36px;
  width: 0;
  height: 0;
  z-index: 1;
  border-width: 0 24px 37px 24px;
  border-color: transparent transparent #6A3BF5 transparent;
}

#triangle::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 1px;
  border-width: 0 23px 36px 23px;
  border-color: transparent transparent #FFFFFF transparent;
}

.triangles .relative:nth-child(even) #triangle {
  right: auto;
  left: 35%;
}

.triangles .relative:nth-child(odd) #triangle {
  left: auto;
  right: 35%;
}

/* div#numerador_list::after{
  content: '';
  position: absolute;
  left: 42%;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #e8e8e8;
  clear: both;
} */

.progress-circle {
  background: #AFA2F7;
  border-radius: 100%;
  position: absolute;
  overflow: hidden;
  height: 164px;
  width: 164px;
  animation-duration: 3s;
  animation-name: slidein;
}

.p-f,
.p-h {
  clip: rect(0, 164px, 164px, 82px);  
  position: absolute;
  overflow: hidden;
  height: 164px;
  width: 100%;
  left: 0%;
}

.p-f:before,
.p-h:before{
  content: '';
  background: #6A3BF5;
  position: absolute;
  height: 164px;
  width: 50%;
  left: 0%;
  transform-origin: 100% 50%;
}

.progress-circle #progress {
  margin: -70px 0 0 -70px;
  border-radius: 100%;
  position: absolute;
  text-align: center;
  line-height: 130px;
  background: #FFFFFF;
  height: 130px;
  width: 130px;
  z-index: 1;
  left: 53%;
  top: 53%;
  animation-duration: 3s;
  animation-name: progress;
}

.p-h:before, .p-f, .p-f:before {
  -moz-transform: rotate(124deg);
  -webkit-transform: rotate(124deg);
  -o-transform: rotate(124deg);
  -ms-transform: rotate(124deg);
  transform: rotate(124deg);
}

.p-h.second:before, .p-f.second, .p-f.second:before {
  -moz-transform: rotate(110deg);
  -webkit-transform: rotate(110deg);
  -o-transform: rotate(110deg);
  -ms-transform: rotate(110deg);
  transform: rotate(110deg);
}

@keyframes slidein {
  from {
    margin-left: 100%;
    opacity: 0;
  }

  to {
    margin-left: 0%;
    opacity: 1;
  }
}

@keyframes progress {
  from {
    font-size: 0rem;
    opacity: 0;
  }

  to {
    font-size: 4rem;
    opacity: 1;
  }
}

.svg-container .grid-back {
  fill: transparent;
}
.svg-container .grid-front {
  fill: transparent;
}
.svg-container .chart-line {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.svg-container .chart-line.primary {
  stroke: #6A3BF5;
  fill: rgba(36, 123, 160, 0);
  animation: draw 3s linear forwards, fill 0.5s linear 1.5s forwards;
}
.svg-container .overlay-border {
  fill: none;
  stroke-width: 5;
  stroke: #FFFFFF;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fill {
  to {
    fill: rgba(161, 140, 224, 0.3);
  }
}

.crecimiento {
  animation: crecimiento 1.5s ease-in;
}

@keyframes crecimiento {
  0%   {
    transform: scale(.8);
    opacity: 0;
  }
  100% { 
    transform: scale(100%);
    opacity: 1;
  }
}

.updown {
  animation-name: updown;
  animation-duration: 3s;
}

@keyframes updown {
  from {
    margin-bottom: -100%;
    opacity: 0;
  }

  to {
    margin-bottom: 1.25rem;
    opacity: 1;
  }
}

.downup {
  animation-name: downup;
  animation-duration: 3s;
}

@keyframes downup {
  from {
    margin-top: -100%;
    opacity: 0;
  }

  to {
    margin-top: 1.25rem;
    opacity: 1;
  }
}

.perpendicular-line {
  position: absolute;
  height: 5px;
  width: 25px;
  transform: rotate(90deg);
  background-color: #6A3BF5;
}

.equipo:hover .items-equipo:not(:hover) {
  filter: grayscale(100%);
  opacity: 1;
}

/* .tooltip {
  inset: -150px auto auto 0px !important;
}

@media only screen and (max-width: 600px) {
  .tooltip {
    inset: -100px auto auto 0px !important;
    line-height: 0.5rem;
  }
} */