PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.13
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.13
1.8.13.1 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 / campaign-builder / builder-fields.css

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

1,714 lines 51.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .charitable-panel-fields {
2 width: 100vw;
3 height: 100vh;
4 }
5 .charitable-panel-fields .charitable-field-row:before {
6 content: "";
7 display: table;
8 }
9 .charitable-panel-fields .charitable-field-row:after {
10 clear: both;
11 content: "";
12 display: table;
13 }
14 .charitable-panel-fields #charitable-hidden {
15 display: none;
16 }
17 .charitable-panel-fields .charitable-field-dragging {
18 background-color: #f1f1f1;
19 }
20 .charitable-panel-fields .charitable-field-drag-out {
21 background: #036aab;
22 border: none;
23 border-radius: 4px;
24 color: #ffffff;
25 display: block;
26 margin: 20px 0 0 0;
27 padding: 12px 5px 12px 18px;
28 text-align: left;
29 width: 172px;
30 max-width: 172px;
31 z-index: 10000;
32 }
33 .charitable-panel-fields .charitable-field-drag-out i {
34 color: rgba(255, 255, 255, 0.65);
35 margin: 0 5px 0 0;
36 }
37 .charitable-panel-fields .charitable-field-drag-over,
38 .charitable-panel-fields .charitable-field-drag {
39 border: 1px dashed #cccccc;
40 border-radius: 6px;
41 color: #444444;
42 font-size: 14px;
43 margin: 0 0 5px 0;
44 padding: 20px;
45 text-align: center;
46 width: 100%;
47 }
48 .charitable-panel-fields .charitable-field-drag-placeholder {
49 border: 1px dashed #cccccc;
50 border-radius: 6px;
51 margin: 0 0 5px 0;
52 width: 100%;
53 height: 60px;
54 position: relative;
55 }
56 .charitable-panel-fields .charitable-field-drag-placeholder.charitable-field-drag-not-allowed {
57 border-color: #b32d2e;
58 }
59 .charitable-panel-fields .charitable-field-drag-placeholder.charitable-field-drag-locked-row::after {
60 content: "\f160";
61 font-family: "dashicons";
62 position: absolute;
63 top: 50%;
64 left: 50%;
65 transform: translate(-50%, -50%);
66 color: #b32d2e;
67 font-size: 24px;
68 line-height: 1;
69 pointer-events: none;
70 }
71 .charitable-panel-fields .charitable-field-drag-not-allowed {
72 cursor: not-allowed !important;
73 }
74 .charitable-panel-fields .charitable-field-drag-pending {
75 background-color: #f8f8f8;
76 border: 1px dashed #cccccc;
77 border-radius: 6px;
78 margin: 0 0 5px 0;
79 }
80 .charitable-panel-fields .charitable-field-drag-pending i {
81 color: #777777;
82 font-size: 18px;
83 line-height: 24px;
84 margin: 0 5px 0 10px;
85 }
86
87 #charitable-panel-design .charitable-panel-sidebar {
88 position: absolute;
89 top: calc(124px + var(--charitable-admin-bar-height));
90 bottom: 0;
91 left: 95px;
92 overflow: hidden;
93 transition-property: top, width, left;
94 transition-duration: 0.25s, 0.15s, 0.15s;
95 transition-timing-function: ease-out, ease-out, ease-in-out;
96 }
97 #charitable-panel-design .charitable-panel-sidebar .no-gap {
98 margin-bottom: 0;
99 }
100 #charitable-panel-design .charitable-panel-sidebar .sub-label {
101 color: #86919e;
102 font-size: 12px;
103 line-height: 14px;
104 margin: 8px 0 0 1px;
105 }
106 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns {
107 align-items: baseline;
108 display: flex;
109 flex-direction: row;
110 flex-wrap: nowrap;
111 justify-content: space-between;
112 margin-bottom: 20px;
113 }
114 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns + .charitable-field-options-columns {
115 margin-top: -10px;
116 }
117 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns:last-child {
118 margin-bottom: 0;
119 }
120 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns > .charitable-field-options-column:first-child {
121 margin-left: 1px;
122 }
123 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns > .charitable-field-options-column {
124 flex-grow: 1;
125 }
126 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-2 > .charitable-field-options-column {
127 max-width: calc(100%/2 - 6px);
128 }
129 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-3 > .charitable-field-options-column {
130 max-width: calc(100%/3 - 9px);
131 }
132 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-4 > .charitable-field-options-column {
133 max-width: calc(100%/4 - 10px);
134 }
135 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-5 > .charitable-field-options-column {
136 max-width: calc(100%/5 - 10px);
137 }
138 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-6 > .charitable-field-options-column {
139 max-width: calc(100%/6 - 10px);
140 }
141 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.charitable-field-options-columns-7 > .charitable-field-options-column {
142 max-width: calc(100%/7 - 11px);
143 text-align: center;
144 }
145 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.checkboxes-row > label {
146 margin-top: 0;
147 max-width: 24px;
148 }
149 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns.checkboxes-row > label input {
150 margin: 1px 0 5px 0;
151 }
152 #charitable-panel-design .charitable-panel-sidebar .charitable-field-options-columns select {
153 display: block;
154 }
155
156 .charitable-panel-fields .charitable-no-fields-area {
157 position: absolute;
158 top: 0;
159 left: 0;
160 right: 0;
161 z-index: 0;
162 }
163 .charitable-panel-fields .charitable-no-fields-area .no-fields-preview {
164 align-content: center;
165 background-image: url("../../images/campaign-builder/default-arrow.svg");
166 background-position: 15px 10px;
167 background-repeat: no-repeat;
168 background-size: 97px 83px;
169 min-height: calc(50vh - 260px - var(--charitable-admin-bar-height));
170 padding-bottom: 40px;
171 padding-top: 40px;
172 text-align: center;
173 width: 100%;
174 display: flex;
175 flex-direction: column;
176 justify-content: center;
177 align-items: center;
178 }
179 .charitable-panel-fields .charitable-no-fields-area .no-fields-preview::before {
180 background-image: url("../../images/campaign-builder/no-fields.svg");
181 background-position: center center;
182 background-repeat: no-repeat;
183 background-size: 371px 260px;
184 content: "";
185 display: block;
186 height: 275px;
187 width: 100%;
188 }
189 .charitable-panel-fields .charitable-no-fields-area .no-fields-preview h4 {
190 color: #444444;
191 font-size: 24px;
192 font-weight: 600;
193 line-height: 29px;
194 margin: 30px 0 10px;
195 }
196 .charitable-panel-fields .charitable-no-fields-area .no-fields-preview p {
197 color: #777777;
198 font-size: 16px;
199 font-weight: 400;
200 line-height: 19px;
201 margin: 0;
202 }
203 .charitable-panel-fields .charitable-preview-top-bar {
204 border-bottom: 1px solid #dddddd;
205 margin: 0 0 15px 0px;
206 padding-bottom: 15px;
207 width: 100%;
208 display: table;
209 }
210 .charitable-panel-fields .charitable-preview-top-bar:hover {
211 cursor: pointer;
212 }
213 .charitable-panel-fields .charitable-preview-top-bar .charitable-form-name {
214 font-size: 28px;
215 font-weight: 600;
216 line-height: 28px;
217 margin: 0;
218 padding: 0;
219 word-break: break-all;
220 }
221 .charitable-panel-fields .charitable-preview-top-bar mark {
222 font-weight: 300;
223 padding: 5px 8px;
224 font-size: 14px;
225 line-height: 14px;
226 background-color: #f8f8f8;
227 }
228 .charitable-panel-fields .charitable-preview-top-bar mark.charitable-builder-status-active {
229 color: #00a32a;
230 }
231 .charitable-panel-fields .charitable-preview-top-bar mark.charitable-builder-status-successful {
232 color: #e27730;
233 }
234 .charitable-panel-fields .charitable-preview-top-bar mark.charitable-builder-status-unsuccessful {
235 color: #d63638;
236 }
237 .charitable-panel-fields .charitable-preview-top-bar .charitable-campaign-theme-label {
238 font-weight: 300;
239 font-size: 80%;
240 }
241 .charitable-panel-fields .charitable-preview-top-bar .charitable-template-swatch {
242 width: 15px;
243 height: 15px;
244 display: inline-block;
245 border: 1px solid;
246 margin: 0 0 -3px 0;
247 }
248 .charitable-panel-fields .charitable-preview-top-bar .charitable-preview-top-bar-inner {
249 padding: 0 200px 15px 0;
250 }
251 .charitable-panel-fields .charitable-preview-top-bar .charitable-preview-top-bar-inner-left {
252 float: left;
253 }
254 .charitable-panel-fields .charitable-preview-top-bar .charitable-preview-top-bar-inner-right {
255 float: right;
256 }
257 .charitable-panel-fields .charitable-field-wrap {
258 padding-bottom: 19px;
259 }
260 .charitable-panel-fields .charitable-field-wrap.column {
261 padding-left: 15px;
262 padding-right: 15px;
263 }
264 .charitable-panel-fields .charitable-field {
265 border: 2px solid transparent;
266 border-radius: 0;
267 font-size: 14px;
268 margin: 5px 0;
269 padding: 5px;
270 position: relative;
271 transition-property: border-color;
272 transition-duration: 0.25s;
273 transition-timing-function: ease-in;
274 }
275 .charitable-panel-fields .charitable-field.charitable-no-duplicate a.charitable-field-delete {
276 right: 0;
277 }
278 .charitable-panel-fields .charitable-field.charitable-no-duplicate a.charitable-field-edit {
279 right: 30px;
280 }
281 .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover {
282 border: 2px solid #036aab;
283 cursor: pointer;
284 }
285 .charitable-panel-fields .charitable-field.active {
286 background-color: rgba(248, 248, 248, 0.05);
287 border: 2px solid #036aab;
288 }
289 .charitable-panel-fields .charitable-field .label-title {
290 cursor: pointer;
291 display: block;
292 font-size: 16px;
293 font-weight: 600;
294 line-height: 20px;
295 margin: 0 0 15px 0;
296 padding-right: 60px;
297 text-align: left;
298 word-break: break-word;
299 }
300 .charitable-panel-fields .charitable-field .label-title .required {
301 color: #d63638;
302 display: none;
303 }
304 .charitable-panel-fields .charitable-field .label-title .hidden_text,
305 .charitable-panel-fields .charitable-field .label-title .empty_text {
306 display: none;
307 }
308 .charitable-panel-fields .charitable-field.label_empty > .label-title {
309 color: #444444;
310 }
311 .charitable-panel-fields .charitable-field.label_empty > .label-title .empty_text {
312 display: inline;
313 color: #ffb900;
314 line-height: 1;
315 padding-right: 5px;
316 }
317 .charitable-panel-fields .charitable-field.label_empty > .label-title .hidden_text {
318 display: none !important;
319 }
320 .charitable-panel-fields .charitable-field.label_hide.label_empty > .label-title .text {
321 color: #444444;
322 }
323 .charitable-panel-fields .charitable-field.label_hide > .label-title {
324 color: #777777;
325 }
326 .charitable-panel-fields .charitable-field.label_hide > .label-title .hidden_text {
327 display: inline;
328 color: #777777;
329 line-height: 1;
330 padding-right: 5px;
331 }
332 .charitable-panel-fields .charitable-field.sublabel_hide .charitable-sub-label {
333 display: none;
334 }
335 .charitable-panel-fields .charitable-field.required .label-title .required {
336 display: inline-block;
337 font-weight: 300;
338 margin: 0 0 0 5px;
339 }
340 .charitable-panel-fields .charitable-field .charitable-sub-label {
341 color: #999999;
342 display: block;
343 font-size: 14px;
344 line-height: 17px;
345 margin: 5px 0 0 1px;
346 word-break: break-word;
347 }
348 .charitable-panel-fields .charitable-field input[readonly], .charitable-panel-fields .charitable-field input[disabled],
349 .charitable-panel-fields .charitable-field textarea[readonly],
350 .charitable-panel-fields .charitable-field textarea[disabled],
351 .charitable-panel-fields .charitable-field select[readonly],
352 .charitable-panel-fields .charitable-field select[disabled] {
353 background-color: #ffffff;
354 border: 1px solid #cccccc;
355 box-shadow: none;
356 color: #999999;
357 cursor: pointer;
358 opacity: 1;
359 }
360 .charitable-panel-fields .charitable-field input[type=text],
361 .charitable-panel-fields .charitable-field input[type=range],
362 .charitable-panel-fields .charitable-field input[type=email],
363 .charitable-panel-fields .charitable-field input[type=url],
364 .charitable-panel-fields .charitable-field input[type=password],
365 .charitable-panel-fields .charitable-field input[type=file],
366 .charitable-panel-fields .charitable-field select,
367 .charitable-panel-fields .charitable-field textarea {
368 background-color: #ffffff;
369 border: 1px solid #cccccc;
370 border-radius: 4px;
371 box-shadow: none;
372 display: block;
373 font-size: 16px;
374 height: 40px;
375 max-width: none;
376 padding: 6px 10px;
377 width: 60%;
378 min-width: 250px;
379 }
380 .charitable-panel-fields .charitable-field textarea {
381 height: 110px;
382 width: 100%;
383 min-width: 100%;
384 }
385 .charitable-panel-fields .charitable-field textarea[readonly], .charitable-panel-fields .charitable-field textarea[disabled] {
386 resize: none;
387 }
388 .charitable-panel-fields .charitable-field input[type=checkbox],
389 .charitable-panel-fields .charitable-field input[type=radio] {
390 margin-right: 10px;
391 }
392 .charitable-panel-fields .charitable-field select[multiple] {
393 height: auto;
394 }
395 .charitable-panel-fields .charitable-field select {
396 padding-right: 24px;
397 overflow: hidden !important;
398 text-overflow: ellipsis;
399 }
400 .charitable-panel-fields .charitable-field select > option {
401 color: inherit;
402 opacity: 1;
403 }
404 .charitable-panel-fields .charitable-field h6.charitable-preview-field-title {
405 font-size: 14px;
406 margin: 0 0 8px 5px;
407 position: absolute;
408 z-index: 9;
409 padding: 5px;
410 top: -5px;
411 left: 0;
412 color: white !important;
413 width: auto;
414 right: 0;
415 text-align: center;
416 border-top: 1px solid black;
417 }
418 .charitable-panel-fields .charitable-field h6.charitable-preview-field-title span {
419 background-color: rgba(0, 0, 0, 0.43);
420 display: table !important;
421 padding: 3px 10px !important;
422 margin: -5px auto 0 auto !important;
423 width: auto !important;
424 }
425 .charitable-panel-fields .charitable-field.size-small input[type=text],
426 .charitable-panel-fields .charitable-field.size-small input[type=range],
427 .charitable-panel-fields .charitable-field.size-small input[type=email],
428 .charitable-panel-fields .charitable-field.size-small input[type=url],
429 .charitable-panel-fields .charitable-field.size-small input[type=password],
430 .charitable-panel-fields .charitable-field.size-small select {
431 width: 25%;
432 }
433 .charitable-panel-fields .charitable-field.size-small textarea {
434 height: 60px;
435 }
436 .charitable-panel-fields .charitable-field.size-large input[type=text],
437 .charitable-panel-fields .charitable-field.size-large input[type=range],
438 .charitable-panel-fields .charitable-field.size-large input[type=email],
439 .charitable-panel-fields .charitable-field.size-large input[type=url],
440 .charitable-panel-fields .charitable-field.size-large input[type=password],
441 .charitable-panel-fields .charitable-field.size-large select {
442 width: 100%;
443 }
444 .charitable-panel-fields .charitable-field.size-large textarea {
445 height: 300px;
446 }
447 .charitable-panel-fields .charitable-field .charitable-field-row {
448 margin: 0 0 10px 0;
449 position: relative;
450 }
451 .charitable-panel-fields .charitable-field .charitable-field-row:last-of-type {
452 margin: 0;
453 }
454 .charitable-panel-fields .charitable-field .charitable-field-edit,
455 .charitable-panel-fields .charitable-field .charitable-field-duplicate,
456 .charitable-panel-fields .charitable-field .charitable-field-delete {
457 background-color: #036aab;
458 color: #ffffff;
459 font-size: 16px;
460 height: 30px;
461 opacity: 0;
462 position: absolute;
463 top: 0;
464 right: 0;
465 text-align: center;
466 width: 30px;
467 z-index: 10;
468 display: flex;
469 text-decoration: none;
470 transition-property: all;
471 transition-duration: 0.25s;
472 transition-timing-function: ease-in;
473 }
474 .charitable-panel-fields .charitable-field .charitable-field-edit i,
475 .charitable-panel-fields .charitable-field .charitable-field-duplicate i,
476 .charitable-panel-fields .charitable-field .charitable-field-delete i {
477 font-size: 14px;
478 padding: 8px;
479 }
480 .charitable-panel-fields .charitable-field .charitable-field-edit:hover,
481 .charitable-panel-fields .charitable-field .charitable-field-duplicate:hover,
482 .charitable-panel-fields .charitable-field .charitable-field-delete:hover {
483 background-color: #4285f4;
484 }
485 .charitable-panel-fields .charitable-field .charitable-field-edit:hover i,
486 .charitable-panel-fields .charitable-field .charitable-field-duplicate:hover i,
487 .charitable-panel-fields .charitable-field .charitable-field-delete:hover i {
488 color: #ffffff;
489 }
490 .charitable-panel-fields .charitable-field .charitable-field-delete {
491 color: #ffffff;
492 right: 30px;
493 font-size: 18px;
494 }
495 .charitable-panel-fields .charitable-field .charitable-field-edit {
496 color: #ffffff;
497 right: 60px;
498 font-size: 18px;
499 }
500 .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-edit, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-duplicate, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-delete, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered).active > .charitable-field-edit, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered).active > .charitable-field-duplicate, .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered).active > .charitable-field-delete {
501 opacity: 1;
502 }
503 .charitable-panel-fields .charitable-field.charitable-field-pagebreak .charitable-field-duplicate {
504 display: none;
505 }
506 .charitable-panel-fields .charitable-field.charitable-field-missing {
507 text-align: center;
508 border: 2px solid;
509 overflow: hidden;
510 position: relative;
511 }
512 .charitable-panel-fields .charitable-field.charitable-field-missing .charitable-field-delete {
513 right: 0;
514 }
515 .charitable-panel-fields .charitable-field.charitable-field-missing .education-buttons {
516 margin: 10px auto;
517 }
518 .charitable-panel-fields .charitable-field.charitable-field-missing p strong {
519 font-weight: 600;
520 }
521 .charitable-panel-fields .charitable-field.charitable-field-missing .button-link {
522 background-color: #5AA152;
523 color: #ffffff;
524 margin-left: 4px;
525 padding: 10px 30px;
526 position: relative;
527 top: 0;
528 text-decoration: none;
529 border-radius: 5px;
530 text-shadow: none;
531 font-weight: 600;
532 font-family: "Inter";
533 font-size: 16px;
534 line-height: normal;
535 cursor: pointer;
536 display: inline-block;
537 opacity: 1 !important;
538 }
539 .charitable-panel-fields .charitable-field.charitable-field-missing .button-link:hover {
540 color: white;
541 }
542 .charitable-panel-fields .charitable-field.charitable-field-missing button {
543 background-color: #e27730;
544 border: 0;
545 color: #fff;
546 font-weight: 600;
547 text-transform: uppercase;
548 -webkit-transition: background 0.1s;
549 transition: background 0.1s;
550 padding: 10px 20px;
551 min-width: 83px;
552 border-radius: 5px;
553 font-size: 16px;
554 line-height: 20px;
555 outline: none;
556 cursor: pointer;
557 }
558 .charitable-panel-fields .charitable-field.charitable-field-missing .charitable-missing-addon-content {
559 position: relative;
560 padding: 10px;
561 display: table;
562 margin-left: auto;
563 margin-right: auto;
564 border: 1px solid rgba(204, 204, 204, 0.8);
565 }
566 .charitable-panel-fields .charitable-field.charitable-field-missing .charitable-missing-addon-bg {
567 opacity: 0.4;
568 position: absolute;
569 left: 0;
570 top: 0;
571 width: 100%;
572 height: 100%;
573 background-size: contain;
574 background-repeat: repeat-x;
575 background-position: left;
576 }
577 .charitable-panel-fields .charitable-field .charitable-field-helper {
578 background: #eeeeee;
579 border-left: 1px dashed #cccccc;
580 border-radius: 6px 0;
581 border-top: 1px dashed #cccccc;
582 bottom: 0;
583 color: #999999;
584 font-size: 11px;
585 line-height: 14px;
586 font-weight: 500;
587 opacity: 0;
588 padding: 9px;
589 position: absolute;
590 right: 0;
591 z-index: 10;
592 display: flex;
593 justify-content: right;
594 align-items: center;
595 transition-property: all;
596 transition-duration: 0.25s;
597 transition-timing-function: ease-in;
598 }
599 .charitable-panel-fields .charitable-field .charitable-field-helper-edit {
600 margin-right: 5px;
601 }
602 .charitable-panel-fields .charitable-field .charitable-field-helper-drag {
603 position: relative;
604 padding-left: 5px;
605 margin-right: 5px;
606 }
607 .charitable-panel-fields .charitable-field .charitable-field-helper-drag:before {
608 content: "";
609 position: absolute;
610 width: 1px;
611 height: calc(100% - 6px);
612 background: #a6a6a6;
613 left: 0;
614 top: 3px;
615 }
616 .charitable-panel-fields .charitable-field .charitable-field-helper-hide {
617 color: #a6a6a6;
618 margin-left: 5px;
619 font-size: 14px;
620 width: 14px;
621 height: 14px;
622 text-align: center;
623 }
624 .charitable-panel-fields .charitable-field .charitable-field-helper-hide:hover {
625 color: #777777;
626 }
627 .charitable-panel-fields .charitable-field-not-draggable .charitable-field-helper-drag {
628 display: none;
629 }
630 .charitable-panel-fields .charitable-field:not(.charitable-field-child-hovered):hover > .charitable-field-helper {
631 opacity: 1;
632 }
633 .charitable-panel-fields .charitable-field.charitable-field-radio .charitable-alert-dynamic, .charitable-panel-fields .charitable-field.charitable-field-checkbox .charitable-alert-dynamic, .charitable-panel-fields .charitable-field.charitable-field-payment-multiple .charitable-alert-dynamic, .charitable-panel-fields .charitable-field.charitable-field-payment-checkbox .charitable-alert-dynamic {
634 margin: 15px 0 0 0;
635 }
636 .charitable-panel-fields .charitable-field.charitable-field-stick .charitable-field-delete,
637 .charitable-panel-fields .charitable-field.charitable-field-stick .charitable-field-helper {
638 display: none !important;
639 }
640 .charitable-panel-fields .charitable-field .description {
641 clear: both;
642 color: #777777;
643 font-size: 14px;
644 margin: 5px 0 0 0;
645 word-break: break-word;
646 }
647 .charitable-panel-fields .charitable-field .description:empty {
648 margin: 0;
649 }
650 .charitable-panel-fields .charitable-field .description.disclaimer {
651 background-color: #ffffff;
652 border: 1px solid #cccccc;
653 font-size: 12px;
654 height: 125px;
655 margin-top: 15px;
656 overflow-y: scroll;
657 padding: 10px 10px 0 10px;
658 }
659 .charitable-panel-fields .charitable-field .description.disclaimer p {
660 font-size: inherit;
661 line-height: 17px;
662 margin: 0 0 15px 0;
663 }
664 .charitable-panel-fields .ui-sortable-disabled .charitable-field .charitable-field-duplicate,
665 .charitable-panel-fields .ui-sortable-disabled .charitable-field .charitable-field-edit,
666 .charitable-panel-fields .ui-sortable-disabled .charitable-field .charitable-field-delete {
667 cursor: no-drop;
668 }
669 .charitable-panel-fields .charitable-field-submit {
670 margin-bottom: 0;
671 }
672 .charitable-panel-fields .charitable-field-submit input[type=submit] {
673 background: #999999;
674 border: none;
675 border-radius: 4px;
676 color: #ffffff;
677 cursor: pointer;
678 font-size: 17px;
679 font-weight: 600;
680 line-height: 21px;
681 padding: 10px 15px;
682 }
683 .charitable-panel-fields .charitable-field-submit input[type=submit]:focus {
684 border: none;
685 box-shadow: none;
686 }
687
688 #charitable-panel-design .charitable-tabs {
689 background: #e0e8f0;
690 border-bottom: 1px solid #ced7e0;
691 display: flex;
692 flex-wrap: nowrap;
693 left: 95px;
694 margin: 0;
695 padding: 0;
696 position: fixed;
697 top: calc(76px + var(--charitable-admin-bar-height));
698 width: 400px;
699 z-index: 1;
700 transition-property: top, width, left;
701 transition-duration: 0.25s, 0.15s, 0.15s;
702 transition-timing-function: ease-out;
703 }
704 #charitable-panel-design .charitable-tabs .active {
705 background: #ebf3fc;
706 }
707 #charitable-panel-design .charitable-tabs li {
708 margin: 0;
709 width: 50%;
710 position: relative;
711 }
712 #charitable-panel-design .charitable-tabs li:last-of-type {
713 border-left: 1px solid #ced7e0;
714 }
715 #charitable-panel-design .charitable-tabs a {
716 color: #444444;
717 display: block;
718 font-size: 16px;
719 font-weight: 400;
720 line-height: 20px;
721 overflow: hidden;
722 padding: 14px;
723 text-align: center;
724 text-decoration: none;
725 text-overflow: ellipsis;
726 white-space: nowrap;
727 }
728 #charitable-panel-design .charitable-tabs a:hover {
729 color: #777777;
730 text-decoration: none;
731 }
732 #charitable-panel-design .charitable-tabs a:focus {
733 -webkit-box-shadow: none;
734 box-shadow: none;
735 }
736 #charitable-panel-design .charitable-tabs a i {
737 color: #86919e;
738 font-size: 16px;
739 margin-right: 10px;
740 }
741 #charitable-panel-design .charitable-tabs a.active {
742 pointer-events: none;
743 }
744 #charitable-panel-design .charitable-tabs a.active, #charitable-panel-design .charitable-tabs a.active:hover {
745 color: #444444;
746 font-weight: 600;
747 text-decoration: none;
748 }
749
750 #charitable-panel-design .charitable-tab-content {
751 display: none;
752 margin: 40px 0 0 0;
753 position: relative;
754 height: calc(100% - 40px);
755 overflow: auto;
756 }
757 #charitable-panel-design .charitable-tab-content.charitable-add-fields {
758 display: block;
759 margin-top: 0;
760 padding: 20px;
761 height: 100%;
762 }
763 #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups {
764 margin-top: 0;
765 height: 100%;
766 }
767 #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups:before {
768 display: none !important;
769 }
770 #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups .charitable-field-option-group-toggle,
771 #charitable-panel-design .charitable-tab-content.charitable-hide-options-groups .charitable-group-toggle {
772 display: none !important;
773 }
774
775 .charitable-add-fields-group {
776 border-bottom: 1px solid #ced7e0;
777 position: relative;
778 }
779 .charitable-add-fields-group:first-of-type {
780 margin-top: -20px;
781 }
782 .charitable-add-fields-group:last-of-type {
783 margin-bottom: 0;
784 padding-bottom: 0;
785 }
786 .charitable-add-fields-group a {
787 color: #444444;
788 display: block;
789 font-size: 16px;
790 font-weight: 600;
791 margin: 0;
792 outline: 0;
793 overflow: hidden;
794 padding: 20px 0;
795 text-decoration: none;
796 }
797 .charitable-add-fields-group a:hover {
798 text-decoration: none;
799 }
800 .charitable-add-fields-group a:active, .charitable-add-fields-group a:focus {
801 outline: 0;
802 }
803 .charitable-add-fields-group a i {
804 color: #86919e;
805 float: right;
806 font-size: 20px;
807 margin: -2px 0 0 0;
808 transition-property: transform;
809 transition-duration: 0.4s;
810 transition-timing-function: ease-out;
811 }
812 .charitable-add-fields-group a i.charitable-angle-right {
813 transform: rotate(-90deg);
814 }
815 .charitable-add-fields-group span.charitable-group-description {
816 display: inline-block;
817 font-size: 14px;
818 line-height: 14px;
819 margin: 5px 0 0 0;
820 font-weight: 200;
821 }
822 .charitable-add-fields-group .charitable-add-fields-buttons {
823 display: flex;
824 flex-wrap: wrap;
825 justify-content: space-between;
826 margin-bottom: 20px;
827 overflow: hidden;
828 }
829 .charitable-add-fields-group .charitable-group-rows {
830 width: 100%;
831 }
832 .charitable-add-fields-group.charitable-close .charitable-group-rows, .charitable-add-fields-group.charitable-closed .charitable-group-rows {
833 display: none;
834 }
835 .charitable-add-fields-group .charitable-add-fields-button-wrap {
836 width: calc(50% - 8px);
837 margin: 16px 0 0 0;
838 position: relative;
839 }
840 .charitable-add-fields-group .charitable-add-fields-button-wrap .charitable-check {
841 position: absolute;
842 top: -10px;
843 left: -10px;
844 width: 20px;
845 height: 20px;
846 z-index: 9;
847 background-image: url("../../images/campaign-builder/unchecked-circle.svg");
848 background-repeat: no-repeat;
849 background-size: contain;
850 border: 2px solid green;
851 border-radius: 50%;
852 }
853 .charitable-add-fields-group .charitable-add-fields-button-wrap .charitable-check.checked {
854 background-image: url("../../images/campaign-builder/check-circle.svg");
855 }
856 .charitable-add-fields-group button {
857 background-color: #036aab;
858 border: none;
859 border-radius: 4px;
860 color: #ffffff;
861 display: block;
862 margin: 16px 0 0 0;
863 width: 100%;
864 overflow: hidden;
865 padding: 12px 5px 12px 14px;
866 text-align: left;
867 text-overflow: ellipsis;
868 white-space: nowrap;
869 }
870 .charitable-add-fields-group button:hover {
871 background-color: #215d8f;
872 cursor: pointer;
873 }
874 .charitable-add-fields-group button:disabled:hover, .charitable-add-fields-group button.ui-draggable-disabled:hover {
875 background-color: #036aab;
876 cursor: no-drop;
877 }
878 .charitable-add-fields-group button:nth-child(1), .charitable-add-fields-group button:nth-child(2) {
879 margin-top: 0;
880 }
881 .charitable-add-fields-group button i {
882 color: rgba(255, 255, 255, 0.6);
883 display: inline-block;
884 margin: 0 7px 0 0;
885 }
886 .charitable-add-fields-group.charitable-add-fields-group-recommended .charitable-add-fields-button-wrap {
887 position: relative;
888 }
889
890 .charitable-add-fields-group-recommended .charitable-add-fields-buttons {
891 overflow: visible;
892 }
893
894 .charitable-closed .charitable-group-rows {
895 display: none;
896 }
897
898 .charitable-group-rows.row-first {
899 margin-top: 20px;
900 }
901
902 .charitable-field-option-row,
903 .charitable-group-row {
904 margin-bottom: 20px;
905 }
906 .charitable-field-option-row-description p.note,
907 .charitable-group-row-description p.note {
908 margin-top: -15px;
909 }
910 .charitable-field-option-row label,
911 .charitable-group-row label {
912 display: block;
913 font-size: 14px;
914 font-weight: 400;
915 line-height: 17px;
916 margin: 0 0 8px 1px;
917 }
918 .charitable-field-option-row label.inline,
919 .charitable-group-row label.inline {
920 display: inline-block;
921 font-weight: 400;
922 margin: 0 0 0 10px;
923 }
924 .charitable-field-option-row label + .charitable-field-option-in-label-right,
925 .charitable-group-row label + .charitable-field-option-in-label-right {
926 display: inline-block;
927 float: right;
928 margin-bottom: 0;
929 margin-top: -27px;
930 }
931 .charitable-field-option-row label + .charitable-field-option-in-label-right:after,
932 .charitable-group-row label + .charitable-field-option-in-label-right:after {
933 clear: both;
934 content: "";
935 display: table;
936 }
937 .charitable-field-option-row label select,
938 .charitable-field-option-row label input,
939 .charitable-field-option-row label textarea,
940 .charitable-field-option-row label .ql-toolbar,
941 .charitable-group-row label select,
942 .charitable-group-row label input,
943 .charitable-group-row label textarea,
944 .charitable-group-row label .ql-toolbar {
945 margin-top: 10px;
946 }
947 .charitable-field-option-row label textarea.ql-container,
948 .charitable-group-row label textarea.ql-container {
949 margin: 0;
950 border-radius: 0;
951 width: 100%;
952 }
953 .charitable-field-option-row .after-label-description,
954 .charitable-group-row .after-label-description {
955 color: #86919e;
956 float: right;
957 font-size: 12px;
958 text-decoration: none;
959 }
960 .charitable-field-option-row .after-label-description:hover,
961 .charitable-group-row .after-label-description:hover {
962 color: #777777;
963 text-decoration: underline;
964 }
965 .charitable-field-option-row input:not(:focus),
966 .charitable-field-option-row textarea:not(:focus),
967 .charitable-field-option-row select:not(:focus),
968 .charitable-group-row input:not(:focus),
969 .charitable-group-row textarea:not(:focus),
970 .charitable-group-row select:not(:focus) {
971 border-color: #b0b6bd;
972 }
973 .charitable-field-option-row input[type=checkbox],
974 .charitable-field-option-row input[type=radio],
975 .charitable-group-row input[type=checkbox],
976 .charitable-group-row input[type=radio] {
977 margin-right: 0;
978 }
979 .charitable-field-option-row input[type=text],
980 .charitable-field-option-row input[type=number],
981 .charitable-field-option-row textarea,
982 .charitable-field-option-row select,
983 .charitable-group-row input[type=text],
984 .charitable-group-row input[type=number],
985 .charitable-group-row textarea,
986 .charitable-group-row select {
987 width: calc(100% - 2px);
988 }
989 .charitable-field-option-row input[type=text].has-before,
990 .charitable-group-row input[type=text].has-before {
991 float: right;
992 width: 95%;
993 }
994 .charitable-field-option-row .before-input,
995 .charitable-group-row .before-input {
996 float: left;
997 padding: 7px 0 0 0;
998 width: 4%;
999 }
1000 .charitable-field-option-row p,
1001 .charitable-group-row p {
1002 font-size: 14px;
1003 margin: 0;
1004 }
1005 .charitable-field-option-row .meta,
1006 .charitable-group-row .meta {
1007 font-weight: 400;
1008 }
1009 .charitable-field-option-row span.id,
1010 .charitable-group-row span.id {
1011 color: #86919e;
1012 font-size: 12px;
1013 }
1014 .charitable-field-option-row.charitable-field-option-row-code textarea,
1015 .charitable-group-row.charitable-field-option-row-code textarea {
1016 font-family: monospace;
1017 font-size: 12px;
1018 min-height: 120px;
1019 }
1020 .charitable-field-option-row.charitable-field-option-row-limit_controls,
1021 .charitable-group-row.charitable-field-option-row-limit_controls {
1022 align-items: center;
1023 display: flex;
1024 }
1025 .charitable-field-option-row.charitable-field-option-row-limit_controls.charitable-hide,
1026 .charitable-group-row.charitable-field-option-row-limit_controls.charitable-hide {
1027 display: none;
1028 }
1029 .charitable-field-option-row.charitable-field-option-row-limit_controls input,
1030 .charitable-group-row.charitable-field-option-row-limit_controls input {
1031 margin-right: 10px;
1032 }
1033 .charitable-field-option-row.color-picker-row,
1034 .charitable-group-row.color-picker-row {
1035 overflow: visible;
1036 }
1037 .charitable-field-option-row.color-picker-row .minicolors,
1038 .charitable-group-row.color-picker-row .minicolors {
1039 width: 100%;
1040 }
1041 .charitable-field-option-row.color-picker-row .minicolors .minicolors-swatch,
1042 .charitable-group-row.color-picker-row .minicolors .minicolors-swatch {
1043 height: 22px;
1044 width: 22px;
1045 border-radius: 2px;
1046 border: none;
1047 overflow: hidden;
1048 box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
1049 }
1050 .charitable-field-option-row.color-picker-row .minicolors .minicolors-swatch .minicolors-swatch-color,
1051 .charitable-group-row.color-picker-row .minicolors .minicolors-swatch .minicolors-swatch-color {
1052 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1053 }
1054 .charitable-field-option-row.color-picker-row .charitable-color-picker,
1055 .charitable-group-row.color-picker-row .charitable-color-picker {
1056 height: auto;
1057 padding-left: 35px !important;
1058 }
1059 .charitable-field-option-row .coloris-layout,
1060 .charitable-group-row .coloris-layout {
1061 max-width: none;
1062 width: 100%;
1063 margin-top: 2px;
1064 margin-bottom: 2px;
1065 }
1066 .charitable-field-option-row .coloris-layout label,
1067 .charitable-group-row .coloris-layout label {
1068 display: inline-block;
1069 width: 75px;
1070 font-size: 13px;
1071 line-height: 26px;
1072 }
1073 .charitable-field-option-row .coloris-layout .clr-field,
1074 .charitable-group-row .coloris-layout .clr-field {
1075 width: 100px;
1076 float: right;
1077 }
1078 .charitable-field-option-row .coloris-layout .clr-field button,
1079 .charitable-group-row .coloris-layout .clr-field button {
1080 border-radius: 25px;
1081 left: 0;
1082 width: 20px;
1083 height: 20px;
1084 margin: 0;
1085 left: -30px;
1086 cursor: pointer;
1087 }
1088 .charitable-field-option-row .coloris-layout .clr-field button::after,
1089 .charitable-group-row .coloris-layout .clr-field button::after {
1090 cursor: pointer;
1091 pointer-events: fill;
1092 }
1093 .charitable-field-option-row .coloris-layout .clr-field input,
1094 .charitable-group-row .coloris-layout .clr-field input {
1095 width: 100px;
1096 height: 32px;
1097 padding: 0 10px 0 10px;
1098 border: 1px solid #ccc;
1099 border-radius: 5px;
1100 font-family: inherit;
1101 font-size: inherit;
1102 font-weight: inherit;
1103 box-sizing: border-box;
1104 margin: 2px 0;
1105 }
1106 .charitable-field-option-row .charitable-confirm-disabled .charitable-field-option-row-confirmation_placeholder,
1107 .charitable-field-option-row .charitable-confirm-disabled .charitable-field-option-row-sublabel_hide,
1108 .charitable-group-row .charitable-confirm-disabled .charitable-field-option-row-confirmation_placeholder,
1109 .charitable-group-row .charitable-confirm-disabled .charitable-field-option-row-sublabel_hide {
1110 display: none;
1111 }
1112
1113 #charitable-field-options .no-fields.charitable-alert {
1114 position: fixed;
1115 z-index: 100;
1116 margin-top: -20px;
1117 margin-left: 20px;
1118 width: 360px;
1119 }
1120
1121 #charitable-panel-design .layout-selector-display .layouts {
1122 background-color: #ffffff;
1123 border: 1px solid #b0b6bd;
1124 border-radius: 4px;
1125 display: flex;
1126 flex-wrap: wrap;
1127 margin: 1px !important;
1128 padding: 10px 5px 2px 5px;
1129 width: 100% !important;
1130 }
1131 #charitable-panel-design .layout-selector-display .layout-selector-display-layout {
1132 cursor: pointer;
1133 min-width: 25%;
1134 padding: 0 5px 5px 5px;
1135 }
1136 #charitable-panel-design .layout-selector-display span {
1137 background-color: #b0b6bd;
1138 border: 1px solid #ffffff;
1139 display: inline-block;
1140 height: 30px;
1141 transition-property: background-color;
1142 transition-duration: 0.25s;
1143 transition-timing-function: ease-in;
1144 }
1145 #charitable-panel-design .layout-selector-display span.one-half {
1146 width: 50%;
1147 }
1148 #charitable-panel-design .layout-selector-display span.one-third {
1149 width: 33.3333333333%;
1150 }
1151 #charitable-panel-design .layout-selector-display span.two-third {
1152 width: 66.6666666667%;
1153 }
1154 #charitable-panel-design .layout-selector-display span.one-fourth {
1155 width: 25%;
1156 }
1157 #charitable-panel-design .layout-selector-display span.two-fourth {
1158 width: 50%;
1159 }
1160 #charitable-panel-design .layout-selector-display .layout-selector-display-layout:hover span,
1161 #charitable-panel-design .layout-selector-display .layout-selector-display-columns span:hover {
1162 background-color: #036aab;
1163 }
1164 #charitable-panel-design .layout-selector-display .layout-selector-display-columns {
1165 min-width: 100%;
1166 padding: 0 5px 5px 5px;
1167 }
1168 #charitable-panel-design .layout-selector-display .layout-selector-display-columns span {
1169 border: 2px solid #ffffff;
1170 cursor: pointer;
1171 height: 70px;
1172 }
1173
1174 .charitable-icon-picker-jconfirm-box {
1175 border-top: none !important;
1176 }
1177
1178 .charitable-icon-picker-jconfirm-content-pane {
1179 margin-bottom: 15px !important;
1180 background-color: #f8f8f8;
1181 border-radius: 6px;
1182 }
1183
1184 .charitable-icon-picker-title .jconfirm-title {
1185 margin-top: 0 !important;
1186 }
1187 .charitable-icon-picker-title .charitable-icon-picker-description {
1188 display: block;
1189 margin: 15px 0 25px 0;
1190 font-size: 16px;
1191 line-height: 22px;
1192 font-weight: normal;
1193 }
1194 .charitable-icon-picker-title input {
1195 width: 100%;
1196 margin: 10px auto;
1197 border: none;
1198 box-shadow: 0 0 0 1px #cccccc;
1199 text-align: center;
1200 height: 40px;
1201 border-radius: 20px;
1202 transition: box-shadow 0.25s ease-in-out;
1203 }
1204 .charitable-icon-picker-title input:focus {
1205 box-shadow: 0 0 0 2px #036aab;
1206 }
1207 .charitable-icon-picker-title input::placeholder {
1208 color: #bbbbbb;
1209 }
1210
1211 .charitable-icon-picker-container .charitable-icon-picker-icons {
1212 display: grid;
1213 grid-template-columns: repeat(5, 1fr);
1214 gap: 22px;
1215 grid-auto-rows: min-content;
1216 padding: 21px;
1217 min-height: 368px;
1218 }
1219 .charitable-icon-picker-container .charitable-icon-picker-icons li {
1220 background-color: #ffffff;
1221 box-shadow: 0 0 0 1px #cccccc;
1222 border-radius: 6px;
1223 display: flex;
1224 gap: 10px;
1225 flex-direction: column;
1226 cursor: pointer;
1227 padding: 10px;
1228 margin: 0;
1229 transition: box-shadow 0.05s ease-in-out;
1230 }
1231 .charitable-icon-picker-container .charitable-icon-picker-icons li:hover {
1232 box-shadow: 0 0 0 2px #777777, 0 4px 4px rgba(0, 0, 0, 0.1);
1233 }
1234 .charitable-icon-picker-container .charitable-icon-picker-icons li.selected {
1235 box-shadow: 0 0 0 2px #e27730, 0 4px 4px rgba(0, 0, 0, 0.1);
1236 }
1237 .charitable-icon-picker-container .charitable-icon-picker-icons li.selected .ic-fa-solid,
1238 .charitable-icon-picker-container .charitable-icon-picker-icons li.selected .ic-fa-brands {
1239 color: #e27730;
1240 }
1241 .charitable-icon-picker-container .charitable-icon-picker-icons li.selected span {
1242 color: #777777;
1243 }
1244 .charitable-icon-picker-container .charitable-icon-picker-icons li .ic-fa-brands,
1245 .charitable-icon-picker-container .charitable-icon-picker-icons li .ic-fa-regular,
1246 .charitable-icon-picker-container .charitable-icon-picker-icons li .ic-fa-solid {
1247 font-size: var(--charitable-icon-choices-size-medium);
1248 line-height: var(--charitable-icon-choices-size-medium);
1249 color: #777777;
1250 }
1251 .charitable-icon-picker-container .charitable-icon-picker-icons li span {
1252 font-size: 13px;
1253 line-height: 16px;
1254 color: #bbbbbb;
1255 font-weight: 400;
1256 width: 102px;
1257 white-space: nowrap;
1258 overflow: hidden;
1259 text-overflow: ellipsis;
1260 }
1261 .charitable-icon-picker-container .charitable-icon-picker-pagination {
1262 overflow: hidden;
1263 height: 0;
1264 }
1265 .charitable-icon-picker-container .charitable-icon-picker-not-found {
1266 display: flex;
1267 align-items: center;
1268 justify-content: center;
1269 color: #777777;
1270 position: absolute;
1271 top: 0;
1272 right: 0;
1273 bottom: 0;
1274 left: 0;
1275 }
1276 .charitable-icon-picker-container .charitable-icon-picker-not-found.charitable-hidden {
1277 display: none;
1278 }
1279 .charitable-icon-picker-container .charitable-icon-picker-not-found strong {
1280 margin-left: 5px;
1281 }
1282
1283 .smart-tags-list,
1284 .smart-tags-list-display {
1285 background-color: #ffffff;
1286 border: 1px solid #b0b6bd;
1287 border-radius: 4px;
1288 max-height: 175px;
1289 overflow-x: hidden;
1290 overflow-y: scroll;
1291 padding: 0;
1292 }
1293 .smart-tags-list li.heading,
1294 .smart-tags-list-display li.heading {
1295 padding: 10px !important;
1296 }
1297
1298 .charitable-panel-content .smart-tags-list,
1299 .charitable-panel-content .smart-tags-list-display {
1300 border-color: #cccccc;
1301 }
1302
1303 .charitable-toggle-control {
1304 display: flex;
1305 margin: 6px 1px 5px 0px;
1306 align-items: flex-end;
1307 }
1308 .charitable-toggle-control input[type=checkbox] {
1309 display: none;
1310 height: 0;
1311 width: 0;
1312 }
1313 .charitable-toggle-control input[type=checkbox]:checked + label.charitable-toggle-control-icon {
1314 background-color: #036aab;
1315 }
1316 .charitable-toggle-control input[type=checkbox]:checked + label.charitable-toggle-control-icon:after {
1317 left: calc(100% - 13px - 2px);
1318 }
1319 .charitable-toggle-control span, .charitable-toggle-control label {
1320 display: inline-block;
1321 margin-bottom: 0;
1322 margin-left: 5px;
1323 }
1324 .charitable-toggle-control label {
1325 cursor: pointer;
1326 }
1327 .charitable-toggle-control .charitable-toggle-control-label {
1328 margin: 0 0 0 6px;
1329 max-width: calc(100% - 65px);
1330 }
1331 .charitable-toggle-control .charitable-toggle-control-label:hover {
1332 cursor: pointer;
1333 }
1334 .charitable-toggle-control .charitable-toggle-control-status {
1335 color: #86919e;
1336 font-size: 12px;
1337 line-height: 14px;
1338 margin: 2px 5px;
1339 }
1340 .charitable-toggle-control .charitable-toggle-control-icon {
1341 background-color: #bbbbbb;
1342 border-radius: 8.5px;
1343 cursor: pointer;
1344 display: inline-block;
1345 height: 17px;
1346 margin: 0 1px;
1347 position: relative;
1348 text-indent: -9999px;
1349 width: 32px;
1350 }
1351 .charitable-toggle-control .charitable-toggle-control-icon:after {
1352 background: #ffffff;
1353 border-radius: 50%;
1354 content: "";
1355 height: 15px;
1356 left: 2px;
1357 position: absolute;
1358 top: 1px;
1359 width: 13px;
1360 transition-property: all;
1361 transition-duration: 0.25s;
1362 transition-timing-function: ease-out;
1363 }
1364 .charitable-toggle-control:hover input:checked + label.charitable-toggle-control-icon {
1365 background-color: #215d8f;
1366 }
1367 .charitable-toggle-control:hover .charitable-toggle-control-icon {
1368 background-color: #777777;
1369 }
1370
1371 /* Disabled toggle — dim everything and block interaction; pointer-events on labels
1372 so the user can't click them to toggle the input. */
1373 .charitable-panel-field-toggle-disabled {
1374 opacity: 0.55;
1375 }
1376 .charitable-panel-field-toggle-disabled .charitable-toggle-control input[type=checkbox] {
1377 cursor: not-allowed;
1378 }
1379 .charitable-panel-field-toggle-disabled .charitable-toggle-control label {
1380 cursor: not-allowed;
1381 pointer-events: none;
1382 }
1383 .charitable-panel-field-toggle-disabled .charitable-toggle-control .charitable-toggle-control-icon {
1384 background-color: #c8ced4 !important;
1385 }
1386
1387 .charitable-group.charitable-layout-options-tab-group .charitable-toggle-control-icon {
1388 margin: -4px 1px;
1389 }
1390
1391 .charitable-panel-sidebar .charitable-toggle-control .charitable-toggle-control-icon {
1392 background-color: #b0b6bd;
1393 }
1394 .charitable-panel-sidebar .charitable-toggle-control:hover .charitable-toggle-control-icon {
1395 background-color: #86919e;
1396 }
1397 .charitable-panel-sidebar .charitable-toggle-control.charitable-field-option-in-label-right .charitable-toggle-control-label {
1398 color: #86919e;
1399 font-size: 12px;
1400 line-height: 14px;
1401 margin: 2px 5px;
1402 max-width: initial;
1403 }
1404
1405 .charitable-field-option-group-toggle,
1406 .charitable-group-toggle {
1407 color: #444444;
1408 display: block;
1409 font-size: 15px;
1410 left: 270px;
1411 margin: 0;
1412 outline: 0;
1413 overflow: hidden;
1414 padding: 12px 12px 9px 12px;
1415 position: fixed;
1416 text-decoration: none;
1417 text-overflow: ellipsis;
1418 text-transform: capitalize;
1419 top: calc(124px + var(--charitable-admin-bar-height));
1420 white-space: nowrap;
1421 z-index: 1;
1422 transition-property: top, width, left;
1423 transition-duration: 0.25s, 0.15s, 0.15s;
1424 transition-timing-function: ease-out;
1425 }
1426 .charitable-field-option-group-toggle:hover,
1427 .charitable-group-toggle:hover {
1428 color: #86919e;
1429 }
1430
1431 .charitable-layout-options-tabs-toggle {
1432 color: #444444;
1433 display: block;
1434 font-size: 15px;
1435 left: 205px;
1436 margin: 0;
1437 outline: 0;
1438 overflow: hidden;
1439 padding: 12px 12px 9px 12px;
1440 position: fixed;
1441 text-decoration: none;
1442 text-overflow: ellipsis;
1443 text-transform: capitalize;
1444 top: calc(124px + var(--charitable-admin-bar-height));
1445 white-space: nowrap;
1446 z-index: 1;
1447 transition-property: top, width, left;
1448 transition-duration: 0.25s, 0.15s, 0.15s;
1449 transition-timing-function: ease-out;
1450 }
1451 .charitable-layout-options-tabs-toggle:hover {
1452 color: #86919e;
1453 }
1454
1455 .charitable-field-option-field-title {
1456 color: #444444;
1457 display: block;
1458 font-size: 15px;
1459 font-weight: 600;
1460 line-height: 18px;
1461 margin: 0 0 0 1px;
1462 outline: 0;
1463 padding: 20px 20px 0 20px;
1464 text-decoration: none;
1465 }
1466 .charitable-field-option-field-title span {
1467 color: #86919e;
1468 font-weight: 400;
1469 }
1470
1471 .charitable-field-option-group-basic .charitable-field-option-group-toggle,
1472 .charitable-field-option-group-basic .charitable-group-toggle,
1473 .charitable-layout-options-tab-general .charitable-field-option-group-toggle,
1474 .charitable-layout-options-tab-general .charitable-group-toggle {
1475 left: 115px;
1476 max-width: 83px;
1477 }
1478
1479 .charitable-field-option-group-advanced .charitable-field-option-group-toggle,
1480 .charitable-field-option-group-advanced .charitable-group-toggle,
1481 .charitable-layout-options-group-advanced .charitable-field-option-group-toggle,
1482 .charitable-layout-options-group-advanced .charitable-group-toggle {
1483 left: 192px;
1484 max-width: 99px;
1485 }
1486
1487 .charitable-field-option-group-conditionals .charitable-field-option-group-toggle,
1488 .charitable-field-option-group-conditionals .charitable-group-toggle {
1489 left: 281px;
1490 max-width: 116px;
1491 }
1492
1493 .charitable-panel-sidebar-closed .charitable-field-option-group-basic .charitable-field-option-group-toggle,
1494 .charitable-panel-sidebar-closed .charitable-field-option-group-basic .charitable-group-toggle {
1495 left: calc(115px - 400px);
1496 max-width: 83px;
1497 }
1498 .charitable-panel-sidebar-closed .charitable-field-option-group-advanced .charitable-field-option-group-toggle,
1499 .charitable-panel-sidebar-closed .charitable-field-option-group-advanced .charitable-group-toggle {
1500 left: calc(192px - 400px);
1501 max-width: 99px;
1502 }
1503 .charitable-panel-sidebar-closed .charitable-field-option-group-conditionals .charitable-field-option-group-toggle,
1504 .charitable-panel-sidebar-closed .charitable-field-option-group-conditionals .charitable-group-toggle {
1505 left: calc(281px - 400px);
1506 max-width: 116px;
1507 }
1508
1509 .charitable-layout-options-tab.charitable-layout-options-tab-general {
1510 position: relative;
1511 }
1512
1513 .charitable-field-option-group .charitable-field-option-group-inner,
1514 .charitable-field-option-group .charitable-layout-options-group-inner,
1515 .charitable-layout-options-tab .charitable-field-option-group-inner,
1516 .charitable-layout-options-tab .charitable-layout-options-group-inner {
1517 display: none;
1518 padding: 20px;
1519 }
1520 .charitable-field-option-group.active .charitable-field-option-group-toggle,
1521 .charitable-field-option-group.active .charitable-group-toggle,
1522 .charitable-layout-options-tab.active .charitable-field-option-group-toggle,
1523 .charitable-layout-options-tab.active .charitable-group-toggle {
1524 border-bottom: 3px solid #e27730;
1525 font-weight: 600;
1526 }
1527 .charitable-field-option-group.active .charitable-field-option-group-toggle:hover,
1528 .charitable-field-option-group.active .charitable-group-toggle:hover,
1529 .charitable-layout-options-tab.active .charitable-field-option-group-toggle:hover,
1530 .charitable-layout-options-tab.active .charitable-group-toggle:hover {
1531 color: #444444;
1532 }
1533 .charitable-field-option-group.active .charitable-field-option-group-inner,
1534 .charitable-field-option-group.active .charitable-layout-options-group-inner,
1535 .charitable-layout-options-tab.active .charitable-field-option-group-inner,
1536 .charitable-layout-options-tab.active .charitable-layout-options-group-inner {
1537 display: block;
1538 }
1539 .charitable-field-option-group button.charitable-tab-groups-add,
1540 .charitable-layout-options-tab button.charitable-tab-groups-add {
1541 margin-top: 20px;
1542 width: 100%;
1543 background-color: #EEEEEE;
1544 border: 1px solid #CFCFD2;
1545 color: #595B67;
1546 font-weight: 600;
1547 text-transform: capitalize;
1548 border-radius: 8px;
1549 }
1550 .charitable-field-option-group button.charitable-tab-groups-add:hover,
1551 .charitable-layout-options-tab button.charitable-tab-groups-add:hover {
1552 background-color: #d7d7d7;
1553 }
1554
1555 .charitable-layout-options-group-inner-generic {
1556 display: none;
1557 padding: 20px;
1558 }
1559
1560 #charitable-field-options:before {
1561 background-color: #ebf3fc;
1562 border-bottom: 1px solid #ced7e0;
1563 content: "";
1564 display: block;
1565 height: 40px;
1566 left: 0;
1567 top: -39px;
1568 position: absolute;
1569 /* width: 360px; */
1570 width: 100%;
1571 z-index: 10;
1572 transition-property: top, width, left;
1573 transition-duration: 0.25s, 0.15s, 0.15s;
1574 transition-timing-function: ease-out, ease-out, ease-in-out;
1575 }
1576
1577 .charitable-panel-sidebar-closed #charitable-field-options:before {
1578 left: calc(115px - 400px);
1579 }
1580
1581 .charitable-group {
1582 border-bottom: 1px solid #ced7e0;
1583 padding: 0 10px;
1584 }
1585 .charitable-group:first-of-type {
1586 margin-top: -20px;
1587 }
1588 .charitable-group:last-of-type {
1589 margin-bottom: 0;
1590 padding-bottom: 0;
1591 }
1592 .charitable-group.charitable-new-tab .charitable-general-layout-heading span {
1593 font-style: italic;
1594 }
1595 .charitable-group.active {
1596 background: #ffffff;
1597 }
1598 .charitable-group .charitable-tab-group-delete {
1599 margin-right: 10px;
1600 float: right;
1601 }
1602 .charitable-group .charitable-draggable {
1603 float: left;
1604 margin-right: 10px;
1605 }
1606 .charitable-group .charitable-general-layout-heading {
1607 color: #444444;
1608 display: block;
1609 font-size: 16px;
1610 font-weight: 600;
1611 margin: 0;
1612 outline: 0;
1613 overflow: hidden;
1614 padding: 20px 0;
1615 text-decoration: none;
1616 padding-top: 10px;
1617 }
1618 .charitable-group .charitable-general-layout-heading:hover {
1619 text-decoration: none;
1620 }
1621 .charitable-group .charitable-general-layout-heading:active, .charitable-group .charitable-general-layout-heading:focus {
1622 outline: 0;
1623 }
1624 .charitable-group .charitable-general-layout-heading i {
1625 color: #86919e;
1626 float: right;
1627 font-size: 20px;
1628 margin: -2px 0 0 0;
1629 transition-property: transform;
1630 transition-duration: 0.4s;
1631 transition-timing-function: ease-out;
1632 }
1633 .charitable-group .charitable-general-layout-heading i.charitable-angle-right {
1634 transform: rotate(-90deg);
1635 }
1636 .charitable-group .charitable-add-fields-buttons {
1637 display: flex;
1638 flex-wrap: wrap;
1639 justify-content: space-between;
1640 margin-bottom: 20px;
1641 overflow: hidden;
1642 }
1643 .charitable-group button.charitable-btn {
1644 background-color: #036aab;
1645 border: none;
1646 border-radius: 4px;
1647 color: #ffffff;
1648 display: block;
1649 margin: 16px 0 0 0;
1650 width: calc(50% - 8px);
1651 overflow: hidden;
1652 padding: 12px 5px 12px 14px;
1653 text-align: left;
1654 text-overflow: ellipsis;
1655 white-space: nowrap;
1656 }
1657 .charitable-group button.charitable-btn:hover {
1658 background-color: #215d8f;
1659 cursor: pointer;
1660 }
1661 .charitable-group button.charitable-btn:disabled:hover, .charitable-group button.charitable-btn.ui-draggable-disabled:hover {
1662 background-color: #036aab;
1663 cursor: no-drop;
1664 }
1665 .charitable-group button.charitable-btn:nth-child(1), .charitable-group button.charitable-btn:nth-child(2) {
1666 margin-top: 0;
1667 }
1668 .charitable-group button.charitable-btn i {
1669 color: rgba(255, 255, 255, 0.6);
1670 display: inline-block;
1671 margin: 0 7px 0 0;
1672 }
1673
1674 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container {
1675 display: table;
1676 clear: all;
1677 }
1678 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-avatar {
1679 max-width: 150px;
1680 float: left;
1681 }
1682 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-avatar img {
1683 border: 1px solid black;
1684 padding: 5px;
1685 margin: 5px;
1686 }
1687 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info {
1688 float: left;
1689 margin: 0 20px;
1690 }
1691 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul {
1692 margin: 5px 0;
1693 padding: 0;
1694 }
1695 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul li {
1696 display: inline-block;
1697 border-right: 1px solid #cccccc;
1698 margin-left: 5px;
1699 margin-right: 5px;
1700 padding-left: 5px;
1701 padding-right: 5px;
1702 }
1703 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul li:first-child {
1704 margin-left: 0;
1705 padding-left: 0;
1706 }
1707 #charitable-panel-field-settings-campaign_campaign_creator_info-wrap .charitable-campaign-creator-info-container .charitable-campaign-creator-info ul li:last-child {
1708 border-right: 0;
1709 margin-right: 0;
1710 padding-right: 0;
1711 margin-left: 0;
1712 padding-left: 0;
1713 }
1714