/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --kpi-heading: 18px; /* Service card heading */
  --kpi-callout-value: 16px; /* Service card body */
  --kpi-callout-text: 12px;
  --kpi-font-color: black;
  --kpi-callout-color: grey;
  --kpi-callout-percent: #160a87e5;
  --kpi-card-h1-color: #a6a6a6;
  --kpi-card-bg-color: #ffffff;
  --kpi-card-bg2-color: #f2f1f1;
  --kpi-card-line-color: #a6a6a6;
  --kpi-card-shadow-color: #a6a6a6;
  --kpi-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.kpi-card {
  background: var(--kpi-card-bg-color);
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 var(--kpi-card-shadow-color);
  width: 200px !important;
  align-content: center;
  margin: 9px auto !important;
  font-family: var(--kpi-font);
}
.kpi-card-title {
  background: var(--kpi-card-bg-color);
  border-bottom: 1px solid #b5c0c9;
  border-radius: 9px 9px 0 0;
  font-size: var(--kpi-heading);
  font-weight: 600;
  padding: 9px 9px;
  text-align: center;
  color: var(--kpi-font-color);
}
.kpi-card-body {
  padding: 9px;
  background: var(--kpi-card-bg2-color);
  border-radius: 0 0 9px 9px;
}
.kpi-main-value {
  font-size: var(--kpi-callout-value);
  font-weight: 600;
  margin-bottom: 1px;
  color: var(--kpi-callout-color);
}
.kpi-label {
  font-size: var(--kpi-callout-text);
  color: var(--kpi-card-h1-color);
  font-weight: 600;
  margin-bottom: 6px;
}
.kpi-diff {
  font-size: var(--default-color);
  font-weight: 600;
  margin-bottom: 1px;
  color: var(--kpi-callout-percent);
}
.kpi-perc {
  font-size: var(--default-color);
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--kpi-callout-percent);
}
.kpi-perc-label {
  font-size: var(--kpi-callout-text);
  color: var(--kpi-card-h1-color);
  margin-bottom: 9px;
  font-weight: 600;
}

.chartjs-container {
  min-height: 320px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kpi-card-bg-color); /* Optional: for contrast */
  padding: 20px; /* Optional: for spacing */
  border-radius: 20px; /* Optional: rounded corners */
  box-shadow: 0 2px 10px var(--kpi-card-shadow-color); /* Optional: subtle shadow */
}