@media (max-width: 820px) {
  .ptm8-ev-total-indicator {
    --ptm8-ring-color: #98a2b3;
    --ptm8-ring-pct: 0%;
    box-sizing: border-box;
    width: 100%;
    display: grid;
    place-items: center;
    gap: 7px;
    margin: 8px 0 12px;
    padding: 10px 8px 9px;
    background: transparent;
    border: 0;
    color: #101828;
    font-variant-numeric: tabular-nums;
  }

  .ptm8-ev-total-ring {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at center, #fff 0 61%, transparent 62%),
      conic-gradient(var(--ptm8-ring-color) var(--ptm8-ring-pct), #eaecf0 0);
    box-shadow: inset 0 0 0 1px rgba(16,24,40,.04);
  }

  .ptm8-ev-total-ring__inner {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: #fff;
  }

  .ptm8-ev-total-ring__label {
    font-size: .62rem;
    line-height: 1;
    color: #667085;
    font-weight: 800;
    letter-spacing: .01em;
  }

  .ptm8-ev-total-ring__value {
    margin-top: 4px;
    font-size: 1rem;
    line-height: 1.05;
    font-weight: 900;
    color: #101828;
  }

  .ptm8-ev-total-indicator__remaining {
    min-height: 1em;
    font-size: .68rem;
    line-height: 1.15;
    font-weight: 800;
    color: #667085;
  }

  .ptm8-ev-total-indicator[data-state="low"] { --ptm8-ring-color: #f04438; }
  .ptm8-ev-total-indicator[data-state="mid"] { --ptm8-ring-color: #f79009; }
  .ptm8-ev-total-indicator[data-state="high"],
  .ptm8-ev-total-indicator[data-state="full"] { --ptm8-ring-color: #12b76a; }
  .ptm8-ev-total-indicator[data-state="over"] { --ptm8-ring-color: #d92d20; }

  .ptm8-ev-total-indicator[data-state="over"] .ptm8-ev-total-ring__value,
  .ptm8-ev-total-indicator[data-state="over"] .ptm8-ev-total-indicator__remaining {
    color: #b42318;
  }
}