.e4s-kpi-problem {
  position: relative !important;
  border-color: rgba(255, 74, 28, .62) !important;

  box-shadow:
    0 0 0 1px rgba(255, 63, 22, .20),
    0 0 16px rgba(255, 56, 20, .18),
    0 0 32px rgba(255, 143, 25, .12) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 62, 24, .075),
      rgba(255, 151, 30, .035)
    ) !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.e4s-kpi-problem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 0 0 18px rgba(255, 74, 25, .055);
}

.e4s-problem-beacon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  margin-left: 7px;

  border-radius: 999px;

  color: #fff;
  font-size: 10px;

  background:
    linear-gradient(
      135deg,
      #ff2f21,
      #ff861c
    );

  box-shadow:
    0 0 8px rgba(255, 55, 25, .75),
    0 0 18px rgba(255, 128, 25, .40);

  animation:
    e4sProblemPulse 1.35s ease-in-out infinite;

  vertical-align: middle;
}

.e4s-kpi-problem .e4s-problem-value {
  color: #e12316 !important;
  font-weight: 900 !important;

  text-shadow:
    0 0 10px rgba(255, 63, 25, .14);
}

.e4s-kpi-problem .e4s-problem-text {
  color: #b42818 !important;
  font-weight: 700 !important;
}

@keyframes e4sProblemPulse {
  0%,
  100% {
    transform: scale(1);

    box-shadow:
      0 0 6px rgba(255, 55, 25, .65),
      0 0 13px rgba(255, 128, 25, .30);
  }

  50% {
    transform: scale(1.12);

    box-shadow:
      0 0 11px rgba(255, 55, 25, .95),
      0 0 25px rgba(255, 128, 25, .55);
  }
}