PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.13
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.13
1.8.13 1.8.12.3 1.8.12.2 1.8.12.1 1.8.12 1.8.11.3 1.8.11.2 1.8.11.1 1.8.11 1.6.6 1.6.60 1.6.7 1.6.8 1.6.9 1.7.0 1.7.0.1 1.7.0.11 1.7.0.12 1.7.0.14 1.7.0.2 1.7.0.3 1.7.0.5 1.7.0.6 1.7.0.7 1.7.0.9 All 211 releases
charitable / assets / css / admin / charitable-admin-dashboard.css

charitable-admin-dashboard.css in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.13, at assets/css/admin/charitable-admin-dashboard.css

2,165 lines 63.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Charitable Admin Dashboard V2 Styles
3 *
4 * @package Charitable/Admin/Dashboard V2
5 * @since 1.8.1
6 * @version 1.8.1
7 */
8 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap");
9 /* V2 Dashboard Specific Styles */
10 .charitable_page_charitable-dashboard #charitable-dashboard-v2 .tablenav {
11 font-family: "Inter", sans-serif !important;
12 min-height: 30px;
13 height: auto;
14 margin-top: 0;
15 margin-bottom: 0;
16 }
17 .charitable_page_charitable-dashboard #charitable-dashboard-v2 .tablenav .alignleft,
18 .charitable_page_charitable-dashboard #charitable-dashboard-v2 .tablenav .alignright {
19 margin-top: 10px;
20 margin-bottom: 10px;
21 }
22
23 /* V2 Dashboard Header */
24 .charitable-dashboard-v2-header {
25 margin-top: 40px;
26 margin-bottom: 40px;
27 }
28 .charitable-dashboard-v2-header .charitable-dashboard-v2-header-content {
29 display: flex;
30 justify-content: space-between;
31 align-items: center;
32 max-width: 1172px;
33 margin: 0 auto;
34 }
35 .charitable-dashboard-v2-header .charitable-dashboard-v2-header-content .charitable-dashboard-v2-header-left h1 {
36 margin: 0;
37 color: #303442;
38 font-size: 24px;
39 font-weight: 600;
40 line-height: 1.2;
41 }
42 .charitable-dashboard-v2-header .charitable-dashboard-v2-header-content .charitable-dashboard-v2-header-right .charitable-button {
43 background-color: #5AA152;
44 border-color: #5AA152;
45 color: white;
46 padding: 8px 16px;
47 font-weight: 500;
48 }
49 .charitable-dashboard-v2-header .charitable-dashboard-v2-header-content .charitable-dashboard-v2-header-right .charitable-button:hover {
50 background-color: #43833b;
51 border-color: #43833b;
52 }
53
54 /* Header Bar Styles */
55 .charitable-dashboard-v2-header-bar {
56 display: flex;
57 justify-content: space-between;
58 align-items: center;
59 width: calc(100% - 60px);
60 height: 80px;
61 }
62 .charitable-dashboard-v2-header-bar .charitable-dashboard-v2-header-bar-left {
63 display: flex;
64 align-items: center;
65 }
66 .charitable-dashboard-v2-header-bar .charitable-dashboard-v2-header-bar-right {
67 display: flex;
68 align-items: center;
69 }
70
71 /* V2 Dashboard Chart Styles */
72 .charitable-dashboard-v2-header-bar-chart {
73 width: 100%;
74 height: 300px;
75 margin-top: 20px;
76 }
77 .charitable-dashboard-v2-header-bar-chart .charitable-headline-graph {
78 width: 100%;
79 height: 100%;
80 }
81 .charitable-dashboard-v2-header-bar-chart .charitable-headline-graph .apexcharts-canvas {
82 margin: 0 auto;
83 }
84
85 /* Time Period Filter Dropdown */
86 #time-period-filter {
87 font-size: 13px;
88 line-height: 29px;
89 font-weight: 500;
90 max-width: none;
91 padding: 5px 30px 5px 12px;
92 background-color: #F9F9FA;
93 color: #52545F;
94 border: 1px solid #E4E4E7;
95 border-radius: 4px;
96 height: 40px;
97 font-family: "Inter", sans-serif;
98 }
99
100 /* Download Summary Button */
101 .charitable-dashboard-v2-download-button {
102 font-family: Inter;
103 font-weight: 600;
104 font-style: normal;
105 font-size: 13px;
106 line-height: 100%;
107 letter-spacing: 0px;
108 color: rgba(14, 33, 33, 0.7);
109 background: white;
110 border: 1px solid rgba(14, 33, 33, 0.14);
111 border-radius: 4px;
112 padding: 10px 16px;
113 height: 40px;
114 cursor: pointer;
115 transition: all 0.2s ease;
116 display: flex;
117 align-items: center;
118 gap: 8px;
119 }
120 .charitable-dashboard-v2-download-button:hover {
121 background: rgba(14, 33, 33, 0.02);
122 border-color: rgba(14, 33, 33, 0.2);
123 }
124
125 /* Download Icon */
126 .charitable-dashboard-v2-download-icon {
127 width: 15px;
128 height: 14px;
129 color: rgba(14, 33, 33, 0.7);
130 }
131
132 /* Print Button */
133 .charitable-dashboard-v2-print-button {
134 display: flex;
135 align-items: center;
136 justify-content: center;
137 width: 40px;
138 height: 40px;
139 padding: 0;
140 background: #fff;
141 border: 1px solid #E4E4E7;
142 border-radius: 4px;
143 cursor: pointer;
144 transition: all 0.2s ease;
145 }
146 .charitable-dashboard-v2-print-button:hover {
147 background: #F9F9FA;
148 border-color: rgba(14, 33, 33, 0.2);
149 }
150 .charitable-dashboard-v2-print-button:focus {
151 outline: none;
152 box-shadow: 0 0 0 1px #E4E4E7;
153 }
154 .charitable-dashboard-v2-print-button .charitable-dashboard-v2-print-icon {
155 display: block;
156 width: 16px;
157 height: 16px;
158 }
159
160 /* Print form inline */
161 #charitable-dashboard-v2-print {
162 display: flex;
163 align-items: center;
164 margin: 0;
165 padding: 0;
166 }
167
168 /* Remove padding for stats row section */
169 .charitable-dashboard-v2-stats-row-section {
170 padding: 0 0 20px 0 !important;
171 }
172 .charitable-dashboard-v2-stats-row-section .charitable-dashboard-v2-header-bar {
173 padding: 0 30px;
174 }
175
176 /* Stats Row Styles */
177 .charitable-dashboard-v2-stats-row {
178 display: flex;
179 width: 100%;
180 border-top: 1px solid rgba(25, 29, 45, 0.15);
181 border-bottom: 1px solid rgba(25, 29, 45, 0.15);
182 }
183
184 .charitable-dashboard-v2-stat-item {
185 flex: 1;
186 padding: 30px;
187 border-right: 1px solid rgba(25, 29, 45, 0.15);
188 text-align: left;
189 }
190 .charitable-dashboard-v2-stat-item:last-child {
191 border-right: none;
192 }
193
194 .charitable-dashboard-v2-stat-title {
195 font-family: Inter;
196 font-weight: 500;
197 font-style: normal;
198 font-size: 12px;
199 line-height: 100%;
200 letter-spacing: 0px;
201 color: rgba(25, 29, 45, 0.6);
202 margin-bottom: 8px;
203 }
204
205 .charitable-dashboard-v2-stat-amount {
206 font-family: Inter;
207 font-weight: 600;
208 font-style: normal;
209 font-size: 20px;
210 line-height: 100%;
211 letter-spacing: 0px;
212 color: rgba(25, 29, 45, 0.8);
213 display: flex;
214 align-items: center;
215 gap: 8px;
216 }
217
218 /* Stat Change Indicator */
219 .charitable-dashboard-v2-stat-change {
220 display: flex;
221 align-items: center;
222 gap: 4px;
223 font-family: Inter;
224 font-weight: 600;
225 font-style: normal;
226 font-size: 13px;
227 line-height: 100%;
228 letter-spacing: 0px;
229 color: rgb(49, 148, 77);
230 }
231 .charitable-dashboard-v2-stat-change.charitable-dashboard-v2-stat-change-positive {
232 color: rgb(49, 148, 77);
233 }
234 .charitable-dashboard-v2-stat-change.charitable-dashboard-v2-stat-change-negative {
235 color: rgb(220, 38, 38);
236 }
237 .charitable-dashboard-v2-stat-change.charitable-dashboard-v2-stat-change-zero {
238 color: rgb(0, 0, 0);
239 }
240
241 /* V2 Dashboard Layout */
242 .charitable-dashboard-v2-layout {
243 display: flex;
244 gap: 20px;
245 margin-top: 20px;
246 max-width: 1172px;
247 margin-left: auto;
248 margin-right: auto;
249 }
250 .charitable-dashboard-v2-layout .charitable-dashboard-v2-left-column {
251 flex: 0 0 700px;
252 min-width: 0;
253 display: flex;
254 flex-direction: column;
255 gap: 20px;
256 }
257 .charitable-dashboard-v2-layout .charitable-dashboard-v2-right-column {
258 flex: 0 0 452px;
259 min-width: 0;
260 display: flex;
261 flex-direction: column;
262 gap: 20px;
263 }
264 @media (max-width: 1200px) {
265 .charitable-dashboard-v2-layout {
266 flex-direction: column;
267 }
268 .charitable-dashboard-v2-layout .charitable-dashboard-v2-left-column,
269 .charitable-dashboard-v2-layout .charitable-dashboard-v2-right-column {
270 flex: 1 1 100%;
271 }
272 }
273
274 /* V2 Dashboard Sections */
275 .charitable-dashboard-v2-section {
276 background: white;
277 border: 1px solid rgba(24, 36, 69, 0.1);
278 border-radius: 4px;
279 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
280 min-height: 120px;
281 overflow: hidden;
282 }
283 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header {
284 height: 70px;
285 background: white;
286 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
287 display: flex;
288 align-items: center;
289 justify-content: space-between;
290 padding: 0 25px;
291 }
292 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header h3 {
293 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
294 font-weight: 700;
295 font-style: normal;
296 font-size: 17px;
297 line-height: 130%;
298 letter-spacing: 0px;
299 color: rgba(25, 29, 45, 0.9);
300 margin: 0;
301 }
302 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-toggle {
303 display: flex;
304 align-items: center;
305 justify-content: center;
306 width: 24px;
307 height: 24px;
308 text-decoration: none;
309 color: rgba(25, 29, 45, 0.6);
310 transition: color 0.2s ease;
311 }
312 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-toggle:hover {
313 color: rgba(25, 29, 45, 0.9);
314 }
315 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-toggle .charitable-dashboard-v2-angle-down {
316 font-size: 16px;
317 transition: transform 0.3s ease;
318 }
319 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav {
320 display: flex;
321 align-items: center;
322 height: 100%;
323 width: 100%;
324 }
325 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav .charitable-dashboard-v2-tab-nav-item {
326 display: flex;
327 align-items: center;
328 height: 100%;
329 padding: 0 30px;
330 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
331 font-weight: 700;
332 font-style: normal;
333 font-size: 14px;
334 line-height: 130%;
335 letter-spacing: 0px;
336 color: rgba(25, 29, 45, 0.5);
337 text-decoration: none;
338 border-right: 1px solid rgba(24, 36, 69, 0.1);
339 transition: color 0.2s ease;
340 cursor: pointer;
341 }
342 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav .charitable-dashboard-v2-tab-nav-item:last-child {
343 border-right: none;
344 }
345 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav .charitable-dashboard-v2-tab-nav-item:hover {
346 color: rgba(25, 29, 45, 0.7);
347 }
348 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav .charitable-dashboard-v2-tab-nav-item.charitable-dashboard-v2-tab-nav-active {
349 color: rgb(51, 132, 42);
350 border-bottom-color: rgb(51, 132, 42);
351 }
352 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content {
353 padding: 0 0 20px 0;
354 transition: all 0.3s ease;
355 overflow: hidden;
356 }
357 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content p {
358 margin: 0;
359 color: #52545f;
360 font-size: 14px;
361 line-height: 1.5;
362 }
363 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content:has(.charitable-dashboard-v2-enhance-grid) {
364 padding: 0;
365 }
366 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content:has(.charitable-dashboard-v2-latest-updates-background) {
367 padding-top: 0;
368 }
369 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content .charitable-dashboard-v2-tab-content {
370 display: none;
371 }
372 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content .charitable-dashboard-v2-tab-content.charitable-dashboard-v2-tab-content-active {
373 display: block;
374 }
375 .charitable-dashboard-v2-section.charitable-dashboard-v2-collapsible .charitable-dashboard-v2-section-content {
376 max-height: none;
377 opacity: 1;
378 transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
379 }
380 .charitable-dashboard-v2-section.charitable-dashboard-v2-collapsible.charitable-dashboard-v2-collapsed .charitable-dashboard-v2-section-content {
381 max-height: 0 !important;
382 padding-top: 0 !important;
383 padding-bottom: 0 !important;
384 opacity: 0;
385 overflow: hidden;
386 }
387 .charitable-dashboard-v2-section.charitable-dashboard-v2-collapsible.charitable-dashboard-v2-collapsed .charitable-dashboard-v2-toggle .charitable-dashboard-v2-angle-down {
388 transform: rotate(-90deg);
389 }
390 .charitable-dashboard-v2-section:not(.charitable-dashboard-v2-right-column .charitable-dashboard-v2-section) {
391 padding: 20px;
392 }
393 .charitable-dashboard-v2-section:not(.charitable-dashboard-v2-right-column .charitable-dashboard-v2-section) h3 {
394 margin: 0 0 15px 0;
395 color: #303442;
396 font-size: 18px;
397 font-weight: 600;
398 }
399 .charitable-dashboard-v2-section:not(.charitable-dashboard-v2-right-column .charitable-dashboard-v2-section) p {
400 margin: 0;
401 color: #52545f;
402 font-size: 14px;
403 line-height: 1.5;
404 }
405 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns {
406 padding: 0 !important;
407 }
408 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns .charitable-dashboard-v2-section-header {
409 padding: 0;
410 }
411 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns .charitable-dashboard-v2-section-content {
412 padding: 0 0 20px 0 !important;
413 }
414 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns .charitable-dashboard-v2-empty-state {
415 padding: 30px 30px 10px;
416 }
417 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content {
418 display: flex;
419 justify-content: center;
420 margin-bottom: 30px;
421 padding: 0 25px;
422 }
423 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items {
424 width: 100%;
425 }
426 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item {
427 display: flex;
428 align-items: center;
429 padding: 15px 0;
430 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
431 }
432 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item:first-child {
433 border-top: none;
434 padding-top: 0px;
435 }
436 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item:last-child {
437 border-bottom: none;
438 padding-bottom: 0;
439 }
440 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item .charitable-dashboard-v2-quick-access-icon {
441 width: 24px;
442 height: 24px;
443 flex-shrink: 0;
444 margin-right: 15px;
445 display: flex;
446 align-items: center;
447 justify-content: center;
448 }
449 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item .charitable-dashboard-v2-quick-access-title {
450 flex: 1;
451 }
452 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item .charitable-dashboard-v2-quick-access-title a {
453 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
454 font-weight: 600;
455 font-style: normal;
456 font-size: 14px;
457 line-height: 160%;
458 letter-spacing: 0px;
459 color: rgba(25, 29, 45, 0.8);
460 text-decoration: none;
461 }
462 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item .charitable-dashboard-v2-quick-access-title a:hover {
463 text-decoration: underline;
464 }
465 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer {
466 height: 70px;
467 background: rgb(254, 248, 243);
468 margin: 20px 0 0 0;
469 display: flex;
470 align-items: center;
471 }
472 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content {
473 display: flex;
474 justify-content: space-between;
475 align-items: center;
476 width: 100%;
477 padding: 0 30px;
478 }
479 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content .charitable-dashboard-v2-quick-access-footer-left .charitable-dashboard-v2-rate-link {
480 display: flex;
481 align-items: center;
482 gap: 8px;
483 text-decoration: none;
484 }
485 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content .charitable-dashboard-v2-quick-access-footer-left .charitable-dashboard-v2-rate-link .charitable-dashboard-v2-rate-text {
486 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
487 font-weight: 500;
488 font-size: 14px;
489 line-height: 16px;
490 letter-spacing: 0px;
491 text-align: right;
492 vertical-align: middle;
493 color: rgb(43, 102, 209);
494 }
495 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content .charitable-dashboard-v2-quick-access-footer-left .charitable-dashboard-v2-rate-link .charitable-dashboard-v2-arrow-icon {
496 color: rgb(43, 102, 209);
497 width: 16px;
498 height: 16px;
499 flex-shrink: 0;
500 }
501 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content .charitable-dashboard-v2-quick-access-footer-left .charitable-dashboard-v2-rate-link:hover .charitable-dashboard-v2-rate-text {
502 text-decoration: underline;
503 }
504 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content .charitable-dashboard-v2-quick-access-footer-right .charitable-dashboard-v2-stars {
505 display: flex;
506 gap: 3px;
507 }
508 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content .charitable-dashboard-v2-quick-access-footer-right .charitable-dashboard-v2-stars .charitable-dashboard-v2-star {
509 color: #FFD700;
510 font-size: 18px;
511 line-height: 1;
512 }
513 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid {
514 display: grid;
515 grid-template-columns: 1fr 1fr;
516 grid-template-rows: 1fr 1fr;
517 gap: 1px;
518 background: rgba(24, 36, 69, 0.1);
519 margin: 0;
520 }
521 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item {
522 background: white;
523 padding: 20px;
524 }
525 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-header {
526 display: flex;
527 align-items: center;
528 gap: 10px;
529 margin-bottom: 15px;
530 }
531 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-header .charitable-dashboard-v2-enhance-grid-icon {
532 width: 20px;
533 height: 20px;
534 flex-shrink: 0;
535 }
536 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-header .charitable-dashboard-v2-enhance-grid-title {
537 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
538 font-weight: 700;
539 font-style: normal;
540 font-size: 14px;
541 line-height: 130%;
542 letter-spacing: 0px;
543 color: rgba(25, 29, 45, 0.9);
544 margin: 0;
545 }
546 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-description {
547 margin: 0 0 15px 0;
548 color: #52545f;
549 font-size: 14px;
550 line-height: 1.5;
551 }
552 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-button {
553 background: white;
554 border: 1px solid rgba(14, 33, 33, 0.14);
555 border-radius: 4px;
556 padding: 8px 16px;
557 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
558 font-weight: 500;
559 font-style: normal;
560 font-size: 13px;
561 line-height: 100%;
562 letter-spacing: 0px;
563 color: rgba(14, 33, 33, 0.8);
564 cursor: pointer;
565 transition: all 0.2s ease;
566 }
567 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-button:hover {
568 background: rgba(14, 33, 33, 0.05);
569 border-color: rgba(14, 33, 33, 0.2);
570 }
571 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-button.charitable-dashboard-v2-activate-button {
572 background: #eaa251;
573 border-color: #eaa251;
574 color: white;
575 }
576 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item .charitable-dashboard-v2-enhance-grid-content .charitable-dashboard-v2-enhance-grid-button.charitable-dashboard-v2-activate-button:hover {
577 background: #d89447;
578 border-color: #d89447;
579 }
580 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background {
581 background: rgb(254, 248, 243);
582 margin: 0;
583 padding: 20px 25px;
584 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
585 }
586 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex {
587 display: flex;
588 gap: 10px;
589 align-items: flex-start;
590 }
591 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-icon {
592 flex-shrink: 0;
593 }
594 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-icon .charitable-dashboard-v2-latest-updates-icon-placeholder {
595 width: 26px;
596 height: 26px;
597 }
598 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-content {
599 flex: 1;
600 }
601 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-content .charitable-dashboard-v2-latest-updates-headline {
602 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
603 font-weight: 600;
604 font-style: normal;
605 font-size: 15px;
606 line-height: 22px;
607 letter-spacing: 0px;
608 color: rgba(25, 29, 45, 0.9);
609 margin: -4px 0 15px 0;
610 }
611 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-content .charitable-dashboard-v2-latest-updates-features {
612 display: flex;
613 flex-wrap: wrap;
614 gap: 5px 12px;
615 }
616 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-content .charitable-dashboard-v2-latest-updates-features .charitable-dashboard-v2-latest-updates-feature {
617 display: inline-flex;
618 align-items: center;
619 gap: 6px;
620 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
621 font-weight: 500;
622 font-style: normal;
623 font-size: 14px;
624 line-height: 160%;
625 letter-spacing: 0px;
626 color: rgba(25, 29, 45, 0.9);
627 }
628 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-content .charitable-dashboard-v2-latest-updates-features .charitable-dashboard-v2-latest-updates-feature .charitable-dashboard-v2-latest-updates-checkmark {
629 width: 9px;
630 height: 7px;
631 flex-shrink: 0;
632 }
633 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-content .charitable-dashboard-v2-latest-updates-button {
634 background: rgb(90, 161, 82);
635 border: none;
636 border-radius: 4px;
637 padding: 10px 20px;
638 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
639 font-weight: 700;
640 font-size: 13px;
641 line-height: 16px;
642 letter-spacing: 0px;
643 text-align: center;
644 vertical-align: middle;
645 color: rgb(255, 255, 255);
646 cursor: pointer;
647 transition: all 0.2s ease;
648 }
649 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex .charitable-dashboard-v2-latest-updates-content .charitable-dashboard-v2-latest-updates-button:hover {
650 background: rgb(69, 123, 63);
651 }
652 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer {
653 height: 70px;
654 background: white;
655 margin: 0;
656 display: flex;
657 align-items: center;
658 border-top: 1px solid rgba(24, 36, 69, 0.1);
659 }
660 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer .charitable-dashboard-v2-latest-updates-footer-content {
661 display: flex;
662 justify-content: flex-start;
663 align-items: center;
664 width: 100%;
665 padding: 0 30px;
666 }
667 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer .charitable-dashboard-v2-latest-updates-footer-content .charitable-dashboard-v2-latest-updates-footer-left .charitable-dashboard-v2-blog-link {
668 display: flex;
669 align-items: center;
670 gap: 8px;
671 text-decoration: none;
672 transition: gap 0.3s ease;
673 }
674 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer .charitable-dashboard-v2-latest-updates-footer-content .charitable-dashboard-v2-latest-updates-footer-left .charitable-dashboard-v2-blog-link .charitable-dashboard-v2-blog-text {
675 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
676 font-weight: 500;
677 font-size: 14px;
678 line-height: 16px;
679 letter-spacing: 0px;
680 text-align: left;
681 vertical-align: middle;
682 color: rgb(43, 102, 209);
683 }
684 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer .charitable-dashboard-v2-latest-updates-footer-content .charitable-dashboard-v2-latest-updates-footer-left .charitable-dashboard-v2-blog-link .charitable-dashboard-v2-arrow-icon {
685 color: rgb(43, 102, 209);
686 width: 16px;
687 height: 16px;
688 flex-shrink: 0;
689 }
690 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer .charitable-dashboard-v2-latest-updates-footer-content .charitable-dashboard-v2-latest-updates-footer-left .charitable-dashboard-v2-blog-link:hover {
691 gap: 4px;
692 }
693 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer .charitable-dashboard-v2-latest-updates-footer-content .charitable-dashboard-v2-latest-updates-footer-left .charitable-dashboard-v2-blog-link:hover .charitable-dashboard-v2-blog-text {
694 text-decoration: underline;
695 }
696 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts {
697 margin-top: 35px;
698 margin-bottom: 15px;
699 padding: 0 25px;
700 }
701 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row {
702 display: flex;
703 flex-direction: row;
704 justify-content: space-between;
705 align-items: center;
706 margin-bottom: 40px;
707 }
708 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row:last-child {
709 margin-bottom: 0;
710 }
711 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left {
712 width: 282px;
713 }
714 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left .charitable-dashboard-v2-blog-post-timestamp {
715 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
716 font-weight: 500;
717 font-style: normal;
718 font-size: 13px;
719 line-height: 150%;
720 letter-spacing: 0px;
721 color: rgba(25, 29, 45, 0.6);
722 }
723 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left .charitable-dashboard-v2-blog-post-title {
724 margin: 0;
725 }
726 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left .charitable-dashboard-v2-blog-post-title a {
727 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
728 font-weight: 600;
729 font-style: normal;
730 font-size: 14px;
731 line-height: 170%;
732 letter-spacing: -0.25px;
733 color: rgba(25, 29, 45, 0.9);
734 text-decoration: none;
735 }
736 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left .charitable-dashboard-v2-blog-post-title a:hover {
737 text-decoration: underline;
738 }
739 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-right {
740 display: flex;
741 align-items: center;
742 }
743 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-right .charitable-dashboard-v2-blog-post-image-placeholder {
744 width: 106px;
745 height: 56px;
746 flex-shrink: 0;
747 }
748 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display {
749 display: flex;
750 gap: 10px;
751 align-items: flex-start;
752 margin-bottom: 20px;
753 }
754 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title {
755 display: flex;
756 align-items: center;
757 gap: 10px;
758 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
759 font-weight: 600;
760 font-style: normal;
761 font-size: 15px;
762 line-height: 22px;
763 letter-spacing: 0px;
764 color: rgba(25, 29, 45, 0.9);
765 margin: 0;
766 }
767 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title::before {
768 content: "";
769 width: 26px;
770 height: 26px;
771 flex-shrink: 0;
772 background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23f56565'/%3E%3Cpath d='M13 6.5L19.5 17.5H6.5L13 6.5Z' fill='white'/%3E%3Cpath d='M13 10.5V14.5' stroke='%23f56565' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='17' r='1' fill='%23f56565'/%3E%3C/svg%3E");
773 background-repeat: no-repeat;
774 background-position: center;
775 background-size: contain;
776 }
777 .charitable-dashboard-v2-section.no-update-alert .charitable-dashboard-v2-blog-posts {
778 margin-top: 0;
779 }
780 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display {
781 display: flex;
782 gap: 10px;
783 align-items: flex-start;
784 margin-bottom: 20px;
785 }
786 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title {
787 display: flex;
788 align-items: center;
789 gap: 10px;
790 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
791 font-weight: 600;
792 font-style: normal;
793 font-size: 15px;
794 line-height: 22px;
795 letter-spacing: 0px;
796 color: rgba(25, 29, 45, 0.9);
797 margin: 0;
798 }
799 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title::before {
800 content: "";
801 width: 26px;
802 height: 26px;
803 flex-shrink: 0;
804 background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23f56565'/%3E%3Cpath d='M13 6.5L19.5 17.5H6.5L13 6.5Z' fill='white'/%3E%3Cpath d='M13 10.5V14.5' stroke='%23f56565' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='17' r='1' fill='%23f56565'/%3E%3C/svg%3E");
805 background-repeat: no-repeat;
806 background-position: center;
807 background-size: contain;
808 }
809 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer {
810 height: 70px;
811 background: white;
812 margin: 0;
813 display: flex;
814 align-items: center;
815 border-top: 1px solid rgba(24, 36, 69, 0.1);
816 }
817 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer .charitable-dashboard-v2-enhance-campaign-footer-content {
818 display: flex;
819 justify-content: flex-start;
820 align-items: center;
821 width: 100%;
822 padding: 0 30px;
823 }
824 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer .charitable-dashboard-v2-enhance-campaign-footer-content .charitable-dashboard-v2-enhance-campaign-footer-left .charitable-dashboard-v2-addons-link {
825 display: flex;
826 align-items: center;
827 gap: 8px;
828 text-decoration: none;
829 }
830 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer .charitable-dashboard-v2-enhance-campaign-footer-content .charitable-dashboard-v2-enhance-campaign-footer-left .charitable-dashboard-v2-addons-link .charitable-dashboard-v2-addons-text {
831 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
832 font-weight: 500;
833 font-size: 14px;
834 line-height: 16px;
835 letter-spacing: 0px;
836 text-align: left;
837 vertical-align: middle;
838 color: rgb(43, 102, 209);
839 }
840 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer .charitable-dashboard-v2-enhance-campaign-footer-content .charitable-dashboard-v2-enhance-campaign-footer-left .charitable-dashboard-v2-addons-link .charitable-dashboard-v2-arrow-icon {
841 color: rgb(43, 102, 209);
842 width: 16px;
843 height: 16px;
844 flex-shrink: 0;
845 }
846 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer .charitable-dashboard-v2-enhance-campaign-footer-content .charitable-dashboard-v2-enhance-campaign-footer-left .charitable-dashboard-v2-addons-link:hover .charitable-dashboard-v2-addons-text {
847 text-decoration: underline;
848 }
849 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-title {
850 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
851 font-weight: 700;
852 font-style: normal;
853 font-size: 20px;
854 line-height: 33px;
855 letter-spacing: 0.01em;
856 text-align: center;
857 color: rgba(25, 29, 45, 0.8);
858 margin: 0;
859 padding-top: 10px;
860 }
861 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features {
862 display: flex;
863 gap: 10px 10px;
864 margin: 30px 0;
865 justify-content: center;
866 }
867 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-column {
868 flex: 1;
869 max-width: 300px;
870 display: flex;
871 flex-direction: column;
872 gap: 20px;
873 }
874 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-feature {
875 display: flex;
876 align-items: flex-start;
877 gap: 12px;
878 }
879 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-feature .charitable-dashboard-v2-upgrade-checkmark {
880 width: 18px;
881 height: 18px;
882 flex-shrink: 0;
883 margin-top: 2px;
884 }
885 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-feature .charitable-dashboard-v2-upgrade-feature-text {
886 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
887 font-weight: 500;
888 font-size: 14px;
889 line-height: 150%;
890 letter-spacing: 0px;
891 color: rgba(25, 29, 45, 0.8);
892 margin: 0;
893 }
894 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions {
895 display: flex;
896 flex-direction: column;
897 align-items: center;
898 gap: 20px;
899 margin-top: 30px;
900 padding-bottom: 20px;
901 }
902 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-upgrade-button {
903 background: rgb(218, 144, 33);
904 border: none;
905 border-radius: 4px;
906 padding: 22px 42px;
907 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
908 font-weight: 600;
909 font-size: 19px;
910 line-height: 100%;
911 letter-spacing: 0px;
912 color: white;
913 cursor: pointer;
914 transition: background-color 0.2s ease;
915 text-decoration: none;
916 }
917 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-upgrade-button:hover {
918 background: #d89447 !important;
919 text-decoration: none;
920 }
921 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-learn-more-link {
922 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
923 font-weight: 600;
924 font-size: 14px;
925 line-height: 150%;
926 letter-spacing: 0px;
927 text-align: center;
928 text-decoration: underline;
929 color: rgba(25, 29, 45, 0.5);
930 transition: color 0.2s ease;
931 }
932 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-learn-more-link:hover {
933 color: rgba(25, 29, 45, 0.7);
934 }
935
936 /* Campaign Table Column Widths */
937 .charitable-dashboard-v2-table th:nth-child(1),
938 .charitable-dashboard-v2-table td:nth-child(1) {
939 width: 205px;
940 padding-left: 30px;
941 }
942
943 .charitable-dashboard-v2-table th:nth-child(2),
944 .charitable-dashboard-v2-table td:nth-child(2) {
945 width: 120px;
946 }
947
948 .charitable-dashboard-v2-table th:nth-child(3),
949 .charitable-dashboard-v2-table td:nth-child(3) {
950 width: 120px;
951 }
952
953 .charitable-dashboard-v2-table th:nth-child(4),
954 .charitable-dashboard-v2-table td:nth-child(4) {
955 width: auto;
956 }
957
958 .charitable-dashboard-v2-table th:nth-child(5),
959 .charitable-dashboard-v2-table td:nth-child(5) {
960 width: auto;
961 text-align: center;
962 }
963
964 /* Campaign Title Styling */
965 .campaign-title {
966 display: flex;
967 align-items: center;
968 gap: 8px;
969 }
970 .campaign-title a {
971 font-family: Inter;
972 font-weight: 500;
973 font-style: normal;
974 font-size: 15px;
975 line-height: 160%;
976 letter-spacing: 0px;
977 color: rgb(25, 29, 45);
978 text-decoration: none;
979 }
980 .campaign-title a:hover {
981 color: rgb(76, 123, 207);
982 }
983
984 /* Goal and Reach Text Styling */
985 .charitable-dashboard-v2-table td:nth-child(2),
986 .charitable-dashboard-v2-table td:nth-child(3) {
987 font-family: Inter;
988 font-weight: 500;
989 font-style: normal;
990 font-size: 14px;
991 line-height: 100%;
992 letter-spacing: 0px;
993 color: rgba(25, 29, 45, 0.8);
994 }
995
996 /* Status Badges */
997 .status-badge {
998 display: inline-block;
999 padding: 4px 12px;
1000 border-radius: 12px;
1001 font-family: Inter;
1002 font-weight: 500;
1003 font-size: 12px;
1004 line-height: 130%;
1005 color: rgba(25, 29, 45, 0.8);
1006 }
1007 .status-badge.status-active {
1008 background: rgba(76, 123, 207, 0.1);
1009 color: rgb(76, 123, 207);
1010 }
1011 .status-badge.status-unsuccessful {
1012 background: rgba(234, 78, 100, 0.1);
1013 color: rgb(234, 78, 100);
1014 }
1015 .status-badge.status-cancelled {
1016 background: rgba(153, 153, 153, 0.1);
1017 color: rgb(153, 153, 153);
1018 }
1019
1020 /* Progress Circle */
1021 .progress-circle {
1022 position: relative;
1023 display: inline-flex;
1024 align-items: center;
1025 justify-content: center;
1026 width: 40px;
1027 height: 40px;
1028 margin: 0 auto;
1029 }
1030 .progress-circle svg {
1031 position: absolute;
1032 top: 0;
1033 left: 0;
1034 }
1035
1036 .progress-text {
1037 font-family: Inter;
1038 font-weight: 600;
1039 font-style: normal;
1040 font-size: 12px;
1041 line-height: 160%;
1042 letter-spacing: 0px;
1043 color: rgba(25, 29, 45, 0.8);
1044 z-index: 1;
1045 }
1046
1047 /* Dashboard v2 Notifications */
1048 .charitable-dashboard-v2-notifications {
1049 display: block;
1050 margin-top: 20px;
1051 max-width: 1172px;
1052 margin-left: auto;
1053 margin-right: auto;
1054 padding: 0;
1055 position: relative;
1056 background: white;
1057 border: 1px solid rgba(24, 36, 69, 0.1);
1058 border-radius: 4px;
1059 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
1060 box-sizing: border-box;
1061 }
1062 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar {
1063 position: absolute;
1064 top: 12px;
1065 right: 12px;
1066 display: flex;
1067 align-items: center;
1068 gap: 8px;
1069 z-index: 1;
1070 }
1071 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-dashboard-notification-navigation {
1072 position: static;
1073 top: auto;
1074 right: auto;
1075 display: flex;
1076 align-items: center;
1077 gap: 2px;
1078 min-height: auto;
1079 padding: 0;
1080 }
1081 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-dashboard-notification-navigation a {
1082 position: static;
1083 top: auto;
1084 font-size: 24px;
1085 line-height: 1;
1086 padding: 2px 4px;
1087 }
1088 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-dashboard-notification-navigation .charitable-dashboard-notification-counter {
1089 font-size: 13px;
1090 color: #666;
1091 white-space: nowrap;
1092 padding: 0 2px;
1093 line-height: 1;
1094 }
1095 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-remove-dashboard-notification {
1096 position: static;
1097 top: auto;
1098 right: auto;
1099 }
1100 .charitable-dashboard-v2-notifications .charitable-dashboard-notification {
1101 margin: 0;
1102 border: 0;
1103 background: white;
1104 border-radius: 0;
1105 box-shadow: none;
1106 }
1107 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message {
1108 padding: 15px 20px;
1109 }
1110 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-dashboard-notification-headline {
1111 margin: 0 0 10px 0;
1112 font-size: 16px;
1113 font-weight: 600;
1114 color: #1d2327;
1115 display: flex;
1116 align-items: center;
1117 gap: 6px;
1118 }
1119 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-notification-type-icon {
1120 font-size: 18px;
1121 width: 18px;
1122 height: 18px;
1123 line-height: 1;
1124 flex-shrink: 0;
1125 }
1126 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message p {
1127 margin: 0 0 10px 0;
1128 line-height: 1.5;
1129 }
1130 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message ul {
1131 margin: 10px 0;
1132 padding-left: 20px;
1133 }
1134 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message ul li {
1135 margin-bottom: 5px;
1136 }
1137 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-notification-cta-button {
1138 display: inline-block;
1139 padding: 8px 16px;
1140 background-color: #5aa152;
1141 color: #fff;
1142 font-size: 13px;
1143 font-weight: 600;
1144 line-height: 1.5;
1145 text-decoration: none;
1146 border-radius: 4px;
1147 margin-top: 5px;
1148 }
1149 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-notification-cta-button:hover {
1150 background-color: #4a8a44;
1151 color: #fff;
1152 }
1153 .charitable-dashboard-v2-notifications .charitable-dashboard-notification[data-notification-type=notice] .charitable-notification-type-icon {
1154 color: #00a0d2;
1155 }
1156 .charitable-dashboard-v2-notifications .charitable-dashboard-notification[data-notification-type=warning] .charitable-notification-type-icon {
1157 color: #ffb900;
1158 }
1159 .charitable-dashboard-v2-notifications .charitable-dashboard-notification[data-notification-type=error] .charitable-notification-type-icon {
1160 color: #dc3232;
1161 }
1162 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-bar {
1163 display: flex;
1164 justify-content: space-between;
1165 align-items: center;
1166 padding: 10px 15px;
1167 }
1168 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-bar .charitable-remove-dashboard-notification {
1169 color: #666;
1170 text-decoration: none;
1171 font-size: 18px;
1172 line-height: 1;
1173 }
1174 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-bar .charitable-remove-dashboard-notification:hover {
1175 color: #000;
1176 }
1177
1178 /* Future V2 Dashboard Components */
1179 /* Enhance Grid Icon Vertical Centering */
1180 .charitable-dashboard-v2-enhance-grid-icon {
1181 display: flex;
1182 align-items: center;
1183 justify-content: center;
1184 }
1185
1186 /* Basic Table Styles */
1187 .charitable-dashboard-v2-table {
1188 width: 100%;
1189 border-collapse: collapse;
1190 }
1191 .charitable-dashboard-v2-table thead th {
1192 background: rgba(25, 29, 45, 0.02);
1193 font-family: Inter;
1194 font-weight: 500;
1195 font-style: normal;
1196 font-size: 13px;
1197 line-height: 130%;
1198 letter-spacing: 0px;
1199 color: rgba(25, 29, 45, 0.5);
1200 padding: 16px 12px;
1201 text-align: left;
1202 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
1203 }
1204 .charitable-dashboard-v2-table tbody td {
1205 padding: 16px 12px;
1206 border-bottom: 1px solid rgba(24, 36, 69, 0.05);
1207 }
1208 .charitable-dashboard-v2-table tbody tr:last-child td {
1209 border-bottom: none;
1210 }
1211
1212 /* Donation Table Styles */
1213 .charitable-dashboard-v2-table-donations {
1214 margin-top: 0;
1215 }
1216
1217 .charitable-dashboard-v2-table-donations th {
1218 background-color: rgb(248, 250, 252);
1219 border-bottom: 1px solid rgb(226, 232, 240);
1220 padding: 16px 20px;
1221 text-align: left;
1222 font-family: Inter;
1223 font-weight: 600;
1224 font-size: 14px;
1225 line-height: 140%;
1226 color: rgba(25, 29, 45, 0.8);
1227 }
1228
1229 .charitable-dashboard-v2-table-donations th:last-child {
1230 text-align: right;
1231 padding: 16px 35px;
1232 }
1233
1234 .charitable-dashboard-v2-table-donations th:first-child,
1235 .charitable-dashboard-v2-table-donations td:first-child {
1236 width: calc(100% - 120px) !important;
1237 }
1238
1239 .charitable-dashboard-v2-table-donations th:last-child,
1240 .charitable-dashboard-v2-table-donations td:last-child {
1241 width: auto !important;
1242 }
1243
1244 .charitable-dashboard-v2-table-donations tr {
1245 transition: background-color 0.2s ease;
1246 }
1247
1248 .charitable-dashboard-v2-table-donations tr:hover {
1249 background-color: rgba(248, 250, 252, 0.8);
1250 }
1251
1252 .charitable-dashboard-v2-table tr {
1253 transition: background-color 0.2s ease;
1254 }
1255
1256 .charitable-dashboard-v2-table tr:hover {
1257 background-color: rgba(248, 250, 252, 0.8);
1258 }
1259
1260 .charitable-dashboard-v2-table-donations td {
1261 padding: 20px;
1262 border-bottom: 1px solid rgb(226, 232, 240);
1263 vertical-align: top;
1264 }
1265
1266 .charitable-dashboard-v2-table-donations td:last-child {
1267 padding-right: 30px;
1268 text-align: right;
1269 vertical-align: middle;
1270 }
1271
1272 .donation-details {
1273 display: flex;
1274 flex-direction: column;
1275 gap: 8px;
1276 }
1277
1278 .donation-header {
1279 display: grid;
1280 grid-template-columns: 1fr 1fr;
1281 grid-template-rows: auto auto;
1282 gap: 8px 20px;
1283 align-items: start;
1284 text-align: left;
1285 }
1286
1287 .donation-name {
1288 font-family: Inter;
1289 font-weight: 500;
1290 font-style: normal;
1291 font-size: 15px;
1292 line-height: 160%;
1293 letter-spacing: 0px;
1294 color: rgb(25, 29, 45);
1295 }
1296
1297 .donation-name a {
1298 color: rgb(25, 29, 45);
1299 text-decoration: none;
1300 transition: color 0.2s ease;
1301 font-size: 11px;
1302 font-weight: 400;
1303 }
1304
1305 .donation-name a:hover {
1306 color: rgb(43, 102, 209);
1307 text-decoration: underline;
1308 }
1309
1310 .donation-timestamp {
1311 font-weight: 200;
1312 font-size: 11px;
1313 margin-top: 4px;
1314 margin-left: 0;
1315 }
1316
1317 .donation-amount {
1318 font-family: Inter;
1319 font-weight: 500;
1320 font-style: normal;
1321 font-size: 14px;
1322 line-height: 100%;
1323 letter-spacing: 0px;
1324 color: rgba(25, 29, 45, 0.8);
1325 }
1326
1327 .donation-method {
1328 font-family: Inter;
1329 font-weight: 500;
1330 font-style: normal;
1331 font-size: 14px;
1332 line-height: 100%;
1333 letter-spacing: 0px;
1334 color: rgba(25, 29, 45, 0.8);
1335 }
1336
1337 .donation-amount strong,
1338 .donation-method strong {
1339 font-weight: 700;
1340 }
1341
1342 .donation-method strong,
1343 .donation-amount strong {
1344 color: rgba(25, 29, 45, 0.8);
1345 }
1346
1347 .donation-method-stripe {
1348 color: #645aff !important;
1349 }
1350
1351 /* Comment Table Styles */
1352 .charitable-dashboard-v2-table-comments {
1353 margin-top: 0;
1354 }
1355
1356 /* Top Donors Table Styles */
1357 .charitable-dashboard-v2-table-donors {
1358 margin-top: 0;
1359 }
1360
1361 .charitable-dashboard-v2-table-donors th {
1362 background-color: rgb(248, 250, 252);
1363 border-bottom: 1px solid rgb(226, 232, 240);
1364 padding: 16px 20px;
1365 text-align: left;
1366 font-family: Inter;
1367 font-weight: 600;
1368 font-size: 13px;
1369 line-height: 16px;
1370 letter-spacing: 0px;
1371 color: rgba(25, 29, 45, 0.8);
1372 }
1373
1374 .charitable-dashboard-v2-table-donors td {
1375 padding: 16px 20px;
1376 border-bottom: 1px solid rgba(226, 232, 240, 0.5);
1377 vertical-align: middle;
1378 }
1379
1380 .donor-avatar img {
1381 border-radius: 50%;
1382 width: 40px;
1383 height: 40px;
1384 object-fit: cover;
1385 }
1386
1387 .donor-details {
1388 display: flex;
1389 flex-direction: column;
1390 gap: 4px;
1391 }
1392
1393 .donor-name {
1394 font-family: Inter;
1395 font-weight: 600;
1396 font-size: 14px;
1397 line-height: 160%;
1398 letter-spacing: 0px;
1399 color: rgba(25, 29, 45, 0.9);
1400 }
1401
1402 .donor-email {
1403 font-family: Inter;
1404 font-weight: 400;
1405 font-size: 13px;
1406 line-height: 150%;
1407 letter-spacing: 0px;
1408 color: rgba(25, 29, 45, 0.7);
1409 }
1410
1411 .donor-amount {
1412 font-family: Inter;
1413 font-weight: 600;
1414 font-size: 14px;
1415 line-height: 160%;
1416 letter-spacing: 0px;
1417 color: rgb(25, 29, 45);
1418 }
1419
1420 .donor-badge {
1421 display: inline-flex;
1422 align-items: center;
1423 padding: 4px 12px;
1424 border-radius: 12px;
1425 font-family: Inter;
1426 font-weight: 500;
1427 font-size: 12px;
1428 line-height: 16px;
1429 letter-spacing: 0px;
1430 text-align: center;
1431 }
1432
1433 .donor-badge.recurring {
1434 background-color: rgba(59, 130, 246, 0.1);
1435 color: rgb(59, 130, 246);
1436 }
1437
1438 .donor-badge.multiple {
1439 background-color: rgba(16, 185, 129, 0.1);
1440 color: rgb(16, 185, 129);
1441 }
1442
1443 .donor-badge.one-time {
1444 background-color: rgba(245, 158, 11, 0.1);
1445 color: rgb(245, 158, 11);
1446 }
1447
1448 /* Override first column width for donors table */
1449 .charitable-dashboard-v2-table.charitable-dashboard-v2-table-donors th:nth-child(1),
1450 .charitable-dashboard-v2-table.charitable-dashboard-v2-table-donors td:nth-child(1) {
1451 width: 30px !important;
1452 padding-left: 30px;
1453 }
1454
1455 /* Last column padding for top campaigns table */
1456 .charitable-dashboard-top-campaigns .charitable-dashboard-v2-table th:last-child,
1457 .charitable-dashboard-top-campaigns .charitable-dashboard-v2-table td:last-child {
1458 padding-right: 30px;
1459 }
1460
1461 /* Remove focus outline from tab navigation */
1462 .charitable-dashboard-v2-tab-nav-item:focus {
1463 outline: none;
1464 }
1465
1466 /* Remove focus outline from section header tabs */
1467 .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav-item:focus {
1468 outline: none;
1469 }
1470
1471 /* Getting Started Section link transitions */
1472 .charitable-dashboard-v2-quick-access-items a {
1473 position: relative;
1474 text-decoration: none !important;
1475 }
1476
1477 .charitable-dashboard-v2-quick-access-items a::before {
1478 content: "";
1479 position: absolute;
1480 width: 100%;
1481 height: 2px;
1482 border-radius: 2px;
1483 background-color: #18272F;
1484 bottom: -4px;
1485 left: 0;
1486 transform-origin: right;
1487 transform: scaleX(0);
1488 transition: transform 0.3s ease-in-out;
1489 }
1490
1491 .charitable-dashboard-v2-quick-access-items a:hover::before {
1492 transform-origin: left;
1493 transform: scaleX(1);
1494 }
1495
1496 /* Rate link arrow hover effect */
1497 .charitable-dashboard-v2-rate-link {
1498 display: flex !important;
1499 align-items: center !important;
1500 gap: 8px !important;
1501 transition: gap 0.3s ease !important;
1502 text-decoration: none !important;
1503 }
1504
1505 .charitable-dashboard-v2-rate-link:hover {
1506 gap: 4px !important;
1507 text-decoration: none !important;
1508 }
1509
1510 .charitable-dashboard-v2-rate-link .charitable-dashboard-v2-rate-text,
1511 .charitable-dashboard-v2-rate-link .charitable-dashboard-v2-arrow-icon {
1512 display: inline-block;
1513 }
1514
1515 /* View all addons link arrow hover effect */
1516 .charitable-dashboard-v2-addons-link {
1517 display: flex !important;
1518 align-items: center !important;
1519 gap: 8px !important;
1520 transition: gap 0.3s ease !important;
1521 text-decoration: none !important;
1522 }
1523
1524 .charitable-dashboard-v2-addons-link:hover {
1525 gap: 4px !important;
1526 text-decoration: none !important;
1527 }
1528
1529 .charitable-dashboard-v2-addons-link .charitable-dashboard-v2-addons-text,
1530 .charitable-dashboard-v2-addons-link .charitable-dashboard-v2-arrow-icon {
1531 display: inline-block;
1532 }
1533
1534 .charitable-dashboard-v2-table-container {
1535 max-height: 400px;
1536 overflow-y: auto;
1537 }
1538
1539 .charitable-dashboard-v2-table-comments th {
1540 background-color: rgb(248, 250, 252);
1541 border-bottom: 1px solid rgb(226, 232, 240);
1542 padding: 16px 20px;
1543 text-align: left;
1544 font-family: Inter;
1545 font-weight: 600;
1546 font-size: 14px;
1547 line-height: 140%;
1548 color: rgba(25, 29, 45, 0.8);
1549 }
1550
1551 .charitable-dashboard-v2-table-comments th:last-child {
1552 text-align: right;
1553 padding: 16px 35px;
1554 }
1555
1556 .charitable-dashboard-v2-table-comments th:first-child,
1557 .charitable-dashboard-v2-table-comments td:first-child {
1558 width: calc(100% - 120px) !important;
1559 }
1560
1561 .charitable-dashboard-v2-table-comments th:last-child,
1562 .charitable-dashboard-v2-table-comments td:last-child {
1563 width: auto !important;
1564 }
1565
1566 .charitable-dashboard-v2-table-comments tr {
1567 transition: background-color 0.2s ease;
1568 }
1569
1570 .charitable-dashboard-v2-table-comments tr:hover {
1571 background-color: rgba(248, 250, 252, 0.8);
1572 }
1573
1574 .charitable-dashboard-v2-table-comments td {
1575 padding: 20px;
1576 border-bottom: 1px solid rgb(226, 232, 240);
1577 vertical-align: top;
1578 }
1579
1580 .charitable-dashboard-v2-table-comments td:last-child {
1581 padding-right: 30px;
1582 text-align: right;
1583 vertical-align: middle;
1584 }
1585
1586 .comment-details {
1587 display: flex;
1588 flex-direction: column;
1589 gap: 8px;
1590 }
1591
1592 .comment-header {
1593 display: flex;
1594 flex-direction: column;
1595 gap: 8px;
1596 align-items: flex-start;
1597 text-align: left;
1598 }
1599
1600 .comment-name {
1601 font-family: Inter;
1602 font-weight: 600;
1603 font-style: normal;
1604 font-size: 14px;
1605 line-height: 160%;
1606 letter-spacing: 0px;
1607 color: rgba(25, 29, 45, 0.9);
1608 }
1609
1610 .comment-text {
1611 font-family: Inter;
1612 font-weight: 500;
1613 font-size: 13px;
1614 line-height: 150%;
1615 letter-spacing: 0px;
1616 color: rgba(25, 29, 45, 0.8);
1617 }
1618
1619 .comment-actions {
1620 display: flex;
1621 align-items: center;
1622 justify-content: end;
1623 gap: 10px;
1624 }
1625
1626 .comment-action {
1627 display: flex;
1628 align-items: center;
1629 gap: 4px;
1630 font-family: Inter;
1631 font-weight: 500;
1632 font-size: 13px;
1633 line-height: 16px;
1634 letter-spacing: 0px;
1635 vertical-align: middle;
1636 text-decoration: underline;
1637 text-decoration-style: solid;
1638 text-decoration-offset: 0%;
1639 text-decoration-thickness: 0%;
1640 color: rgba(25, 29, 45, 0.7);
1641 transition: color 0.2s ease;
1642 }
1643
1644 .comment-action:hover {
1645 color: rgba(25, 29, 45, 0.9);
1646 }
1647
1648 .comment-action.approve {
1649 color: rgba(25, 29, 45, 0.7);
1650 }
1651
1652 .comment-action.approve:hover {
1653 color: rgba(25, 29, 45, 0.9);
1654 }
1655
1656 .comment-action.delete {
1657 color: rgba(25, 29, 45, 0.7);
1658 }
1659
1660 .comment-action.delete:hover {
1661 color: rgba(25, 29, 45, 0.9);
1662 }
1663
1664 .comment-action-separator {
1665 color: rgba(25, 29, 45, 0.3);
1666 font-weight: 400;
1667 font-size: 11px;
1668 }
1669
1670 .comment-status-approved {
1671 color: rgb(15, 139, 0);
1672 font-family: Inter;
1673 font-weight: 500;
1674 font-size: 13px;
1675 line-height: 16px;
1676 letter-spacing: 0px;
1677 }
1678
1679 /* Status Badge Styles */
1680 .status-badge {
1681 display: inline-flex;
1682 align-items: center;
1683 padding: 6px 12px;
1684 border-radius: 6px;
1685 font-family: Inter;
1686 font-weight: 500;
1687 font-style: normal;
1688 font-size: 13px;
1689 line-height: 130%;
1690 letter-spacing: 0px;
1691 text-align: center;
1692 white-space: nowrap;
1693 }
1694
1695 .status-paid,
1696 .status-active,
1697 .status-approved {
1698 background-color: #eafbe8;
1699 color: rgb(15, 139, 0);
1700 }
1701
1702 /* Placeholder Styles */
1703 .charitable-dashboard-v2-placeholder {
1704 display: flex;
1705 flex-direction: column;
1706 align-items: center;
1707 justify-content: center;
1708 padding: 60px 20px;
1709 text-align: center;
1710 }
1711
1712 .charitable-dashboard-v2-placeholder-icon {
1713 margin-bottom: 24px;
1714 }
1715
1716 .charitable-dashboard-v2-placeholder-title {
1717 font-family: Inter;
1718 font-weight: 600;
1719 font-style: normal;
1720 font-size: 20px;
1721 line-height: 130%;
1722 letter-spacing: 0px;
1723 color: rgba(25, 29, 45, 0.8);
1724 margin: 0 0 12px 0;
1725 }
1726
1727 .charitable-dashboard-v2-placeholder-description {
1728 font-family: Inter;
1729 font-weight: 400;
1730 font-style: normal;
1731 font-size: 15px;
1732 line-height: 160%;
1733 letter-spacing: 0px;
1734 color: rgba(25, 29, 45, 0.6);
1735 margin: 0;
1736 max-width: 400px;
1737 }
1738
1739 /* Empty State Button */
1740 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button {
1741 display: inline-block;
1742 padding: 10px 20px;
1743 background: rgb(218, 144, 33);
1744 color: white;
1745 text-decoration: none;
1746 border-radius: 4px;
1747 font-weight: 600;
1748 font-size: 14px;
1749 transition: background-color 0.2s ease;
1750 margin-top: 10px;
1751 border: 0;
1752 }
1753 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button:hover {
1754 background: rgb(196, 130, 30);
1755 color: white;
1756 text-decoration: none;
1757 }
1758 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button:disabled {
1759 background: #9CA3AF;
1760 cursor: not-allowed;
1761 }
1762 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button .button-loading {
1763 display: inline-flex;
1764 align-items: center;
1765 gap: 8px;
1766 }
1767
1768 /* ── What's New feed overrides ── */
1769 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row {
1770 align-items: flex-start;
1771 gap: 14px;
1772 }
1773
1774 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left {
1775 flex: 1;
1776 min-width: 0;
1777 }
1778
1779 /* Timestamp + New badge row */
1780 .charitable-dashboard-v2-blog-post-timestamp-row {
1781 display: flex;
1782 align-items: center;
1783 gap: 8px;
1784 margin-bottom: 6px;
1785 line-height: 1;
1786 }
1787
1788 .charitable-dashboard-v2-blog-post-timestamp {
1789 font-size: 13px;
1790 font-weight: 500;
1791 color: rgba(25, 29, 45, 0.6);
1792 }
1793
1794 .charitable-dashboard-v2-blog-post-badge-new {
1795 display: inline-flex;
1796 align-items: center;
1797 font-size: 10px;
1798 font-weight: 600;
1799 line-height: 1;
1800 padding: 3px 7px;
1801 border-radius: 20px;
1802 background-color: #276c35;
1803 color: #fff;
1804 text-transform: uppercase;
1805 letter-spacing: 0.4px;
1806 vertical-align: middle;
1807 }
1808
1809 .charitable-dashboard-v2-blog-post-badge-upgrade {
1810 display: inline-flex;
1811 align-items: center;
1812 font-size: 10px;
1813 font-weight: 600;
1814 line-height: 1;
1815 padding: 3px 7px;
1816 border-radius: 20px;
1817 background-color: #eaa251;
1818 color: #fff;
1819 text-transform: uppercase;
1820 letter-spacing: 0.4px;
1821 vertical-align: middle;
1822 text-decoration: none;
1823 }
1824
1825 .charitable-dashboard-v2-blog-post-badge-upgrade:hover {
1826 background-color: #d89447;
1827 color: #fff;
1828 }
1829
1830 .charitable-dashboard-v2-blog-post-badge-pro {
1831 display: inline-flex;
1832 align-items: center;
1833 font-size: 10px;
1834 font-weight: 600;
1835 line-height: 1;
1836 padding: 3px 7px;
1837 border-radius: 20px;
1838 background-color: #eaa251;
1839 color: #fff;
1840 text-transform: uppercase;
1841 letter-spacing: 0.4px;
1842 vertical-align: middle;
1843 }
1844
1845 .charitable-dashboard-v2-blog-post-badge-addon {
1846 display: inline-flex;
1847 align-items: center;
1848 font-size: 10px;
1849 font-weight: 600;
1850 line-height: 1;
1851 padding: 3px 7px;
1852 border-radius: 20px;
1853 background-color: #0ea5e9;
1854 color: #fff;
1855 text-transform: uppercase;
1856 letter-spacing: 0.4px;
1857 vertical-align: middle;
1858 }
1859
1860 /* Title */
1861 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left .charitable-dashboard-v2-blog-post-title {
1862 margin: 0 0 5px;
1863 }
1864
1865 /* Description */
1866 .charitable-dashboard-v2-blog-post-desc {
1867 font-size: 12px;
1868 font-weight: 400;
1869 line-height: 1.55;
1870 color: rgba(25, 29, 45, 0.6);
1871 margin: 0 0 4px;
1872 }
1873
1874 /* Upgrade link — own line, Charitable orange */
1875 .charitable-dashboard-v2-blog-post-upgrade {
1876 display: block;
1877 font-size: 12px;
1878 font-weight: 600;
1879 color: #eaa251;
1880 text-decoration: none;
1881 margin-bottom: 2px;
1882 }
1883
1884 .charitable-dashboard-v2-blog-post-upgrade:hover {
1885 text-decoration: underline;
1886 }
1887
1888 /* Learn More button — inline after description text */
1889 .charitable-dashboard-v2-blog-post-learn-more {
1890 display: inline;
1891 font-size: 12px;
1892 font-weight: 600;
1893 color: rgba(25, 29, 45, 0.45);
1894 background: none;
1895 border: none;
1896 padding: 0;
1897 margin-left: 3px;
1898 cursor: pointer;
1899 text-decoration: none;
1900 font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1901 white-space: nowrap;
1902 }
1903
1904 .charitable-dashboard-v2-blog-post-learn-more:hover {
1905 color: rgba(25, 29, 45, 0.8);
1906 text-decoration: underline;
1907 }
1908
1909 /* Thumbnail button */
1910 .charitable-dashboard-v2-blog-post-thumb {
1911 position: relative;
1912 display: block;
1913 flex-shrink: 0;
1914 width: 120px;
1915 height: 80px;
1916 border: 1px solid #d5d5d5;
1917 padding: 0;
1918 background: #E5E7EB;
1919 cursor: pointer;
1920 border-radius: 6px;
1921 overflow: hidden;
1922 }
1923
1924 .charitable-dashboard-v2-blog-post-thumb svg {
1925 display: block;
1926 width: 120px;
1927 height: 80px;
1928 }
1929
1930 .charitable-dashboard-v2-blog-post-thumb--bg {
1931 background-size: contain;
1932 background-position: center;
1933 background-repeat: no-repeat;
1934 background-color: #fff;
1935 }
1936
1937 /* Feature modal — commented out in 1.8.13.3, may be re-enabled later.
1938 .charitable-feature-modal-overlay {
1939 position: fixed;
1940 inset: 0;
1941 background: rgba(10, 12, 20, 0.65);
1942 z-index: 999999;
1943 display: flex;
1944 align-items: center;
1945 justify-content: center;
1946 backdrop-filter: blur(3px);
1947 }
1948 .charitable-feature-modal-box {
1949 position: relative;
1950 background: #fff;
1951 border-radius: 12px;
1952 width: 750px;
1953 max-width: calc(100vw - 40px);
1954 overflow: hidden;
1955 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
1956 }
1957 */
1958
1959 /* Row dividers */
1960 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row {
1961 margin-bottom: 0 !important;
1962 padding: 14px 0;
1963 border-bottom: 1px solid rgba(25, 29, 45, 0.2);
1964 }
1965 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row:last-child {
1966 border-bottom: none;
1967 }
1968
1969 /* Modal video element — commented out in 1.8.13.3.
1970 .charitable-feature-modal-video-el {
1971 display: block;
1972 width: 100%;
1973 height: 100%;
1974 object-fit: cover;
1975 }
1976 */
1977
1978 /* ── Are you enjoying Charitable? dashboard section ── */
1979 .charitable-dashboard-enjoy-section {
1980 position: relative;
1981 background: #ffeedb;
1982 border-radius: 4px;
1983 padding: 16px 20px 14px;
1984 border: 1px solid rgba(24, 36, 69, 0.1);
1985 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
1986 min-height: 0;
1987 }
1988
1989 .charitable-enjoy-question {
1990 margin: 0 0 10px;
1991 font-size: 13px;
1992 color: #1d2327;
1993 padding-right: 24px;
1994 }
1995
1996 /* Title style for the main step-1 question and explicit title modifier */
1997 .charitable-enjoy-step[data-step="1"] .charitable-enjoy-question,
1998 .charitable-enjoy-question.charitable-enjoy-question--title {
1999 font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
2000 font-weight: 700;
2001 font-size: 17px;
2002 line-height: 130%;
2003 color: rgba(25, 29, 45, 0.9);
2004 margin-bottom: 20px;
2005 }
2006
2007 /* Body paragraph following the title in step 3 */
2008 .charitable-enjoy-question--title + .charitable-enjoy-question {
2009 margin-top: 10px;
2010 }
2011
2012 .charitable-enjoy-team {
2013 margin: 0 0 10px !important;
2014 font-size: 13px;
2015 color: #1d2327;
2016 }
2017
2018 .charitable-enjoy-actions {
2019 margin: 0;
2020 display: flex;
2021 align-items: center;
2022 gap: 8px;
2023 flex-wrap: wrap;
2024 }
2025
2026 .charitable-enjoy-link {
2027 display: inline-block;
2028 background: none;
2029 border: 1px solid #c3c4c7;
2030 padding: 6px 14px;
2031 font-size: 12px;
2032 font-weight: 600;
2033 color: #1d2327;
2034 cursor: pointer;
2035 text-decoration: none;
2036 line-height: 1.7;
2037 border-radius: 4px;
2038 transition: background 0.15s, border-color 0.15s, color 0.15s;
2039 }
2040
2041 .charitable-enjoy-link:hover {
2042 background: #f0f0f1;
2043 color: #1d2327;
2044 text-decoration: none;
2045 }
2046
2047 /* Yes button — Charitable green */
2048 .charitable-enjoy-link--yes {
2049 background: #5AA152;
2050 border-color: #5AA152;
2051 color: #fff;
2052 }
2053
2054 .charitable-enjoy-link--yes:hover {
2055 background: #43833b;
2056 border-color: #43833b;
2057 color: #fff;
2058 }
2059
2060 /* Not really button — Charitable orange */
2061 .charitable-enjoy-link--no {
2062 background: #eaa251;
2063 border-color: #eaa251;
2064 color: #fff;
2065 }
2066
2067 .charitable-enjoy-link--no:hover {
2068 background: #d89447;
2069 border-color: #d89447;
2070 color: #fff;
2071 }
2072
2073 .charitable-enjoy-sep {
2074 display: none;
2075 }
2076
2077 .charitable-enjoy-dismiss-btn {
2078 position: absolute;
2079 top: 10px;
2080 right: 10px;
2081 background: none;
2082 border: none;
2083 color: #8c8f94;
2084 cursor: pointer;
2085 padding: 4px;
2086 line-height: 1;
2087 border-radius: 50%;
2088 display: flex;
2089 align-items: center;
2090 justify-content: center;
2091 transition: color 0.15s, background 0.15s;
2092 }
2093
2094 .charitable-enjoy-dismiss-btn:hover {
2095 color: #1d2327;
2096 background: #f0f0f1;
2097 }
2098
2099 /* Dashboard v2 — "you're on the latest version" confirmation pill. @since 1.8.12 */
2100 .charitable-dashboard-v2-latest-updates-uptodate {
2101 display: inline-flex;
2102 align-items: center;
2103 gap: 6px;
2104 padding: 6px 12px 6px 9px;
2105 margin: 0 0 16px 23px;
2106 border-radius: 4px;
2107 background-color: #e5f6e9;
2108 color: #00a32a;
2109 font-size: 12px;
2110 font-weight: 500;
2111 line-height: 1.3;
2112 }
2113
2114 .charitable-dashboard-v2-latest-updates-uptodate svg {
2115 flex: 0 0 auto;
2116 }
2117
2118 .charitable-dashboard-v2-latest-updates-uptodate strong {
2119 font-weight: 600;
2120 }
2121
2122 /* Dashboard v2 — "behind X versions (but under threshold)" amber nudge pill. @since 1.8.12 */
2123 .charitable-dashboard-v2-latest-updates-behind {
2124 display: inline-flex;
2125 align-items: center;
2126 gap: 6px;
2127 padding: 6px 12px;
2128 margin: -7px 0 0 25px;
2129 border-radius: 4px;
2130 background-color: #fef3e4;
2131 color: #bf6000;
2132 font-size: 12px;
2133 font-weight: 500;
2134 line-height: 1.3;
2135 }
2136
2137 .charitable-dashboard-v2-latest-updates-behind svg {
2138 flex: 0 0 auto;
2139 }
2140
2141 .charitable-dashboard-v2-latest-updates-behind strong {
2142 font-weight: 600;
2143 }
2144
2145 .charitable-dashboard-v2-latest-updates-behind a {
2146 color: inherit;
2147 text-decoration: underline;
2148 font-weight: 600;
2149 }
2150
2151 .charitable-dashboard-v2-latest-updates-behind a:hover {
2152 text-decoration: none;
2153 }
2154
2155 /* "Update now" link inside the big "X versions behind" headline. @since 1.8.12 */
2156 .charitable-dashboard-v2-latest-updates-headline a {
2157 color: inherit;
2158 text-decoration: underline;
2159 white-space: nowrap;
2160 }
2161
2162 .charitable-dashboard-v2-latest-updates-headline a:hover {
2163 text-decoration: none;
2164 }
2165