/* styles.css */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #4a6fdc; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #3a5bc7; } .trend-card:hover { transform: translateY(-2px); } .dmim-bg { background-color: #4a6fdc; } * { /* These user-select properties are generally not recommended for web apps as they hinder user interaction (e.g., copying text). Consider removing them unless you have a very specific reason. */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .explainer-animate { animation: fadeIn 0.3s ease-out forwards; } .percentage-up { color: #10b981; } .percentage-down { color: #ef4444; } .percentage-neutral { color: #6b7280; } .sentiment-positive { background-color: rgba(16, 185, 129, 0.1); border-left: 3px solid #10b981; } .sentiment-negative { background-color: rgba(239, 68, 68, 0.1); border-left: 3px solid #ef4444; } .sentiment-neutral { background-color: rgba(156, 163, 175, 0.1); border-left: 3px solid #9ca3af; } .sentiment-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; } .sentiment-slider.positive::-webkit-slider-thumb { background: #10b981; } .sentiment-slider.negative::-webkit-slider-thumb { background: #ef4444; } .sentiment-slider.neutral::-webkit-slider-thumb { background: #6b7280; } /* Floating button styles */ .floating-btn { position: fixed; bottom: 80px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: #4a6fdc; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 40; cursor: pointer; transition: all 0.3s ease; } .floating-btn:hover { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } /* Legend modal styles */ .legend-item { display: flex; align-items: center; margin-bottom: 12px; } .legend-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }