PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.11
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.11
1.8.13.1 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 All 212 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.11, at assets/css/admin/charitable-admin-dashboard.css

1,765 lines 54.8 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 display: flex;
253 flex-direction: column;
254 gap: 20px;
255 }
256 .charitable-dashboard-v2-layout .charitable-dashboard-v2-right-column {
257 flex: 0 0 452px;
258 display: flex;
259 flex-direction: column;
260 gap: 20px;
261 }
262 @media (max-width: 1200px) {
263 .charitable-dashboard-v2-layout {
264 flex-direction: column;
265 }
266 .charitable-dashboard-v2-layout .charitable-dashboard-v2-left-column,
267 .charitable-dashboard-v2-layout .charitable-dashboard-v2-right-column {
268 flex: 1 1 100%;
269 }
270 }
271
272 /* V2 Dashboard Sections */
273 .charitable-dashboard-v2-section {
274 background: white;
275 border: 1px solid rgba(24, 36, 69, 0.1);
276 border-radius: 4px;
277 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
278 min-height: 120px;
279 overflow: hidden;
280 }
281 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header {
282 height: 70px;
283 background: white;
284 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
285 display: flex;
286 align-items: center;
287 justify-content: space-between;
288 padding: 0 25px;
289 }
290 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header h3 {
291 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
292 font-weight: 700;
293 font-style: normal;
294 font-size: 17px;
295 line-height: 130%;
296 letter-spacing: 0px;
297 color: rgba(25, 29, 45, 0.9);
298 margin: 0;
299 }
300 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-toggle {
301 display: flex;
302 align-items: center;
303 justify-content: center;
304 width: 24px;
305 height: 24px;
306 text-decoration: none;
307 color: rgba(25, 29, 45, 0.6);
308 transition: color 0.2s ease;
309 }
310 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-toggle:hover {
311 color: rgba(25, 29, 45, 0.9);
312 }
313 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-toggle .charitable-dashboard-v2-angle-down {
314 font-size: 16px;
315 transition: transform 0.3s ease;
316 }
317 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav {
318 display: flex;
319 align-items: center;
320 height: 100%;
321 width: 100%;
322 }
323 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav .charitable-dashboard-v2-tab-nav-item {
324 display: flex;
325 align-items: center;
326 height: 100%;
327 padding: 0 30px;
328 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
329 font-weight: 700;
330 font-style: normal;
331 font-size: 14px;
332 line-height: 130%;
333 letter-spacing: 0px;
334 color: rgba(25, 29, 45, 0.5);
335 text-decoration: none;
336 border-right: 1px solid rgba(24, 36, 69, 0.1);
337 transition: color 0.2s ease;
338 cursor: pointer;
339 }
340 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav .charitable-dashboard-v2-tab-nav-item:last-child {
341 border-right: none;
342 }
343 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav .charitable-dashboard-v2-tab-nav-item:hover {
344 color: rgba(25, 29, 45, 0.7);
345 }
346 .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 {
347 color: rgb(51, 132, 42);
348 border-bottom-color: rgb(51, 132, 42);
349 }
350 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content {
351 padding: 0 0 20px 0;
352 transition: all 0.3s ease;
353 overflow: hidden;
354 }
355 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content p {
356 margin: 0;
357 color: #52545f;
358 font-size: 14px;
359 line-height: 1.5;
360 }
361 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content:has(.charitable-dashboard-v2-enhance-grid) {
362 padding: 0;
363 }
364 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content:has(.charitable-dashboard-v2-latest-updates-background) {
365 padding-top: 0;
366 }
367 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content .charitable-dashboard-v2-tab-content {
368 display: none;
369 }
370 .charitable-dashboard-v2-section .charitable-dashboard-v2-section-content .charitable-dashboard-v2-tab-content.charitable-dashboard-v2-tab-content-active {
371 display: block;
372 }
373 .charitable-dashboard-v2-section.charitable-dashboard-v2-collapsible .charitable-dashboard-v2-section-content {
374 max-height: none;
375 opacity: 1;
376 transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
377 }
378 .charitable-dashboard-v2-section.charitable-dashboard-v2-collapsible.charitable-dashboard-v2-collapsed .charitable-dashboard-v2-section-content {
379 max-height: 0 !important;
380 padding-top: 0 !important;
381 padding-bottom: 0 !important;
382 opacity: 0;
383 overflow: hidden;
384 }
385 .charitable-dashboard-v2-section.charitable-dashboard-v2-collapsible.charitable-dashboard-v2-collapsed .charitable-dashboard-v2-toggle .charitable-dashboard-v2-angle-down {
386 transform: rotate(-90deg);
387 }
388 .charitable-dashboard-v2-section:not(.charitable-dashboard-v2-right-column .charitable-dashboard-v2-section) {
389 padding: 20px;
390 }
391 .charitable-dashboard-v2-section:not(.charitable-dashboard-v2-right-column .charitable-dashboard-v2-section) h3 {
392 margin: 0 0 15px 0;
393 color: #303442;
394 font-size: 18px;
395 font-weight: 600;
396 }
397 .charitable-dashboard-v2-section:not(.charitable-dashboard-v2-right-column .charitable-dashboard-v2-section) p {
398 margin: 0;
399 color: #52545f;
400 font-size: 14px;
401 line-height: 1.5;
402 }
403 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns {
404 padding: 0 !important;
405 }
406 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns .charitable-dashboard-v2-section-header {
407 padding: 0;
408 }
409 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns .charitable-dashboard-v2-section-content {
410 padding: 0 0 20px 0 !important;
411 }
412 .charitable-dashboard-v2-section.charitable-dashboard-top-campaigns .charitable-dashboard-v2-empty-state {
413 padding: 30px 30px 10px;
414 }
415 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content {
416 display: flex;
417 justify-content: center;
418 margin-bottom: 30px;
419 padding: 0 25px;
420 }
421 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items {
422 width: 100%;
423 }
424 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item {
425 display: flex;
426 align-items: center;
427 padding: 15px 0;
428 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
429 }
430 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item:first-child {
431 border-top: none;
432 padding-top: 0px;
433 }
434 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-content .charitable-dashboard-v2-quick-access-items .charitable-dashboard-v2-quick-access-item:last-child {
435 border-bottom: none;
436 padding-bottom: 0;
437 }
438 .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 {
439 width: 24px;
440 height: 24px;
441 flex-shrink: 0;
442 margin-right: 15px;
443 display: flex;
444 align-items: center;
445 justify-content: center;
446 }
447 .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 {
448 flex: 1;
449 }
450 .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 {
451 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
452 font-weight: 600;
453 font-style: normal;
454 font-size: 14px;
455 line-height: 160%;
456 letter-spacing: 0px;
457 color: rgba(25, 29, 45, 0.8);
458 text-decoration: none;
459 }
460 .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 {
461 text-decoration: underline;
462 }
463 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer {
464 height: 70px;
465 background: rgb(254, 248, 243);
466 margin: 20px 0 0 0;
467 display: flex;
468 align-items: center;
469 }
470 .charitable-dashboard-v2-section .charitable-dashboard-v2-quick-access-footer .charitable-dashboard-v2-quick-access-footer-content {
471 display: flex;
472 justify-content: space-between;
473 align-items: center;
474 width: 100%;
475 padding: 0 30px;
476 }
477 .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 {
478 display: flex;
479 align-items: center;
480 gap: 8px;
481 text-decoration: none;
482 }
483 .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 {
484 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
485 font-weight: 500;
486 font-size: 14px;
487 line-height: 16px;
488 letter-spacing: 0px;
489 text-align: right;
490 vertical-align: middle;
491 color: rgb(43, 102, 209);
492 }
493 .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 {
494 color: rgb(43, 102, 209);
495 width: 16px;
496 height: 16px;
497 flex-shrink: 0;
498 }
499 .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 {
500 text-decoration: underline;
501 }
502 .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 {
503 display: flex;
504 gap: 3px;
505 }
506 .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 {
507 color: #FFD700;
508 font-size: 18px;
509 line-height: 1;
510 }
511 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid {
512 display: grid;
513 grid-template-columns: 1fr 1fr;
514 grid-template-rows: 1fr 1fr;
515 gap: 1px;
516 background: rgba(24, 36, 69, 0.1);
517 margin: 0;
518 }
519 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-grid .charitable-dashboard-v2-enhance-grid-item {
520 background: white;
521 padding: 20px;
522 }
523 .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 {
524 display: flex;
525 align-items: center;
526 gap: 10px;
527 margin-bottom: 15px;
528 }
529 .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 {
530 width: 20px;
531 height: 20px;
532 flex-shrink: 0;
533 }
534 .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 {
535 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
536 font-weight: 700;
537 font-style: normal;
538 font-size: 14px;
539 line-height: 130%;
540 letter-spacing: 0px;
541 color: rgba(25, 29, 45, 0.9);
542 margin: 0;
543 }
544 .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 {
545 margin: 0 0 15px 0;
546 color: #52545f;
547 font-size: 14px;
548 line-height: 1.5;
549 }
550 .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 {
551 background: white;
552 border: 1px solid rgba(14, 33, 33, 0.14);
553 border-radius: 4px;
554 padding: 8px 16px;
555 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
556 font-weight: 500;
557 font-style: normal;
558 font-size: 13px;
559 line-height: 100%;
560 letter-spacing: 0px;
561 color: rgba(14, 33, 33, 0.8);
562 cursor: pointer;
563 transition: all 0.2s ease;
564 }
565 .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 {
566 background: rgba(14, 33, 33, 0.05);
567 border-color: rgba(14, 33, 33, 0.2);
568 }
569 .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 {
570 background: #eaa251;
571 border-color: #eaa251;
572 color: white;
573 }
574 .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 {
575 background: #d89447;
576 border-color: #d89447;
577 }
578 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background {
579 background: rgb(254, 248, 243);
580 margin: 0;
581 padding: 20px 25px;
582 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
583 }
584 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-background .charitable-dashboard-v2-latest-updates-background-content .charitable-dashboard-v2-latest-updates-flex {
585 display: flex;
586 gap: 10px;
587 align-items: flex-start;
588 }
589 .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 {
590 flex-shrink: 0;
591 }
592 .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 {
593 width: 26px;
594 height: 26px;
595 }
596 .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 {
597 flex: 1;
598 }
599 .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 {
600 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
601 font-weight: 600;
602 font-style: normal;
603 font-size: 15px;
604 line-height: 22px;
605 letter-spacing: 0px;
606 color: rgba(25, 29, 45, 0.9);
607 margin: -4px 0 15px 0;
608 }
609 .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 {
610 display: flex;
611 flex-wrap: wrap;
612 gap: 5px 12px;
613 }
614 .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 {
615 display: inline-flex;
616 align-items: center;
617 gap: 6px;
618 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
619 font-weight: 500;
620 font-style: normal;
621 font-size: 14px;
622 line-height: 160%;
623 letter-spacing: 0px;
624 color: rgba(25, 29, 45, 0.9);
625 }
626 .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 {
627 width: 9px;
628 height: 7px;
629 flex-shrink: 0;
630 }
631 .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 {
632 background: rgb(90, 161, 82);
633 border: none;
634 border-radius: 4px;
635 padding: 10px 20px;
636 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
637 font-weight: 700;
638 font-size: 13px;
639 line-height: 16px;
640 letter-spacing: 0px;
641 text-align: center;
642 vertical-align: middle;
643 color: rgb(255, 255, 255);
644 cursor: pointer;
645 transition: all 0.2s ease;
646 }
647 .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 {
648 background: rgb(69, 123, 63);
649 }
650 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer {
651 height: 70px;
652 background: white;
653 margin: 0;
654 display: flex;
655 align-items: center;
656 border-top: 1px solid rgba(24, 36, 69, 0.1);
657 }
658 .charitable-dashboard-v2-section .charitable-dashboard-v2-latest-updates-footer .charitable-dashboard-v2-latest-updates-footer-content {
659 display: flex;
660 justify-content: flex-start;
661 align-items: center;
662 width: 100%;
663 padding: 0 30px;
664 }
665 .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 {
666 display: flex;
667 align-items: center;
668 gap: 8px;
669 text-decoration: none;
670 transition: gap 0.3s ease;
671 }
672 .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 {
673 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
674 font-weight: 500;
675 font-size: 14px;
676 line-height: 16px;
677 letter-spacing: 0px;
678 text-align: left;
679 vertical-align: middle;
680 color: rgb(43, 102, 209);
681 }
682 .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 {
683 color: rgb(43, 102, 209);
684 width: 16px;
685 height: 16px;
686 flex-shrink: 0;
687 }
688 .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 {
689 gap: 4px;
690 }
691 .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 {
692 text-decoration: underline;
693 }
694 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts {
695 margin-top: 35px;
696 margin-bottom: 15px;
697 padding: 0 25px;
698 }
699 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row {
700 display: flex;
701 flex-direction: row;
702 justify-content: space-between;
703 align-items: center;
704 margin-bottom: 40px;
705 }
706 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row:last-child {
707 margin-bottom: 0;
708 }
709 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-left {
710 width: 282px;
711 }
712 .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 {
713 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
714 font-weight: 500;
715 font-style: normal;
716 font-size: 13px;
717 line-height: 150%;
718 letter-spacing: 0px;
719 color: rgba(25, 29, 45, 0.6);
720 margin-bottom: 15px;
721 }
722 .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 {
723 margin: 0;
724 }
725 .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 {
726 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
727 font-weight: 600;
728 font-style: normal;
729 font-size: 14px;
730 line-height: 170%;
731 letter-spacing: -0.25px;
732 color: rgba(25, 29, 45, 0.9);
733 text-decoration: none;
734 }
735 .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 {
736 text-decoration: underline;
737 }
738 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row .charitable-dashboard-v2-blog-post-right {
739 display: flex;
740 align-items: center;
741 }
742 .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 {
743 width: 106px;
744 height: 56px;
745 flex-shrink: 0;
746 }
747 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display {
748 display: flex;
749 gap: 10px;
750 align-items: flex-start;
751 margin-bottom: 20px;
752 }
753 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title {
754 display: flex;
755 align-items: center;
756 gap: 10px;
757 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
758 font-weight: 600;
759 font-style: normal;
760 font-size: 15px;
761 line-height: 22px;
762 letter-spacing: 0px;
763 color: rgba(25, 29, 45, 0.9);
764 margin: 0;
765 }
766 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title::before {
767 content: "";
768 width: 26px;
769 height: 26px;
770 flex-shrink: 0;
771 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");
772 background-repeat: no-repeat;
773 background-position: center;
774 background-size: contain;
775 }
776 .charitable-dashboard-v2-section.no-update-alert .charitable-dashboard-v2-blog-posts {
777 margin-top: 0;
778 }
779 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display {
780 display: flex;
781 gap: 10px;
782 align-items: flex-start;
783 margin-bottom: 20px;
784 }
785 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title {
786 display: flex;
787 align-items: center;
788 gap: 10px;
789 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
790 font-weight: 600;
791 font-style: normal;
792 font-size: 15px;
793 line-height: 22px;
794 letter-spacing: 0px;
795 color: rgba(25, 29, 45, 0.9);
796 margin: 0;
797 }
798 .charitable-dashboard-v2-section .charitable-dashboard-v2-blog-posts .charitable-dashboard-v2-blog-post-row.error-display .charitable-dashboard-v2-blog-post-title::before {
799 content: "";
800 width: 26px;
801 height: 26px;
802 flex-shrink: 0;
803 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");
804 background-repeat: no-repeat;
805 background-position: center;
806 background-size: contain;
807 }
808 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer {
809 height: 70px;
810 background: white;
811 margin: 0;
812 display: flex;
813 align-items: center;
814 border-top: 1px solid rgba(24, 36, 69, 0.1);
815 }
816 .charitable-dashboard-v2-section .charitable-dashboard-v2-enhance-campaign-footer .charitable-dashboard-v2-enhance-campaign-footer-content {
817 display: flex;
818 justify-content: flex-start;
819 align-items: center;
820 width: 100%;
821 padding: 0 30px;
822 }
823 .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 {
824 display: flex;
825 align-items: center;
826 gap: 8px;
827 text-decoration: none;
828 }
829 .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 {
830 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
831 font-weight: 500;
832 font-size: 14px;
833 line-height: 16px;
834 letter-spacing: 0px;
835 text-align: left;
836 vertical-align: middle;
837 color: rgb(43, 102, 209);
838 }
839 .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 {
840 color: rgb(43, 102, 209);
841 width: 16px;
842 height: 16px;
843 flex-shrink: 0;
844 }
845 .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 {
846 text-decoration: underline;
847 }
848 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-title {
849 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
850 font-weight: 700;
851 font-style: normal;
852 font-size: 20px;
853 line-height: 33px;
854 letter-spacing: 0.01em;
855 text-align: center;
856 color: rgba(25, 29, 45, 0.8);
857 margin: 0;
858 padding-top: 10px;
859 }
860 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features {
861 display: flex;
862 gap: 10px 10px;
863 margin: 30px 0;
864 justify-content: center;
865 }
866 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-column {
867 flex: 1;
868 max-width: 300px;
869 display: flex;
870 flex-direction: column;
871 gap: 20px;
872 }
873 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-feature {
874 display: flex;
875 align-items: flex-start;
876 gap: 12px;
877 }
878 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-feature .charitable-dashboard-v2-upgrade-checkmark {
879 width: 18px;
880 height: 18px;
881 flex-shrink: 0;
882 margin-top: 2px;
883 }
884 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-features .charitable-dashboard-v2-upgrade-feature .charitable-dashboard-v2-upgrade-feature-text {
885 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
886 font-weight: 500;
887 font-size: 14px;
888 line-height: 150%;
889 letter-spacing: 0px;
890 color: rgba(25, 29, 45, 0.8);
891 margin: 0;
892 }
893 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions {
894 display: flex;
895 flex-direction: column;
896 align-items: center;
897 gap: 20px;
898 margin-top: 30px;
899 padding-bottom: 20px;
900 }
901 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-upgrade-button {
902 background: rgb(218, 144, 33);
903 border: none;
904 border-radius: 4px;
905 padding: 22px 42px;
906 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
907 font-weight: 600;
908 font-size: 19px;
909 line-height: 100%;
910 letter-spacing: 0px;
911 color: white;
912 cursor: pointer;
913 transition: background-color 0.2s ease;
914 text-decoration: none;
915 }
916 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-upgrade-button:hover {
917 background: #d89447 !important;
918 text-decoration: none;
919 }
920 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-learn-more-link {
921 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
922 font-weight: 600;
923 font-size: 14px;
924 line-height: 150%;
925 letter-spacing: 0px;
926 text-align: center;
927 text-decoration: underline;
928 color: rgba(25, 29, 45, 0.5);
929 transition: color 0.2s ease;
930 }
931 .charitable-dashboard-v2-section .charitable-dashboard-v2-upgrade-actions .charitable-dashboard-v2-learn-more-link:hover {
932 color: rgba(25, 29, 45, 0.7);
933 }
934
935 /* Campaign Table Column Widths */
936 .charitable-dashboard-v2-table th:nth-child(1),
937 .charitable-dashboard-v2-table td:nth-child(1) {
938 width: 205px;
939 padding-left: 30px;
940 }
941
942 .charitable-dashboard-v2-table th:nth-child(2),
943 .charitable-dashboard-v2-table td:nth-child(2) {
944 width: 120px;
945 }
946
947 .charitable-dashboard-v2-table th:nth-child(3),
948 .charitable-dashboard-v2-table td:nth-child(3) {
949 width: 120px;
950 }
951
952 .charitable-dashboard-v2-table th:nth-child(4),
953 .charitable-dashboard-v2-table td:nth-child(4) {
954 width: auto;
955 }
956
957 .charitable-dashboard-v2-table th:nth-child(5),
958 .charitable-dashboard-v2-table td:nth-child(5) {
959 width: auto;
960 text-align: center;
961 }
962
963 /* Campaign Title Styling */
964 .campaign-title {
965 display: flex;
966 align-items: center;
967 gap: 8px;
968 }
969 .campaign-title a {
970 font-family: Inter;
971 font-weight: 500;
972 font-style: normal;
973 font-size: 15px;
974 line-height: 160%;
975 letter-spacing: 0px;
976 color: rgb(25, 29, 45);
977 text-decoration: none;
978 }
979 .campaign-title a:hover {
980 color: rgb(76, 123, 207);
981 }
982
983 /* Goal and Reach Text Styling */
984 .charitable-dashboard-v2-table td:nth-child(2),
985 .charitable-dashboard-v2-table td:nth-child(3) {
986 font-family: Inter;
987 font-weight: 500;
988 font-style: normal;
989 font-size: 14px;
990 line-height: 100%;
991 letter-spacing: 0px;
992 color: rgba(25, 29, 45, 0.8);
993 }
994
995 /* Status Badges */
996 .status-badge {
997 display: inline-block;
998 padding: 4px 12px;
999 border-radius: 12px;
1000 font-family: Inter;
1001 font-weight: 500;
1002 font-size: 12px;
1003 line-height: 130%;
1004 color: rgba(25, 29, 45, 0.8);
1005 }
1006 .status-badge.status-active {
1007 background: rgba(76, 123, 207, 0.1);
1008 color: rgb(76, 123, 207);
1009 }
1010 .status-badge.status-unsuccessful {
1011 background: rgba(234, 78, 100, 0.1);
1012 color: rgb(234, 78, 100);
1013 }
1014 .status-badge.status-cancelled {
1015 background: rgba(153, 153, 153, 0.1);
1016 color: rgb(153, 153, 153);
1017 }
1018
1019 /* Progress Circle */
1020 .progress-circle {
1021 position: relative;
1022 display: inline-flex;
1023 align-items: center;
1024 justify-content: center;
1025 width: 40px;
1026 height: 40px;
1027 margin: 0 auto;
1028 }
1029 .progress-circle svg {
1030 position: absolute;
1031 top: 0;
1032 left: 0;
1033 }
1034
1035 .progress-text {
1036 font-family: Inter;
1037 font-weight: 600;
1038 font-style: normal;
1039 font-size: 12px;
1040 line-height: 160%;
1041 letter-spacing: 0px;
1042 color: rgba(25, 29, 45, 0.8);
1043 z-index: 1;
1044 }
1045
1046 /* Dashboard v2 Notifications */
1047 .charitable-dashboard-v2-notifications {
1048 display: block;
1049 margin-top: 20px;
1050 max-width: 1172px;
1051 margin-left: auto;
1052 margin-right: auto;
1053 padding: 0;
1054 position: relative;
1055 background: white;
1056 border: 1px solid rgba(24, 36, 69, 0.1);
1057 border-radius: 4px;
1058 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
1059 }
1060 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar {
1061 position: absolute;
1062 top: 12px;
1063 right: 12px;
1064 display: flex;
1065 align-items: center;
1066 gap: 8px;
1067 z-index: 1;
1068 }
1069 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-dashboard-notification-navigation {
1070 position: static;
1071 top: auto;
1072 right: auto;
1073 display: flex;
1074 align-items: center;
1075 gap: 2px;
1076 min-height: auto;
1077 padding: 0;
1078 }
1079 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-dashboard-notification-navigation a {
1080 position: static;
1081 top: auto;
1082 font-size: 24px;
1083 line-height: 1;
1084 padding: 2px 4px;
1085 }
1086 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-dashboard-notification-navigation .charitable-dashboard-notification-counter {
1087 font-size: 13px;
1088 color: #666;
1089 white-space: nowrap;
1090 padding: 0 2px;
1091 line-height: 1;
1092 }
1093 .charitable-dashboard-v2-notifications .charitable-dashboard-notification-bar .charitable-remove-dashboard-notification {
1094 position: static;
1095 top: auto;
1096 right: auto;
1097 }
1098 .charitable-dashboard-v2-notifications .charitable-dashboard-notification {
1099 margin: 0;
1100 border: 0;
1101 background: white;
1102 border-radius: 0;
1103 box-shadow: none;
1104 }
1105 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message {
1106 padding: 15px 20px;
1107 }
1108 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-dashboard-notification-headline {
1109 margin: 0 0 10px 0;
1110 font-size: 16px;
1111 font-weight: 600;
1112 color: #1d2327;
1113 display: flex;
1114 align-items: center;
1115 gap: 6px;
1116 }
1117 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-notification-type-icon {
1118 font-size: 18px;
1119 width: 18px;
1120 height: 18px;
1121 line-height: 1;
1122 flex-shrink: 0;
1123 }
1124 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message p {
1125 margin: 0 0 10px 0;
1126 line-height: 1.5;
1127 }
1128 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message ul {
1129 margin: 10px 0;
1130 padding-left: 20px;
1131 }
1132 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message ul li {
1133 margin-bottom: 5px;
1134 }
1135 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-notification-cta-button {
1136 display: inline-block;
1137 padding: 8px 16px;
1138 background-color: #5aa152;
1139 color: #fff;
1140 font-size: 13px;
1141 font-weight: 600;
1142 line-height: 1.5;
1143 text-decoration: none;
1144 border-radius: 4px;
1145 margin-top: 5px;
1146 }
1147 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-message .charitable-notification-cta-button:hover {
1148 background-color: #4a8a44;
1149 color: #fff;
1150 }
1151 .charitable-dashboard-v2-notifications .charitable-dashboard-notification[data-notification-type=notice] .charitable-notification-type-icon {
1152 color: #00a0d2;
1153 }
1154 .charitable-dashboard-v2-notifications .charitable-dashboard-notification[data-notification-type=warning] .charitable-notification-type-icon {
1155 color: #ffb900;
1156 }
1157 .charitable-dashboard-v2-notifications .charitable-dashboard-notification[data-notification-type=error] .charitable-notification-type-icon {
1158 color: #dc3232;
1159 }
1160 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-bar {
1161 display: flex;
1162 justify-content: space-between;
1163 align-items: center;
1164 padding: 10px 15px;
1165 }
1166 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-bar .charitable-remove-dashboard-notification {
1167 color: #666;
1168 text-decoration: none;
1169 font-size: 18px;
1170 line-height: 1;
1171 }
1172 .charitable-dashboard-v2-notifications .charitable-dashboard-notification .charitable-dashboard-notification-bar .charitable-remove-dashboard-notification:hover {
1173 color: #000;
1174 }
1175
1176 /* Future V2 Dashboard Components */
1177 /* Enhance Grid Icon Vertical Centering */
1178 .charitable-dashboard-v2-enhance-grid-icon {
1179 display: flex;
1180 align-items: center;
1181 justify-content: center;
1182 }
1183
1184 /* Basic Table Styles */
1185 .charitable-dashboard-v2-table {
1186 width: 100%;
1187 border-collapse: collapse;
1188 }
1189 .charitable-dashboard-v2-table thead th {
1190 background: rgba(25, 29, 45, 0.02);
1191 font-family: Inter;
1192 font-weight: 500;
1193 font-style: normal;
1194 font-size: 13px;
1195 line-height: 130%;
1196 letter-spacing: 0px;
1197 color: rgba(25, 29, 45, 0.5);
1198 padding: 16px 12px;
1199 text-align: left;
1200 border-bottom: 1px solid rgba(24, 36, 69, 0.1);
1201 }
1202 .charitable-dashboard-v2-table tbody td {
1203 padding: 16px 12px;
1204 border-bottom: 1px solid rgba(24, 36, 69, 0.05);
1205 }
1206 .charitable-dashboard-v2-table tbody tr:last-child td {
1207 border-bottom: none;
1208 }
1209
1210 /* Donation Table Styles */
1211 .charitable-dashboard-v2-table-donations {
1212 margin-top: 0;
1213 }
1214
1215 .charitable-dashboard-v2-table-donations th {
1216 background-color: rgb(248, 250, 252);
1217 border-bottom: 1px solid rgb(226, 232, 240);
1218 padding: 16px 20px;
1219 text-align: left;
1220 font-family: Inter;
1221 font-weight: 600;
1222 font-size: 14px;
1223 line-height: 140%;
1224 color: rgba(25, 29, 45, 0.8);
1225 }
1226
1227 .charitable-dashboard-v2-table-donations th:last-child {
1228 text-align: right;
1229 padding: 16px 35px;
1230 }
1231
1232 .charitable-dashboard-v2-table-donations th:first-child,
1233 .charitable-dashboard-v2-table-donations td:first-child {
1234 width: calc(100% - 120px) !important;
1235 }
1236
1237 .charitable-dashboard-v2-table-donations th:last-child,
1238 .charitable-dashboard-v2-table-donations td:last-child {
1239 width: auto !important;
1240 }
1241
1242 .charitable-dashboard-v2-table-donations tr {
1243 transition: background-color 0.2s ease;
1244 }
1245
1246 .charitable-dashboard-v2-table-donations tr:hover {
1247 background-color: rgba(248, 250, 252, 0.8);
1248 }
1249
1250 .charitable-dashboard-v2-table tr {
1251 transition: background-color 0.2s ease;
1252 }
1253
1254 .charitable-dashboard-v2-table tr:hover {
1255 background-color: rgba(248, 250, 252, 0.8);
1256 }
1257
1258 .charitable-dashboard-v2-table-donations td {
1259 padding: 20px;
1260 border-bottom: 1px solid rgb(226, 232, 240);
1261 vertical-align: top;
1262 }
1263
1264 .charitable-dashboard-v2-table-donations td:last-child {
1265 padding-right: 30px;
1266 text-align: right;
1267 vertical-align: middle;
1268 }
1269
1270 .donation-details {
1271 display: flex;
1272 flex-direction: column;
1273 gap: 8px;
1274 }
1275
1276 .donation-header {
1277 display: grid;
1278 grid-template-columns: 1fr 1fr;
1279 grid-template-rows: auto auto;
1280 gap: 8px 20px;
1281 align-items: start;
1282 text-align: left;
1283 }
1284
1285 .donation-name {
1286 font-family: Inter;
1287 font-weight: 500;
1288 font-style: normal;
1289 font-size: 15px;
1290 line-height: 160%;
1291 letter-spacing: 0px;
1292 color: rgb(25, 29, 45);
1293 }
1294
1295 .donation-name a {
1296 color: rgb(25, 29, 45);
1297 text-decoration: none;
1298 transition: color 0.2s ease;
1299 font-size: 11px;
1300 font-weight: 400;
1301 }
1302
1303 .donation-name a:hover {
1304 color: rgb(43, 102, 209);
1305 text-decoration: underline;
1306 }
1307
1308 .donation-timestamp {
1309 font-weight: 200;
1310 font-size: 11px;
1311 margin-top: 4px;
1312 margin-left: 0;
1313 }
1314
1315 .donation-amount {
1316 font-family: Inter;
1317 font-weight: 500;
1318 font-style: normal;
1319 font-size: 14px;
1320 line-height: 100%;
1321 letter-spacing: 0px;
1322 color: rgba(25, 29, 45, 0.8);
1323 }
1324
1325 .donation-method {
1326 font-family: Inter;
1327 font-weight: 500;
1328 font-style: normal;
1329 font-size: 14px;
1330 line-height: 100%;
1331 letter-spacing: 0px;
1332 color: rgba(25, 29, 45, 0.8);
1333 }
1334
1335 .donation-amount strong,
1336 .donation-method strong {
1337 font-weight: 700;
1338 }
1339
1340 .donation-method strong,
1341 .donation-amount strong {
1342 color: rgba(25, 29, 45, 0.8);
1343 }
1344
1345 .donation-method-stripe {
1346 color: #645aff !important;
1347 }
1348
1349 /* Comment Table Styles */
1350 .charitable-dashboard-v2-table-comments {
1351 margin-top: 0;
1352 }
1353
1354 /* Top Donors Table Styles */
1355 .charitable-dashboard-v2-table-donors {
1356 margin-top: 0;
1357 }
1358
1359 .charitable-dashboard-v2-table-donors th {
1360 background-color: rgb(248, 250, 252);
1361 border-bottom: 1px solid rgb(226, 232, 240);
1362 padding: 16px 20px;
1363 text-align: left;
1364 font-family: Inter;
1365 font-weight: 600;
1366 font-size: 13px;
1367 line-height: 16px;
1368 letter-spacing: 0px;
1369 color: rgba(25, 29, 45, 0.8);
1370 }
1371
1372 .charitable-dashboard-v2-table-donors td {
1373 padding: 16px 20px;
1374 border-bottom: 1px solid rgba(226, 232, 240, 0.5);
1375 vertical-align: middle;
1376 }
1377
1378 .donor-avatar img {
1379 border-radius: 50%;
1380 width: 40px;
1381 height: 40px;
1382 object-fit: cover;
1383 }
1384
1385 .donor-details {
1386 display: flex;
1387 flex-direction: column;
1388 gap: 4px;
1389 }
1390
1391 .donor-name {
1392 font-family: Inter;
1393 font-weight: 600;
1394 font-size: 14px;
1395 line-height: 160%;
1396 letter-spacing: 0px;
1397 color: rgba(25, 29, 45, 0.9);
1398 }
1399
1400 .donor-email {
1401 font-family: Inter;
1402 font-weight: 400;
1403 font-size: 13px;
1404 line-height: 150%;
1405 letter-spacing: 0px;
1406 color: rgba(25, 29, 45, 0.7);
1407 }
1408
1409 .donor-amount {
1410 font-family: Inter;
1411 font-weight: 600;
1412 font-size: 14px;
1413 line-height: 160%;
1414 letter-spacing: 0px;
1415 color: rgb(25, 29, 45);
1416 }
1417
1418 .donor-badge {
1419 display: inline-flex;
1420 align-items: center;
1421 padding: 4px 12px;
1422 border-radius: 12px;
1423 font-family: Inter;
1424 font-weight: 500;
1425 font-size: 12px;
1426 line-height: 16px;
1427 letter-spacing: 0px;
1428 text-align: center;
1429 }
1430
1431 .donor-badge.recurring {
1432 background-color: rgba(59, 130, 246, 0.1);
1433 color: rgb(59, 130, 246);
1434 }
1435
1436 .donor-badge.multiple {
1437 background-color: rgba(16, 185, 129, 0.1);
1438 color: rgb(16, 185, 129);
1439 }
1440
1441 .donor-badge.one-time {
1442 background-color: rgba(245, 158, 11, 0.1);
1443 color: rgb(245, 158, 11);
1444 }
1445
1446 /* Override first column width for donors table */
1447 .charitable-dashboard-v2-table.charitable-dashboard-v2-table-donors th:nth-child(1),
1448 .charitable-dashboard-v2-table.charitable-dashboard-v2-table-donors td:nth-child(1) {
1449 width: 30px !important;
1450 padding-left: 30px;
1451 }
1452
1453 /* Last column padding for top campaigns table */
1454 .charitable-dashboard-top-campaigns .charitable-dashboard-v2-table th:last-child,
1455 .charitable-dashboard-top-campaigns .charitable-dashboard-v2-table td:last-child {
1456 padding-right: 30px;
1457 }
1458
1459 /* Remove focus outline from tab navigation */
1460 .charitable-dashboard-v2-tab-nav-item:focus {
1461 outline: none;
1462 }
1463
1464 /* Remove focus outline from section header tabs */
1465 .charitable-dashboard-v2-section-header .charitable-dashboard-v2-tab-nav-item:focus {
1466 outline: none;
1467 }
1468
1469 /* Getting Started Section link transitions */
1470 .charitable-dashboard-v2-quick-access-items a {
1471 position: relative;
1472 text-decoration: none !important;
1473 }
1474
1475 .charitable-dashboard-v2-quick-access-items a::before {
1476 content: "";
1477 position: absolute;
1478 width: 100%;
1479 height: 2px;
1480 border-radius: 2px;
1481 background-color: #18272F;
1482 bottom: -4px;
1483 left: 0;
1484 transform-origin: right;
1485 transform: scaleX(0);
1486 transition: transform 0.3s ease-in-out;
1487 }
1488
1489 .charitable-dashboard-v2-quick-access-items a:hover::before {
1490 transform-origin: left;
1491 transform: scaleX(1);
1492 }
1493
1494 /* Rate link arrow hover effect */
1495 .charitable-dashboard-v2-rate-link {
1496 display: flex !important;
1497 align-items: center !important;
1498 gap: 8px !important;
1499 transition: gap 0.3s ease !important;
1500 text-decoration: none !important;
1501 }
1502
1503 .charitable-dashboard-v2-rate-link:hover {
1504 gap: 4px !important;
1505 text-decoration: none !important;
1506 }
1507
1508 .charitable-dashboard-v2-rate-link .charitable-dashboard-v2-rate-text,
1509 .charitable-dashboard-v2-rate-link .charitable-dashboard-v2-arrow-icon {
1510 display: inline-block;
1511 }
1512
1513 /* View all addons link arrow hover effect */
1514 .charitable-dashboard-v2-addons-link {
1515 display: flex !important;
1516 align-items: center !important;
1517 gap: 8px !important;
1518 transition: gap 0.3s ease !important;
1519 text-decoration: none !important;
1520 }
1521
1522 .charitable-dashboard-v2-addons-link:hover {
1523 gap: 4px !important;
1524 text-decoration: none !important;
1525 }
1526
1527 .charitable-dashboard-v2-addons-link .charitable-dashboard-v2-addons-text,
1528 .charitable-dashboard-v2-addons-link .charitable-dashboard-v2-arrow-icon {
1529 display: inline-block;
1530 }
1531
1532 .charitable-dashboard-v2-table-container {
1533 max-height: 400px;
1534 overflow-y: auto;
1535 }
1536
1537 .charitable-dashboard-v2-table-comments th {
1538 background-color: rgb(248, 250, 252);
1539 border-bottom: 1px solid rgb(226, 232, 240);
1540 padding: 16px 20px;
1541 text-align: left;
1542 font-family: Inter;
1543 font-weight: 600;
1544 font-size: 14px;
1545 line-height: 140%;
1546 color: rgba(25, 29, 45, 0.8);
1547 }
1548
1549 .charitable-dashboard-v2-table-comments th:last-child {
1550 text-align: right;
1551 padding: 16px 35px;
1552 }
1553
1554 .charitable-dashboard-v2-table-comments th:first-child,
1555 .charitable-dashboard-v2-table-comments td:first-child {
1556 width: calc(100% - 120px) !important;
1557 }
1558
1559 .charitable-dashboard-v2-table-comments th:last-child,
1560 .charitable-dashboard-v2-table-comments td:last-child {
1561 width: auto !important;
1562 }
1563
1564 .charitable-dashboard-v2-table-comments tr {
1565 transition: background-color 0.2s ease;
1566 }
1567
1568 .charitable-dashboard-v2-table-comments tr:hover {
1569 background-color: rgba(248, 250, 252, 0.8);
1570 }
1571
1572 .charitable-dashboard-v2-table-comments td {
1573 padding: 20px;
1574 border-bottom: 1px solid rgb(226, 232, 240);
1575 vertical-align: top;
1576 }
1577
1578 .charitable-dashboard-v2-table-comments td:last-child {
1579 padding-right: 30px;
1580 text-align: right;
1581 vertical-align: middle;
1582 }
1583
1584 .comment-details {
1585 display: flex;
1586 flex-direction: column;
1587 gap: 8px;
1588 }
1589
1590 .comment-header {
1591 display: flex;
1592 flex-direction: column;
1593 gap: 8px;
1594 align-items: flex-start;
1595 text-align: left;
1596 }
1597
1598 .comment-name {
1599 font-family: Inter;
1600 font-weight: 600;
1601 font-style: normal;
1602 font-size: 14px;
1603 line-height: 160%;
1604 letter-spacing: 0px;
1605 color: rgba(25, 29, 45, 0.9);
1606 }
1607
1608 .comment-text {
1609 font-family: Inter;
1610 font-weight: 500;
1611 font-size: 13px;
1612 line-height: 150%;
1613 letter-spacing: 0px;
1614 color: rgba(25, 29, 45, 0.8);
1615 }
1616
1617 .comment-actions {
1618 display: flex;
1619 align-items: center;
1620 justify-content: end;
1621 gap: 10px;
1622 }
1623
1624 .comment-action {
1625 display: flex;
1626 align-items: center;
1627 gap: 4px;
1628 font-family: Inter;
1629 font-weight: 500;
1630 font-size: 13px;
1631 line-height: 16px;
1632 letter-spacing: 0px;
1633 vertical-align: middle;
1634 text-decoration: underline;
1635 text-decoration-style: solid;
1636 text-decoration-offset: 0%;
1637 text-decoration-thickness: 0%;
1638 color: rgba(25, 29, 45, 0.7);
1639 transition: color 0.2s ease;
1640 }
1641
1642 .comment-action:hover {
1643 color: rgba(25, 29, 45, 0.9);
1644 }
1645
1646 .comment-action.approve {
1647 color: rgba(25, 29, 45, 0.7);
1648 }
1649
1650 .comment-action.approve:hover {
1651 color: rgba(25, 29, 45, 0.9);
1652 }
1653
1654 .comment-action.delete {
1655 color: rgba(25, 29, 45, 0.7);
1656 }
1657
1658 .comment-action.delete:hover {
1659 color: rgba(25, 29, 45, 0.9);
1660 }
1661
1662 .comment-action-separator {
1663 color: rgba(25, 29, 45, 0.3);
1664 font-weight: 400;
1665 font-size: 11px;
1666 }
1667
1668 .comment-status-approved {
1669 color: rgb(15, 139, 0);
1670 font-family: Inter;
1671 font-weight: 500;
1672 font-size: 13px;
1673 line-height: 16px;
1674 letter-spacing: 0px;
1675 }
1676
1677 /* Status Badge Styles */
1678 .status-badge {
1679 display: inline-flex;
1680 align-items: center;
1681 padding: 6px 12px;
1682 border-radius: 6px;
1683 font-family: Inter;
1684 font-weight: 500;
1685 font-style: normal;
1686 font-size: 13px;
1687 line-height: 130%;
1688 letter-spacing: 0px;
1689 text-align: center;
1690 white-space: nowrap;
1691 }
1692
1693 .status-paid,
1694 .status-active,
1695 .status-approved {
1696 background-color: #eafbe8;
1697 color: rgb(15, 139, 0);
1698 }
1699
1700 /* Placeholder Styles */
1701 .charitable-dashboard-v2-placeholder {
1702 display: flex;
1703 flex-direction: column;
1704 align-items: center;
1705 justify-content: center;
1706 padding: 60px 20px;
1707 text-align: center;
1708 }
1709
1710 .charitable-dashboard-v2-placeholder-icon {
1711 margin-bottom: 24px;
1712 }
1713
1714 .charitable-dashboard-v2-placeholder-title {
1715 font-family: Inter;
1716 font-weight: 600;
1717 font-style: normal;
1718 font-size: 20px;
1719 line-height: 130%;
1720 letter-spacing: 0px;
1721 color: rgba(25, 29, 45, 0.8);
1722 margin: 0 0 12px 0;
1723 }
1724
1725 .charitable-dashboard-v2-placeholder-description {
1726 font-family: Inter;
1727 font-weight: 400;
1728 font-style: normal;
1729 font-size: 15px;
1730 line-height: 160%;
1731 letter-spacing: 0px;
1732 color: rgba(25, 29, 45, 0.6);
1733 margin: 0;
1734 max-width: 400px;
1735 }
1736
1737 /* Empty State Button */
1738 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button {
1739 display: inline-block;
1740 padding: 10px 20px;
1741 background: rgb(218, 144, 33);
1742 color: white;
1743 text-decoration: none;
1744 border-radius: 4px;
1745 font-weight: 600;
1746 font-size: 14px;
1747 transition: background-color 0.2s ease;
1748 margin-top: 10px;
1749 border: 0;
1750 }
1751 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button:hover {
1752 background: rgb(196, 130, 30);
1753 color: white;
1754 text-decoration: none;
1755 }
1756 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button:disabled {
1757 background: #9CA3AF;
1758 cursor: not-allowed;
1759 }
1760 .charitable-dashboard-v2-empty-state-content .charitable-dashboard-v2-button .button-loading {
1761 display: inline-flex;
1762 align-items: center;
1763 gap: 8px;
1764 }
1765