.crypto-chart-wrapper{ margin: 40px 0; } #chart-preloader .loader-spinner { display:inline-block; width:2em; height:2em; border:5px solid #ccc; border-top:5px solid #E16826; border-radius:50%; animation:spin 1s linear infinite; } #chart-preloader{ justify-content: center; align-items: center; height: 300px; } @keyframes spin { 100% { transform: rotate(360deg);} } #chart-controls { display: flex; justify-content: space-between; margin-bottom: 24px; } #chart-controls button { background:#E16826; color:#fff; font-size: 13px; line-height: 150%; padding: 8px 32px; border-radius: 150px; } #chart-controls button.active { background:#404040; color:#fff; } .chart-controls-wrapper{ display: flex; gap: 12px; } #chart-error{ justify-content: center; align-items: center; min-height: 300px; height: 100% } @media (max-width: 900px) { .crypto-chart-wrapper{ margin: 20px 0; } #chart-controls{ flex-direction: column; align-items: center; gap: 20px; } #chart-controls button{ padding: 8px 10px; width: 100%; } .chart-controls-wrapper{ width: 100%; gap: 10px; } }