.kpi-panel { min-height: 72px; }
    .kpi-title { font-size: .95rem; opacity:.9; }
    .kpi-help { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.25); }
    .kpi-panel-dark { background:#7a7a7a; color:#fff; }
    .kpi-panel-accent { background:#7e22ce; color:#fff; }
    .kpi-panel-red { background:#954322; color:#fff; }
    .kpi-panel-green { background:#229563; color:#fff; }
    .kpi-panel-yellow { background:#545454; color:#fff; }


.btn-red {
	--bs-btn-color: #fff;
	--bs-btn-bg: #d41249;
	--bs-btn-border-color: #d41249;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #d41249;
	--bs-btn-hover-border-color: #420eaa;
	--bs-btn-focus-shadow-rgb: 108,54,218;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #d41249;
	--bs-btn-active-border-color: #3e0e9f;
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #d41249;
	--bs-btn-disabled-border-color: #d41249;
}
.btn-green {
	--bs-btn-color: #fff;
	--bs-btn-bg: #107717;
	--bs-btn-border-color: #107717;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #107717;
	--bs-btn-hover-border-color: #420eaa;
	--bs-btn-focus-shadow-rgb: 108,54,218;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #107717;
	--bs-btn-active-border-color: #3e0e9f;
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #107717;
	--bs-btn-disabled-border-color: #107717;
}    

.spinner {
  width: 160px;
  height: 160px;
  display: grid;
  border: 7px solid #0000;
  border-radius: 50%;
  border-color: #5212d4 #0000;
  animation: spinner-e04l1k 1.2s infinite linear;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  margin: 3.5px;
  border: inherit;
  border-radius: 50%;
}

.spinner::before {
  border-color: #808080 #0000;
  animation: inherit;
  animation-duration: 0.6s;
  animation-direction: reverse;
}

.spinner::after {
  margin: 14px;
}
@keyframes spinner-e04l1k {
  100% {
    transform: rotate(1turn);
  }
}