/* olimonovarietali.it - grafici Chart.js */
.olio-grafico {
  max-width: 560px;
  margin: 1em 0 1.5em;
  padding: 14px 18px 10px;
  border: 1px solid #222;
  background: #fff url("/0_grafici/monovarietali3.png") no-repeat left 6px bottom 6px / 120px auto;
  color: #222;
  box-sizing: border-box;
}
.olio-grafico__titolo { margin: 0; font-size: 1.25em; line-height: 1.2; font-weight: 600; }
.olio-grafico__sottotitolo { margin: 2px 0 6px; font-size: .85em; color: #444; }
.olio-grafico__corpo { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.olio-grafico--torta .olio-grafico__corpo { aspect-ratio: 5 / 4; }
.olio-grafico__corpo canvas { position: relative; z-index: 1; }
.olio-grafico__messaggio {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 1.1em; color: #555; letter-spacing: .05em;
}
.olio-grafico__piede {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 4px 14px; min-height: 28px; font-size: .75em; color: #444;
}
.olio-accuratezza { display: inline-flex; align-items: center; gap: 4px; font-size: 1.15em; color: #222; }
.olio-accuratezza i {
  display: inline-block; width: 13px; height: 13px; border: 1px solid #333; background: #e5262c;
}
.olio-accuratezza i.ok { background: #1aa31a; }
@media (max-width: 480px) {
  .olio-grafico { padding: 10px 10px 8px; background-size: 70px auto; }
  .olio-grafico__piede { padding-left: 75px; }
  .olio-grafico--torta .olio-grafico__corpo { aspect-ratio: 3 / 4; }
}