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.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 / campaign-builder / builder-ui-general.css

builder-ui-general.css in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.11, at assets/css/campaign-builder/builder-ui-general.css

1,870 lines 60.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #charitable-builder .charitable-toolbar {
2 font-family: "Inter", sans-serif !important;
3 background: #ffffff;
4 box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
5 height: 76px;
6 padding: 0;
7 position: fixed;
8 text-align: center;
9 top: var(--charitable-admin-bar-height);
10 width: 100%;
11 z-index: 50;
12 -webkit-transform: translateZ(0);
13 transform: translateZ(0);
14 transition-property: top;
15 transition-duration: 0.25s;
16 transition-timing-function: ease-out;
17 }
18 #charitable-builder .charitable-toolbar .charitable-left {
19 align-items: center;
20 border-right: 1px solid #dddddd;
21 display: flex;
22 height: 100%;
23 justify-content: center;
24 left: 0;
25 position: absolute;
26 top: 0;
27 width: 95px;
28 }
29 #charitable-builder .charitable-toolbar .charitable-left .mascot:before {
30 /* font-family: charitable !important;
31 content: "\e601";
32 font-size: 65px;
33 position: absolute;
34 color: #f99d33; */
35 }
36 #charitable-builder .charitable-toolbar .charitable-left .mascot {
37 height: 50px;
38 width: 50px;
39 background-image: url("../../../assets/images/charitable-logo.svg");
40 background-size: cover;
41 background-repeat: no-repeat;
42 }
43 #charitable-builder .charitable-toolbar .charitable-center {
44 font-size: 18px;
45 font-weight: 400;
46 margin: 21px 450px 0 114px;
47 max-width: calc(100% - 750px);
48 text-align: left;
49 }
50 #charitable-builder .charitable-toolbar .charitable-center-form-name {
51 cursor: pointer;
52 }
53 #charitable-builder .charitable-toolbar .charitable-form-name {
54 font-weight: 600;
55 }
56 #charitable-builder .charitable-toolbar .charitable-title-edit img {
57 top: 3px;
58 position: relative;
59 }
60 #charitable-builder .charitable-toolbar .charitable-right {
61 align-items: center;
62 display: flex;
63 height: 100%;
64 justify-content: flex-end;
65 position: absolute;
66 right: 0;
67 top: 0;
68 }
69 #charitable-builder .charitable-toolbar .charitable-right .charitable-btn-toolbar {
70 font-size: 14px;
71 font-weight: 500;
72 height: 42px;
73 line-height: 40px;
74 margin: 0 20px 0 0;
75 padding: 0 15px;
76 text-decoration: none;
77 text-transform: capitalize;
78 color: #545660;
79 }
80 #charitable-builder .charitable-toolbar .charitable-right .charitable-btn-toolbar i {
81 color: #a6a6a6;
82 margin-right: 8px;
83 }
84 #charitable-builder .charitable-toolbar #charitable-preview-btn:not(.charitable-alone) {
85 margin-right: 8px;
86 }
87 #charitable-builder .charitable-toolbar #charitable-embed,
88 #charitable-builder .charitable-toolbar #charitable-view-btn,
89 #charitable-builder .charitable-toolbar #charitable-preview-btn {
90 border: 0;
91 margin-right: 10px;
92 background-color: transparent;
93 position: relative;
94 }
95 #charitable-builder .charitable-toolbar #charitable-embed img.topbar_icon,
96 #charitable-builder .charitable-toolbar #charitable-view-btn img.topbar_icon,
97 #charitable-builder .charitable-toolbar #charitable-preview-btn img.topbar_icon {
98 float: left;
99 margin-top: 13px;
100 margin-right: 8px;
101 }
102 #charitable-builder .charitable-toolbar #charitable-preview-btn img.topbar_icon {
103 margin-top: 13px;
104 margin-right: 10px;
105 }
106 #charitable-builder .charitable-toolbar #charitable-embed {
107 margin-right: 3px;
108 }
109 #charitable-builder .charitable-toolbar #charitable-view-btn {
110 padding-right: 5px;
111 padding-left: 5px;
112 margin-right: 0px;
113 }
114 #charitable-builder .charitable-toolbar #charitable-view-btn img.topbar_icon {
115 margin-top: 12px;
116 margin-right: 8px;
117 }
118 #charitable-builder .charitable-toolbar #charitable-status {
119 position: relative;
120 padding: 0;
121 }
122 #charitable-builder .charitable-toolbar #charitable-status #charitable-status-button {
123 max-height: 42px;
124 margin-right: 10px;
125 margin-left: 0px;
126 }
127 #charitable-builder .charitable-toolbar #charitable-status #charitable-status-button.active {
128 background-color: #eee;
129 border-color: #eee;
130 }
131 #charitable-builder .charitable-toolbar #charitable-status .text {
132 padding-right: 25px;
133 border-right: 1px solid #E9EAEC;
134 margin-right: 10px;
135 height: 42px;
136 display: inline-block;
137 }
138 #charitable-builder .charitable-toolbar #charitable-status ul {
139 position: absolute;
140 top: 50px;
141 width: 180px;
142 left: 0;
143 border-radius: 3px;
144 background-color: #ffffff;
145 padding: 15px;
146 margin: 0;
147 border: 1px solid #DDD;
148 }
149 #charitable-builder .charitable-toolbar #charitable-status ul li {
150 margin: 0;
151 padding: 0;
152 width: 100%;
153 text-align: left;
154 }
155 #charitable-builder .charitable-toolbar #charitable-status ul li a {
156 color: #545660;
157 font-size: 14px;
158 line-height: 32px;
159 text-decoration: none;
160 font-weight: 500;
161 }
162 #charitable-builder .charitable-toolbar #charitable-status ul li a:hover {
163 color: black;
164 text-decoration: underline;
165 }
166 #charitable-builder .charitable-toolbar #charitable-save {
167 border-radius: 6px;
168 position: relative;
169 color: white;
170 }
171 #charitable-builder .charitable-toolbar #charitable-save i {
172 color: rgba(255, 255, 255, 0.65);
173 }
174 #charitable-builder .charitable-toolbar #charitable-save img.topbar_icon {
175 float: left;
176 margin-top: 13px;
177 margin-right: 8px;
178 }
179 #charitable-builder .charitable-toolbar #charitable-exit {
180 align-items: center;
181 background-color: #ffffff;
182 border-bottom: none;
183 border-left: 1px solid #dddddd;
184 border-right: none;
185 border-top: none;
186 color: #a6a6a6;
187 cursor: pointer;
188 display: flex;
189 font-size: 28px;
190 height: 76px;
191 justify-content: center;
192 right: 0;
193 text-decoration: none;
194 top: 0;
195 width: 66px;
196 }
197 #charitable-builder .charitable-toolbar #charitable-exit:hover {
198 background-color: #f8f8f8;
199 color: #777777;
200 }
201
202 .charitable-panels-toggle {
203 display: flex;
204 flex-direction: column;
205 background: #2d2d2d;
206 color: #ffffff;
207 min-height: calc(100vh - 76px - var(--charitable-admin-bar-height));
208 max-height: calc(100vh - 76px - var(--charitable-admin-bar-height));
209 left: 0;
210 margin: 76px -100px 0 0;
211 overflow-x: hidden;
212 overflow-y: auto;
213 padding: 0;
214 position: fixed;
215 text-align: left;
216 top: var(--charitable-admin-bar-height);
217 transform: translateZ(0);
218 width: 95px;
219 z-index: 15;
220 transition-property: top;
221 transition-duration: 0.25s;
222 transition-timing-function: ease-out;
223 }
224 .charitable-panels-toggle button {
225 background: none;
226 border: none;
227 border-bottom: 1px solid #444444;
228 cursor: pointer;
229 display: block;
230 margin: 0 0 0 0;
231 padding: 18px 11px;
232 width: 100%;
233 }
234 .charitable-panels-toggle button.active, .charitable-panels-toggle button.active:hover {
235 background-color: #5AA152;
236 }
237 .charitable-panels-toggle button.active .fa, .charitable-panels-toggle button.active:hover .fa {
238 color: #ffffff;
239 }
240 .charitable-panels-toggle button:hover {
241 background-color: #444444;
242 }
243 .charitable-panels-toggle button.disabled, .charitable-panels-toggle button.disabled:hover {
244 background-color: none;
245 opacity: 0.2;
246 cursor: default;
247 }
248 .charitable-panels-toggle button.disabled .fa, .charitable-panels-toggle button.disabled:hover .fa {
249 color: #ffffff;
250 }
251 .charitable-panels-toggle button .fa {
252 color: #999999;
253 display: block;
254 font-size: 30px;
255 margin: 0 auto 5px auto;
256 text-align: center !important;
257 }
258 .charitable-panels-toggle button span {
259 color: #ffffff;
260 font-weight: 400;
261 display: block;
262 font-size: 14px;
263 line-height: 23px;
264 max-width: 100%;
265 overflow: hidden;
266 text-overflow: ellipsis;
267 white-space: nowrap;
268 }
269
270 .charitable-panels-toggle button[data-panel=template] {
271 padding-top: 20px;
272 padding-bottom: 15px;
273 }
274
275 .charitable-panel {
276 display: none;
277 }
278 .charitable-panel.active {
279 display: block;
280 }
281
282 .charitable-panel-full-content .charitable-panel-content-wrap,
283 .charitable-panel-sidebar-content .charitable-panel-content-wrap {
284 background-color: #6d6d6d;
285 bottom: 0;
286 left: 95px;
287 overflow: auto;
288 padding: 50px;
289 position: fixed;
290 right: 0;
291 top: calc(76px + var(--charitable-admin-bar-height));
292 z-index: 10;
293 transition-property: top, left;
294 transition-duration: 0.25s, 0.15s;
295 transition-timing-function: ease-out, ease-in-out;
296 }
297 .charitable-panel-full-content .charitable-panel-content,
298 .charitable-panel-sidebar-content .charitable-panel-content {
299 background-color: #ffffff;
300 box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
301 min-height: 100%;
302 padding: 30px;
303 border-radius: 5px;
304 }
305
306 .charitable-panel-sidebar-content .charitable-panel-sidebar-toggle-icon {
307 align-items: center;
308 background-image: url(../../images/campaign-builder/toggle-tab-bg.svg);
309 background-size: 100% 58px;
310 background-repeat: no-repeat;
311 border-radius: 5px 5px 0 0;
312 color: #86919e;
313 display: flex;
314 font-size: 20px;
315 height: 58px;
316 left: 495px;
317 cursor: pointer;
318 position: absolute;
319 top: calc(50% + 24px);
320 width: 15px;
321 z-index: 15;
322 transition-property: left, width;
323 transition-duration: 0.15s;
324 transition-timing-function: ease-in-out;
325 }
326 .charitable-panel-sidebar-content .charitable-panel-sidebar-toggle-icon:hover {
327 color: #444444;
328 }
329 .charitable-panel-sidebar-content .charitable-panel-sidebar-toggle-icon:hover i {
330 left: -3px;
331 }
332 .charitable-panel-sidebar-content .charitable-panel-sidebar-toggle-icon i {
333 left: 0;
334 position: relative;
335 transition-property: transform, left;
336 transition-duration: 0.15s;
337 transition-timing-function: ease-in-out;
338 }
339 .charitable-panel-sidebar-content .charitable-panel-content-wrap {
340 left: 495px;
341 }
342 .charitable-panel-sidebar-content .charitable-panel-sidebar {
343 background-color: #ebf3fc;
344 bottom: 0;
345 left: 95px;
346 overflow: auto;
347 position: fixed;
348 top: calc(76px + var(--charitable-admin-bar-height));
349 width: 400px;
350 }
351
352 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar-toggle-vertical-line {
353 position: absolute;
354 border-right: 3px solid #ebf3fb;
355 top: calc(76px + var(--charitable-admin-bar-height));
356 height: 100%;
357 left: 95px;
358 z-index: 0;
359 cursor: pointer;
360 transition-property: z-index;
361 transition-duration: 0.15s;
362 transition-timing-function: ease-in-out;
363 }
364 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar-toggle-vertical-line:hover {
365 z-index: 15;
366 }
367 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar-toggle-icon {
368 justify-content: center;
369 left: 95px;
370 }
371 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar-toggle-icon i {
372 transform: rotate(180deg);
373 }
374 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar,
375 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar .charitable-tabs {
376 left: -305px;
377 }
378 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-content-wrap {
379 left: 95px;
380 }
381 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar-toggle:hover .charitable-panel-sidebar-toggle-vertical-line {
382 z-index: 15;
383 }
384 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar-toggle:hover .charitable-panel-sidebar-toggle-icon {
385 width: 18px;
386 }
387 #charitable-panel-design .charitable-panel-sidebar-content.charitable-panel-sidebar-closed .charitable-panel-sidebar-toggle:hover .charitable-panel-sidebar-toggle-icon i {
388 left: 0;
389 }
390
391 .charitable-panel-field {
392 margin-bottom: 20px;
393 max-width: 95%;
394 display: table;
395 width: 95%;
396 }
397 .charitable-panel-field.wide, .charitable-panel-field.charitable-panel-field-tinymce, .charitable-panel-field.charitable-panel-field-warning {
398 max-width: 800px;
399 }
400 .charitable-panel-field.campaign-builder-textarea-fullwidth, .charitable-panel-field.campaign-builder-textarea-fullwidth div.ql-editor {
401 width: 100%;
402 max-width: 100%;
403 min-width: auto;
404 }
405 .charitable-panel-field.campaign-builder-textarea-tall {
406 min-height: 900px;
407 }
408 .charitable-panel-field.campaign-builder-textarea-tall div.campaign-builder-htmleditor {
409 min-height: 900px;
410 }
411 .charitable-panel-field.campaign-builder-textarea-tall div.ql-editor {
412 min-height: auto;
413 }
414 .charitable-panel-field input[type=text],
415 .charitable-panel-field input[type=url],
416 .charitable-panel-field textarea {
417 width: 100%;
418 }
419 .charitable-panel-field input[type=range] {
420 display: inline-block;
421 }
422 .charitable-panel-field.charitable-panel-field-number-slider {
423 /***** Track Styles *****/
424 /***** Chrome, Safari, Opera, and Edge Chromium *****/
425 /******** Firefox ********/
426 /***** Thumb Styles *****/
427 /***** Chrome, Safari, Opera, and Edge Chromium *****/
428 /***** Firefox *****/
429 /***** Focus Styles *****/
430 /* Removes default focus */
431 /***** Chrome, Safari, Opera, and Edge Chromium *****/
432 /******** Firefox ********/
433 }
434 .charitable-panel-field.charitable-panel-field-number-slider input[type=range] {
435 float: left;
436 margin-left: 0;
437 -webkit-appearance: none;
438 appearance: none;
439 background: transparent;
440 cursor: pointer;
441 }
442 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]:focus {
443 box-shadow: none;
444 border: 0;
445 }
446 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]::-webkit-slider-runnable-track {
447 background: #2B66D1;
448 height: 4px;
449 }
450 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]::-moz-range-track {
451 background: #2B66D1;
452 height: 4px;
453 }
454 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]::-webkit-slider-thumb {
455 -webkit-appearance: none; /* Override default look */
456 appearance: none;
457 margin-top: -6px; /* Centers thumb on the track */
458 background-color: white;
459 border: 2px solid #2B66D1;
460 border-radius: 50%;
461 height: 16px;
462 width: 16px;
463 }
464 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]::-moz-range-thumb {
465 border: none; /*Removes extra border that FF applies*/
466 background-color: white;
467 border: 2px solid #2B66D1;
468 border-radius: 50%;
469 height: 16px;
470 width: 16px;
471 }
472 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]:focus {
473 outline: none;
474 }
475 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]:focus::-webkit-slider-thumb {
476 border: 2px solid #2B66D1;
477 outline: 1px solid transparent;
478 outline-offset: 0.125rem;
479 }
480 .charitable-panel-field.charitable-panel-field-number-slider input[type=range]:focus::-moz-range-thumb {
481 border: 2px solid #2B66D1;
482 outline: 1px solid transparent;
483 outline-offset: 0.125rem;
484 }
485 .charitable-panel-field.charitable-panel-field-number-slider .charitable-number-slider-hint {
486 float: left;
487 margin-left: 10px;
488 }
489 .charitable-panel-field.charitable-panel-field-number-slider .charitable-number-slider-hint small {
490 font-size: 11px;
491 line-height: 11px;
492 color: transparent;
493 display: block;
494 }
495 .charitable-panel-field.charitable-panel-field-number-slider .charitable-number-slider-hint.min-reach {
496 color: red;
497 }
498 .charitable-panel-field.charitable-panel-field-number-slider .charitable-number-slider-hint.min-reach small {
499 color: red;
500 }
501 .charitable-panel-field input[type=number] {
502 width: 20%;
503 }
504 .charitable-panel-field select {
505 max-width: 100%;
506 width: 100%;
507 }
508 .charitable-panel-field input[readonly].readonly-active {
509 background-color: white;
510 }
511 .charitable-panel-field input[type=number] {
512 height: auto;
513 }
514 .charitable-panel-field div.ql-container {
515 height: auto !important;
516 }
517 .charitable-panel-field div.ql-editor {
518 height: auto !important;
519 min-height: 150px;
520 }
521 .charitable-panel-field .row {
522 clear: both;
523 display: block;
524 margin-bottom: 6px;
525 width: 100%;
526 }
527 .charitable-panel-field label {
528 display: block;
529 font-size: 14px;
530 font-weight: 400;
531 margin: 0 0 10px 0;
532 vertical-align: text-top;
533 }
534 .charitable-panel-field label.inline {
535 display: inline-block;
536 font-weight: 400;
537 margin: 0 0 0 10px;
538 }
539 .charitable-panel-field p {
540 font-size: 14px;
541 margin: 0;
542 }
543 .charitable-panel-field p.charitable-campaign-builder-field-textarea-description, .charitable-panel-field p.charitable-campaign-builder-field-uploader-description {
544 font-style: italic;
545 margin-top: 5px;
546 margin-bottom: 5px;
547 }
548 .charitable-panel-field p.charitable-campaign-builder-field-checkbox-description {
549 margin-top: 10px;
550 font-style: italic;
551 font-size: 12px;
552 line-height: 14px;
553 }
554 .charitable-panel-field .ql-editor p {
555 margin: revert;
556 }
557 .charitable-panel-field p.note {
558 color: #777777;
559 font-size: 12px;
560 margin: 10px 0 0 0;
561 }
562 .charitable-panel-field-anti-spam-disallowed-keys textarea {
563 height: 200px;
564 }
565 .charitable-panel-field.charitable-panel-field-donation-amounts-clone th.description-col,
566 .charitable-panel-field.charitable-panel-field-donation-amounts-clone td.description-col {
567 display: none;
568 }
569 .charitable-panel-field.charitable-panel-field-donation-amounts-clone .default_amount-col {
570 width: 25%;
571 }
572 .charitable-panel-field.charitable-panel-field-donation-amounts-clone .charitable-button {
573 display: block;
574 text-align: center;
575 margin: 10px 0;
576 }
577 .charitable-panel-fields-group .charitable-panel-fields-group-title {
578 font-size: 16px;
579 font-weight: 600;
580 line-height: 19px;
581 margin-bottom: 25px;
582 margin-top: 30px;
583 }
584 .charitable-panel-fields-group .charitable-panel-fields-group-description {
585 color: #777777;
586 font-size: 14px;
587 line-height: 17px;
588 margin-bottom: 20px;
589 }
590 .charitable-panel-fields-group .charitable-panel-fields-group-inner {
591 margin-bottom: 20px;
592 }
593 .charitable-panel-fields-group .charitable-panel-fields-group-inner .charitable-panel-field-headline {
594 margin-top: 50px;
595 }
596 .charitable-panel-fields-group .charitable-panel-fields-group-inner .charitable-campaign-builder-headline-light {
597 font-weight: 500;
598 }
599 .charitable-panel-fields-group .charitable-panel-fields-group-border-top {
600 border-top: 1px solid #dddddd;
601 margin-bottom: 20px;
602 margin-top: 20px;
603 }
604 .charitable-panel-fields-group .charitable-panel-fields-group-border-bottom {
605 border-top: 1px solid #dddddd;
606 margin-bottom: 20px;
607 margin-top: 20px;
608 }
609 .charitable-panel-fields-group.charitable-builder-notifications-advanced .charitable-panel-fields-group-border-top {
610 margin: 0 20px 10px;
611 }
612 .charitable-panel-fields-group.charitable-builder-notifications-advanced.unfoldable .charitable-panel-fields-group-title {
613 padding: 10px 20px;
614 }
615 .charitable-panel-fields-group.charitable-builder-notifications-advanced.unfoldable .charitable-panel-fields-group-title i {
616 right: 20px;
617 }
618 .charitable-panel-fields-group.unfoldable .charitable-panel-fields-group-border-top {
619 margin-bottom: 10px;
620 }
621 .charitable-panel-fields-group.unfoldable .charitable-panel-fields-group-title {
622 cursor: pointer;
623 font-size: 16px;
624 font-weight: 600;
625 margin-bottom: 10px;
626 padding: 10px 0;
627 position: relative;
628 }
629 .charitable-panel-fields-group.unfoldable .charitable-panel-fields-group-title i {
630 color: #bbbbbb;
631 position: absolute;
632 right: 0;
633 top: calc(50% - 7px);
634 transition-property: transform;
635 transition-duration: 0.15s;
636 transition-timing-function: ease-in;
637 }
638 .charitable-panel-fields-group.unfoldable.opened .charitable-panel-fields-group-title i {
639 transform: rotate(90deg);
640 }
641
642 .charitable-panel-content-section-general .charitable-panel-fields-group.unfoldable .charitable-panel-fields-group-title {
643 margin-bottom: 0;
644 padding-bottom: 0;
645 }
646 .charitable-panel-content-section-general .charitable-panel-fields-group.unfoldable .charitable-panel-fields-group-title i {
647 top: calc(50% - 2px);
648 }
649 .charitable-panel-content-section-general .charitable-panel-fields-group.unfoldable.opened .charitable-panel-fields-group-title {
650 margin-bottom: 10px;
651 padding: 10px 0;
652 }
653 .charitable-panel-content-section-general .charitable-panel-fields-group.unfoldable.opened .charitable-panel-fields-group-title i {
654 top: calc(50% - 7px);
655 }
656
657 .charitable-panel-fields-group.charitable-highlight {
658 margin-left: -30px;
659 padding-left: 30px;
660 margin-right: -30px;
661 padding-right: 30px;
662 padding-bottom: 30px;
663 background-color: yellow;
664 animation-name: bckanim;
665 animation-fill-mode: forwards;
666 animation-duration: 3s;
667 animation-delay: 0s;
668 }
669
670 @keyframes bckanim {
671 0% {
672 background-color: yellow;
673 }
674 100% {
675 background-color: transparent;
676 }
677 }
678 @media screen and (max-width: 1200px) {
679 .charitable-panel-field {
680 max-width: 98%;
681 }
682 .charitable-panel-field.wide, .charitable-panel-field.charitable-panel-field-tinymce, .charitable-panel-field.charitable-panel-field-warning {
683 max-width: auto;
684 }
685 }
686 .charitable-panel-sidebar-section {
687 border-bottom: 1px solid #ced7e0;
688 color: #444444;
689 display: block;
690 font-size: 16px;
691 line-height: 18px;
692 margin: 0;
693 outline: 0;
694 padding: 17px 20px 17px 20px;
695 position: relative;
696 text-decoration: none;
697 }
698 .charitable-panel-sidebar-section:hover {
699 background-color: #e0e8f0;
700 color: #444444;
701 }
702 .charitable-panel-sidebar-section.icon {
703 padding: 28px 20px 28px 79px;
704 }
705 .charitable-panel-sidebar-section.education-modal {
706 opacity: 0.5;
707 }
708 .charitable-panel-sidebar-section.education-modal .charitable-panel-sidebar-recommended {
709 margin-left: 5px;
710 }
711 .charitable-panel-sidebar-section.default {
712 display: none;
713 }
714 .charitable-panel-sidebar-section.active, .charitable-panel-sidebar-section.active:hover {
715 background-color: #036aab;
716 color: #ffffff;
717 }
718 .charitable-panel-sidebar-section .fa-angle-right {
719 color: #b0b6bd;
720 float: right;
721 font-size: 16px;
722 line-height: 16px;
723 text-align: center;
724 }
725 .charitable-panel-sidebar-section .fa-check-circle-o {
726 color: transparent;
727 float: right;
728 font-size: 18px;
729 margin: 0 20px;
730 }
731 .charitable-panel-sidebar-section .fa-check-circle-o:before {
732 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23B0B6BD'%3E%3Cdefs/%3E%3Cpath d='M8 .25a7.75 7.75 0 100 15.5A7.75 7.75 0 008 .25zm0 1.5a6.25 6.25 0 110 12.5 6.25 6.25 0 010-12.5zm4.38 4.1l-.72-.72c-.13-.16-.38-.16-.54 0L6.72 9.5 4.84 7.62a.36.36 0 00-.53 0l-.72.7c-.12.15-.12.4 0 .52l2.85 2.88c.15.15.37.15.53 0l5.4-5.35c.13-.15.13-.4 0-.53z'/%3E%3C/svg%3E");
733 background-repeat: no-repeat;
734 }
735 .charitable-panel-sidebar-section.active .fa-angle-right {
736 color: #7897CD;
737 }
738 .charitable-panel-sidebar-section.active .fa-check-circle-o:before {
739 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff'%3E%3Cdefs/%3E%3Cpath d='M8 .25a7.75 7.75 0 100 15.5A7.75 7.75 0 008 .25zm0 1.5a6.25 6.25 0 110 12.5 6.25 6.25 0 010-12.5zm4.38 4.1l-.72-.72c-.13-.16-.38-.16-.54 0L6.72 9.5 4.84 7.62a.36.36 0 00-.53 0l-.72.7c-.12.15-.12.4 0 .52l2.85 2.88c.15.15.37.15.53 0l5.4-5.35c.13-.15.13-.4 0-.53z'/%3E%3C/svg%3E");
740 }
741 .charitable-panel-sidebar-section.active img {
742 border-color: #005387;
743 }
744 .charitable-panel-sidebar-section img {
745 border: 1px solid #b0b6bd;
746 border-radius: 4px;
747 left: 20px;
748 position: absolute;
749 top: 15px;
750 width: 44px;
751 }
752 .charitable-panel-sidebar-section .charitable-panel-sidebar-recommended {
753 background-color: #00a32a;
754 border-radius: 4px;
755 color: #ffffff;
756 font-size: 10px;
757 font-weight: 700;
758 line-height: 1;
759 padding: 4px 5px;
760 margin-left: 10px;
761 display: inline-block;
762 position: relative;
763 top: -2px;
764 text-transform: uppercase;
765 }
766 .charitable-panel-sidebar-section .charitable-panel-sidebar-recommended i {
767 opacity: 0.8;
768 }
769 .charitable-panel-sidebar-section .charitable-builder-sidebar-icon {
770 position: relative;
771 width: auto;
772 left: auto;
773 top: auto;
774 float: left;
775 margin-right: 20px;
776 width: 44px;
777 height: 44px;
778 }
779 .charitable-panel-sidebar-section.marketing-request, .charitable-panel-sidebar-section.payment-request {
780 font-style: italic;
781 text-transform: capitalize;
782 }
783
784 #charitable-panel-marketing .charitable-panel-sidebar,
785 #charitable-panel-payment .charitable-panel-sidebar {
786 /* display: table; */
787 }
788 #charitable-panel-marketing .charitable-panel-sidebar-section,
789 #charitable-panel-payment .charitable-panel-sidebar-section {
790 display: table;
791 width: 100%;
792 vertical-align: middle;
793 line-height: 44px;
794 }
795 #charitable-panel-marketing .charitable-panel-sidebar-section .fa-angle-right,
796 #charitable-panel-payment .charitable-panel-sidebar-section .fa-angle-right {
797 position: relative;
798 top: 15px;
799 }
800 #charitable-panel-marketing .charitable-panel-sidebar-section .charitable-payment-recommended,
801 #charitable-panel-payment .charitable-panel-sidebar-section .charitable-payment-recommended {
802 text-transform: uppercase;
803 font-size: 11px;
804 line-height: 20px;
805 font-weight: 600;
806 padding-left: 25px;
807 background-image: url("../../images/icons/recommended.svg");
808 background-repeat: no-repeat;
809 background-position: left;
810 height: 20px;
811 display: table;
812 float: right;
813 position: relative;
814 width: auto;
815 top: 15px;
816 padding-right: 20px;
817 }
818 #charitable-panel-marketing .charitable-panel-sidebar-section.active .charitable-payment-recommended,
819 #charitable-panel-payment .charitable-panel-sidebar-section.active .charitable-payment-recommended {
820 color: white;
821 }
822
823 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior,
824 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior {
825 text-align: center;
826 }
827 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .header-content h2,
828 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .header-content h2 {
829 font-size: 21px;
830 line-height: 24px;
831 font-weight: 600;
832 }
833 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior img.charitable-builder-sidebar-icon,
834 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior img.charitable-builder-sidebar-icon {
835 height: auto;
836 max-width: 40%;
837 max-height: 140px;
838 }
839 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .header-content,
840 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content,
841 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .header-content,
842 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content {
843 width: 75%;
844 margin-left: auto;
845 margin-right: auto;
846 }
847 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .header-content h2 strong,
848 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content h2 strong,
849 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .header-content h2 strong,
850 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content h2 strong {
851 font-weight: 800;
852 }
853 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-images,
854 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-images {
855 clear: both;
856 display: table;
857 margin: 25px auto;
858 text-align: center;
859 width: 75%;
860 }
861 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-images img,
862 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-images img {
863 width: 40%;
864 max-width: 600px;
865 }
866 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-images.type-custom img,
867 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-images.type-custom img {
868 width: auto;
869 max-width: 600px;
870 }
871 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-images .charitable-marketing-image,
872 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-images .charitable-payment-image,
873 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-images .charitable-marketing-image,
874 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-images .charitable-payment-image {
875 margin-left: 10px;
876 margin-right: 10px;
877 border: 1px solid #DDD;
878 padding: 5px;
879 }
880 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content,
881 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content {
882 text-align: center;
883 }
884 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content ul li,
885 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content ul li {
886 background-image: url("../../images/icons/bullet_check.svg");
887 background-repeat: no-repeat;
888 background-position: 0 5px;
889 padding-left: 25px;
890 width: 45%;
891 display: inline-table;
892 margin: 15px;
893 text-align: left;
894 }
895 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-buttons,
896 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-buttons {
897 margin: 40px auto;
898 }
899 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-buttons h2,
900 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-buttons h2 {
901 margin-bottom: 25px;
902 }
903 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .education-buttons.top,
904 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .education-buttons.top {
905 margin-top: 20px;
906 }
907 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .button-link,
908 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .button-link {
909 background-color: #5AA152;
910 color: #ffffff;
911 margin-left: 4px;
912 padding: 10px 30px;
913 position: relative;
914 top: 0;
915 text-decoration: none;
916 border-radius: 5px;
917 text-shadow: none;
918 font-weight: 600;
919 font-family: "Inter";
920 font-size: 16px;
921 line-height: normal;
922 cursor: pointer;
923 }
924 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .button-link:hover,
925 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .button-link:hover {
926 color: white;
927 }
928 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior button,
929 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior button {
930 background-color: #e27730;
931 border: 0;
932 color: #fff;
933 font-weight: 600;
934 text-transform: uppercase;
935 -webkit-transition: background 0.1s;
936 transition: background 0.1s;
937 padding: 10px 20px;
938 min-width: 83px;
939 border-radius: 5px;
940 font-size: 16px;
941 line-height: 20px;
942 outline: none;
943 cursor: pointer;
944 }
945 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .charitable-form-confirmation,
946 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .charitable-form-confirmation {
947 border: 1px solid #DDD;
948 padding: 10px;
949 margin: 50px auto !important;
950 text-align: center;
951 }
952 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .charitable-form-confirmation h2,
953 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .charitable-form-confirmation h2 {
954 text-align: center;
955 margin-left: auto;
956 margin-right: auto;
957 }
958
959 .charitable-feedback-form-interior-confirmation {
960 padding-bottom: 15px;
961 }
962
963 @media only screen and (min-width: 640px) and (max-width: 1600px) {
964 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .header-content,
965 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content,
966 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .header-content,
967 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content {
968 width: 90%;
969 }
970 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content,
971 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content {
972 text-align: center;
973 }
974 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content ul,
975 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content ul {
976 width: 90%;
977 margin-left: auto;
978 margin-right: auto;
979 }
980 .charitable-panel-content-section-parent-marketing .charitable-panel-content-section-interior .main-content ul li,
981 .charitable-panel-content-section-parent-payment .charitable-panel-content-section-interior .main-content ul li {
982 width: 95%;
983 display: inline-table;
984 }
985 }
986 .charitable-panel-content-section {
987 font-family: "Inter", sans-serif;
988 display: none;
989 }
990 .charitable-panel-content-section .illustration {
991 height: 260px;
992 margin: 0 auto 30px auto;
993 width: 350px;
994 }
995 .charitable-panel-content-section .illustration.illustration-marketing {
996 background: url("../../images/campaign-builder/illustration-marketing.svg") no-repeat center center;
997 background-size: 313px 260px;
998 }
999 .charitable-panel-content-section .illustration.illustration-payments {
1000 background: url("../../images/campaign-builder/illustration-payments.svg") no-repeat center center;
1001 background-size: 269px 255px;
1002 }
1003 .charitable-panel-content-section h5.charitable-campaign-builder-setting-subheading {
1004 margin-bottom: 8px;
1005 font-weight: 500;
1006 font-size: 14px;
1007 line-height: 18px;
1008 }
1009 .charitable-panel-content-section table.active {
1010 background-color: aliceblue;
1011 animation: background_fade 3s forwards;
1012 }
1013 @keyframes background_fade {
1014 from {
1015 background-color: rgb(242, 245, 169);
1016 }
1017 to {
1018 background-color: rgba(242, 245, 169, 0);
1019 }
1020 }
1021
1022 .charitable-panel-content-section-title {
1023 font-family: "Inter", sans-serif;
1024 border-bottom: 1px solid #ECECEF;
1025 color: #2B2E39;
1026 font-size: 21px;
1027 font-weight: 600;
1028 line-height: 30px;
1029 margin-bottom: 30px;
1030 padding: 0 0 30px 0;
1031 }
1032 .charitable-panel-content-section-title button,
1033 .charitable-panel-content-section-title .button {
1034 background-color: #036aab;
1035 border: none;
1036 border-radius: 4px;
1037 box-shadow: none;
1038 color: #ffffff;
1039 cursor: pointer;
1040 float: right;
1041 font-size: 14px;
1042 font-weight: 600;
1043 height: auto;
1044 line-height: 17px;
1045 margin-left: 10px;
1046 margin-top: -5px;
1047 padding: 10px 15px;
1048 text-decoration: none;
1049 appearance: none;
1050 -webkit-appearance: none;
1051 }
1052 .charitable-panel-content-section-title button:hover, .charitable-panel-content-section-title button:focus,
1053 .charitable-panel-content-section-title .button:hover,
1054 .charitable-panel-content-section-title .button:focus {
1055 background-color: #215d8f;
1056 color: #ffffff;
1057 box-shadow: none;
1058 }
1059 .charitable-panel-content-section-title button i,
1060 .charitable-panel-content-section-title .button i {
1061 margin: 0 10px 0 0;
1062 }
1063 .charitable-panel-content-section-title > a > i:before {
1064 cursor: pointer;
1065 }
1066 .charitable-panel-content-section-title .charitable-help-tooltip {
1067 font-size: 24px !important;
1068 vertical-align: 1px;
1069 }
1070
1071 .charitable-panel-content-section-description {
1072 border-bottom: 1px solid #dddddd;
1073 font-size: 14px;
1074 font-weight: 400;
1075 line-height: 20px;
1076 margin-bottom: 20px;
1077 max-height: 350px;
1078 overflow: hidden;
1079 padding-bottom: 20px;
1080 position: relative;
1081 transition-property: all;
1082 transition-duration: 0.25s;
1083 transition-timing-function: ease-in-out;
1084 }
1085 .charitable-panel-content-section-description.out {
1086 margin-bottom: 0;
1087 max-height: 0;
1088 opacity: 0;
1089 padding-bottom: 0;
1090 }
1091 .charitable-panel-content-section-description p {
1092 line-height: 20px;
1093 margin: 20px 30px 0 0;
1094 }
1095 .charitable-panel-content-section-description p:first-of-type {
1096 margin-top: 0;
1097 }
1098 .charitable-panel-content-section-description .charitable-dismiss-button {
1099 position: absolute;
1100 right: -3px;
1101 top: -3px;
1102 }
1103
1104 .charitable-panel-content-section-default {
1105 background: url("../../images/campaign-builder/default-arrow.svg") no-repeat 0 0;
1106 background-size: 96px 81px;
1107 }
1108
1109 .charitable-panel-content-section-default,
1110 .charitable-panel-content-section-info {
1111 align-content: center;
1112 min-height: calc(100vh - var(--charitable-admin-bar-height) - 195px);
1113 padding: 50px 0;
1114 text-align: center;
1115 display: flex;
1116 flex-direction: column;
1117 justify-content: center;
1118 align-items: center;
1119 }
1120 .charitable-panel-content-section-default h5,
1121 .charitable-panel-content-section-info h5 {
1122 color: #444444;
1123 font-size: 24px;
1124 font-weight: 600;
1125 line-height: normal;
1126 margin: 0 auto 10px auto;
1127 max-width: 600px;
1128 }
1129 .charitable-panel-content-section-default p,
1130 .charitable-panel-content-section-info p {
1131 color: #777777;
1132 font-size: 16px;
1133 margin: 0 auto 20px auto;
1134 max-width: 600px;
1135 }
1136 .charitable-panel-content-section-default p:last-of-type,
1137 .charitable-panel-content-section-info p:last-of-type {
1138 margin: 0 auto 0 auto;
1139 }
1140 .charitable-panel-content-section-default .charitable-btn,
1141 .charitable-panel-content-section-info .charitable-btn {
1142 margin: 20px auto;
1143 }
1144
1145 .charitable-panel-field:last-child,
1146 .charitable-builder-settings-block:last-child {
1147 margin-bottom: 0 !important;
1148 }
1149
1150 .charitable-layout-options-tab-general .charitable-layout-options-group-inner .charitable-panel-field {
1151 display: none;
1152 }
1153 .charitable-layout-options-tab-general .charitable-layout-options-group-inner .charitable-panel-field.active {
1154 display: block;
1155 }
1156
1157 .charitable-setup-title {
1158 font-size: 20px;
1159 font-weight: 600;
1160 margin: 30px 30px 0px 30px;
1161 color: #444444;
1162 }
1163
1164 #charitable-builder .secondary-text {
1165 color: #777777;
1166 font-size: 14px;
1167 margin: 10px 30px 30px 30px;
1168 }
1169
1170 #charitable-template-container {
1171 align-items: stretch;
1172 border-top: 1px solid #dddddd;
1173 display: flex;
1174 flex-grow: 2;
1175 justify-content: space-between;
1176 margin: 0 30px;
1177 padding: 0 0 30px 0;
1178 }
1179 #charitable-template-container .charitable-setup-templates-sidebar {
1180 border-right: 1px solid #dddddd;
1181 padding: 30px 30px 0 0;
1182 width: 199px;
1183 box-sizing: content-box;
1184 }
1185 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-search-wrap {
1186 position: relative;
1187 }
1188 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-search-wrap i.fa-search {
1189 color: #bbbbbb;
1190 display: block;
1191 font-size: 16px;
1192 left: 12px;
1193 position: absolute;
1194 top: 12px;
1195 width: 16px;
1196 }
1197 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-search-wrap i.fa-close {
1198 color: #bbbbbb;
1199 font-size: 16px;
1200 right: 10px;
1201 position: absolute;
1202 top: 12px;
1203 width: 16px;
1204 cursor: pointer;
1205 display: none;
1206 }
1207 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-search-wrap #charitable-setup-template-search::placeholder {
1208 color: #bbbbbb;
1209 font-weight: 400;
1210 }
1211 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-search-wrap #charitable-setup-template-search {
1212 font-size: 16px;
1213 font-weight: 400;
1214 height: 40px;
1215 line-height: 20px;
1216 padding-left: 35px;
1217 padding-right: 25px;
1218 width: 100%;
1219 color: #444444;
1220 border: 1px solid #cccccc;
1221 border-radius: 4px;
1222 box-shadow: none;
1223 }
1224 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-search-wrap #charitable-setup-template-search.highlighted {
1225 border: 1px solid rgba(0, 128, 0, 0.5);
1226 background-color: rgba(0, 128, 0, 0.1);
1227 }
1228 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-categories {
1229 border-bottom: 1px solid #ddd;
1230 margin-top: 30px;
1231 width: 199px;
1232 box-sizing: content-box;
1233 list-style: none;
1234 margin-block-end: 0;
1235 margin-inline-end: 0;
1236 margin-inline-start: 0;
1237 padding: 0 0 25px 0;
1238 }
1239 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-categories li {
1240 border-radius: 4px;
1241 color: #444444;
1242 cursor: pointer;
1243 font-size: 14px;
1244 font-weight: 600;
1245 line-height: 16px;
1246 margin: 0;
1247 padding: 10px;
1248 }
1249 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-categories li.active {
1250 background: #ebf3fc;
1251 color: #0399ed;
1252 position: relative;
1253 }
1254 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-categories li.divider {
1255 border-bottom: 1px solid #dddddd;
1256 margin: 30px 0;
1257 padding: 0;
1258 }
1259 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-categories li span {
1260 float: right;
1261 color: #777777;
1262 opacity: 0.5;
1263 font-weight: 400;
1264 }
1265 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-feedback {
1266 background-color: #f5f5f5;
1267 padding: 15px 15px;
1268 margin: 25px 0;
1269 }
1270 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-feedback h6 {
1271 font-size: 16px;
1272 line-height: 21px;
1273 margin: 0 0 15px 0;
1274 }
1275 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-feedback a {
1276 display: inline;
1277 margin: 15px 0;
1278 color: #6A6C75;
1279 padding: 0;
1280 font-weight: 400;
1281 font-size: 14px;
1282 line-height: 21px;
1283 text-decoration: underline;
1284 }
1285 #charitable-template-container .charitable-setup-templates-sidebar .charitable-setup-templates-feedback a:hover {
1286 color: #0399ed;
1287 }
1288 #charitable-template-container .charitable-template-list {
1289 margin-bottom: -30px;
1290 padding-top: 30px;
1291 width: calc(100% - 225px);
1292 position: relative;
1293 max-width: 1024px;
1294 margin-right: auto;
1295 }
1296 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container {
1297 position: absolute;
1298 top: 0;
1299 width: 100%;
1300 z-index: 9999991;
1301 transition: opacity 0.35s;
1302 opacity: 0;
1303 visibility: hidden;
1304 }
1305 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container.active {
1306 opacity: 1;
1307 visibility: visible;
1308 }
1309 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-form {
1310 margin-left: auto;
1311 margin-right: auto;
1312 background: white;
1313 padding: 0px;
1314 border-radius: 10px 10px 0 0;
1315 }
1316 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-form label {
1317 font-weight: 500;
1318 font-size: 14px;
1319 line-height: 20px;
1320 }
1321 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-form-row {
1322 margin-top: 10px;
1323 margin-bottom: 10px;
1324 }
1325 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-feedback-form-header {
1326 background-color: #282937;
1327 color: #E7E7E9;
1328 padding: 30px 0 30px 30px !important;
1329 font-size: 18px;
1330 font-weight: 600;
1331 border-radius: 10px 10px 0 0;
1332 }
1333 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-feedback-form-header .charitable-feedback-form-title {
1334 color: white;
1335 user-select: none;
1336 font-size: inherit;
1337 font-family: inherit;
1338 display: inline-block;
1339 vertical-align: middle;
1340 }
1341 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-feedback-form-interior {
1342 padding: 20px;
1343 }
1344 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-feedback-form-required {
1345 color: red;
1346 font-size: 13px;
1347 line-height: 21px;
1348 }
1349 #charitable-template-container .charitable-template-list .charitable-feedback-preview-container .charitable-templates-close-icon {
1350 color: white;
1351 padding-top: 5px;
1352 padding-right: 10px;
1353 font-size: 40px !important;
1354 height: 20px;
1355 width: 20px;
1356 position: absolute;
1357 top: 10px;
1358 right: 10px;
1359 cursor: pointer;
1360 opacity: 0.6;
1361 text-align: center;
1362 font-size: 27px !important;
1363 line-height: 14px !important;
1364 z-index: 1;
1365 }
1366 #charitable-template-container .charitable-template-list .charitable-template-list-container {
1367 display: flex;
1368 flex-wrap: wrap;
1369 margin-left: 30px;
1370 }
1371 #charitable-template-container .charitable-template-list .charitable-template-list-container.disabled {
1372 opacity: 0.15;
1373 pointer-events: none;
1374 }
1375 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item {
1376 width: 30%;
1377 display: inline-flex;
1378 margin: 10px;
1379 }
1380 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template {
1381 font-family: "Inter", sans-serif !important;
1382 border-radius: 3px;
1383 margin-bottom: 30px;
1384 margin-left: auto;
1385 margin-right: auto;
1386 min-height: 122px;
1387 padding: 15px;
1388 position: relative;
1389 max-width: 270px;
1390 box-shadow: 0 0 0 1px #DADADE;
1391 transition: box-shadow 0.15s ease-in-out;
1392 }
1393 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail {
1394 background-color: transparent;
1395 width: 100%;
1396 text-align: center;
1397 display: table;
1398 height: 160px;
1399 vertical-align: middle;
1400 max-width: 240px;
1401 padding: 0;
1402 margin: 0;
1403 }
1404 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .charitable-template-thumbnail {
1405 width: 240px;
1406 height: 160px;
1407 margin: 0 auto;
1408 background-size: cover;
1409 border-radius: 0;
1410 background-repeat: no-repeat;
1411 background-position: top;
1412 display: table;
1413 position: absolute;
1414 top: 15px;
1415 left: 15px;
1416 max-width: calc(100% - 30px);
1417 }
1418 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .charitable-template-thumbnail.charitable-template-thumbnail-simple-1-col, #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .charitable-template-thumbnail.charitable-template-thumbnail-simple-2-col, #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .charitable-template-thumbnail.charitable-template-thumbnail-simple-2-col-header {
1419 background-position: center;
1420 }
1421 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons {
1422 width: 240px;
1423 height: 160px;
1424 margin: 0 auto;
1425 display: table-cell;
1426 vertical-align: middle;
1427 top: 15px;
1428 left: 15px;
1429 visibility: hidden;
1430 opacity: 0;
1431 z-index: 999;
1432 }
1433 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons a {
1434 width: 75%;
1435 margin: 5px auto;
1436 color: #2d2d2d;
1437 padding-top: 6px;
1438 padding-bottom: 6px;
1439 font-weight: 600;
1440 visibility: hidden;
1441 opacity: 0;
1442 transition: opacity 0.35s ease-in-out;
1443 }
1444 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons a.create-campaign, #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons a.update-campaign {
1445 border: 0;
1446 background-color: #639F4F !important;
1447 color: #ffffff;
1448 }
1449 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons a.preview-campaign {
1450 border: 1px solid #A4A4AB;
1451 background-color: transparent !important;
1452 color: #ffffff;
1453 }
1454 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons a.create-campaign:hover, #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons a.update-campaign:hover {
1455 border: 0;
1456 background-color: #346225 !important;
1457 transition: background-color 0.5s ease;
1458 color: #ffffff;
1459 }
1460 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .template-thumbnail .template-buttons a.preview-campaign:hover {
1461 border: 1px solid #A4A4AB;
1462 background-color: rgba(255, 255, 255, 0.85) !important;
1463 transition: background-color 0.5s ease;
1464 color: #2d2d2d;
1465 }
1466 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template h4 {
1467 font-weight: 500;
1468 font-size: 16px;
1469 line-height: 24px;
1470 margin: 10px 0 5px 0;
1471 padding: 0;
1472 color: #3F414C;
1473 }
1474 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template p {
1475 margin: 0;
1476 color: #6A6C75;
1477 padding: 0;
1478 font-weight: 400;
1479 font-size: 14px;
1480 line-height: 21px;
1481 }
1482 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template:hover .template-buttons .template-thumbnail a {
1483 display: block;
1484 line-height: 31px;
1485 font-weight: 600;
1486 color: white;
1487 font-size: 14px;
1488 }
1489 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .charitable-banner-container {
1490 left: 20px;
1491 position: absolute;
1492 top: 20px;
1493 display: block;
1494 border-radius: 7px;
1495 background-color: #5aa152;
1496 padding: 5px 8px;
1497 border: 0;
1498 z-index: 2;
1499 }
1500 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template .charitable-banner {
1501 color: #fff;
1502 border: 0;
1503 font-weight: 400;
1504 font-size: 14px;
1505 line-height: 16px;
1506 }
1507 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template:hover:not(.active) {
1508 cursor: pointer;
1509 }
1510 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template:hover:not(.active) .template-thumbnail .charitable-template-thumbnail {
1511 display: table;
1512 z-index: 2;
1513 background-color: rgba(0, 0, 0, 0.7);
1514 background-blend-mode: darken;
1515 transition: background-color 0.5s ease;
1516 }
1517 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template:hover:not(.active) .template-thumbnail .template-buttons {
1518 visibility: visible;
1519 opacity: 1;
1520 }
1521 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template:hover:not(.active) .template-thumbnail .template-buttons a {
1522 visibility: visible;
1523 opacity: 1;
1524 display: block;
1525 z-index: 99;
1526 position: relative;
1527 }
1528 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template[data-template-code=lite-to-pro] .charitable-template-thumbnail {
1529 background-position: center;
1530 }
1531 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template.active:hover .template-buttons, #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item .charitable-template.active:active .template-buttons {
1532 opacity: 0;
1533 }
1534 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-section {
1535 width: 100%;
1536 margin: 0 25px;
1537 }
1538 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-section h4 {
1539 font-weight: 500;
1540 font-size: 16px;
1541 line-height: 18px;
1542 margin: 0 0 15px 0;
1543 }
1544 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-section.with-line {
1545 border-bottom: 1px solid #cccccc;
1546 }
1547 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner {
1548 background: rgba(226, 119, 48, 0.08);
1549 border-radius: 6px;
1550 display: flex;
1551 flex-direction: row;
1552 justify-content: space-between;
1553 align-items: center;
1554 padding-right: 20px;
1555 margin: 0 0 25px 0px;
1556 /* width: 910px; */
1557 }
1558 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner .charitable-template-content {
1559 padding: 20px;
1560 width: 80%;
1561 color: #444444;
1562 }
1563 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner .charitable-template-content h3 {
1564 font-weight: 600;
1565 font-size: 16px;
1566 line-height: 23px;
1567 margin-top: 0;
1568 margin-bottom: 5px;
1569 }
1570 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner .charitable-template-content p {
1571 font-weight: 400;
1572 font-size: 14px;
1573 line-height: 18px;
1574 margin: 0;
1575 }
1576 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner .charitable-template-upgrade-button {
1577 width: 20%;
1578 text-align: right;
1579 }
1580 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner .charitable-template-upgrade-button a {
1581 min-height: 13px;
1582 }
1583 @media screen and (max-width: 1279px) {
1584 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner #charitable-setup-templates-list .charitable-template-upgrade-banner .charitable-template-upgrade-button a {
1585 box-sizing: border-box;
1586 width: 100%;
1587 }
1588 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner .charitable-template-upgrade-button {
1589 width: auto;
1590 }
1591 }
1592 #charitable-template-container .charitable-templates-no-results {
1593 padding: 0 30px;
1594 }
1595
1596 .charitable-feedback-form-container {
1597 position: absolute;
1598 top: 200px;
1599 left: 0;
1600 right: 0;
1601 width: 100%;
1602 z-index: 9999991;
1603 transition: opacity 0.35s;
1604 opacity: 0;
1605 visibility: hidden;
1606 }
1607 .charitable-feedback-form-container.active {
1608 opacity: 1;
1609 visibility: visible;
1610 }
1611 .charitable-feedback-form-container .charitable-form {
1612 margin-left: auto;
1613 margin-right: auto;
1614 background: white;
1615 padding: 0px;
1616 border-radius: 10px 10px 0 0;
1617 }
1618 .charitable-feedback-form-container .charitable-form label {
1619 font-weight: 500;
1620 font-size: 14px;
1621 line-height: 20px;
1622 }
1623 .charitable-feedback-form-container .charitable-form-row {
1624 margin-top: 10px;
1625 margin-bottom: 10px;
1626 }
1627 .charitable-feedback-form-container .charitable-feedback-form-header {
1628 background-color: #282937;
1629 color: #E7E7E9;
1630 padding: 30px 0 30px 30px !important;
1631 font-size: 18px;
1632 font-weight: 600;
1633 border-radius: 10px 10px 0 0;
1634 }
1635 .charitable-feedback-form-container .charitable-feedback-form-header .charitable-feedback-form-title {
1636 color: white;
1637 user-select: none;
1638 font-size: inherit;
1639 font-family: inherit;
1640 display: inline-block;
1641 vertical-align: middle;
1642 }
1643 .charitable-feedback-form-container .charitable-feedback-form-interior {
1644 padding: 20px;
1645 }
1646 .charitable-feedback-form-container .charitable-feedback-form-required {
1647 color: red;
1648 font-size: 13px;
1649 line-height: 21px;
1650 }
1651 .charitable-feedback-form-container .charitable-templates-close-icon {
1652 color: white;
1653 padding-top: 5px;
1654 padding-right: 10px;
1655 font-size: 40px !important;
1656 height: 20px;
1657 width: 20px;
1658 position: absolute;
1659 top: 10px;
1660 right: 10px;
1661 cursor: pointer;
1662 opacity: 0.6;
1663 text-align: center;
1664 font-size: 27px !important;
1665 line-height: 14px !important;
1666 z-index: 1;
1667 }
1668
1669 @media screen and (max-width: 1300px) {
1670 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner {
1671 flex-direction: column;
1672 padding: 0 20px 20px 20px;
1673 margin: 0 0 25px 0;
1674 text-align: center;
1675 }
1676 #charitable-template-container .charitable-template-list .charitable-template-upgrade-banner .charitable-template-content {
1677 width: 100%;
1678 padding: 0;
1679 margin: 25px;
1680 }
1681 }
1682 @media (min-width: 990px) and (max-width: 1300px) {
1683 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item {
1684 width: 45%;
1685 }
1686 }
1687 @media (max-width: 990px) {
1688 #charitable-template-container .charitable-template-list .charitable-template-list-container .charitable-template-list-container-item {
1689 width: 90%;
1690 }
1691 }
1692 #charitable-builder .charitable-builder-modal {
1693 position: absolute;
1694 top: 0;
1695 width: 100%;
1696 z-index: 9999991;
1697 transition: opacity 0.65s ease-in-out;
1698 opacity: 0;
1699 visibility: hidden;
1700 transition: opacity 0.5s;
1701 display: flex;
1702 align-items: center;
1703 width: 100%;
1704 height: 100%;
1705 }
1706 #charitable-builder .charitable-builder-modal.active {
1707 opacity: 1;
1708 visibility: visible;
1709 z-index: 99999;
1710 }
1711 #charitable-builder .charitable-builder-modal .charitable-form {
1712 margin-left: auto;
1713 margin-right: auto;
1714 background: white;
1715 padding: 20px;
1716 border: 1px solid #ccc;
1717 max-width: 1000px;
1718 max-height: 1600px;
1719 width: 100%;
1720 }
1721 #charitable-builder .charitable-builder-modal .charitable-feedback-form-required {
1722 color: red;
1723 font-size: 13px;
1724 line-height: 21px;
1725 }
1726 #charitable-builder .charitable-builder-modal .charitable-templates-close-icon {
1727 color: #545660;
1728 padding-top: 5px;
1729 padding-right: 10px;
1730 font-size: 40px !important;
1731 height: 20px;
1732 width: 20px;
1733 position: absolute;
1734 top: 10px;
1735 right: 10px;
1736 cursor: pointer;
1737 opacity: 0.6;
1738 text-align: center;
1739 font-size: 27px !important;
1740 line-height: 14px !important;
1741 z-index: 1;
1742 }
1743 #charitable-builder .charitable-builder-modal .button-link {
1744 background-color: #5AA152;
1745 text-transform: capitalize;
1746 font-weight: 500;
1747 padding: 15px 25px;
1748 font-size: 16px;
1749 line-height: 20px;
1750 color: #ffffff !important;
1751 margin-left: 4px;
1752 position: relative;
1753 top: 0;
1754 text-decoration: none;
1755 border-radius: 5px;
1756 text-shadow: none;
1757 font-family: "Inter";
1758 line-height: normal;
1759 cursor: pointer;
1760 }
1761 #charitable-builder .charitable-builder-modal .button-link:hover,
1762 #charitable-builder .charitable-builder-modal .button-link:active {
1763 color: white;
1764 }
1765 #charitable-builder .charitable-builder-modal .charitable-templates-preview-headline {
1766 font-size: 32px;
1767 line-height: 32px;
1768 margin-bottom: 0;
1769 margin-top: 0;
1770 }
1771 #charitable-builder .charitable-builder-modal.charitable-builder-modal-template-preview .charitable-form {
1772 margin-left: auto;
1773 margin-right: auto;
1774 background: #fff;
1775 padding: 20px;
1776 border: 1px solid #ccc;
1777 max-width: 1000px;
1778 position: absolute;
1779 top: 125px;
1780 left: 0;
1781 right: 0;
1782 bottom: 75px;
1783 }
1784 #charitable-builder .charitable-builder-modal.charitable-builder-modal-template-preview .charitable-form .charitable-feedback-form-row-button {
1785 position: absolute;
1786 bottom: 0;
1787 left: 0;
1788 right: 0;
1789 background-color: white;
1790 margin-top: 0;
1791 margin-bottom: 0;
1792 padding: 25px 0;
1793 }
1794 #charitable-builder .charitable-builder-modal.charitable-builder-modal-template-preview .charitable-form .charitable-feedback-form-row-button a {
1795 margin: 0;
1796 width: 75%;
1797 margin-left: auto;
1798 margin-right: auto;
1799 display: block;
1800 }
1801 #charitable-builder .charitable-builder-modal.charitable-builder-modal-template-preview .charitable-form .charitable-form-row.charitable-feedback-form-preview-image {
1802 height: calc(100% - 160px);
1803 margin-top: 0;
1804 }
1805 #charitable-builder .charitable-builder-modal.charitable-builder-modal-template-preview .charitable-form .charitable-form-row.charitable-feedback-form-preview-image img {
1806 width: auto !important;
1807 max-width: 100%;
1808 height: 100%;
1809 margin-left: auto;
1810 margin-right: auto;
1811 display: block;
1812 }
1813 #charitable-builder .charitable-builder-modal.charitable-builder-modal-template-preview .charitable-form .charitable-templates-preview-description p {
1814 margin: 10px 0;
1815 }
1816
1817 .charitable-edit-campaign-title-area {
1818 position: relative;
1819 display: inline-block;
1820 width: calc(100% - 250px);
1821 }
1822 .charitable-edit-campaign-title-area input.charitable-form-name {
1823 font-size: 18px;
1824 font-weight: 400;
1825 padding: 10px 35px 10px 10px;
1826 display: inline-block;
1827 margin-right: 10px;
1828 border: 1px solid #cccccc;
1829 border-radius: 4px;
1830 width: 100%;
1831 }
1832 .charitable-edit-campaign-title-area input.charitable-form-name::-webkit-input-placeholder {
1833 font-weight: lighter;
1834 }
1835 .charitable-edit-campaign-title-area input.charitable-form-name::-moz-placeholder {
1836 font-weight: lighter;
1837 }
1838 .charitable-edit-campaign-title-area input.charitable-form-name::-ms-input-placeholder {
1839 font-weight: lighter;
1840 }
1841 .charitable-edit-campaign-title-area input.charitable-form-name[disabled] {
1842 pointer-events: none;
1843 }
1844 .charitable-edit-campaign-title-area input.charitable-form-name:focus {
1845 border: 1px solid #036aab;
1846 box-shadow: 0 0 0 1px #036aab;
1847 outline: none;
1848 }
1849 .charitable-edit-campaign-title-area input.charitable-form-name:hover {
1850 text-decoration: none;
1851 }
1852 .charitable-edit-campaign-title-area.edit input.charitable-form-name {
1853 border: none;
1854 box-shadow: none;
1855 margin-right: 20px;
1856 }
1857 .charitable-edit-campaign-title-area.edit input.charitable-form-name:focus {
1858 border: none;
1859 }
1860
1861 @media screen and (max-width: 1320px) {
1862 .charitable-edit-campaign-title-label {
1863 display: none;
1864 }
1865 .charitable-edit-campaign-title-area {
1866 width: 100%;
1867 margin-top: -5px;
1868 }
1869 }
1870