/* V196 extends the accepted V195 KL8 quick-ball material without changing it. */
html body .quick-official-number-grid .digit-button {
  --official-ball-color: #d4dbe4;
  --official-ball-border: #8b98a4;
  --official-ball-selected-top: #f5f8fb;
  --official-ball-selected-middle: #cbd4de;
  --official-ball-selected-bottom: #8e9aa6;
  --official-ball-selected-text: #18212a;
  --official-ball-selected-shadow: rgba(212, 219, 228, .5);
  border-color: #59626b !important;
  background-color: #30363c !important;
  background-image: linear-gradient(160deg, #4b5259 0%, #3a4046 35%, #292f35 70%, #20252a 100%) !important;
  color: var(--official-ball-color) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .9) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.13), inset 0 -2px 2px rgba(0,0,0,.46), 0 2px 2px rgba(0,0,0,.36) !important;
  filter: none !important;
  transform: none !important;
}

html body .quick-official-number-grid .digit-button.number-temperature-hottest {
  --official-ball-color: #ff5369;
  --official-ball-border: #f0445c;
  --official-ball-selected-top: #ff7588;
  --official-ball-selected-middle: #f21f48;
  --official-ball-selected-bottom: #a90026;
  --official-ball-selected-text: #fff;
  --official-ball-selected-shadow: rgba(255, 64, 92, .62);
}

html body .quick-official-number-grid .digit-button.number-temperature-hot {
  --official-ball-color: #ff9636;
  --official-ball-border: #ed7d20;
  --official-ball-selected-top: #ffba57;
  --official-ball-selected-middle: #f8790d;
  --official-ball-selected-bottom: #a73c00;
  --official-ball-selected-text: #fff;
  --official-ball-selected-shadow: rgba(255, 143, 39, .58);
}

html body .quick-official-number-grid .digit-button.number-temperature-warm {
  --official-ball-color: #ffd348;
  --official-ball-border: #d5aa19;
  --official-ball-selected-top: #fff38a;
  --official-ball-selected-middle: #ffc600;
  --official-ball-selected-bottom: #a66a00;
  --official-ball-selected-text: #211900;
  --official-ball-selected-shadow: rgba(255, 210, 43, .58);
}

html body .quick-official-number-grid .digit-button.number-temperature-cold {
  --official-ball-color: #59d4ff;
  --official-ball-border: #29a9dc;
  --official-ball-selected-top: #8cecff;
  --official-ball-selected-middle: #13bce9;
  --official-ball-selected-bottom: #006a9e;
  --official-ball-selected-text: #062330;
  --official-ball-selected-shadow: rgba(61, 205, 249, .58);
}

html body .quick-official-number-grid .digit-button.number-temperature-coldest {
  --official-ball-color: #78a8ff;
  --official-ball-border: #477ed8;
  --official-ball-selected-top: #8fc2ff;
  --official-ball-selected-middle: #267eea;
  --official-ball-selected-bottom: #003e9d;
  --official-ball-selected-text: #fff;
  --official-ball-selected-shadow: rgba(69, 137, 247, .62);
}

html body .quick-official-number-grid .digit-button:hover {
  border-color: #69747e !important;
  background-image: linear-gradient(160deg, #5a636b 0%, #454c53 35%, #30373e 70%, #242a30 100%) !important;
  color: var(--official-ball-color) !important;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.2), inset 0 -2px 2px rgba(0,0,0,.44), 0 3px 4px rgba(0,0,0,.44) !important;
  filter: brightness(1.08) !important;
  transform: translateY(-1px) scale(1.015) !important;
}

html body .quick-official-number-grid .digit-button:is([aria-pressed="true"], .is-selected) {
  border-color: var(--official-ball-border) !important;
  background-color: var(--official-ball-selected-middle) !important;
  background-image: linear-gradient(155deg, var(--official-ball-selected-top) 0%, var(--official-ball-selected-middle) 48%, var(--official-ball-selected-bottom) 100%) !important;
  color: var(--official-ball-selected-text) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.7) !important;
  box-shadow: inset 0 4px 3px rgba(255,255,255,.68), inset 2px 0 2px rgba(255,255,255,.2), inset 0 -5px 3px rgba(0,0,0,.5), 0 4px 0 #111820, 0 0 0 2px var(--official-ball-selected-shadow), 0 7px 13px var(--official-ball-selected-shadow) !important;
  filter: brightness(1.17) saturate(1.28) !important;
  transform: translateY(-3px) scale(1.045) !important;
  transition: none !important;
}

html body .quick-official-number-grid .digit-button::before,
html body .quick-official-number-grid .digit-button::after {
  content: none !important;
  display: none !important;
}