.label.negative {
  background-color: var(--negative) !important;
  color: var(--white) !important;
}

.segment.positive {
  background-color: var(--positive) !important;
  color: var(--white) !important;
}

.segment.negative {
  background-color: var(--negative) !important;
  color: var(--white) !important;
}

.button.primary {
  color: var(--darkLight) !important;
  background-color: var(--white) !important;
  transition: border 0.3s ease, box-shadow 0.3s ease, background-color 0.3s, color 0.3s ease !important;
  border: solid 1px var(--border) !important;
  border-radius: 4px !important;
}

.button.primary:hover {
  box-shadow: 0px 0px 4px var(--shadow) !important;
  border: solid 1px var(--primary) !important;
  background-color: var(--white) !important;
  color: var(--primary) !important;
}

.rheostat-handle:hover {
  box-shadow: 0px 0px 4px var(--shadow) !important;
  border: solid 1px var(--primaryAccent) !important;
  background-color: var(--primaryLight) !important;
  color: var(--primary) !important;
}

.options-item.primary {
  color: var(--darkLight) !important;
  background-color: var(--white) !important;
  transition: border 0.3s ease, background-color 0.3s, color 0.3s ease !important;
}

.options-item.primary:hover {
  background-color: var(--primaryLight) !important;
  color: var(--primary) !important;
}