Spaces:
Paused
Paused
| .chart-container { | |
| position: relative; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| padding: 20px; | |
| margin: 10px 0; | |
| } | |
| .chart-canvas { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| } | |
| .chart-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| margin-top: 15px; | |
| padding-top: 15px; | |
| border-top: 1px solid #e0e0e0; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .legend-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 2px; | |
| } | |
| .legend-label { | |
| font-size: 12px; | |
| color: #666; | |
| font-weight: 500; | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .chart-container { | |
| padding: 15px; | |
| } | |
| .chart-legend { | |
| gap: 10px; | |
| } | |
| .legend-label { | |
| font-size: 11px; | |
| } | |
| } |