:root { --primary-color: #16767b; --secondary-color: #741b5f; --primary-light: #1a8a90; --secondary-light: #8a2170; --warning-color: #ffd700; --danger-color: #dc3545; } /* Masonry Layout */ .masonry { column-count: 1; column-gap: 1.5rem; } @media (min-width: 768px) { .masonry { column-count: 2; } } @media (min-width: 1200px) { .masonry { column-count: 3; } } .masonry-card { display: inline-block; width: 100%; margin-bottom: 1.5rem; } /* Card Styles */ .card { border: none; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .card-title { color: var(--primary-color); } .card-title i { color: var(--primary-color); } /* Button Styles */ .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: var(--primary-light); border-color: var(--primary-light); } /* Icon Colors */ .icon-primary { color: var(--primary-color); } .icon-danger { color: var(--danger-color); } .icon-warning { color: var(--warning-color); } /* Text Colors */ .text-primary { color: var(--primary-color) !important; } .text-danger { color: var(--danger-color) !important; } /* Badge Styles */ .badge-starred { background-color: rgba(255, 215, 0, 0.15) !important; color: var(--warning-color) !important; } .badge-trash { background-color: rgba(220, 53, 69, 0.15) !important; color: var(--danger-color) !important; } /* Contact Link Styles */ .contact-link { background-color: rgba(22, 118, 123, 0.08); color: var(--primary-color); transition: all 0.2s; } .contact-link:hover { background-color: rgba(22, 118, 123, 0.12); color: var(--primary-color); } /* Chart Container */ .chart-container { position: relative; height: 200px; } /* Alert Styles */ .alert-info { background-color: rgba(22, 118, 123, 0.08); border-color: rgba(22, 118, 123, 0.2); color: var(--primary-color); } /* List Group Styles */ .list-group-item { border: none; padding: 1rem 0; } .list-group-item:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } /* Download Button */ .btn-download { background-color: var(--primary-color); border: none; border-radius: 6px; box-shadow: 0 1px 2px rgba(22, 118, 123, 0.08); color: white; transition: all 0.2s; } .btn-download:hover { background-color: var(--primary-light); color: white; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(22, 118, 123, 0.12); }