.vis-hidden {
  opacity: 0;
}
.vis-highlight-quadrant {
  opacity: 1;
  animation: pop-quadrant 0.8s ease-in-out;
}
.vis-highlight-ban {
  opacity: 1;
  animation: pop-ban 1s ease-in-out;
}
.vis-highlight-circles {
  opacity: 1;
  animation: pop-circles 1s ease-in-out;
}

@keyframes pop-quadrant {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.075);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pop-ban {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pop-circles {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

#vis-quadrant {
  .verticals .vertical {
    transition: opacity 0.3s ease-in-out;
  }
}

#vis-brand-discovery {
  max-width: 788px;

  .ban {
    font-family: MuseoModerno;
    font-size: 96px;
    font-style: normal;
    font-weight: 500;
    line-height: 119.965%; /* 115.167px */
    margin: 0;
  }
  .ban-label {
    color: var(--White, #fff);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 119.965%; /* 16.795px */
    margin: 0;
  }

  .annotations {
    .annotation-label {
      fill: var(--White, #fff);

      /* Chart text & annotations */
      font-family: Montserrat;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 119.965%; /* 16.795px */
    }
    .annotation-value {
      font-family: MuseoModerno;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 119.965%; /* 28.792px */
    }
  }
}

.service-disruption-container {
  display: flex;
  /* align-items: center; */
  gap: 4px;

  .service-disruption-number {
    /* when max number is 10, to achieve alignment of circles */
    /* flex-basis: 110px; */
    flex-basis: 70px;

    color: var(--Black, #04033a);
    leading-trim: both;
    text-edge: cap;
    font-family: MuseoModerno;
    font-size: 96px;
    font-style: normal;
    font-weight: 500;
    line-height: 119.965%; /* 115.167px */
    transition: opacity 0.3s ease-in-out;

    @media (max-width: 768px) {
      font-size: 72px;
      flex-basis: 50px;
    }
  }

  svg {
    overflow: visible;
    margin-top: 3px;
    @media (max-width: 768px) {
      margin-top: 0;
    }
  }

  .avg-text {
    color: #9494aa;
    text-align: center;

    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 119.965%; /* 16.795px */
    opacity: 0.5;

    @media (max-width: 768px) {
      font-size: 12px;
    }
  }
  .avg-line {
    mix-blend-mode: multiply;
  }
}

.customer-relationships-container {
  svg {
    overflow: visible;
  }
  .data-circle {
    transition: opacity 0.3s ease-out;
  }

  .axis-line {
    stroke: var(--Black, #04033a);
    mix-blend-mode: multiply;
    opacity: 0.4;
  }
  .axis-text {
    color: var(--Black, #04033a);
    mix-blend-mode: multiply;
    opacity: 0.4;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 119.965%; /* 16.795px */
  }
  .ban {
    fill: var(--Black, #04033a);
    transition: opacity 0.3s ease-out;

    font-family: MuseoModerno;
    font-size: 96px;
    font-style: normal;
    font-weight: 500;
    line-height: 119.965%; /* 115.167px */
    transition: opacity 0.3s ease-in-out;

    @media (max-width: 768px) {
      font-size: 72px;
    }
  }

  .average-label {
    fill: #9494aa;
    mix-blend-mode: multiply;

    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 119.965%; /* 16.795px */
  }
}