PluginProbe ʕ •ᴥ•ʔ
Smash Balloon Social Post Feed – Simple Social Feeds for WordPress / trunk
Smash Balloon Social Post Feed – Simple Social Feeds for WordPress vtrunk
4.8.1 trunk 1.0 1.1 1.12.1 1.2.3 1.2.4 1.2.5 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 1.5 1.5.1 1.5.2 1.5.9 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.4.1 1.6.5 1.6.5.1 1.6.6 1.6.6.1 1.6.6.2 1.6.6.3 1.6.7 1.6.7.1 1.6.8 1.6.8.1 1.6.8.2 1.7.0 1.7.1 1.7.2 1.8.0 1.8.1 1.8.2 1.8.2.1 1.8.2.2 1.8.2.3 1.9.0 1.9.1 1.9.3 1.9.4 1.9.5 1.9.6 1.9.7 1.9.8 1.9.8.1 1.9.9 1.9.9.1 1.9.9.2 1.9.9.3 2.0 2.0.1 2.1 2.1.1 2.1.2 2.1.3 2.10 2.11 2.11.1 2.12 2.12.1 2.12.2 2.12.3 2.12.4 2.13 2.14 2.14.1 2.15 2.15.1 2.16 2.16.1 2.17 2.17.1 2.18 2.18.1 2.18.2 2.18.3 2.19 2.19.1 2.19.2 2.19.3 2.2 2.2.1 2.3 2.3.1 2.3.10 2.3.2 2.3.3 2.3.4 2.3.6 2.3.7 2.3.8 2.3.9 2.4 2.4.1 2.4.1.1 2.4.1.2 2.4.2 2.4.3 2.4.4 2.4.5 2.4.6 2.5 2.5.1 2.5.2 2.6 2.6.1 2.6.2 2.6.3 2.6.4 2.7 2.7.1 2.7.2 2.8 2.9 2.9.1 4.0 4.0.1 4.0.2 4.0.3 4.0.4 4.0.5 4.1 4.1.1 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 4.1.7 4.1.8 4.1.9 4.2 4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.3.0 4.3.1 4.3.2 4.3.3 4.3.4 4.7.5 4.7.6 4.7.7
custom-facebook-feed / admin / builder / assets / css / builder.css
custom-facebook-feed / admin / builder / assets / css Last commit date
builder.css 1 month ago global.css 2 years ago preview.css 4 years ago tooltipster.css 4 years ago
builder.css
5314 lines
1 body{
2 --cl-orange: #E34F0E;
3 --cl-dark:#2C324C;
4 --error-red: #D72C2C;
5 --customizer-blue: #0096CC;
6 --dark-blue: #2A65DB;
7 }
8 .sb-tr-1{-webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out;}
9 .sb-tr-2{-webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
10 .sb-tr-3{-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
11 .sb-tr-4{-webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
12 .sb-tr-5{-webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
13 .sb-tr-6{-webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out;}
14 .sb-tr-7{-webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out;}
15 .sb-tr-8{-webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out;}
16 .sb-tr-9{-webkit-transition: all .9s ease-in-out; transition: all .9s ease-in-out;}
17 .sb-tr-10{-webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
18 .cff-bg-1{
19 background: #2A65DB;
20 }
21
22 /****
23 Buttons
24 */
25 .sb-button {
26 display: flex;
27 flex-direction: row;
28 justify-content: center;
29 align-items: center;
30 border-radius: 2px;
31 cursor: pointer;
32 outline: none;
33 box-shadow: none;
34 border: none;
35 -webkit-transition: all .15s ease-in-out;
36 transition: all .15s ease-in-out;
37 }
38 .sb-button-standard{
39 position: relative;
40 font-style: normal;
41 font-weight: 600;
42 font-size: 14px;
43 padding: 10px 20px 10px 39px;
44 line-height: 16px;
45 }
46 .sb-button-standard svg {
47 width: 16px;
48 height: 16px;
49 position: absolute;
50 left: 13px;
51 right: auto;
52 top: 10px;
53 bottom: auto;
54 }
55 .sb-button-small.sb-button-left-icon {
56 padding-left: 32px;
57 }
58 .sb-button-small.sb-button-right-icon {
59 padding-right: 32px;
60 }
61 .sb-button-small.sb-button-left-icon svg {
62 position: absolute;
63 left: 13px;
64 }
65 .sb-button-small.sb-button-right-icon svg {
66 position: absolute;
67 right: 13px;
68 }
69 .sb-button-standard.sb-button-right-icon {
70 padding: 10px 39px 10px 20px;
71 }
72 .sb-button-standard.sb-button-right-icon svg {
73 right: 13px;
74 left: auto;
75 }
76
77 .sb-button-small {
78 position: relative;
79 font-style: normal;
80 font-weight: 600;
81 font-size: 12px;
82 padding: 6px 12px;
83 line-height: 160%;
84 }
85
86 .sb-button-no-border {
87 border-radius: 0 !important;
88 border: none !important;
89 }
90
91 /*orange*/
92 .cff-btn-orange{
93 background: #FE544F!important;
94 color: #fff!important;
95 }
96 .cff-btn-orange:hover{
97 background: #EC352F!important;
98 color: #fff!important;
99 }
100 .cff-btn-orange:focus{
101 background: #BC120E!important;
102 color: #fff!important;
103 }
104
105 /*red*/
106 .cff-btn-red{
107 background: #D72C2C!important;
108 color: #fff!important;
109 }
110 .cff-btn-red:hover{
111 background: #DF5757!important;
112 color: #fff!important;
113 }
114 .cff-btn-red:focus{
115 background: #841919!important;
116 color: #fff!important;
117 }
118
119 /*red*/
120 .cff-btn-blue{
121 background: #0068A0!important;
122 color: #fff!important;
123 }
124 .cff-btn-blue:hover{
125 background: #0096CC!important;
126 color: #fff!important;
127 }
128 .cff-btn-blue:focus{
129 background: #004D77!important;
130 color: #fff!important;
131 }
132
133 /*grey*/
134 .cff-btn-grey{
135 background: #F3F4F5!important;
136 color: #141B38!important;
137 border: 1px solid #D0D1D7!important;
138 }
139 .cff-btn-grey:hover{
140 background: #fff!important;
141 color: #141B38!important;
142 border: 1px solid #DCDDE1!important;
143 }
144 .cff-btn-grey:focus{
145 background: #E8E8EB!important;
146 color: #141B38!important;
147 border: 1px solid #D0D1D7!important;
148 }
149
150 /*dark*/
151 .cff-btn-dark{
152 background: #2C324C!important;
153 color: #fff!important;
154 }
155 .cff-btn-dark:hover{
156 background: #434960!important;
157 color: #fff!important;
158 }
159 .cff-btn-dark:focus{
160 background: #141B38!important;
161 color: #fff!important;
162 }
163
164 .sb-dark-hover:hover svg,
165 .sb-dark-hover:hover path{
166 fill: #141B38;
167 }
168
169 /*disabled*/
170 .cff-btn-orange[data-active="false"],
171 .cff-btn-blue[data-active="false"],
172 .cff-btn-red[data-active="false"],
173 .cff-btn-grey[data-active="false"],
174 .cff-btn-dark[data-active="false"]{
175 background: #E8E8EB !important;
176 color: #8C8F9A !important;
177 }
178
179 /* Text */
180
181 #cff-builder-app h1 {
182 font-style: normal;
183 font-weight: 600;
184 font-size: 36px;
185 line-height: 125%;
186 color: #141B38;
187 margin: 0;
188 letter-spacing: 0;
189 }
190 #cff-builder-app h2 {
191 font-style: normal;
192 font-weight: 600;
193 font-size: 32px;
194 line-height: 125%;
195 margin: 0;
196 letter-spacing: 0;
197 }
198 #cff-builder-app h3 {
199 font-style: normal;
200 font-weight: 600;
201 font-size: 24px;
202 line-height: 120%;
203 margin: 0 0 4px 0;
204 letter-spacing: 0;
205 }
206
207 #cff-builder-app h4 {
208 font-style: normal;
209 font-weight: 600;
210 font-size: 18px;
211 line-height: 140%;
212 margin: 0 0 4px 0;
213 letter-spacing: 0;
214 }
215
216 #cff-builder-app .sb-small-p,
217 #cff-builder-app .sb-standard-p{
218 font-style: normal;
219 font-weight: normal;
220 font-size: 14px;
221 line-height: 160%;
222 color: #8C8F9A;
223 margin: 0;
224 }
225
226 #cff-builder-app .sb-standard-p{
227 font-size: 16px;
228 color: #141B38;
229 }
230 #cff-builder-app .cff-fb-source-inp::placeholder {
231 color: #8C8F9A;
232 font-size: 14px;
233 font-weight: normal;
234 }
235 #cff-builder-app .sb-small-text {
236 font-size: 12px;
237 }
238 #cff-builder-app .sb-bold {
239 font-weight: 600;
240 }
241 #cff-builder-app .sb-dark-text {
242 color: #141B38;
243 }
244 #cff-builder-app .cff-btn-orange .sb-small-p,
245 #cff-builder-app .cff-btn-blue .sb-small-p,
246 #cff-builder-app .cff-btn-red .sb-small-p,
247 #cff-builder-app .cff-btn-dark .sb-small-p{
248 color: #fff;
249 }
250
251 #cff-builder-app .sb-caption {
252 font-style: normal;
253 font-weight: normal;
254 font-size: 13px;
255 line-height: 150%;
256 color: #141B38;
257 }
258 #cff-builder-app .sb-caption.sb-caption-lighter {
259 color: #5F6368;
260 }
261
262 #cff-builder-app .sb-small {
263 font-style: normal;
264 font-weight: bold;
265 font-size: 10px;
266 line-height: 160%;
267 letter-spacing: 0.08em;
268 text-transform: uppercase;
269 color: #141B38;
270 }
271
272 #cff-builder-app .sb-lighter {
273 color: #434960;
274 }
275 #cff-builder-app .sb-lightest {
276 color: #74777D;
277 }
278
279 /* Positioning */
280 .sb-icon-label {
281 display: flex;
282 flex-direction: row;
283 justify-content: flex-start;
284 align-items: center;
285 }
286 /* Misc Stylings */
287 .sb-flex-center {
288 display: -ms-flexbox;
289 display: -webkit-flex;
290 display: flex;
291
292 -ms-flex-align: center;
293 -webkit-align-items: center;
294 -webkit-box-align: center;
295
296 align-items: center;
297 }
298 .sb-box-shadow {
299 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
300 }
301 #cff-builder-app .sb-icon-small svg {
302 height: 10px;
303 }
304
305 /*
306 Social Links
307 */
308 .cff-cl-facebook, .cff-clhv-facebook:hover{
309 color: #006BFA!important;
310 }
311 .cff-bg-facebook, .cff-bghv-facebook:hover{
312 background: #006BFA!important;
313 }
314
315 .cff-cl-instagram, .cff-clhv-instagram:hover{
316 color: #BA03A7!important;
317 }
318 .cff-bg-instagram, .cff-bghv-instagram:hover{
319 background: #BA03A7!important;
320 }
321
322 .cff-cl-twitter, .cff-clhv-twitter:hover{
323 color: #1B90EF!important;
324 }
325 .cff-bg-twitter, .cff-bghv-twitter:hover{
326 background: #1B90EF!important;
327 }
328
329 .cff-cl-youtube, .cff-clhv-youtube:hover{
330 color: #EB2121!important;
331 }
332 .cff-bg-youtube, .cff-bghv-youtube:hover{
333 background: #EB2121!important;
334 }
335
336 .cff-cl-linkedin, .cff-clhv-linkedin:hover{
337 color: #007bb6!important;
338 }
339 .cff-bg-linkedin, .cff-bghv-linkedin:hover{
340 background: #007bb6!important;
341 }
342
343 .cff-cl-mail, .cff-clhv-mail:hover{
344 color: #666!important;
345 }
346 .cff-bg-mail, .cff-bghv-mail:hover{
347 background: #666!important;
348 }
349
350 #cff-builder-app{
351 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;;
352 visibility: hidden;
353 opacity: 0;
354 }
355 #cff-builder-app[data-app-loaded="true"]{
356 visibility: visible;
357 opacity: 1;
358 }
359
360 .cff-builder-app a, .cff-builder-app a:focus{
361 text-decoration: none;
362 /*color: inherit;*/
363 outline: none;
364 }
365 .cff-fb-btn{
366 display: flex;
367 flex-direction: row;
368 justify-content: center;
369 align-items: center;
370 padding: 9px 38px;
371 font-style: normal;
372 font-weight: 500;
373 font-size: 14px;
374 line-height: 17px;
375 border-radius: 2px;
376 cursor: pointer;
377 color: #fff;
378 outline: none;
379 box-shadow: none;
380 border: none;;
381 }
382 .cff-fb-btn:focus{
383 box-shadow: none;
384 }
385 .cff-fb-fs, .sb-fs{
386 width: 100%;
387 position: relative;
388 float: left;
389 box-sizing: border-box;
390 }
391 .cff-fs-a{
392 width: 100%;
393 height: 100%;
394 display: block;
395 position: absolute;
396 left: 0;
397 top: 0;
398 z-index: 1;
399 }
400 .sb-btn:focus{
401 outline: none;
402 }
403 #wpcontent,
404 .facebook-feed_page_cff-feed-builder #wpcontent{
405 padding-left: 0px!important;
406 }
407 #wpfooter{
408 display: none;
409 }
410 #wpbody-content{
411 padding-bottom: 0px;
412 }
413 .cff-fb-wrapper{
414 max-width: 92%;
415 position: relative;
416 margin: auto;
417 color: #141B38;
418 }
419 .cff-fb-fs-boss{
420 position: fixed;
421 height: 100vh;
422 width: 100%;
423 left: 0;
424 top: 0;
425 bottom: 0;
426 right: 0;
427 background: rgba(0,0,0,.4);
428 z-index: 9989;
429 }
430
431
432 /*
433 Header
434 */
435 .cff-fb-create-ctn{
436 margin-top: 104px;
437 padding: 0 54px;
438 box-sizing: border-box;
439 width: 100%;
440 }
441 .cff-fb-header{
442 height: 64px;
443 position: absolute;
444 display: flex;
445 flex-direction: row;
446 justify-content: space-between;
447 align-items: center;
448 background: #fff;
449 padding: 0px 52px;
450 z-index: 99;
451 }
452 .cff-fb-header-left {
453 display: flex;
454 }
455 .cff-fb-header-left .sb-social-wall-link-wrap {
456 margin-left: 30px;
457 }
458 .cff-fb-hd-logo {
459 display: flex;
460 vertical-align: middle;
461 align-items: center;
462 gap: 5px;
463 }
464 .cff-fb-hd-logo .sb-logo-letters-wrap {
465 transform: translate(0px, -2px);
466 }
467 .cff-fb-hd-logo .breadcrumb-title {
468 font-size: 14px;
469 font-weight: 400;
470 line-height: 22px;
471 letter-spacing: 0em;
472 margin-left: 4px;
473 }
474 .cff-csz-header.cff-fb-header{
475 position: fixed!important;
476 padding: 0 20px;
477 }
478 .cff-csz-header-insider{
479 width: calc(100% - 160px);
480 display: flex;
481 flex-direction: row;
482 justify-content: space-between;
483 align-items: center;
484 height: 52px;
485 }
486
487 body.jetpack-masterbar .sbi-csz-header-insider {
488 width: calc(100% - 272px);
489 }
490
491 @media all and (max-width: 960px) {
492 .cff-csz-header-insider{
493 width: calc(100% - 36px);
494 }
495 .sb-customizer-ctn .sb-customizer-sidebar{
496 left: 36px;
497 }
498
499 body.jetpack-masterbar .sb-customizer-sidebar {
500 left: 36px;
501 }
502
503 body.jetpack-masterbar .sbi-csz-header-insider {
504 width: calc(100% - 36px);
505 }
506 }
507
508 .cff-fb-hd-btn{
509 cursor: pointer;
510 display: flex;
511 flex-direction: row;
512 justify-content: center;
513 align-items: center;
514 position: relative;
515 border: 1px solid;
516 -webkit-transition: all .15s ease-in-out;
517 transition: all .15s ease-in-out;
518 }
519 .cff-fb-hd-btn i{
520 margin: 0px 5px;
521 }
522 .cff-fb-full-wrapper {
523 padding: 0 53px;
524 padding-top: 82px;
525 padding-bottom: 60px;
526 }
527 .cff-csz-hd-actions{
528 display: flex;
529 justify-content: center;
530 align-items: center;
531 }
532 .cff-csz-hd-actions > button{
533 margin-left: 10px;
534 }
535
536 .cff-csz-btn-embd{
537 color: #fff;
538 background: var(--cl-dark);
539 border-color: var(--cl-dark);
540 }
541 .cff-csz-btn-save{
542 color: #fff;
543 background: var(--cl-orange);
544 border-color: var(--cl-orange);
545 }
546 .cff-csz-hd-name{
547 display: flex;
548 justify-content: center;
549 align-items: center;
550 height: 45px;
551 }
552 .cff-csz-hd-name strong{
553 font-size: 18px;
554 }
555 .cff-csz-hd-name[data-edit="true"] strong{
556 display: none;
557 }
558 .cff-csz-hd-name input[type="text"]{
559 border-radius: 0px;
560 border: 0px;
561 background: #CCE7FF;
562 outline: none;
563 font-size: 18px;
564 font-weight: 700;
565 display: none;
566 }
567 .cff-csz-hd-name[data-edit="true"] input[type="text"]{
568 display: block;
569 }
570 .cff-csz-hd-name input[type="text"]:focus{
571 outline: none!important;
572 border: 0px!important;
573 box-shadow: none!important;
574 }
575
576
577 .cff-csz-name-ed-btn{
578 width: 22px;
579 height: 22px;
580 cursor: pointer;
581 margin: 0 10px;
582 background: #E8E8EB;
583 border: 1px solid #E8E8EB;
584 outline: none;
585 }
586 .cff-csz-name-ed-btn:focus,
587 .cff-csz-name-ed-btn:hover{
588 outline: none;
589 background-color: #fff;
590 }
591 .cff-csz-name-ed-btn svg{
592 width: 11px;
593 fill: #141B38;
594 float: left;
595 margin-left: -1px;
596 }
597
598
599 /*
600 Welcome Screen Empty State
601 */
602 .cff-fb-wlcm-header{
603 display: flex;
604 align-items: center;
605 margin-bottom: 28px;
606 margin-top: 23px;
607 }
608 #cff-fb-full-wrapper .cff-fb-wlcm-header {
609 margin-bottom: 34px;
610 }
611
612 .cff-fb-wlcm-header h3,
613 .cff-fb-create-ctn h3{
614 font-weight: 600;
615 font-size: 32px;
616 line-height: 40px;
617 padding: 0;
618 margin: 0;
619 float: left;
620 }
621 .cff-fb-btn-new{
622 background: var(--cl-orange);
623 position: relative;
624 float: left;
625 margin-left: 20px;
626 font-size: 12px;
627 padding: 8px 12px 8px 30px;
628 }
629 .cff-fb-btn-new svg{
630 width: 10px;
631 height: 10px;
632 position: absolute;
633 left: 12px;
634 }
635
636 .cff-fb-inf-cnt{
637 position: relative;
638 background: #fff;
639 padding: 27px;
640 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
641 border-radius: 2px;
642 max-width: 100%;
643 box-sizing: border-box;
644 }
645 .cff-fb-inf-num{
646 width: 30px;
647 height: 30px;
648 position: relative;
649 float: left;
650 display: flex;
651 justify-content: center;
652 align-items: center;
653 font-size: 12px;
654 font-weight: 600;
655 color: #141B38;
656 margin-right: 20px;
657
658 }
659 .cff-fb-inf-num span{
660 z-index: 1;
661 }
662 .cff-fb-inf-num:before{
663 content: '';
664 position: absolute;
665 width: 100%;
666 height: 100%;
667 background: #D8DADD;
668 border-radius: 50%;
669 }
670 .cff-fb-inf-txt{
671 float: left;
672 }
673 /*.cff-fb-inf-txt strong{
674 display: block;
675 font-size: 20px;
676 line-height: 1em;
677 font-weight: bold;
678 margin-bottom: 8px;
679 }*/
680 .cff-fb-inf-txt span{
681 display: block;
682 font-size: 16px;
683 color: #5F6368;
684 line-height: 1.5em;
685 }
686 .cff-fb-wlcm-inf-1 {
687 padding-left: 297px;
688 }
689 .cff-fb-wlcm-inf-1 .cff-fb-inf-svg{
690 position: absolute;
691 left: 191px;
692 top: 32px;
693 /*float: left;
694 margin-top: 30px;
695 margin-left: 230px;
696 position: relative;
697 margin-right: 25px;*/
698 }
699 .cff-fb-wlcm-inf-1 .cff-fb-inf-svg svg{
700 margin-top: -45px;
701 }
702 .sb-head {
703 position: absolute;
704 top: -2px;
705 left:-4px;
706 }
707 .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt{
708 float: left;
709 width: 523px;
710 margin-bottom: 24px;
711 height: 120px;
712 }
713 .cff-fb-wlcm-inf-2{
714 display: flex;
715 justify-content: space-between;
716 padding-left: 152px;
717 }
718 .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt{
719 float: left;
720 width: 590px;
721 margin-bottom: 29px;
722 height: 120px;
723 display: flex;
724 align-items: center;
725 }
726 .cff-fb-wlcm-inf-2 .cff-fb-inf-img{
727 position: absolute;
728 right: 15px;
729 top: -13px;
730 width: 121px;
731 }
732
733 .cff-fb-wlcm-inf-3{
734 display: flex;
735 justify-content: flex-start;
736 align-items: center;
737 padding-left: 297px;
738 }
739 .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt{
740 float: left;
741 width: 620px;
742 height: 130px;
743 display: flex;
744 justify-content: center;
745 align-items: center;
746 }
747 .cff-fb-wlcm-inf-3 .cff-fb-inf-img{
748 float: left;
749 left: 10px;
750 top: -12px;
751 position: absolute;
752 width: 121px;
753 }
754 .cff-fb-inf-img img {
755 max-width: 100%;
756 }
757 .cff-fb-wlcm-inf-2 .cff-fb-inf-num, .cff-fb-wlcm-inf-3 .cff-fb-inf-num{
758 margin-top: -20px;
759 }
760 .cff-fb-types-ctn, .cff-fb-slctsrc-ctn, .cff-fb-section-wh{
761 background: #fff;
762 border: 1px solid #E7E7E9;
763 }
764 #cff-builder-app .cff-fb-types-ctn .cff-fb-types h4 {
765 font-size: 18px;
766 font-weight: 600;
767 line-height: 140%;
768 color: #141B38;
769 text-transform: capitalize;
770 letter-spacing: 0;
771 margin-bottom: 12px;
772 }
773 .cff-fb-wrapper h3, .cff-fb-section-wh h3{
774 font-size: 32px;
775 line-height: 39px;
776 font-weight: 600;
777 }
778 .cff-fb-create-ctn h3{
779 margin-bottom: 30px;
780 }
781 .cff-fb-types h4, .cff-fb-section-wh h4 {
782 font-size:20px;
783 line-height: 24px;
784 font-weight: 600;
785 }
786 #cff-builder-app .cff-fb-create-ctn h4,
787 #cff-builder-app .cff-fb-feedtypes-pp-ctn h4{
788 font-size: 12px;
789 font-style: normal;
790 font-weight: 700;
791 line-height: 160%;
792 letter-spacing: 0.6px;
793 color: #8C8F9A;
794 text-transform: uppercase;
795 margin-bottom: -2px;
796 }
797 #cff-builder-app .cff-fb-feedtypes-pp-ctn .cff-fb-types {
798 margin-top: 20px;
799 }
800 #cff-builder-app .cff-fb-adv-types .cff-adv-types-heading{
801 font-style: normal;
802 font-weight: bold;
803 font-size: 12px;
804 line-height: 160%;
805 letter-spacing: 0.05em;
806 text-transform: uppercase;
807 color: #8C8F9A;
808 }
809 #cff-builder-app .cff-fb-feedtypes-pp-ctn.sb-fs-boss{
810 position: absolute;
811 min-height: 100vh;
812 align-items: unset;
813 padding: 150px 0px;
814 }
815 #cff-builder-app .cff-fb-feedtypes-pp-ctn.sb-fs-boss .cff-fb-feedtypes-popup.cff-fb-popup-inside{
816 overflow: visible;
817 min-height: 100px;
818 max-height: unset;
819 position: absolute;
820 left: 50%;
821 transform: translateX(-50%);
822 }
823
824 #cff-builder-app .cff-fb-adv-types .cff-adv-types-heading{
825 font-style: normal;
826 font-weight: bold;
827 font-size: 12px;
828 line-height: 160%;
829 letter-spacing: 0.05em;
830 text-transform: uppercase;
831 color: #8C8F9A;
832 }
833 .cff-fb-types, .cff-fb-adv-types{
834 padding: 22px 35px 0;
835 }
836
837 .cff-fb-types, .cff-fb-adv-types{
838 padding: 22px 35px 0;
839 }
840 .cff-fb-adv-types {
841 padding-top: 0;
842 }
843 .cff-fb-types-list{
844 display: grid;
845 grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%;
846 grid-column-gap: 1%;
847 margin-bottom: 31px;
848 }
849 .cff-fb-templates-list {
850 display: grid;
851 grid-template-columns: 24.2% 24.2% 24.2% 24.2%;
852 grid-column-gap: 1%;
853 margin: 31px 0px;
854 }
855 .cff-fb-templates-list .cff-fb-type-el {
856 margin-bottom: 10px;
857 }
858 .cff-fb-templates-list .cff-fb-type-el-info {
859 padding: 0 10px;
860 }
861 .cff-fb-templates-list .cff-fb-type-el-img svg {
862 width: 100%;
863 }
864 .cff-fb-templates-list .cff-fb-type-el-img {
865 border-width: 0px !important;
866 }
867 .cff-fb-templates-ctn .cff-fb-type-el-img {
868 background: #f3f4f5;
869 }
870 .cff-fb-templates-ctn .cff-fb-type-el-img.simple_carousel,
871 .cff-fb-templates-ctn .cff-fb-type-el-img.showcase_carousel {
872 background-color: #fdf3ef;
873 }
874 .cff-fb-feedtemplate-alert {
875 padding: 8px 12px 10px;
876 background: #FFF7E5;
877 border: 1px solid #FFDF99;
878 box-sizing: border-box;
879 border-radius: 4px;
880 font-size: 14px;
881 line-height: 160%;
882 display: flex;
883 align-items: center;
884 }
885 .cff-fb-feedtemplate-alert span {
886 line-height: 1;
887 }
888 .cff-fb-feedtemplate-alert svg {
889 width: 16px;
890 height: 16px;
891 margin-right: 10px;
892 }
893 #cff-builder-app .cff-fb-feedtemplates-ctn .cff-fb-types {
894 margin-top: -10px;
895 }
896 #cff-builder-app .cff-fb-templates-list .cff-fb-type-el-info p {
897 margin: 8px 0px 7px;
898 }
899 #cff-builder-app .cff-fb-templates-ctn .cff-fb-types h4 {
900 margin-bottom: 0px;
901 }
902 #cff-builder-app .cff-fb-templates-ctn .cff-fb-types .sb-caption {
903 font-size: 12px;
904 line-height: 150%;
905 color: #434960;
906 margin-top: 0px;
907 }
908 /*
909 .cff-fb-adv-types .cff-fb-types-list{
910 grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
911 }
912 */
913 .cff-fb-heading {
914 margin-bottom: 24px;
915 width: 100%;
916 float: left;
917 }
918 .cff-fb-heading h1{
919 float: left;
920 }
921 .cff-fb-heading .cff-fb-btn{
922 float: right!important;
923 }
924
925 .cff-fb-adv-types .cff-fb-types-list{
926 margin-bottom: 31px;
927 }
928 .sb-control-feedtemplate-ctn .cff-fb-type-el-img{
929 background-color: #f3f4f5;
930 }
931 .sb-control-feedtemplate-ctn.cff-feedtemplate-showcase_carousel .cff-fb-type-el-img,
932 .sb-control-feedtemplate-ctn.cff-feedtemplate-simple_carousel .cff-fb-type-el-img{
933 background-color: #fdf3ef;
934 }
935 .cff-fb-feedtypes-pp-ctn:not(.cff-fb-feedtemplates-ctn) .cff-fb-type-el:not([data-active="true"]) .cff-fb-type-el-img {
936 background-color: #e3f5ff;
937 }
938 .cff-fb-type-el.cff-feed-template-showcase_carousel .cff-fb-type-el-img,
939 .cff-fb-type-el.cff-feed-template-simple_carousel .cff-fb-type-el-img {
940 background-color: #fdf3ef;
941 }
942 .cff-fb-type-el{
943 display: flex;
944 flex-direction: column;
945 align-items: flex-start;
946 padding: 0;
947 position: relative;
948 background: #fff;
949 border: 1px solid #F1F1F1;
950 border-radius: 3px;
951 cursor: pointer;
952 box-sizing: border-box;
953 }
954 .cff-fb-type-el:hover,
955 .cff-fb-adv-types .cff-fb-type-el:hover{
956 border: 1px solid #F6966B;
957 }
958 .cff-fb-adv-types .cff-fb-type-el{
959 border: 1px solid #FFE1E0;
960 }
961 .sb-control-feedtype-ctn .cff-fb-type-el{
962 border: 2px solid #E8E8EB;
963 margin-bottom: 7px;
964 }
965 .sb-control-feedtype-ctn .cff-fb-type-el-info{
966 margin-top: 14px
967 }
968 .cff-fb-type-el[data-active="true"],
969 .cff-fb-adv-types .cff-fb-type-el[data-active="true"]{
970 border: 2px solid var(--cl-orange);
971 }
972 .cff-fb-type-el[data-active="true"]:after{
973 content: '';
974 position: absolute;
975 width: 10px;
976 height: 4px;
977 border-left: 2px solid #fff;
978 border-bottom: 2px solid #fff;
979 z-index: 3;
980 right: 5px;
981 top: 7px;
982 -webkit-transform: rotate(-45deg);
983 transform: rotate(-45deg);
984 }
985 .cff-fb-type-el[data-active="true"]:before{
986 content: '';
987 position: absolute;
988 width: 24px;
989 height: 24px;
990 right: 0px;
991 top: 0px;
992 z-index: 2;
993 background: var(--cl-orange)
994 }
995 .cff-fb-type-el-img{
996 display: flex;
997 flex-direction: column;
998 justify-content: center;
999 align-items: center;
1000 background: #e2f5ff;
1001 }
1002 .sb-control-elem-output .sb-control-feedtype-ctn .cff-fb-type-el-img {
1003 background: #f1f1f1;
1004 }
1005 .cff-fb-type-el[data-active="true"] .cff-fb-type-el-img{
1006 border: 1px solid #F1F1F1;
1007 border-bottom: 2px solid #fff;
1008 background: #f1f1f1;
1009 }
1010 .cff-fb-type-el-img svg {
1011 max-width: 100%;
1012 }
1013 .cff-fb-adv-types .cff-fb-type-el-img {
1014 background: #e3f5ff;
1015 }
1016 .cff-fb-type-el-info{
1017 display: flex;
1018 flex-direction: column;
1019 /*justify-content: center;*/
1020 align-items: center;
1021 text-align: center;
1022 flex: 1 1 auto;
1023 padding: 0 12px 25px;
1024 }
1025 .sb-control-feedtype-ctn .cff-fb-type-el-info{
1026 padding: 15px 70px 25px;
1027 }
1028 .sb-control-feedtype-ctn .cff-fb-type-el-info strong{
1029 font-size: 14px;
1030 }
1031 #cff-builder-app .cff-fb-type-el p {
1032 margin: 11px 0 4px;
1033 }
1034 #cff-builder-app .cff-fb-type-el[data-active="true"] p{
1035 margin-top: 10px;
1036 }
1037 #cff-builder-app .cff-fb-type-el[data-active="true"] .cff-fb-type-el-info {
1038 padding-bottom: 24px;
1039 }
1040 #cff-builder-app .cff-fb-type-el p svg {
1041 width: 14px;
1042 height: 14px;
1043 margin-left: 5px;
1044 vertical-align: middle;
1045 }
1046 /*.cff-fb-type-el-info strong{
1047 font-weight: 600;
1048 font-size: 16px;
1049 line-height: 19px;
1050 margin-bottom: 10px;
1051 text-transform: capitalize;
1052 display: flex;
1053 justify-content: center;
1054 align-items: center;
1055 }
1056 .cff-fb-type-el-info strong i{
1057 color: #ed8000;
1058 margin-left: 5px;
1059 font-size: 13px;
1060 margin-top: 2px;
1061 }
1062 .cff-fb-type-el-info span{
1063 font-size: 13px;
1064 line-height: 1.4em;
1065 color: #74777D;
1066 }*/
1067 .cff-fb-adv-types .cff-fb-type-el-img {
1068 border-color: #FCF4EF;
1069 }
1070 .cff-fb-ft-action {
1071 border-top: 1px solid #D8DADD;
1072 padding: 30px 40px;
1073 margin-top: 63px;
1074 }
1075 .cff-fb-slctfd-action .cff-fb-wrapper{
1076 display: flex;
1077 align-items: center;
1078 justify-content: flex-end;
1079 }
1080 .cff-fb-slctfd-action{
1081 padding: 16px 0;
1082 }
1083 .cff-fb-slctf-nxt{
1084 height: auto;
1085 padding: 7px 36px 7px 37px;
1086 }
1087 .cff-fb-slctf-back{
1088 margin-right: auto;
1089 height: auto;
1090 padding: 7px 37px 7px 36px;
1091 -webkit-transition: unset!important;
1092 transition: unset!important;
1093 }
1094 .cff-fb-slctf-back svg,
1095 .cff-fb-slctf-nxt svg {
1096 width: 6px;
1097 height: 10px;
1098 }
1099 .cff-fb-slctf-back span {
1100 display: inline-block;
1101 margin-left: 15px;
1102 line-height: 160%;
1103 }
1104 .cff-fb-slctf-nxt span {
1105 display: inline-block;
1106 margin-right: 15px;
1107 line-height: 160%;
1108 }
1109 .cff-fb-btn-ac{
1110 opacity: 0.6;
1111 }
1112 .cff-fb-btn-ac[data-active="true"]{
1113 opacity: 1;
1114 }
1115
1116 .sb-control-single-id-ctn{
1117 margin-top: 35px;
1118 padding: 25px 0px;
1119 }
1120 .sb-control-single-id-ctn:before{
1121 content: '';
1122 position: absolute;
1123 border-top: 1px solid #DCDDE1;
1124 height: 2px;
1125 top: 0px;
1126 left: -20px;
1127 width: calc(100% + 40px);
1128 }
1129 .sb-control-single-id-input{
1130 display: flex;
1131 justify-content: center;
1132 align-items: center;
1133 margin-top: 7px;
1134 }
1135 .sb-control-single-id-input input{
1136 height: 45px;
1137 float: left;
1138 background: #fff;
1139 margin-top: 6px;
1140 margin-right: 7px;
1141 }
1142
1143 /*
1144 Video Type Chooser
1145 */
1146 .cff-fb-section-wh.cff-fb-section-videos{
1147 padding: 50px 21px 54px 30px;
1148 }
1149 .cff-fb-videotype-chooser{
1150 display: grid;
1151 grid-template-columns: 49% 49%;
1152 grid-column-gap: 1%;
1153
1154 }
1155 .cff-fb-section-videos{
1156 flex-direction: column;
1157 }
1158 .cff-fb-section-videos .cff-fb-section-video-playlist{
1159 margin-top: 30px;
1160 }
1161
1162 .cff-fb-section-video-playlist .cff-fb-wh-inp{
1163 margin-top: 10px;
1164 margin-bottom: 10px!important;
1165 }
1166 .cff-fb-section-videos .cff-fb-sglelm-left{
1167 padding-right: 0px;
1168 }
1169 /*
1170 Source Screen
1171 */
1172 .cff-fb-sec-heading span{
1173 font-size:14px;
1174 color: #434960;
1175 line-height: 1.7em;
1176 display: block;
1177 }
1178 #cff-builder-app .cff-fb-sec-heading h4 {
1179 margin-bottom: 2px;
1180 }
1181 .cff-fb-sec-heading {
1182 margin-bottom: 14px;
1183 }
1184 .cff-fb-slctsrc-content,.cff-fb-section-wh-insd{
1185 padding: 23px 30px;
1186 }
1187
1188 .cff-fb-slctsrc-ctn h4,.cff-fb-section-wh-insd h4{
1189 font-size: 20px;
1190 padding: 0px;
1191 margin: 0px;
1192 }
1193 .cff-fb-srcslist-ctn{
1194 display: grid;
1195 grid-template-columns: 32.66% 32.66% 32.66%;
1196 grid-column-gap: 1%;
1197 margin-bottom: 28px;
1198 }
1199 .cff-fb-srcs-item{
1200 width: 100%;
1201 cursor: pointer;
1202 height: 62px;
1203 margin: 1% 0;
1204 border-radius: 3px;
1205 border: 1px solid #E7E7E9;
1206 display: flex;
1207 position: relative;
1208 }
1209 .cff-fb-srcs-item[data-disabled="true"]{
1210 background: #F3F4F5;
1211 }
1212 .cff-fb-srcs-item[data-disabled="true"] .cff-fb-srcs-item-inf{
1213 opacity: .55;
1214
1215 }
1216 #cff-builder-app .cff-fb-srcs-item .cff-fb-srcs-item-inf .cff-fb-srcs-item-name {
1217 color: #141B38;
1218 padding-right: 44px;
1219 }
1220
1221 #cff-builder-app .cff-fb-srcs-item .cff-fb-srcs-item-inf .cff-fb-srcs-item-name > span {
1222 max-height: 30px;
1223 display: block;
1224 overflow: hidden;
1225 line-height: 1.1;
1226 padding-bottom:1px;
1227 color: #141B38;
1228 }
1229
1230 #cff-builder-app .cff-fb-srcs-item:hover{
1231 border-color: #86D0F9;
1232 }
1233 #cff-builder-app .cff-fb-srcs-item[data-active="true"]{
1234 border-color: #0096cc;
1235 }
1236
1237 .cff-fb-source-top .cff-fb-srcs-item{
1238 margin-bottom: 0px;
1239 }
1240 #cff-builder-app .cff-fb-srcs-new{
1241 display: flex;
1242 justify-content: center;
1243 align-items: center;
1244 background: #EBF5FF;
1245 border: 1px solid #EBF5FF;
1246 }
1247 #cff-builder-app .cff-fb-srcs-new span{
1248 margin-left: 13px;
1249 color: #0096CC;
1250 }
1251 .cff-fb-srcs-new i{
1252 font-size: 14px;
1253 padding: 0 10px;
1254 margin-left: -10px;
1255 }
1256 .cff-fb-srcs-item-chkbx{
1257 width: 40px;
1258 height: inherit;
1259 display: flex;
1260 justify-content: center;
1261 align-items: center;
1262 margin: 0 16px 0 7px;
1263 }
1264
1265 .cff-fb-srcs-item-chkbx-ic,.cff-fb-chbx-round{
1266 width: 16px;
1267 height: 16px;
1268 box-sizing: border-box;
1269 position: relative;
1270 border-radius: 50px;
1271 border: 2px solid #8c8f9a;
1272 }
1273 [data-multifeed="active"] .cff-fb-srcs-item-chkbx-ic{
1274 border-radius: 2px;
1275 }
1276
1277 [data-active="true"] .cff-fb-srcs-item-chkbx-ic, [data-active="true"] > .cff-fb-chbx-round, .cff-fb-source-popup [data-active="true"] > .cff-fb-chbx-round{
1278 border-color: #0096cc;
1279 background: #0096cc;
1280 }
1281 [data-multifeed="active"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
1282 content: '';
1283 position: absolute;
1284 width: 8px;
1285 height: 3px;
1286 border-left: 2px solid #fff;
1287 border-bottom: 2px solid #fff;
1288 top: 2px;
1289 right: 1px;
1290 -webkit-transform: rotate(-45deg);
1291 transform: rotate(-45deg);
1292 }
1293
1294 [data-multifeed="inactive"] [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before, [data-active="true"] > .cff-fb-chbx-round:before,
1295 .cff-fb-source-popup .cff-fb-source-list [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before,
1296 .cff-fb-section-videos [data-active="true"] .cff-fb-srcs-item-chkbx-ic:before{
1297 content: '';
1298 position: absolute;
1299 height: 6px;
1300 width: 6px;
1301 background: #fff;
1302 border-radius: 25px;
1303 left: 3px;
1304 top: 3px;
1305 }
1306
1307
1308
1309 .cff-fb-mr-feeds,.cff-fb-section-wh{
1310 margin-top: 8px;
1311 background: #fff;
1312 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
1313 display: flex;
1314 align-items: center;
1315 }
1316 .cff-fb-mr-fd-img {
1317 float: left;
1318 margin-right: 6%;
1319 width: 28%;
1320 line-height: 0;
1321 }
1322 .cff-fb-mr-fd-img img{
1323 width: 100%;
1324 }
1325
1326 .cff-fb-mr-fd-heading{
1327 font-weight:600;
1328 font-size: 18px;
1329 line-height: 1.7em;
1330 margin-bottom: 10px;
1331 }
1332 .cff-fb-mr-fd-list{
1333 margin-bottom: 10px;
1334 width: 100%;
1335 float: left;
1336 }
1337 .cff-fb-mr-fd-item{
1338 box-sizing: border-box;
1339 position: relative;
1340 float: left;
1341 border: 1px solid #DCDDE1;
1342 border-radius: 2px;
1343 margin-right: 8px;
1344 margin-bottom: 8px;
1345 height: 38px;
1346 width: 160px;
1347 color: #141B38;
1348 font-size: 14px;
1349 font-weight:600;
1350 text-transform: capitalize;
1351 display: flex;
1352 justify-content: center;
1353 align-items: center;
1354 transition: all .15s ease-in-out;
1355 }
1356 .cff-icon-platform-wrap {
1357 width: 100%;
1358 display: flex;
1359 justify-content: left;
1360 align-items: center;
1361 margin-left: 13px;
1362 }
1363
1364 .cff-fb-mr-fd-ic {
1365 margin-right: 9px;
1366 }
1367 .cff-fb-mr-fd-ic svg{
1368 height: 16px;
1369 fill: currentColor;
1370 float: left;
1371 }
1372 .cff-fb-mr-fd-ch{
1373 position: absolute;
1374 right:14px;
1375 }
1376 #cff-builder-app .cff-fb-mr-fd-heading h3 {
1377 margin-bottom: 21px;
1378 max-width: 385px;
1379 }
1380
1381
1382
1383 /*Embed Popup*/
1384 .cff-fb-embed-step-1{
1385 margin-top: 36px;
1386 }
1387
1388 .cff-fb-embed-step-1 > div{
1389 padding: 0 20px;
1390 }
1391 .cff-fb-embed-step-1-top{
1392 padding-bottom: 53px!important;
1393 border-bottom: 1px solid #E8E8EB;
1394 margin-bottom: 42px;
1395 }
1396 #cff-builder-app .cff-fb-embed-step-1 h4{
1397 margin-bottom: 12px;
1398 }
1399 .cff-fb-embed-input-ctn{
1400 display: flex;
1401 }
1402 .cff-fb-embed-input-ctn input,
1403 .cff-fb-embed-input-ctn input[type="text"]{
1404 position: relative;
1405 font-style: normal;
1406 font-weight: normal;
1407 font-size: 16px;
1408 line-height: 160%;
1409 color: #141B38;
1410 height: 44px;
1411 width: 77%;
1412 box-sizing: border-box;
1413 border-radius: 0px;
1414 border: 1px solid #D0D1D7!important;
1415 border-right: 0px!important;
1416
1417 }
1418 .cff-fb-embed-input-ctn input:focus, .cff-fb-embed-input-ctn .cff-fb-hd-btn:focus{
1419 box-shadow: none!important;
1420 outline: none!important
1421 }
1422 .cff-fb-embed-input-ctn .cff-fb-hd-btn{
1423 width: 23%;
1424 border-bottom-left-radius: 0px;
1425 border-top-left-radius: 0px;
1426 }
1427 .cff-fb-embed-input-ctn svg{
1428 width: 17px;
1429 fill: currentColor;
1430 float: left;
1431 margin-right: 10px;
1432 }
1433 .cff-fb-embed-step-1-bottom h4{
1434 text-align: center;
1435 }
1436 .cff-fb-embed-btns-ctn{
1437 display: grid;
1438 grid-template-columns: 49% 49%;
1439 grid-column-gap: 2%;
1440 margin-top: 14px;
1441 margin-bottom: 60px;
1442 }
1443 .cff-fb-embed-btn{
1444 cursor: pointer;
1445 width: 100%;
1446 height: 50px;
1447 background: #F3F4F5;
1448 border-radius: 2px;
1449 border: 1px solid #DCDDE1;
1450 display: flex;
1451 align-items: center;
1452 justify-content: space-between;
1453 box-sizing: border-box;
1454 padding: 0 20px;
1455 position: relative;
1456 color: #141B38;
1457 font-size: 16px;
1458 font-weight: 500;
1459 }
1460 .cff-fb-embed-btn .sb-icon-label svg{
1461 fill: currentColor;
1462 width: 18px;
1463 margin-right: 10px;
1464 float: left;
1465 }
1466 .cff-fb-embed-popup .sb-embed-breadcrumb {
1467 display: flex;
1468 align-items: center;
1469 padding: 25px 30px 0;
1470 margin-bottom: 2px;
1471 }
1472 .sb-embed-breadcrumb a {
1473 font-style: normal;
1474 font-weight: bold;
1475 font-size: 10px;
1476 line-height: 160%;
1477 letter-spacing: 0.08em;
1478 text-transform: uppercase;
1479 color: #434960;
1480 cursor: pointer;
1481 }
1482 .sb-embed-breadcrumb a:hover {
1483 color: #141B38;
1484 }
1485 .sb-embed-breadcrumb svg {
1486 margin-right: 8px;
1487 }
1488 .cff-fb-embed-step-2 > div{
1489 padding: 0 29px;
1490 }
1491
1492 .sb-customizer-sidebar-cache-wrapper{
1493 margin-top: 20px;
1494 padding: 0 20px;
1495 }
1496 .cff-fb-embed-step-2-list{
1497 margin-top: 25px;
1498 border-top: 1px solid #DCDDE1;
1499 padding-top: 14px !important;
1500 }
1501 .cff-fb-embed-step-2-list > strong{
1502 text-transform: uppercase;
1503 font-size: 12px;
1504 color: #434960;
1505 margin-bottom: 10px;
1506 }
1507 .cff-fb-embed-step-2-pages{
1508 margin-top: 8px;
1509 height: 250px;
1510 overflow: auto;
1511 }
1512 .cff-fb-embed-step-2-pages .sb-control-toggle-icon svg {
1513 width: 11px;
1514 }
1515 .cff-fb-embed-step-2-action{
1516 padding: 10px 34px 10px 30px !important;
1517 background: #F3F4F5;
1518 box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.1);
1519 }
1520 .cff-fb-embed-step-2-action a{
1521 color: #fff;
1522 }
1523 .cff-fb-embed-step-2-action a[data-active="false"]{
1524 opacity: .75;
1525 }
1526
1527 /*Dialog Popup*/
1528 .cff-fb-dialog-remove-source{
1529 background: #F3F4F5;
1530 padding: 40px 20px;
1531 display: flex;
1532 justify-content: center;
1533 align-items: center;
1534 }
1535 .cff-fb-dialog-remove-source .cff-fb-srcs-item{
1536 background: #fff;
1537 width: 280px;
1538 padding-left: 20px;
1539 box-sizing: border-box;
1540 margin-top: 0px;
1541 }
1542 .cff-fb-srcs-item-remove{
1543 position: absolute;
1544 width: 35px;
1545 height: 35px;
1546 border-radius: 50px;
1547 background: #fff;
1548 border:1px solid #E7E7E9;
1549 z-index: 3;
1550 right: -13px;
1551 bottom: -13px;
1552 display: flex;
1553 justify-content: center;
1554 align-items: center;
1555 box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
1556 }
1557 .cff-fb-srcs-item-remove svg{
1558 width: 12px;
1559 float: left;
1560 fill: var(--error-red);
1561 }
1562 .cff-fb-dialog-popup-content{
1563 display: flex;
1564 justify-content: center;
1565 align-items: center;
1566 text-align: center;
1567 flex-direction: column;
1568 padding: 38px 12%;
1569 }
1570 .cff-fb-dialog-popup-content strong{
1571 font-size: 22px;
1572 color: #141B38;
1573 display: block;
1574 margin-bottom: 15px;
1575 }
1576 .cff-fb-dialog-popup-content span{
1577 font-size: 16px;
1578 line-height: 1.5em;
1579 color: #434960;
1580 }
1581 .cff-fb-dialog-popup-actions{
1582 display: flex;
1583 justify-content: center;
1584 align-items: center;
1585 margin-top: 25px;
1586 }
1587 .cff-fb-dialog-popup-actions button{
1588 width: 100%;
1589 margin: 4px 4px;
1590 cursor: pointer;
1591 height: 42px;
1592 }
1593
1594 .cff-chevron {
1595 position: absolute;
1596 right: 14px
1597 }
1598
1599
1600
1601 /*
1602 Builder Footer
1603 */
1604 .cff-bld-footer > div{
1605 background: #fff;
1606 color: #141B38;
1607 margin: 30px 0;
1608 }
1609 .cff-bld-footer{
1610 padding-top: 0px!important
1611 }
1612 .cff-bld-ft-content{
1613 display: flex;
1614 align-items: center;
1615 max-width: 1200px;
1616 }
1617 .cff-bld-ft-img{
1618 float: left;
1619 width: 15%;
1620 margin-right: 5%;
1621 /*height: 158px;*/
1622 }
1623 .cff-bld-ft-img svg{
1624 margin-bottom: -4px;
1625 }
1626 .cff-bld-ft-txt{
1627 display: flex;
1628 justify-content: center;
1629 align-items: center;
1630 width: 59%;
1631 margin-right: 5%;
1632 }
1633 .cff-bld-ft-txt strong,
1634 .cff-fb-mr-fd-heading span{
1635 color: var(--cl-orange);
1636 }
1637 #cff-builder-app .cff-bld-ft-info{
1638 width: 44%;
1639 color: #434960;
1640 }
1641 #sb-footer-banner .cff-bld-ft-title{
1642 width: 63%;
1643 margin-right: 6%;
1644 }
1645 .cff-bld-ft-action{
1646 width: 17%;
1647 display: flex;
1648 justify-content: left;
1649 align-items: center;
1650 }
1651 .cff-bld-ft-action svg{
1652 top: 14px;
1653 height: 10px;
1654 }
1655 @media all and (max-width: 1130px) {
1656 #sb-footer-banner .cff-bld-ft-img{
1657 width: 17%;
1658 margin-right: 3%;
1659 }
1660 #sb-footer-banner .cff-bld-ft-txt{
1661 display: flex;
1662 justify-content: center;
1663 align-items: center;
1664 width: 61%;
1665 margin-right: 3%;
1666 }
1667 #cff-builder-app #sb-footer-banner h3 {
1668 font-size: 20px;
1669 }
1670 #cff-builder-app #sb-footer-banner .sb-small-p {
1671 font-size: 13px;
1672 }
1673 #sb-footer-banner .sb-button-standard {
1674 font-size: 13px;
1675 padding-left: 16px;
1676 line-height: 15px;
1677 }
1678 }
1679
1680 .cff-bld-ft-btm{
1681 font-size: 14px;
1682 display: flex;
1683 justify-content: center;
1684 align-items: center;
1685 padding: 15px 0px;
1686 border-top: 1px solid #DCDDE1;
1687 }
1688 .cff-bld-ft-btm strong{
1689 padding: 0 5px;
1690 }
1691 .cff-bld-ft-btm a{
1692 display: inline-block;
1693 padding: 0 10px;
1694 font-weight: 500;
1695 color: #0068A0;
1696 }
1697 .cff-bld-ft-btm a i{
1698 font-size: 12px;
1699 margin-left: 5px;
1700 }
1701 .cff-bld-ft-bns{
1702 display: inline-block;
1703 margin: 0 10px;
1704 padding: 5px 10px;
1705 border-radius: 5px;
1706 font-size: 14px;
1707 font-weight: 700;
1708 text-transform: uppercase;
1709 color: #663D00;
1710 background: #FFDF99;
1711 }
1712 /*
1713 Extensions Poup
1714 */
1715 .cff-fb-fs-link{
1716 position: absolute;
1717 width: 100%;
1718 height: 100%;
1719 left: 0;
1720 top: 0;
1721 right: 0;
1722 bottom: 0;
1723 z-index: 1;
1724 }
1725 .cff-fb-extensions-popup .cff-fb-slctf-back {
1726 position: relative;
1727 top: -5px;
1728 padding: 5px 12px;
1729 display: inline-block;
1730 z-index: 3;
1731 margin-bottom: 11px;
1732 }
1733 .cff-fb-extensions-popup .cff-fb-slctf-back span {
1734 margin-left:9px;
1735 }
1736 .cff-fb-extpp-top{
1737 display: flex;
1738 justify-content: center;
1739 align-items: center;
1740 height: 264px;
1741 background: #F3F4F5;
1742 }
1743 .cff-fb-extpp-top-fdtype.cff-fb-extpp-top{
1744 height: 295px;
1745 }
1746 .cff-fb-extpp-img{
1747 width: 50%;
1748 float: left;
1749 display: flex;
1750 justify-content: center;
1751 }
1752 .cff-fb-extensions-popup[data-getext-view="featuredpost"] .cff-fb-extpp-img{
1753 padding: 50px 0px;
1754 }
1755 .cff-fb-extensions-popup[data-getext-view="singlealbum"] .cff-fb-extpp-img{
1756 padding: 65px 0px;
1757 }
1758 .cff-fb-extpp-social-wall .cff-fb-extpp-top {
1759 display: flex;
1760 flex-direction: column;
1761 align-items: center;
1762 height: auto;
1763 padding-top: 29px;
1764 }
1765
1766 .cff-fb-extpp-info{
1767 width: 50%;
1768 float: left;
1769 display: flex;
1770 justify-content: center;
1771 flex-direction: column;
1772 padding-left: 40px;
1773 }
1774 .cff-fb-extpp-info .cff-fb-extpp-head,
1775 .cff-fb-extpp-info .cff-fb-extpp-desc{
1776 width: 90%;
1777 }
1778 #cff-builder-app .cff-fb-extpp-head{
1779 margin: 0 0 12px;
1780 }
1781 #cff-builder-app .cff-fb-extpp-desc {
1782 color: #475569;
1783 display: flex;
1784 justify-content: left;
1785 align-items: center;
1786 width: 105%;
1787 }
1788 .cff-fb-extpp-head span{
1789 color: var(--cl-orange);
1790 }
1791 .cff-fb-extpp-head span.sb-social-wall{
1792 color: inherit;
1793 font-size: 26px;
1794 line-height: 120% !important;
1795 display: inline-block;
1796 }
1797 .cff-fb-extpp-desc .sb-social-wall {
1798 width: 90%;
1799 }
1800 .cff-fb-extpp-lite-btn{
1801 float: left;
1802 font-size: 15px;
1803 font-weight: 500;
1804 padding: 10px 20px;
1805 color: #0068A0;
1806 background: #fff;
1807 border: 1px solid #DCDDE1;
1808 margin-bottom: 14px;
1809 margin-top: 17px;
1810 align-items: center;
1811 }
1812 .cff-fb-extpp-lite-btn svg{
1813 fill: currentColor;
1814 width: 20px;
1815 float: left;
1816 margin-right: 10px;
1817 }
1818 .cff-fb-extpp-inc-list{
1819 border: 1px solid #dcdde1;
1820 margin-top: 10px;
1821 margin-bottom: 30px;
1822 }
1823 .cff-fb-extpp-bottom-strg{
1824 font-size:18px;
1825 font-weight: 600;
1826 }
1827 .cff-fb-extpp-inc-items{
1828 display: grid;
1829 grid-template-columns: 25% 25% 25% 25%;
1830 }
1831 .cff-fb-extpp-inc-item, .cff-fb-extpp-inc-item-bottom{
1832 position: relative;
1833 height: 50px;
1834 display: flex;
1835 justify-content: center;
1836 align-items: center;
1837 border-right: 1px solid #dcdde1;
1838 border-bottom: 1px solid #dcdde1;
1839 font-size: 14px;
1840 }
1841 .cff-fb-extpp-inc-item-bottom{
1842 border: 0px !important;
1843 }
1844 .cff-fb-extpp-inc-item:last-of-type{
1845 border-right: 0px;
1846 }
1847 .cff-fb-extpp-inc-item svg, .cff-fb-extpp-inc-item-bottom svg{
1848 width: 17px; margin-right: 10px; fill: currentColor; float: left;
1849 }
1850 .cff-fb-extpp-bottom{
1851 padding: 20px 40px;
1852 background: #fff;
1853 }
1854 .cff-extension-bullet-list {
1855 display: grid;
1856 grid-template-columns: 32% 32% 32%;
1857 grid-column-gap: 2%;
1858 margin-top: 12px;
1859 margin-bottom: 40px;
1860 }
1861 .cff-extension-single-bullet {
1862 display: flex;
1863 justify-content: flex-start;
1864 align-items: center;
1865 margin: 4px 0;
1866 }
1867 #cff-builder-app .cff-extension-single-bullet span {
1868 color: #434960;
1869 }
1870
1871 .cff-extension-single-bullet svg {
1872 margin-right: 12px;
1873 }
1874 .cff-fb-extpp-btns{
1875 display: grid;
1876 grid-template-columns: 100%;
1877 grid-column-gap: 0;
1878 }
1879 .cff-fb-extpp-btns div{
1880 height: 38px;
1881 cursor: pointer;
1882 position: relative;
1883 border-radius: 3px;
1884 font-style: normal;
1885 font-weight: 600;
1886 font-size: 14px;
1887 line-height: 160%;
1888 display: flex;
1889 justify-content: center;
1890 align-items: center;
1891 box-sizing: border-box;
1892 }
1893 .cff-fb-extpp-get-btn{
1894 color: #fff;
1895 background: var(--cl-orange);
1896 }
1897 .cff-fb-extpp-demo-btn{
1898 border: 2px solid #DCDDE1;
1899 background: #F3F4F5;
1900 }
1901
1902 /*
1903 Feed Type Creation Process : Single Album;
1904 */
1905 .cff-fb-section-wh-insd{
1906 display: flex;
1907 }
1908 .cff-fb-sglelm-inp-ctn{
1909 margin-top: 100px;
1910 }
1911
1912 .cff-fb-sglelm-inp-ctn input[type="text"]{
1913 height: 44px;
1914 }
1915 .cff-fb-section-wh.cff-fb-sglelm-ctn {
1916 padding: 20px 21px 24px 30px;
1917 }
1918 .cff-fb-section-wh.cff-fb-sglelm-ctn .cff-fb-section-wh-insd {
1919 padding: 0;
1920 }
1921 .cff-fb-sglelm-inp-ctn input[type="text"]::placeholder{
1922 font-style: normal;
1923 font-weight: normal;
1924 font-size: 16px;
1925 line-height: 160%;
1926 color: #8C8F9A;
1927 }
1928 .cff-fb-sglelm-error-icon{
1929 width: 23px;
1930 height: 23px;
1931 background: var(--error-red);
1932 font-family: monospace;
1933 font-weight: 900;
1934 color: #fff;
1935 font-size: 15px;
1936 position: absolute;
1937 right: 10px;
1938 top: 10px;
1939 z-index: 999999999999999999;
1940 border-radius: 50px;
1941 display: flex;
1942 justify-content: center;
1943 align-items: center;
1944 }
1945 .cff-fb-sglelm-errormsg{
1946 color: var(--error-red);
1947 font-weight: 800;
1948 }
1949 .cff-fb-sglelm-inp-ctn .cff-fb-wh-inp{
1950 margin-bottom: 10px;
1951 }
1952 .cff-fb-sglelm-left{
1953 padding-right: 100px;
1954 }
1955 .cff-fb-sglelm-img-ctn{
1956 background:#E8E8EB;
1957 height: 350px;
1958 display: flex;
1959 justify-content: center;
1960 align-items: center;
1961 text-align: center;
1962 flex-direction: column;
1963 padding: 100px 50px;
1964 border: 1px solid #D0D1D7;
1965 box-sizing: border-box;
1966 }
1967 .cff-fb-sglelm-img-ctn.cff-fb-sglelm-img-pf{
1968 padding: 100px 35px;
1969 }
1970 .cff-fb-sglelm-img-ctn strong{
1971 font-size: 16px;
1972 color: #434960;
1973 margin-bottom: 8px;
1974 margin-top: 30px;
1975 }
1976 .cff-fb-sglelm-img-ctn span{
1977 font-size: 14px;
1978 line-height:1.6em;
1979 color: #8C8F9A;
1980 }
1981 .cff-fb-sglelm-right{
1982 width: 445px
1983 }
1984 .cff-fb-sglelm-img-errorctn span{
1985 padding: 0 20px;
1986 color: #434960;
1987 font-size: 20px;
1988 margin-top: 30px;
1989 line-height: 1.2em;
1990 }
1991 .cff-fb-sglelm-preview{
1992 height: 375px;
1993 background-color: #141B38;
1994 background-position: center center;
1995 background-size: cover;
1996 display: flex;
1997 justify-content: center;
1998 align-items: flex-end;
1999 color: #fff;
2000 }
2001 .cff-fb-sglelm-preview:after{
2002 content: '';
2003 position: absolute;
2004 width: 100%; height: 100%;
2005 background-image: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0,0,0,.5));
2006 }
2007 .cff-fb-sglelm-prev-info{
2008 width: 100%;
2009 padding: 20px 30px;
2010 padding-bottom: 40px;
2011 display: flex;
2012 justify-content: center;
2013 align-items: center;
2014 text-align: center;
2015 flex-direction: column;
2016 z-index: 2;
2017 }
2018 .cff-fb-sglelm-prev-info strong{
2019 font-size: 18px;
2020 margin-bottom: 5px;
2021 }
2022 .cff-fb-sglelm-prev-info span{
2023 font-size: 16px;
2024 line-height: 1.7em;
2025 }
2026
2027
2028 /*
2029 Feeds List
2030 */
2031 #cff-builder-app .cff-fb-select,
2032 #cff-builder-app .cff-fb-select:hover,
2033 #cff-builder-app .cff-fb-select:focus{
2034 border-radius: 0px!important;
2035 border: 1px solid #D0D1D7!important;
2036 outline: unset!important;
2037 float: left;
2038 min-height: auto;
2039 padding: 6px 31px 6px 8px;
2040 background: #fff url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.833252 0.333252L4.99992 4.49992L9.16658 0.333252H0.833252Z' fill='%238C8F9A'/%3E%3C/svg%3E%0A") no-repeat right 13px top 55%;
2041 background-size: 10px 6px;
2042 }
2043 .cff-fd-lst-bulk-ctn > *{
2044 float: left;
2045 margin-right: 10px;
2046 }
2047 .cff-fd-lst-bulk-ctn{
2048 margin-bottom: 8px;
2049 }
2050 .cff-fd-lst-pagination-ctn{
2051 float: right;
2052 display: flex;
2053 align-items: center;
2054 margin-top: 10px;
2055 }
2056 .cff-fd-lst-pgnt-btn{
2057 height: 30px;
2058 padding: 0 8px;
2059 cursor: pointer;
2060 border-radius: 3px;
2061 }
2062 .cff-fd-lst-pgnt-info{
2063 display: inline-block;
2064 padding: 0 3px;
2065 }
2066 .cff-fd-lst-count{
2067 margin-right: 10px;
2068 }
2069 .cff-feeds-list table{
2070 width: 100%;
2071 text-align: left;
2072 border-spacing: 0px;
2073 box-sizing: border-box;
2074 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
2075 background: #fff;
2076 }
2077
2078 .cff-feeds-list table a{
2079 cursor: pointer;
2080 }
2081 .cff-fd-lst-tbody tr:nth-child(odd){
2082 background: #F3F4F5;
2083 }
2084 .cff-fd-lst-tbody tr td{
2085 position: relative;
2086 vertical-align: top;
2087 padding: 10px 5px 15px 5px;
2088 font-size: 16px;
2089 }
2090 .cff-fd-lst-tbody tr td:first-child {
2091 width: 43%;
2092 }
2093 .cff-feeds-list table tr td:first-child {
2094 width: 30px;
2095 }
2096 .cff-fd-lst-thtf{
2097 background: #fff;
2098 }
2099 .cff-fd-lst-thtf th, .cff-fd-lst-thtf td{
2100 padding: 6px 5px;
2101 }
2102 .cff-fd-lst-thtf th{
2103 border-bottom: 1px solid #DCDDE1;
2104 }
2105 .cff-fd-lst-thtf td{
2106 border-top: 1px solid #DCDDE1;
2107 }
2108 .cff-fd-lst-chkbx{
2109 width: 11px;
2110 height: 11px;
2111 position: relative;
2112 border-radius: 2px;
2113 border: 1px solid #97A6BA;
2114 background: #fff;
2115 cursor: pointer;
2116 margin-left: 10px;
2117 }
2118 tbody .cff-fd-lst-chkbx {
2119 position: absolute;
2120 top: 15px;
2121 left: 5px;
2122 bottom: 0;
2123 right: 0;
2124 }
2125 .cff-fd-lst-thtf .cff-fd-lst-chkbx{
2126 width: 11px;
2127 height: 11px;
2128 border: 1px solid #D8DADD;
2129 }
2130 .cff-fd-lst-chkbx[data-active="true"]{
2131 background: var(--customizer-blue);
2132 border-color: var(--customizer-blue)!important;
2133 }
2134 .cff-fd-lst-chkbx[data-active="true"]:before{
2135 content: '';
2136 position: absolute;
2137 width: 6px;
2138 height: 3px;
2139 left: 2px;
2140 top: 2px;
2141 border-bottom: 2px solid #fff;
2142 border-left: 2px solid #fff;
2143 -webkit-transform: rotate(-45deg);
2144 transform: rotate(-45deg);
2145 }
2146
2147
2148 .cff-fd-lst-name{
2149 font-size: 17px;
2150 font-weight:500;
2151 color: #0068A0!important;
2152 }
2153 .cff-fd-lst-type{
2154 display: block;
2155 text-transform: capitalize;
2156 }
2157 .sb-instances-cell {
2158 margin-top: 4px;
2159 }
2160 .cff-fd-lst-btn{
2161 width: 21px;
2162 height: 21px;
2163 display: inline-flex;
2164 justify-content: center;
2165 align-items: center;
2166 margin: 0 4px;
2167 cursor: pointer;
2168 color: #141B38;
2169 border-radius: 2px;
2170 border: 1px solid #D8DADD;
2171 -webkit-transition: all .2s ease-in-out;
2172 transition: all .2s ease-in-out;
2173 background: #fff;
2174 }
2175 .cff-fd-lst-btn svg {
2176 height: 13px;
2177 }
2178 .cff-fd-lst-actions .cff-fd-lst-btn,
2179 .cff-fb-inst-tbl-ctn .cff-fd-lst-btn{
2180 box-sizing: border-box;
2181 width: 36px;
2182 height: 32px;
2183 background: transparent;
2184 }
2185 .cff-fd-lst-actions .cff-fd-lst-btn {
2186 margin: 0 4px 0 0;
2187 }
2188 .cff-fd-lst-actions .cff-fd-lst-btn:last-child {
2189 margin: 0;
2190 }
2191 .cff-fd-lst-actions .cff-fd-lst-btn svg {
2192 width: 12px;
2193 height: 16px;
2194 }
2195 .cff-fd-lst-btn-delete{
2196 color: #D72C2C;
2197 border-color: #FBD5D5;
2198 }
2199 .cff-fd-lst-btn svg{
2200 fill: currentColor;
2201 width: 14px;
2202 float: left;
2203 }
2204 .cff-fd-lst-actions .cff-fd-lst-btn:hover svg{
2205 color: #fff;
2206 }
2207 .cff-fd-lst-actions .cff-fd-lst-btn:hover{
2208 background: #0096CC;
2209 border-color: #0096CC;
2210 }
2211 .cff-fd-lst-actions .cff-fd-lst-btn-delete:hover{
2212 background: #D72C2C;
2213 border-color: #D72C2C;
2214 }
2215 .cff-fd-lst-dimmed .cff-fd-lst-btn, .cff-fd-lst-dimmed .cff-fd-lst-btn:hover{
2216 background: #F3F4F5!important;
2217 border-color:#D8DADD!important;
2218 color: #8C8F9A!important;
2219 }
2220 .cff-fd-lst-dimmed .cff-fd-lst-btn:hover svg{
2221 color: #8C8F9A!important;
2222 }
2223
2224 .cff-fb-tltp-parent{
2225 position: relative;
2226 }
2227 .cff-fb-view-instances[data-active="true"]{
2228 font-weight: 600;
2229 text-decoration: underline;
2230 cursor: pointer;
2231 line-height: 1em;
2232 }
2233 .cff-fb-tltp-elem{
2234 position: absolute;
2235 color: #fff;
2236 background: #434960;
2237 font-size: 14px;
2238 padding: 7px 10px;
2239 border-radius: 3px;
2240 font-weight:500;
2241 z-index: 9;
2242 text-align: center;
2243 opacity: 0;
2244 visibility: hidden;
2245 top: calc(-100% - 30px);
2246 left: 50%;
2247 -webkit-transform: translateX(-50%);
2248 transform: translateX(-50%);
2249 -webkit-transition: all .2s ease-in-out;
2250 transition: all .2s ease-in-out;
2251 }
2252 .cff-fb-tltp-elem span{
2253 position: relative; z-index: 3;
2254 }
2255 .cff-fb-tltp-elem:after{
2256 content: '';
2257 position: absolute;
2258 height: 10px;
2259 width: 10px;
2260 bottom: -5px;
2261 left: calc(50% - 5px);
2262 background: #434960;
2263 transform: rotate(-45deg);
2264 }
2265 .cff-fb-tltp-parent:hover .cff-fb-tltp-elem {
2266 top: calc(-100% - 20px);
2267 opacity: 1;
2268 visibility: visible;
2269 }
2270 .cff-fd-lst-shortcode-cp{
2271 margin-left: 10px;
2272 }
2273 .cff-fd-lst-act-th{
2274 width: 190px;
2275 max-width: 190px;
2276 }
2277
2278 /*
2279 Feed Instance Popup
2280 */
2281 .cff-fb-popup-feedinst .cff-fb-source-top{
2282 display: flex;
2283 align-items: center;
2284 }
2285 .cff-fb-popup-feedinst h5{
2286 margin-bottom: 0px;
2287 float: left;
2288 font-size: 27px;
2289 }
2290 .cff-fb-fdinst-type{
2291 padding: 5px 5px;
2292 background: #E8E8EB;
2293 margin-left: 12px;
2294 float: left;
2295 }
2296 .cff-fb-inst-tbl-ctn{
2297 padding: 0 23px 63px;
2298 }
2299 .cff-fb-inst-tbl-ctn table{
2300 width: 100%;
2301 border-spacing: unset;
2302 box-sizing: border-box;
2303 border: 1px solid #DCDDE1;
2304 text-align: left;
2305 }
2306 .cff-fb-inst-tbl-ctn tfoot,.cff-fb-inst-tbl-ctn thead{
2307 background: #F3F4F5
2308 }
2309 .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf th, .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf td{
2310 font-size: 13px;
2311 color: #364152;
2312 padding: 13px 10px;
2313 }
2314 .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(odd){
2315 background: #fff;
2316 }
2317 .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr:nth-child(even){
2318 background: #F3F4F5;
2319 }
2320 .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr th,
2321 .cff-fb-inst-tbl-ctn .cff-fd-lst-thtf tr td{
2322 padding: 4px 20px;
2323 }
2324 .cff-fb-inst-tbl-ctn .cff-fd-lst-tbody tr td{
2325 padding: 11px 20px;
2326 }
2327 .cff-fb-inst-tbl-ctn .cff-fd-lst-name{
2328 font-size: 14px;
2329 }
2330 .cff-fb-inst-tbl-shrtc{
2331 display: flex;
2332 align-items: center;
2333 }
2334
2335 .cff-fd-inst-btn{
2336 width: 10px;
2337 height: 10px;
2338 box-sizing: border-box;
2339 border-right: 3px solid #8C8F9A;
2340 border-top: 3px solid #8C8F9A;
2341 cursor: pointer;
2342 -webkit-transform: rotate(45deg);
2343 transform: rotate(45deg);
2344 }
2345
2346 /*Legacy Feeds */
2347 .cff-fb-lgc-top-new{
2348 color: #141B38;
2349 background: #fff;
2350 margin: 10px 0px;
2351 padding: 15px 20px;
2352 display: flex;
2353 justify-content: center;
2354 align-items: center;
2355 font-size: 14px;
2356 font-weight: 600;
2357 }
2358 .cff-fb-lgc-gr{
2359 font-size: 12px;
2360 text-transform: uppercase;
2361 font-weight: 500;
2362 background: #59AB46;
2363 color: #fff;
2364 margin-right: 10px;
2365 padding: 6px 10px;
2366 border-radius: 2px;
2367 line-height: 1em;
2368 }
2369 .cff-fb-lgc-inf-ctn{
2370 background: #fff;
2371 padding: 0 20px;
2372 display: flex;
2373 align-items: center;
2374 height: 58px;
2375 }
2376
2377 .cff-fb-lgc-inf-ctn > *{
2378 float: left;
2379 display: inline-block;
2380 position: relative;
2381 }
2382 #cff-builder-app .cff-fb-lgc-inf-ctn > h4{
2383 margin-right: 14px;
2384 margin-bottom: 0;
2385 }
2386 #cff-builder-app .cff-fb-lgc-btn-stg{
2387 display: flex;
2388 margin-left: auto;
2389 }
2390 .cff-fd-legacy-feed-toggle{
2391 height: 34px;
2392 display: flex;
2393 justify-content: center;
2394 align-items: center;
2395 background: #E2F5FF;
2396 color:#0068A0;
2397 cursor: pointer;
2398 font-weight: 600;
2399 font-size: 14px;
2400 line-height: 160%;
2401 }
2402 .cff-fd-legacy-feed-toggle:hover {
2403 background: #BFE8FF;
2404 }
2405 .cff-fd-legacy-feed-toggle span{
2406 display: inline-block;
2407 position: relative;
2408 padding-right: 20px;
2409 margin-left: -20px;
2410 }
2411 .cff-fd-legacy-feed-toggle[data-active="true"] span:after{
2412 -webkit-transform: rotate(-225deg);
2413 transform: rotate(-225deg);
2414 top: 7px;
2415 }
2416 .cff-feeds-list .cff-legacy-table-wrap table{
2417 box-shadow: none;
2418 border-top: 1px solid #DCDDE1;
2419 }
2420 .cff-fb-lgc-ctn{
2421 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05);
2422 margin-bottom: 20px;
2423 }
2424
2425 .cff-fb-onbrd-infotxt{
2426 display: flex;
2427 align-items: center;
2428 }
2429 .cff-fb-onbrd-infotxt svg{
2430 fill: currentColor;
2431 width: 16px;
2432 display: inline-block;
2433 margin-left: 10px;
2434 float: left;
2435 }
2436
2437 .cff-fb-onbrd-tltp-parent{
2438 position: relative;
2439 }
2440 .cff-fb-onbrd-tltp-elem{
2441 position: absolute;
2442 z-index: 9;
2443 background: #fff;
2444 border-radius: 2px;
2445 color: #434960;
2446 padding: 16px 52px 4px 24px;
2447 font-size: 15px;
2448 left: -30px;
2449 top: calc(100% + 20px);
2450 line-height: 1.7em;
2451 box-shadow: 0px 1px 18px rgba(0,0,0,.2);
2452 display: none;
2453 }
2454
2455
2456
2457 .cff-fb-onbrd-tltp-elem[data-active="false"]{
2458 display: none;
2459 }
2460 .cff-fb-onbrd-tltp-elem[data-active="true"],
2461 .cff-fb-onbrd-tltp-hover:hover .cff-fb-onbrd-tltp-elem{
2462 display: block;
2463 min-width: 440px;
2464 padding-bottom: 15px;
2465 }
2466 .cff-fb-onbrd-tltp-elem .sb-pointer {
2467 position: absolute;
2468 left: 85px;
2469 top: -17px;
2470 }
2471 .cff-fb-onbrd-tltp-elem-2 .sb-pointer {
2472 left: 485px;
2473
2474 }
2475 .cff-fb-onbrd-tltp-elem:after{
2476 background: #fff;
2477 z-index: 999;
2478 top: 0px;
2479 margin-left: -10px;
2480 width: 40px;
2481 box-shadow: unset;
2482 -webkit-transform: rotate(0deg);
2483 transform: rotate(0deg);
2484 }
2485 .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem{
2486 left: 50%;
2487 -webkit-transform:translateX(-50%);
2488 transform:translateX(-50%);
2489 bottom: calc(100% + 15px);
2490 top: unset;
2491 padding: 8px 11px;
2492 width: 100%;
2493 text-align: center;
2494 box-shadow: 0 5px 9px rgb(0 0 0 / 20%), 0 -4px 9px rgb(0 0 0 / 10%);
2495 }
2496 .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before {
2497 content: '';
2498 position: absolute;
2499 left: 50%;
2500 bottom: -10px;
2501 border-top: 12px solid #fff;
2502 border-right: 12px solid transparent;
2503 border-left: 12px solid transparent;
2504 -webkit-transform: translateX(-50%);
2505 transform: translateX(-50%);
2506 z-index: 2;
2507 }
2508 .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before,
2509 .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:after{
2510 left: calc(50% - 10px);
2511 top: unset;
2512 }
2513 .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:before{
2514 bottom: -10px;
2515 }
2516 .cff-fb-onbrd-tltp-parent.cff-fb-onbrd-tltp-center-top .cff-fb-onbrd-tltp-elem:after{
2517 bottom: 0px;
2518 }
2519
2520
2521 #cff-builder-app .cff-fb-onbrd-tltp-txt{
2522 margin: 0px;
2523 }
2524 .cff-fb-onbrd-tltp-txt:last-of-type{
2525 margin-bottom: 0px;
2526 }
2527 .cff-fb-onbrd-tltp-elem .cff-fb-popup-cls{
2528 top: 12px;
2529 right: 16px;
2530 }
2531
2532 [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem{
2533 right: 50px;
2534 left: unset;
2535 }
2536 [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:before,
2537 [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:after{
2538 left: unset;
2539 right: 13%
2540 }
2541 [data-tltp-pos*="right"] .cff-fb-onbrd-tltp-elem:after{
2542 margin-left: unset;
2543 margin-right: -10px;
2544 }
2545 .cff-fd-lst-dimmed .cff-fb-onbrd-tltp-elem{
2546 top: 100%;
2547 }
2548 .cff-fb-cp-clpboard{
2549 width: 0px;
2550 height: 0px;
2551 position: absolute;
2552 left: -100000px;
2553 }
2554 .cff-fb-copied{
2555 position: fixed;
2556 z-index: 9999999;
2557 background: #010101;
2558 color: #fff;
2559 line-height: 1em;
2560 font-size: 15px;
2561 font-weight: 500;
2562 padding: 10px 20px;
2563 opacity: 0;
2564 visibility: hidden;
2565 -webkit-transition: all .2s ease-in-out, opacity .4s ease-in-out;
2566 transition: all .2s ease-in-out, opacity .4s ease-in-out;
2567 left: 50%;
2568 bottom: -20px;
2569 -webkit-transform: translateX(-50%);
2570 transform: translateX(-50%);
2571 }
2572 .cff-fb-copied[data-active="true"]{
2573 opacity: 1;
2574 visibility: visible;
2575 bottom: 20px;
2576 }
2577
2578 /*
2579 ****
2580 customizer Screens
2581 ****
2582 */
2583 .sb-customizer-ctn{
2584 /*margin-top: 52px;*/
2585 min-height: 100vh;
2586 }
2587 .sb-customizer-sidebar{
2588 position: fixed;
2589 z-index: 100;
2590 width: 375px;
2591 box-shadow: 4px 0px 14px rgb(0 0 0 / 5%), 1px 0px 4px rgb(0 0 0 / 10%);
2592 background: #fff;
2593 left: 160px;
2594 top: 96px;
2595 overflow: auto;
2596 bottom: 0px;
2597 padding-bottom: 50px;
2598 }
2599
2600 .jetpack-masterbar .sb-customizer-sidebar {
2601 left: 272px;
2602 }
2603
2604 body.folded .sb-customizer-sidebar{
2605 left: 36px;
2606 }
2607
2608 .sb-customizer-sidebar-tab-ctn{
2609 display: flex;
2610 justify-content: center;
2611 align-items: center;
2612 margin-bottom: 24px;
2613 }
2614 .sb-customizer-sidebar-tab{
2615 width: 50%;
2616 height: 56px;
2617 background: #F3F4F5;
2618 border-bottom: 2px solid #F3F4F5;
2619 display: flex;
2620 justify-content: center;
2621 align-items: center;
2622 cursor: pointer;
2623 }
2624 .sb-customizer-sidebar-tab[data-active="true"]{
2625 border-color: #0096CC;
2626 }
2627 .sb-customizer-sidebar-tab:hover {
2628 background: #fff!important;
2629 color: #141B38!important;
2630 }
2631 .sb-customizer-sidebar-sec-el{
2632 height: 52px;
2633 cursor: pointer;
2634 display: flex;
2635 align-items: center;
2636 color: #141B38;
2637 border-bottom: 1px solid #DCDDE1;
2638 -webkit-transition: background .2s ease-in-out;
2639 transition: background .2s ease-in-out;
2640 padding: 0 20px;
2641 }
2642 .sb-customizer-sidebar-sec-el:hover{
2643 background: #F3F4F5;
2644 border-bottom: 1px solid #F3F4F5;
2645 }
2646 .sb-customizer-sidebar-sec-el .sb-customizer-chevron svg{
2647 position: absolute;
2648 right: 22px;
2649 top: 22px;
2650 }
2651 .sb-customizer-sidebar-sec-el-icon{
2652 margin-right: 15px;
2653 width: 30px;
2654 height: 30px;
2655 display: flex;
2656 justify-content: center;
2657 align-items: center;
2658 }
2659 .sb-customizer-sidebar-sec-el-icon svg{
2660 width: 20px;
2661 float: left;
2662 fill: currentColor;
2663 }
2664 .sb-customizer-sidebar-sec-elhead{
2665 height: 50px;
2666 padding: 0 20px;
2667 display: flex;
2668 align-items: center;
2669 margin-top: 30px;
2670 font-style: normal;
2671 font-weight: bold;
2672 font-size: 12px;
2673 line-height: 160%;
2674 letter-spacing: 0.05em;
2675 text-transform: uppercase;
2676 color: #8C8F9A;
2677 }
2678 .sb-customizer-sidebar-header{
2679 padding: 20px 20px;
2680 border-bottom: 1px solid #DCDDE1;
2681 }
2682 .sb-customizer-sidebar-header[data-separator="none"]{
2683 border-bottom: 0px!important;
2684 padding-bottom: 0px;
2685 }
2686 .sb-customizer-sidebar-header a{
2687 cursor: pointer;
2688 }
2689 .sb-customizer-sidebar-breadcrumb{
2690 margin-bottom: 15px;
2691 }
2692 .sb-breadcrumb-pro-label{
2693 color: #fff !important;
2694 display: inline-block;
2695 background: var(--cl-orange);
2696 padding: 5px 8px;
2697 font-size: 11px;
2698 line-height: 1em !important;
2699 border-radius: 4px;
2700 -webkit-transform: translateX(5px) translateY(-4px);
2701 transform: translateX(8px) translateY(-2px);
2702 }
2703 .sb-control-elem-label .sb-breadcrumb-pro-label{
2704 -webkit-transform: translateX(5px) translateY(0px);
2705 transform: translateX(5px) translateY(0px);
2706 }
2707
2708 .sb-customizer-sidebar-breadcrumb a, .sb-customizer-sidebar-breadcrumb span{
2709 display: inline-block;
2710 position: relative;
2711 cursor: pointer;
2712 color: #434960;
2713 text-transform: uppercase;
2714 font-size: 10px;
2715 line-height: 160%;
2716 letter-spacing: 0.08em;
2717 padding: 0 17px;
2718 height: 20px;
2719 font-weight: 600;
2720 }
2721 .sb-customizer-sidebar-breadcrumb span{
2722 cursor: text;
2723 }
2724 .sb-customizer-sidebar-breadcrumb svg {
2725 position: absolute;
2726 left: 4px;
2727 top: 6px;
2728
2729 }
2730
2731
2732 .sb-customizer-sidebar-header strong{
2733 font-size: 26px;
2734 color: #141B38;
2735 display: block;
2736 margin-bottom: 10px;
2737 line-height: 1.1em;
2738 }
2739 .sb-customizer-sidebar-header span{
2740 line-height: 1em;
2741 color: #434960;
2742 }
2743 .sb-customizer-sidebar-header > span{
2744 margin-bottom: 14px;
2745 display: block;
2746 line-height: 1.5;
2747 }
2748 .sb-customizer-ctrl-link{
2749 text-decoration: underline!important;
2750 }
2751 /*
2752 Controls Style
2753 */
2754 .sb-control-label[data-title="true"]{
2755 font-weight: 600;
2756 }
2757
2758 .sb-control-elem-ctn{
2759 display: flex;
2760 color: #141B38;
2761 padding: 20px 20px;
2762 }
2763 .sb-control-elem-ctn[data-stacked="true"]{
2764 padding: 5px 20px;
2765 }
2766 .sb-control-elem-ctn[data-type="heading"]{
2767 padding-bottom: 0;
2768 }
2769 .sb-control-elem-overlay{
2770 width: 100%!important;
2771 height: 100%!important;
2772 position: absolute!important;
2773 left: 0!important;
2774 top: 0!important;
2775 z-index: 9!important;
2776 background: rgba(255,255,255,0.4)!important;
2777 }
2778 #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-small-p{
2779 font-weight: 600;
2780 }
2781 #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-control-elem-description{
2782 font-style: normal;
2783 font-weight: normal;
2784 font-size: 12px;
2785 line-height: 150%;
2786 color: #434960;
2787 }
2788 #cff-builder-app .sb-control-elem-ctn[data-type="heading"] .sb-control-elem-label {
2789 margin-bottom: 0;
2790 }
2791 .sb-control-elem-heading svg {
2792 margin-left: 8px;
2793 }
2794 .sb-control-elem-ctn[data-separator="top"],.sb-control-elem-ctn[data-separator="both"]{
2795 border-top: 1px solid #DCDDE1;
2796 }
2797 .sb-control-elem-ctn[data-separator="bottom"],.sb-control-elem-ctn[data-separator="both"]{
2798 border-bottom: 1px solid #DCDDE1;
2799 }
2800 .sb-control-elem-ctn[data-type="separator"]{
2801 padding: 0;
2802 }
2803 .sb-control-elem-separator{
2804 height: 2px;
2805 border-top: 1px solid #DCDDE1;
2806 }
2807
2808 .sb-control-elem-ctn[data-reverse="true"]{
2809 flex-direction: row-reverse;
2810 }
2811 .sb-control-elem-ctn svg{
2812 fill: currentColor;
2813 }
2814 .sb-control-elem-output{
2815 padding-left: 20px;
2816 }
2817 .sb-control-elem-ctn[data-reverse="true"] .sb-control-elem-output{
2818 padding-right: 20px;
2819 padding-left: 0px;
2820 }
2821 .sb-control-elem-ctn[data-layout="block"]{
2822 display: block;
2823 }
2824 .sb-control-elem-ctn[data-layout="block"] .sb-control-elem-label{
2825 width: 100%;
2826 float: left;
2827 margin-bottom: 8px;
2828 }
2829 .sb-control-elem-ctn[data-layout="block"] .sb-control-elem-output{
2830 padding: 0px;
2831 }
2832 .sb-control-elem-ctn[data-layout="block"] input[type="number"] {
2833 height: 36px;
2834 background: #FFFFFF;
2835 border-radius: 1px 0 0 1px !important;
2836 /*border-right-color: #F3F4F5 !important;*/
2837 }
2838 .sb-control-elem-ctn[data-layout="block"] [data-contains-suffix="true"] input[type="number"]{
2839 border-right-color: #F3F4F5 !important;
2840 }
2841 .sb-control-elem-ctn[data-child="true"]{
2842 padding-left: 70px;
2843 }
2844
2845 .sb-control-elem-ctn[data-layout="half"]{
2846 align-items: center;
2847 justify-content: flex-start;
2848 }
2849 .sb-control-elem-ctn[data-layout="half"][data-switcher-top="true"]{
2850 align-items: flex-start!important;
2851 }
2852 .sb-control-elem-ctn[data-layout="half"][data-switcher-top="true"] .sb-control-switcher-ctn{
2853 margin-top: 5px;
2854 }
2855
2856 .sb-control-elem-ctn[data-layout="half"] > div{
2857 width: 100%;
2858 }
2859 .sb-control-elem-ctn[data-type="switcher"][data-reverse="true"][data-layout="half"] > div{
2860 width: unset;
2861 }
2862 .sb-control-elem-ctn[data-layout="half"][data-reverse="true"]{
2863 justify-content: flex-end;
2864 }
2865 [data-type="switcher"][data-reverse="true"][data-layout="half"] .sb-control-elem-output{
2866 padding-right: 5px;
2867
2868 }
2869 .sb-control-elem-label-title{
2870 display: flex;
2871 align-items: center;
2872 }
2873 .sb-control-elem-description{
2874 color: #434960;
2875 font-size: 13px;
2876 float: left;
2877 margin-top: 4px;
2878 }
2879 .sb-control-elem-description a{
2880 cursor: pointer;
2881 }
2882 .sb-control-elem-ctn[data-heading="strong"] .sb-control-elem-heading{
2883 font-weight: 600!important;
2884 }
2885 .sb-control-elem-heading[data-underline="true"]{
2886 text-decoration: underline;
2887 }
2888 .sb-control-elem-icon{
2889 display: flex;
2890 justify-content: center;
2891 align-items: center;
2892 }
2893 .sb-control-elem-icon svg{
2894 width: 16px;
2895 float: left;
2896 margin-right: 10px;
2897 }
2898 .sb-control-elem-tltp{
2899 margin-left: 10px;
2900 position: relative;
2901 }
2902 .sb-control-elem-tltp-icon{
2903 float: left;
2904 cursor: pointer;
2905 }
2906 .sb-control-elem-tltp-icon svg{
2907 width: 14px;
2908 float: left;
2909 }
2910
2911 /*Switcher Control*/
2912 .sb-control-switcher-ctn{
2913 cursor: pointer;
2914 display: flex;
2915 align-items: center;
2916 float: left;
2917 }
2918 .sb-control-switcher{
2919 width: 36px;
2920 height: 18px;
2921 border-radius: 25px;
2922 background: #D0D1D7;
2923 position: relative;
2924 margin-right: 10px;
2925 }
2926
2927 .sb-control-switcher:before{
2928 content: '';
2929 position: absolute;
2930 height: 14px;
2931 width: 14px;
2932 left: 3px;
2933 top: 2px;
2934 border-radius: 25px;
2935 background: #fff;
2936 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
2937 }
2938 .sb-control-switcher-ctn[data-active="true"] .sb-control-switcher{
2939 background: var(--customizer-blue);
2940 }
2941 .sb-control-switcher-ctn[data-active="true"] .sb-control-switcher:before{
2942 left: 19px;
2943 }
2944
2945 /*Toggle SINGLE Control*/
2946 .sb-control-toggle-elm{
2947 display: flex;
2948 align-items: center;
2949 cursor: pointer;
2950 height: 46px;
2951 padding: 0 15px;
2952 border-right: 1px solid #E8E8EB;
2953 border-left: 1px solid #E8E8EB;
2954 border-bottom: 1px solid #E8E8EB;
2955 }
2956 .sb-control-toggle-elm:first-child {
2957 border-top: 1px solid #E8E8EB;
2958 }
2959 .sb-control-toggle-elm[data-disabled="true"] .sb-control-label svg {
2960 transform: translate(3px, 4px);
2961 }
2962 .sb-control-toggle-extension-cover{
2963 width: 100%;
2964 height: 100%;
2965 position: absolute;
2966 left: 0px;
2967 top: 0;
2968 cursor: pointer;
2969 z-index: 4;
2970
2971 }
2972
2973 .sb-control-toggle-deco{
2974 width: 16px;
2975 height: 16px;
2976 margin-right: 13px;
2977 box-sizing: border-box;
2978 border-radius: 50%;
2979 border: 2px solid #d0d1d7;
2980 }
2981 .sb-control-toggle-icon{
2982 display: flex;
2983 justify-content: center;
2984 align-items: center;
2985 margin-right: 13px;
2986 }
2987 .sb-control-toggle-icon svg{
2988 width: 16px;
2989 float: left;
2990 fill: #141B38;
2991 }
2992 .sb-control-toggle-elm[data-active="true"]{
2993 background: #F7FDFF;
2994 border-radius: 2px;
2995 border: 1px solid var(--customizer-blue);
2996 }
2997 .sb-control-toggle-elm[data-active="true"]{
2998 background: #F7FDFF;
2999 border-radius: 2px;
3000 border: 1px solid var(--customizer-blue);
3001 }
3002 .sb-control-toggle-elm:hover:not(.sb-control-toggle-elm[data-disabled="true"]) .sb-control-toggle-deco,
3003 .sb-control-toggle-elm[data-active="true"]:not(.sb-control-toggle-elm[data-disabled="true"]):hover .sb-control-toggle-deco{
3004 border: 4px solid var(--customizer-blue);
3005 background: #fff;
3006 }
3007 .sb-control-toggle-elm[data-active="true"] .sb-control-toggle-deco{
3008 border: 6px solid var(--customizer-blue);
3009 background: #fff;
3010 }
3011
3012 /*Toggle SET Control*/
3013 .sb-control-toggle-set-ctn .sb-control-toggle-elm[data-active="true"]{
3014 border-radius: 0px;
3015 }
3016
3017 /*Toggle Button Control*/
3018 .sb-control-togglebutton-ctn{
3019 display: flex;
3020 align-items: center;
3021 justify-content: center;
3022 padding: 3px;
3023 background: #f3f4f5;
3024 border-radius: 4px;
3025 border: 1px solid #eee;
3026 height: 40px;
3027 }
3028 .sb-control-togglebutton-elm{
3029 width: 100%;
3030 display: flex;
3031 justify-content: center;
3032 align-items: center;
3033 height: 33px;
3034 cursor: pointer;
3035 font-weight: 600;
3036 border-radius: 4px;
3037 text-transform: capitalize;
3038 line-height: 1em;
3039 }
3040 .sb-control-togglebutton-elm[data-active="true"]{
3041 color: var(--dark-blue);
3042 background: #fff;
3043 }
3044 .sb-control-togglebutton-elm:hover{
3045 color: var(--dark-blue);
3046 }
3047
3048 /*Input Control*/
3049 .sb-control-input-ctn{
3050 display: flex;
3051 }
3052 .sb-control-input,.sb-control-input-textrea{
3053 height: 40px;
3054 background: #fff;
3055 border: 1px solid #D0D1D7!important;
3056 border-radius: unset!important;
3057 outline: unset!important;
3058 padding: 0 10px!important;
3059 line-height: 1em;
3060 margin: 0px;
3061 }
3062 .sb-control-input-textrea{
3063 padding: 10px!important;
3064 height: 120px;
3065 line-height: 1.5em;
3066 }
3067 .sb-control-input:hover{
3068 color: inherit!important;
3069 }
3070 .sb-control-input:focus,.sb-control-input-textrea:focus{
3071 border: 1px solid #8C8F9A!important;
3072 border-radius: unset!important;
3073 box-shadow: unset!important;
3074 outline: unset!important;
3075 }
3076 .sb-control-input[disabled],.sb-control-input-textrea[disabled]{
3077 background-color: #F3F4F5;
3078 border: 1px solid #E8E8EB;
3079 }
3080 .sb-control-input-info{
3081 display: flex;
3082 justify-content: center;
3083 align-items: center;
3084 background: #F3F4F5;
3085 padding: 0 8px;
3086 font-weight: normal;
3087 font-size: 14px;
3088 line-height: 160%;
3089 color: #434960;
3090 border: 1px solid #D0D1D7;
3091 border-left: none;
3092 border-radius: 0 1px 1px 0 !important;
3093 }
3094
3095 /*CheckBox Control*/
3096 .sb-control-checkbox-ctn{
3097 cursor: pointer;
3098 display: flex;
3099 }
3100 .sb-control-checkbox{
3101 width: 18px;
3102 height: 18px;
3103 border-radius: 2px;
3104 float: left;
3105 border: 2px solid #D0D1D7;
3106 box-sizing: border-box;
3107 position: relative;
3108 margin-right: 10px;
3109 flex: none;
3110 }
3111 .sb-control-checkbox-ctn > div{
3112 z-index: 3;
3113 }
3114 .sb-control-checkbox-ctn:hover .sb-control-checkbox-hover{
3115 opacity: 1;
3116 }
3117 .sb-control-checkbox-hover{
3118 position: absolute;
3119 left: -20px;
3120 top: 0px;
3121 width: calc(100% + 40px);
3122 height: 100%;
3123 background:#F3F4F5;
3124 z-index: 1;
3125 opacity: 0;
3126 }
3127
3128 .sb-control-checkbox{
3129 z-index: 5!important;
3130 }
3131
3132
3133 .sb-control-checkbox[data-active="true"]{
3134 background: var(--customizer-blue);
3135 border-color: var(--customizer-blue);
3136 color: #fff;
3137 }
3138 .sb-control-checkbox[data-active="true"]:before{
3139 content: '';
3140 position: absolute;
3141 width: 8px;
3142 height: 4px;
3143 top: 2px;
3144 left: 2px;
3145 border-left: 2px solid currentColor;
3146 border-bottom: 2px solid currentColor;
3147 -webkit-transform: rotate(-45deg);
3148 transform: rotate(-45deg);
3149 }
3150
3151
3152 /*Action Button Control*/
3153 .sb-control-action-button{
3154 height: 38px;
3155 cursor: pointer;
3156 display: flex;
3157 flex-direction: row;
3158 justify-content: center;
3159 align-items: center;
3160 background: #F3F4F5;
3161 border-radius: 2px;
3162 border: 1px solid #DCDDE1;
3163 position: relative;
3164 line-height: 1em;
3165 margin-top: 7px;
3166 }
3167
3168 .sb-control-action-button div{
3169 float: left;
3170 width: 20px;
3171 height: 20px;
3172 display: flex;
3173 justify-content: center;
3174 align-items: center;
3175 margin-right: 8px;
3176 }
3177 .sb-control-action-button svg{
3178 width: 17px;
3179 }
3180
3181 /* WPColorPicker Control Redesign */
3182 .sb-control-colorpicker-ctn .wp-picker-default{
3183 display: none!important;
3184 }
3185 .sb-control-colorpicker-ctn .minicolors-theme-default.minicolors{
3186 width: 100%;
3187 }
3188
3189 .sb-control-colorpicker-ctn .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
3190 /*
3191 left: auto;
3192 right: 6px;
3193 top: 6px;
3194 width: 26px;
3195 height: 26px;
3196 background: #F9F9FA;
3197 border: 0px;
3198 */
3199
3200 left: auto;
3201 right: 1px;
3202 top: 1px;
3203 width: 35px;
3204 height: 35px;
3205 background: #F9F9FA;
3206 border: 0px;
3207 }
3208 .minicolors-swatch-color{
3209 box-shadow: none;
3210 }
3211 .sb-control-colorpicker-ctn .minicolors-input,.sb-control-colorpicker-ctn .minicolors-input:focus{
3212 height: 37px;
3213 width: 100%!important;
3214 background: #fff;
3215 border: 1px solid #D0D1D7!important;
3216 border-radius: unset!important;
3217 outline: unset!important;
3218 box-shadow: unset!important;
3219 padding: 0 10px!important;
3220 line-height: 1em;
3221 margin: 0px;
3222 }
3223 .sb-control-colorpicker-ctn .minicolors-input:focus{
3224 border: 1px solid #0096CC!important;
3225 }
3226
3227 [data-type="colorpicker"] .minicolors-input{
3228 font-size: 13px;
3229 }
3230 [data-type="colorpicker"] .minicolors-input{
3231 font-style: normal;
3232 font-weight: normal;
3233 font-size: 12px;
3234 line-height: 150%;
3235 color: #434960;
3236 }
3237
3238 .sb-control-colorpicker-btn{
3239 height: 38px;
3240 display: flex;
3241 justify-content: center;
3242 align-items: center;
3243 border: 1px solid #DCDDE1;
3244 border-left: 0px;
3245 padding: 0 10px;
3246 background: #F3F4F5;
3247 font-style: normal;
3248 font-weight: 600;
3249 font-size: 12px;
3250 line-height: 160%;
3251 color: #141B38;
3252 cursor: pointer;
3253 box-sizing: border-box;
3254 }
3255 .sb-control-colorpicker-ctn[data-picker-style="reset"] .minicolors-input,
3256 .sb-control-coloroverride-ctn{
3257 background: #F3F4F5!important;
3258 border: 1px solid #DCDDE1!important;
3259 }
3260 .sb-control-colorpicker-ctn[data-picker-style="reset"] .minicolors-theme-default.minicolors-position-right .minicolors-swatch,
3261 .sb-control-coloroverride-ctn .sb-control-coloroverride-swatch{
3262 top: 8px;
3263 width: 22px;
3264 height: 22px;
3265 }
3266 .sb-control-coloroverride-ctn .sb-control-coloroverride-swatch{
3267 position: absolute;
3268 right: 10px;
3269 }
3270 .sb-control-coloroverride-ctn .sb-control-colorpicker-btn{
3271 margin-left: auto;
3272 border: 0px!important;
3273 border-left: 1px solid #DCDDE1!important;
3274 }
3275 .sb-control-coloroverride-ctn .sb-control-coloroverride-content{
3276 width: 100%;
3277 display: flex;
3278 align-items: center;
3279 position: relative;
3280 }
3281 .sb-control-coloroverride-ctn .sb-control-coloroverride-txt{
3282 padding-left: 9px;
3283 box-sizing: border-box;
3284 }
3285
3286 /*
3287 Customizer Preview
3288 */
3289 .sb-customizer-preview{
3290 min-height: 100px;
3291 width: calc(100% - 375px);
3292 float: right;
3293 box-sizing: border-box;
3294 padding: 0 20px;
3295 display: flex;
3296 justify-content: center;
3297 margin-top: 64px;
3298 position: relative;
3299 flex-wrap: wrap;
3300 }
3301 .sb-customizer-preview #cff-admin-notices{
3302 margin-top: 20px;
3303 width: 100%;
3304 }
3305 .sb-customizer-preview .license-details-modal .cff-modal-content {
3306 max-height: none;
3307 height: auto;
3308 }
3309 .sb-customizer-preview .cff-sb-modal-body .sb-why-renew-list:nth-child(3) {
3310 margin-bottom: 0;
3311 }
3312 .sb-customizer-preview .cff-sb-modal-body .sb-why-renew-list:last-child {
3313 margin-bottom: 0;
3314 }
3315 .sb-customizer-preview[data-preview-device="desktop"] .sb-preview-ctn{
3316 width: 100%;
3317 max-width: 1200px;
3318 }
3319 .sb-customizer-preview[data-preview-device="tablet"] .sb-preview-ctn{
3320 max-width: 100%;
3321 width: 800px;
3322 }
3323 .sb-customizer-preview[data-preview-device="mobile"] .sb-preview-ctn{
3324 max-width: 100%;
3325 width: 400px;
3326 }
3327 .cff-preview-ctn {
3328 padding: 10px;
3329 }
3330
3331 .sb-preview-top-chooser{
3332 padding: 18px 0 16px;
3333 display: flex;
3334 color: #434960;
3335 align-items: center;
3336 }
3337 .sb-preview-top-chooser strong{
3338 font-style: normal;
3339 font-weight: bold;
3340 font-size: 12px;
3341 line-height: 160%;
3342 letter-spacing: 0.05em;
3343 text-transform: uppercase;
3344 color: #434960;
3345 }
3346 .sb-preview-chooser{
3347 height: 36px;
3348 background: #E8E8EB;
3349 margin-left: auto;
3350 padding: 0 2px;
3351 border-radius: 1px;
3352 display: flex;
3353 justify-content: center;
3354 align-items: center;
3355 }
3356 .sb-preview-chooser-btn,.sb-preview-chooser-btn:focus{
3357 width: 40px;
3358 height: 32px;
3359 display: flex;
3360 justify-content: center;
3361 align-items: center;
3362 cursor: pointer;
3363 float: left;
3364 border: 0;
3365 background: unset;
3366 outline: none;
3367 }
3368
3369 .sb-preview-chooser-btn svg{
3370 width: 15px;
3371 fill: currentColor;
3372 float: left;
3373 }
3374 .sb-preview-chooser-btn.sb-mobilee svg{
3375 width: 9px;
3376 fill: currentColor;
3377 float: left;
3378 }
3379 .sb-preview-chooser-btn[data-active="true"],
3380 .sb-preview-chooser-btn:hover{
3381 background: #fff!important;
3382 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
3383 border-radius: 1px;
3384 }
3385
3386 .sb-control-checkboxsection-header{
3387 width: 100%;
3388 margin-top: 25px;
3389 display: flex;
3390 align-items: center;
3391 text-transform: uppercase;
3392 font-size: 13px;
3393 padding-bottom: 15px;
3394 position: relative;
3395 }
3396 .sb-control-checkboxsection-header:before{
3397 content: '';
3398 position: absolute;
3399 left: -20px;
3400 width: calc(100% + 40px);
3401 height: 1px;
3402 background: #DCDDE1;
3403 bottom: 0px;
3404 }
3405 .sb-control-checkboxsection-name{
3406 display: flex;
3407 align-items: center;
3408 }
3409 .sb-control-checkboxsection-header svg{
3410 width: 20px;
3411 margin-right: 7px;
3412 fill: #434960;
3413 float: left;
3414 }
3415 .sb-control-checkboxsection-header > strong{
3416 margin-left: auto;
3417 }
3418 [data-type="checkboxsection"] .sb-control-checkbox-ctn{
3419 align-items: center;
3420 height: 50px;
3421 }
3422 [data-type="checkboxsection"] {
3423 padding: 0 20px !important;
3424 }
3425 [data-type="checkboxsection"] .sb-control-elem-label{
3426 display: none;
3427 }
3428 [data-type="checkboxsection"] strong{
3429 color: #434960
3430 }
3431 [data-type="checkboxsection"] [data-active="true"] strong{
3432 color: #141B38;
3433 }
3434 .sb-control-checkboxsection-btn{
3435 width: 21px;
3436 height: 21px;
3437 position: relative;
3438 cursor: pointer;
3439 }
3440 .sb-control-checkboxsection-btn:before{
3441 content: '';
3442 position: absolute;
3443 width: 7px;
3444 height: 7px;
3445 left: 5px;
3446 top: 7px;
3447 border-right: 2px solid #8C8F9A;
3448 border-bottom: 2px solid #8C8F9A;
3449 -webkit-transform: rotate(-45deg);
3450 transform: rotate(-45deg);
3451 }
3452
3453 /*Disabled Controls*/
3454 .sb-control-elem-ctn[data-disabled="true"] input[type="text"],
3455 .sb-control-elem-ctn[data-disabled="true"] input[type="number"],
3456 .sb-control-elem-ctn[data-disabled="true"] input[type="date"],
3457 .sb-control-elem-ctn[data-disabled="true"] textarea{
3458 background: #f0f0f0!important;
3459 border-color: #D0D1D7!important;
3460 }
3461
3462 .sb-control-elem-ctn[data-disabled="true"] .sb-control-colorpicker-swatch{
3463 background: #D0D1D7!important;
3464 }
3465 .sb-control-elem-ctn[data-disabled="true"] .sb-control-checkbox{
3466 background: #D0D1D7!important;
3467 border-color: #c1c1c1!important;
3468 }
3469 .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm{
3470 background: #e5e6e7!important;
3471 }
3472 .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm{
3473 border-color: #c1c1c1!important;
3474 }
3475 .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm[data-active="true"]{
3476 border-top: 0px;
3477 }
3478 .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm .sb-control-toggle-deco{
3479 border-color: #bbb!important;
3480 }
3481 .sb-control-elem-ctn[data-disabled="true"] .sb-control-toggle-elm[data-active="true"] .sb-control-toggle-deco{
3482 border-color: #8C8F9A!important;
3483
3484 }
3485
3486 /*Source Controls*/
3487 .sb-control-sources-ctn .cff-fb-srcs-item{
3488 box-sizing: border-box;
3489 position: relative;
3490 cursor: auto;
3491 display: block;
3492 height: auto;
3493 border: 1px solid #E7E7E9;
3494 min-height: 60px;
3495 overflow: auto;
3496 margin-top: 0px;
3497 }
3498 .cff-fb-srcs-item-ins{
3499 cursor: pointer;
3500 display: flex;
3501 height: 62px;
3502 padding: 0 10px;
3503 position: relative;
3504 }
3505 .sb-control-src-icon{
3506 width: 20px;
3507 height: 20px;
3508 position: absolute;
3509 right: 10px;
3510 top: 10px;
3511 z-index: 2;
3512 cursor: pointer;
3513 display: flex;
3514 justify-content: center;
3515 align-items: center;
3516 }
3517 .sb-control-src-icon svg{
3518 width: 13px;
3519 float: left;
3520 }
3521 [data-expanded="true"] .sb-control-src-expand svg,.cff-fb-srcs-info {
3522 display: none
3523 }
3524 .sb-control-src-expand-chevron{
3525 width: 7px;
3526 height: 7px;
3527 border-left: 2px solid currentColor;
3528 border-top: 2px solid currentColor;
3529 -webkit-transform: rotate(45deg);
3530 transform: rotate(45deg);
3531 display: none;
3532 }
3533 [data-expanded="true"] .sb-control-src-expand-chevron,[data-expanded="true"] .cff-fb-srcs-info {
3534 display: block;
3535 }
3536 .sb-control-src-remove svg{
3537 width: 11px;
3538 fill: var(--error-red);
3539 }
3540 .sb-control-sources-ctn[data-multifeed="true"] .sb-control-src-expand {
3541 right: 30px;
3542 }
3543 .sb-control-elem-output .sb-control-src-expand:hover {
3544 background: #F3F4F5;
3545 border-radius: 3px;
3546 }
3547 .sb-control-elem-output .sb-control-src-expand:hover path{
3548 fill: #111;
3549 }
3550
3551 .sb-control-sources-ctn .cff-fb-srcs-item .cff-fb-srcs-item-name{
3552 font-size: 17px;
3553 line-height: 1em;
3554 margin-bottom: 3px;
3555 }
3556
3557 .cff-fb-srcs-info-item{
3558 display: flex;
3559 border-top: 1px solid #E7E7E9;
3560 box-sizing: border-box;
3561 width: 100%;
3562 float: left;
3563 padding: 8px 10px;
3564 }
3565 .cff-fb-srcs-info-item:first-of-type{
3566 align-items: center;
3567 }
3568 .cff-fb-srcs-info-item strong{
3569 font-size: 14px;
3570 width: 50px;
3571 }
3572 .cff-fb-srcs-info-item span{
3573 font-size: 13px;
3574 line-height: 1.1em;
3575 color: #434960;
3576 font-weight: 400;
3577 display: inline-block;
3578 word-break: break-all;
3579 width: calc(100% - 80px);
3580 padding: 0 15px;
3581 box-sizing: border-box;
3582 }
3583 .cff-fb-srcs-info-icon{
3584 width: 26px;
3585 height: 26px;
3586 display: flex;
3587 justify-content: center;
3588 align-items: center;
3589 cursor: pointer;
3590 margin-left: auto;
3591 border: 1px solid #D0D1D7;
3592 border-radius: 2px;
3593 }
3594 .cff-fb-srcs-info-icon svg{
3595 width: 15px;
3596 float: left;
3597 }
3598 .sb-control-sources-ctn .sb-control-action-button{
3599 margin-top: 8px;
3600 margin-bottom: 16px;
3601 }
3602 .sb-control-sources-promo-ctn{
3603 padding: 16px 0;
3604 }
3605 .sb-control-sources-promo-ctn:before{
3606 content: '';
3607 position: absolute;
3608 height: 1px;
3609 width: calc(100% + 40px);
3610 left: -20px;
3611 top: 0px;
3612 background: #E7E7E9;
3613 }
3614 .sb-control-sources-promo-top{
3615 width: 100%;
3616 box-sizing: border-box;
3617 padding: 30px 20px;
3618 border: 1px solid #E8E8EB;
3619 float: left;
3620 background: #F9F9FA;
3621 }
3622 .sb-control-sources-promo-top > div{
3623 width: 100%;
3624 float: left;
3625 text-align: center;
3626 display: flex;
3627 justify-content: center;
3628 align-items: center;
3629 box-sizing: border-box;
3630 line-height: 1.6em;
3631 }
3632 .sb-btn-chevron{
3633 display: inline-block;
3634 width: 7px;
3635 height: 7px;
3636 border-right: 2px solid currentColor;
3637 border-top: 2px solid currentColor;
3638 -webkit-transform: rotate(45deg);
3639 transform: rotate(45deg);
3640 }
3641 .sb-control-sources-promo-text{
3642 font-size: 15px;
3643 font-weight: 600;
3644 }
3645 .sb-control-sources-promo-btn{
3646 display: flex;
3647 align-items: center;
3648 justify-content: center;
3649 padding: 16px 20px;
3650 color: #fff !important;
3651 background: #0068A0;
3652 font-size: 15px;
3653 }
3654 .sb-control-sources-promo-btn div{
3655 margin-left: 10px;
3656 }
3657 .sb-control-sources-promo-icon{
3658 margin-bottom: 20px;
3659 }
3660
3661 /*Loading Bar*/
3662 .sb-loadingbar-ctn{
3663 position: absolute;
3664 height: 5px;
3665 width: 100%;
3666 left: 0px;
3667 bottom: 0px;
3668 background: rgba(227, 79, 14, 0.25);
3669 z-index: 999999999999999;
3670 }
3671 .sb-loadingbar-ctn:before, .sb-loadingbar-ctn:after{
3672 content: '';
3673 position: absolute;
3674 height: 5px;
3675 background: #FE544F;
3676 z-index: 9;
3677 top: 0;
3678 }
3679
3680 .sb-loadingbar-ctn:before{
3681 -webkit-animation: cff-loading-animation 4s infinite;
3682 animation: cff-loading-animation 4s infinite;
3683 }
3684 .sb-loadingbar-ctn:after{
3685 -webkit-animation: cff-loading-animation 4s 2s infinite;
3686 animation: cff-loading-animation 4s 2s infinite;
3687 }
3688
3689 @-webkit-keyframes cff-loading-animation {
3690 from { left: -5%; width: 0%; }
3691 to { left: 130%; width: 50%;}
3692 }
3693 @keyframes cff-loading-animation {
3694 from { left: -5%; width: 0%; }
3695 to { left: 130%; width: 50%;}
3696 }
3697
3698 /*Notification Element*/
3699 .sb-notification-ctn{
3700 position: fixed;
3701 bottom: -100px;
3702 left: 200px;
3703 z-index: 99999;
3704 background: #fff;
3705 display: flex;
3706 justify-content: center;
3707 align-items: center;
3708 border-left: 3px solid #fff;
3709 line-height: 1em;
3710 padding: 10px 20px;
3711 padding-left: 0px;
3712 border-radius: 4px;
3713 box-shadow: 0px 26.7377px 77.2886px rgba(0, 0, 0, 0.107828), 0px 14.2952px 41.3222px rgba(0, 0, 0, 0.0894161), 0px 8.01379px 23.1649px rgba(0, 0, 0, 0.075), 0px 4.25607px 12.3027px rgba(0, 0, 0, 0.0605839), 0px 1.77104px 5.11942px rgba(0, 0, 0, 0.0421718);
3714
3715 }
3716 .sb-notification-ctn[data-active="hidden"]{
3717 -webkit-animation: cff-notification-hide .5s forwards linear;
3718 animation: cff-notification-hide .5s forwards linear;
3719 }
3720 .sb-notification-ctn[data-active="shown"]{
3721 -webkit-animation: cff-notification-show .5s forwards linear;
3722 animation: cff-notification-show .5s forwards linear;
3723 }
3724 @-webkit-keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
3725 @keyframes cff-notification-show { 0%{bottom: -100px;} 50%{bottom: 70px;} 70%{bottom: 60px;} 85%{bottom: 65px;} 100%{bottom: 50px;}}
3726
3727 @-webkit-keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
3728 @keyframes cff-notification-hide {0%{bottom: 50px;}55%{bottom: 65px;}70%{bottom: 60px;}85%{bottom: 70px;}100%{bottom: -100px;}}
3729
3730 .sb-notification-ctn[data-type="success"]{
3731 border-color: #59AB46;
3732 }
3733 .sb-notification-ctn[data-type="error"]{
3734 border-color: #D72C2C;
3735 }
3736 .sb-notification-ctn[data-type="message"]{
3737 border-color: #141B38;
3738 }
3739 .sb-notification-icon{
3740 width: 25px;
3741 height: 25px;
3742 display: flex;
3743 justify-content: center;
3744 align-items: center;
3745 margin-left: 10px;
3746 margin-right: 15px;
3747 }
3748 .sb-notification-icon svg{
3749 width: 22px;
3750 height: 22px;
3751 float: left;
3752 fill: currentColor;
3753 }
3754
3755 .sb-notification-ctn[data-type="success"] .sb-notification-icon{
3756 color: #59AB46;
3757 }
3758 .sb-notification-ctn[data-type="error"] .sb-notification-icon{
3759 color: #D72C2C;
3760 }
3761 .sb-notification-ctn[data-type="message"] .sb-notification-icon{
3762 color: #141B38;
3763 }
3764
3765 .sb-notification-ctn span{
3766 font-size: 14px;
3767 color: #141B38;
3768 font-weight:500;
3769 }
3770
3771 /* Onboarding */
3772 .sb-onboarding-tooltip {
3773 display: none;
3774 position: absolute;
3775 min-height: auto;
3776 width: 432px;
3777 max-width: 100%;
3778 padding: 0;
3779 border-radius: 2px;
3780 }
3781 #sb-onboarding-tooltip-multiple-2,
3782 #sb-onboarding-tooltip-multiple-3{
3783 width: 528px;
3784 }
3785 #sb-onboarding-tooltip-single-2 {
3786 width: 402px;
3787 z-index: 99999999999999;
3788 }
3789 .sb-onboarding-active .sb-onboarding-highlight .cff-fb-btn.cff-fb-btn-new,
3790 .sb-onboarding-active .sb-positioning-wrap.sb-onboarding-highlight,
3791 .sb-onboarding-active .cff-fd-lst-bigctn .cff-table-wrap.sb-onboarding-highlight,
3792 .sb-onboarding-active .cff-fb-lgc-ctn.sb-onboarding-highlight,
3793 .sb-onboarding-active .cff-fb-lgc-ctn .cff-legacy-table-wrap.sb-onboarding-highlight{
3794 position: relative;
3795 z-index: 100000;
3796 }
3797 .sb-onboarding-active .cff-fd-legacy-feed-toggle {
3798 display: none;
3799 }
3800 .cff-legacy-table-wrap.sb-onboarding-highlight {
3801 clear: both;
3802 }
3803 .sb-onboarding-tooltip-1 {
3804 top: 50px;
3805 left: 8px;
3806 }
3807 #sb-onboarding-tooltip-single-2 {
3808 bottom: -179px;
3809 top: auto;
3810 left: 68%;
3811 margin-left: -201px;
3812 }
3813 #sb-onboarding-tooltip-multiple-2,
3814 #sb-onboarding-tooltip-multiple-3{
3815 top: -200px;
3816 left: 20%;
3817 }
3818 #sb-onboarding-tooltip-multiple-3 {
3819 top: -210px;
3820 }
3821 .sb-onboarding-tooltip .cff-fb-wrapper {
3822 display: flex;
3823 justify-content: flex-end;
3824 }
3825 .sb-positioning-wrap {
3826 width: 432px;
3827 }
3828 .sb-onboarding-tooltip .cff-fb-popup-cls {
3829 position:absolute;
3830 width: 12px;
3831 height: 12px;
3832 top: 12px;
3833 right: 12px;
3834 }
3835 .sb-onboarding-tooltip .cff-fb-popup-cls svg {
3836 width: 12px;
3837 height: 12px;
3838 }
3839 .sb-onboarding-tooltip h3 {
3840 font-size: 16px;
3841 color: #141B38;
3842 line-height: 160%;
3843 font-weight: 600;
3844 margin: 0;
3845 }
3846 .sb-onboarding-step {
3847 font-style: normal;
3848 font-weight: normal;
3849 font-size: 12px;
3850 line-height: 160%;
3851 color: #434960;
3852 margin: 2px 0 20px;
3853 display: block;
3854 }
3855 .cff-onboarding-next,
3856 .cff-onboarding-previous{
3857 color: #353A41;
3858 background: #F3F4F5;
3859 border: 1px solid #DCDDE1;
3860 margin-left: 10px;
3861 }
3862 .sb-onboarding-tooltip .cff-fb-hd-btn {
3863 margin-right: 0;
3864 }
3865 .sb-onboarding-tooltip .cff-fb-hd-btn i {
3866 margin: 0;
3867 }
3868 .cff-onboarding-finish{
3869 margin-left: 10px;
3870 padding: 0 32px;
3871 }
3872 .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"] {
3873 background-color: #e8e8eb;
3874 color: #8c8f99;
3875 }
3876 .sb-onboarding-tooltip .cff-fb-hd-btn[data-active="false"]:hover {
3877 cursor: default;
3878 }
3879 .sb-step-counter-wrap span {
3880 font-style: normal;
3881 font-weight: bold;
3882 font-size: 12px;
3883 line-height: 160%;
3884 letter-spacing: 0.05em;
3885 text-transform: uppercase;
3886 color: #141B38;
3887 }
3888 .sb-onboarding-tooltip .sb-pointer {
3889 position: absolute;
3890 left: 50px;
3891 top: -14px;
3892 }
3893 .sb-onboarding-tooltip .sb-pointer.sb-bottom-pointer {
3894 top: auto;;
3895 bottom: -14px;
3896 }
3897 #sb-onboarding-tooltip-single-2 .sb-pointer {
3898 left: 193px;
3899 }
3900 #sb-onboarding-tooltip-multiple-2:before,
3901 #sb-onboarding-tooltip-multiple-3:before{
3902 bottom: -8px;
3903 }
3904 .sb-onboarding-top-row {
3905 padding: 20px 44px 0 24px;
3906 }
3907 .sb-onboarding-bottom-row {
3908 display: flex;
3909 flex-direction: row;
3910 justify-content: space-between;
3911 align-items: center;
3912 padding: 8px 16px 12px 24px;
3913 }
3914
3915
3916 /*Vue Color Picker*/
3917 .sb-control-colorpicker-ctn .vc-sketch{
3918 box-shadow: none!important;
3919 }
3920 .sb-control-colorpicker-popup{
3921 box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
3922 position: absolute;
3923 z-index: 99;
3924 top: 100%;
3925 background: #fff;
3926 right: 0px;
3927 }
3928 .sb-control-colorpicker-popup .sb-colorpicker-reset-btn{
3929 width: calc(100% - 20px);
3930 margin-left: 10px;
3931 margin-bottom: 15px;
3932 }
3933 .sb-control-colorpicker-swatch{
3934 width: 38px;
3935 height: 38px;
3936 position: absolute;
3937 right: 1px;
3938 top: 1px;
3939 background: #f7f7f7;
3940 }
3941 .sb-control-colorpicker-ctn .sb-control-input{
3942 width: 100%;
3943 }
3944
3945 @media (min-width: 768px) and (max-width: 1023px) {
3946 .cff-csz-header-insider {
3947 width: 100%;
3948 }
3949 .cff-csz-header-insider .sb-button-standard {
3950 padding: 10px 14px 10px 30px;
3951 }
3952 }
3953 @media (min-width: 1024px) and (max-width: 1200px) {
3954 .cff-fb-wlcm-inf-3 {
3955 padding-left: 120px;
3956 }
3957 }
3958 @media (max-width: 767px) {
3959 .cff-fd-lst-thtf th:nth-child(3),
3960 .cff-fd-lst-thtf th:nth-child(4),
3961 .cff-fd-lst-tbody tr td:nth-child(3),
3962 .cff-fd-lst-tbody tr td:nth-child(4),
3963 .cff-fd-lst-thtf tr td:nth-child(3),
3964 .cff-fd-lst-thtf tr td:nth-child(4) {
3965 display: none;
3966 }
3967 .cff-fd-lst-thtf th:last-child,
3968 .cff-fd-lst-thtf tr td:last-child {
3969 padding-right: 15px;
3970 text-align: right;
3971 }
3972 .cff-fd-lst-tbody tr td.cff-fd-lst-actions .sb-flex-center{
3973 justify-content: flex-end;
3974 padding-right: 8px;
3975 }
3976 .cff-fb-full-wrapper {
3977 padding: 70px 20px 0 20px;
3978 }
3979 .cff-fb-header {
3980 padding: 0px 20px;
3981 }
3982 .cff-bld-ft-content {
3983 flex-wrap: wrap;
3984 }
3985 #sb-footer-banner .cff-bld-ft-img {
3986 width: 100%;
3987 height: 140px;
3988 }
3989 #sb-footer-banner .cff-bld-ft-img img {
3990 height: 100%;
3991 width: auto;
3992 }
3993 #sb-footer-banner .cff-bld-ft-txt {
3994 justify-content: center;
3995 align-items: center;
3996 width: 100%;
3997 margin-right: 3%;
3998 padding: 20px;
3999 }
4000 .cff-bld-ft-action {
4001 width: 100%;
4002 padding: 0 20px 20px;
4003 }
4004 .cff-bld-footer > div {
4005 margin-bottom: 60px;
4006 }
4007
4008 /* single feed page */
4009 .cff-csz-header-insider {
4010 flex-wrap: wrap;
4011 height: auto;
4012 width: 100%;
4013 }
4014 .cff-fb-header.cff-csz-header {
4015 height: 110px;
4016 }
4017 .cff-csz-header.cff-fb-header {
4018 padding-bottom: 6px;
4019 }
4020 .cff-csz-header .cff-csz-hd-actions {
4021 margin-top: 10px;
4022 }
4023 .sb-customizer-preview {
4024 display: none;
4025 }
4026 .sb-customizer-ctn .sb-customizer-sidebar {
4027 position: initial;
4028 margin-top: 110px;
4029 width: 100%;
4030 }
4031 .sb-notification-ctn {
4032 left: 20px;
4033 }
4034 .cff-fb-header .sb-button-standard{
4035 padding: 10px 10px 10px 31px;
4036 }
4037 .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside {
4038 top: 35px;
4039 }
4040 .cff-fb-embed-btns-ctn {
4041 grid-template-columns: 100%;
4042 }
4043 .cff-fb-embed-btns-ctn .cff-fb-embed-btn {
4044 margin-bottom: 10px;
4045 }
4046 .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside .cff-fb-embed-step-1-top {
4047 margin-bottom: 10px;
4048 }
4049 .cff-fb-embed-ctn.sb-fs-boss.cff-fb-center-boss .cff-fb-popup-inside .cff-fb-embed-input-ctn {
4050 flex-wrap: wrap;
4051 }
4052 .cff-fb-embed-input-ctn input, .cff-fb-embed-input-ctn input[type="text"] {
4053 width: 100%;
4054 border-right: 1px solid #D0D1D7!important;
4055 }
4056 .cff-fb-embed-input-ctn .cff-fb-hd-btn {
4057 width: 32%;
4058 max-width: 120px;
4059 margin-top: 10px !important;
4060 padding: 8px;
4061 }
4062 .sb-fs-boss.cff-fb-center-boss {
4063 z-index: 100001 !important;
4064 }
4065 #sb-footer-banner .cff-bld-ft-txt {
4066 flex-wrap: wrap;
4067 }
4068 #cff-builder-app #sb-footer-banner h3,
4069 #cff-builder-app #sb-footer-banner .sb-small-p {
4070 width: 100%;
4071 }
4072 #cff-builder-app #sb-footer-banner h3 {
4073 margin-bottom: 10px;
4074 }
4075 .cff-fb-srcslist-ctn {
4076 grid-template-columns: 100%
4077 }
4078 .cff-fb-mr-fd-img {
4079 width: 100%;
4080 margin-right: 0;
4081 }
4082 .cff-fb-mr-fd-img svg {
4083 max-width: 100%;
4084 }
4085 .cff-fd-lst-tbody tr td:nth-child(2) {
4086 width: 50%;
4087 }
4088
4089 .cff-fb-wlcm-inf-1,
4090 .cff-fb-wlcm-inf-2,
4091 .cff-fb-wlcm-inf-3 {
4092 padding-left: 0;
4093 }
4094
4095 .cff-fb-wlcm-inf-3 .cff-fb-inf-img,
4096 .cff-fb-wlcm-inf-2 .cff-fb-inf-img,
4097 .cff-fb-wlcm-inf-1 .cff-fb-inf-svg {
4098 display: none;
4099 }
4100 .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt {
4101 justify-content: flex-start;
4102 }
4103 .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt {
4104 width: calc(100% - 53px);
4105 }
4106 .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt,
4107 .cff-fb-wlcm-inf-3 .cff-fb-inf-cnt {
4108 width: 100%;
4109 }
4110
4111 .cff-fb-wlcm-inf-1 .cff-fb-inf-cnt .cff-fb-inf-txt{
4112 width: 80%;
4113 }
4114
4115 .cff-fb-wlcm-inf-2 .cff-fb-inf-cnt {
4116 margin-bottom: 24px;
4117 }
4118
4119 }
4120
4121 @media (min-width: 768px) and (max-width: 1023px) {
4122 .cff-fb-wlcm-inf-3 {
4123 padding-left: 7px;
4124 }
4125 .cff-fb-wlcm-inf-2 {
4126 padding-left: 52px;
4127 }
4128 .cff-fb-wlcm-inf-1 {
4129 padding-left: 85px;
4130 }
4131 .cff-fb-wlcm-inf-1 .cff-fb-inf-svg {
4132 display: none;
4133 }
4134 }
4135
4136 /*
4137 FREE
4138 */
4139
4140
4141 .cff-fb-types-list-free .cff-fb-type-el .cff-fb-type-el-info > *{
4142 padding: 0 20px;
4143 }
4144
4145 .cff-fb-types-list-pro{
4146 display: grid;
4147 grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%;
4148 grid-column-gap: 1%;
4149 margin-top: 10px;
4150 }
4151 .cff-fb-type-el-pro{
4152 display: flex;
4153 flex-direction: row;
4154 align-items: center;
4155 padding: 12px 20px 12px 12px;
4156 background: #F9F9FA;
4157 border: 1px solid #D0D1D7;
4158 box-sizing: border-box;
4159 border-radius: 2px;
4160 color: #141B38;
4161 font-weight: 600;
4162 font-size: 14px;
4163 margin-bottom: 10px;
4164 cursor: pointer;
4165 }
4166 .cff-fb-type-el-pro:hover{
4167 background: #E2F5FF;
4168 border: 1px solid #E2F5FF;
4169 }
4170 .cff-fb-type-el-pro-img svg{
4171 float: left;
4172 }
4173 .cff-fb-type-el-pro-img{
4174 margin-right: 20px;
4175 }
4176
4177 /*Lite Top Banner Dismiss*/
4178 .cff-builder-app-lite-dismiss .cff-header-notice{
4179 position: fixed!important;
4180 top: 32px;
4181 width: 100%;
4182 z-index: 2;
4183 left: 0;
4184 }
4185 .cff-builder-app-lite-dismiss .cff-fb-header{
4186 top: 64px;
4187 }
4188 .cff-builder-app-lite-dismiss .sb-customizer-sidebar{
4189 top: 128px;
4190 }
4191 .cff-builder-app-lite-dismiss .sb-customizer-preview{
4192 margin-top: 100px;
4193 }
4194
4195 @media (max-width: 1420px) {
4196 .cff-fb-types-list-free .cff-fb-type-el .cff-fb-type-el-info > * {
4197 padding: 0px;
4198 }
4199 .cff-fb-type-el-img svg {
4200 height: auto;
4201 }
4202 }
4203
4204 /* CFF Dummy Lightbox Modal */
4205 .cff-dummy-lightbox-container {
4206 position: absolute;
4207 top: 0;
4208 left: 0px;
4209 width: 100%;
4210 height: 100%;
4211 display: flex;
4212 align-items: flex-start;
4213 justify-content: center;
4214 background-color: #00000087;
4215 padding-top: 130px;
4216 }
4217 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal {
4218 position: relative;
4219 width: 680px;
4220 }
4221 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal-content {
4222 display: flex;
4223 }
4224 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-left {
4225 width: 400px;
4226 }
4227 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-right {
4228 width: 280px;
4229 background-color: #fff;
4230 padding: 24px 20px;
4231 box-sizing: border-box;
4232 }
4233 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-left img {
4234 width: 100%;
4235 }
4236 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-header-data {
4237 display: flex;
4238 gap: 12px;
4239 }
4240 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-header-data img {
4241 width: 32px;
4242 height: 32px;
4243 border-radius: 100px;
4244 border: 1px solid #DCDDE1;
4245 }
4246 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .sb-dlm-header-title h6 {
4247 font-size: 14px;
4248 letter-spacing: 0.28px;
4249 margin: 0px;
4250 }
4251 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .sb-dlm-header-title span {
4252 color: #434960;
4253 font-size: 11px;
4254 margin-top: -2px;
4255 display: block;
4256 }
4257 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-content-text p {
4258 color: #141B38;
4259 font-size: 14px;
4260 }
4261 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-reactions-bar {}
4262 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-reactions-bar img {
4263 width: 100%;
4264 }
4265 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-arrow-left {
4266 position: absolute;
4267 left: -51px;
4268 top: calc(50% - 21px);
4269 cursor: pointer;
4270 }
4271 .cff-dummy-lightbox-container .cff-dummy-lightbox-modal .cff-dlm-arrow-right {
4272 position: absolute;
4273 right: -51px;
4274 top: calc(50% - 21px);
4275 cursor: pointer;
4276 }
4277
4278 /*
4279 Onboarding Wizard
4280 */
4281 .sb-onboarding-wizard-ctn {
4282 width: calc(100% + 160px);
4283 position: absolute;
4284 background: #E6E6EB;
4285 padding: 0 20px;
4286 box-sizing: border-box;
4287 border-top: 2px solid #434960;
4288 min-height: 100vh;
4289 left: -160px;
4290 top: -34px;
4291 z-index: 9999999;
4292 padding-top: 100px;
4293 padding-bottom: 100px;
4294 margin-top: 0px;
4295 }
4296
4297 .sb-onboarding-wizard-ctn[data-step="0"] {
4298 z-index: 1;
4299 }
4300
4301 .facebook-feed_page_cff-setup .cff-fb-source-ctn,
4302 .facebook-feed_page_cff-setup .sb-dialog-ctn {
4303 z-index: 999999999999999999999;
4304 }
4305
4306 .folded .sb-onboarding-wizard-ctn {
4307 width: calc(100% + 36px);
4308 left: -36px;
4309 }
4310
4311 .sb-onboarding-wizard-ctn[data-step="0"] {
4312 position: relative;
4313 width: 100% !important;
4314 left: 0 !important;
4315 top: 0 !important;
4316 padding-top: 0px !important;
4317 border-color: transparent !important;
4318 margin-top: 63px;
4319 }
4320
4321 .sb-onboarding-wizard-wrapper {
4322 width: 850px;
4323 max-width: 100%;
4324 margin: auto;
4325 margin-top: 50px;
4326 }
4327
4328 .sb-onboarding-wizard-wrapper[data-step="0"] {
4329 width: 1200px;
4330 margin-top: 100px;
4331 }
4332
4333
4334 .sb-onboarding-wizard-wrapper>div {
4335 width: 100%;
4336 box-sizing: border-box;
4337 float: left;
4338 position: relative;
4339 }
4340
4341 .sb-onboarding-wizard-top {
4342 display: flex;
4343 justify-content: center;
4344 align-items: center;
4345 }
4346
4347 .sb-onboarding-wizard-logo-ctn {
4348 display: flex;
4349 justify-content: center;
4350 align-items: center;
4351 width: 68px;
4352 height: 68px;
4353 position: relative;
4354 margin-right: 35px;
4355 margin-left: -35px;
4356 }
4357
4358 .sb-onboarding-wizard-logo1-ctn {
4359 display: flex;
4360 justify-content: center;
4361 align-items: center;
4362 width: 46px;
4363 height: 68px;
4364 position: relative;
4365 margin-right: 15px;
4366 margin-left: -15px;
4367 }
4368
4369 .sb-onboarding-wizard-logo-balloon1 {
4370 width: 100%;
4371 float: left;
4372 }
4373
4374 .sb-onboarding-wizard-logo-ctn:after {
4375 content: '';
4376 position: absolute;
4377 width: 100%;
4378 height: 100%;
4379 background: #fff;
4380 border-radius: 10px;
4381 box-shadow: 0px 1.4945039749145508px 2.0379600524902344px 0px #00000012,
4382 0px 4.1321120262146px 5.634698390960693px 0px #0000000C,
4383 0px 9.94853401184082px 13.566183090209961px 0px #00000009,
4384 0px 33px 45px 0px #00000006;
4385 -webkit-transform: rotate(-10deg);
4386 transform: rotate(-10deg);
4387 }
4388
4389 .sb-onboarding-wizard-logo-ctn img {
4390 z-index: 2;
4391 }
4392
4393 .sb-onboarding-wizard-logo-balloon {
4394 position: absolute;
4395 right: -15px;
4396 bottom: -13px;
4397 }
4398
4399 .sb-onboarding-wizard-plugin-name h3 {
4400 font-weight: 600 !important;
4401 color: #141B38;
4402 font-size: 32px !important;
4403 line-height: 1.1em !important;
4404 }
4405
4406 .sb-onboarding-wizard-plugin-name span {
4407 font-weight: 600;
4408 color: #141B38;
4409 font-size: 20px;
4410 opacity: .6;
4411 margin-top: 6px;
4412 float: left;
4413 }
4414
4415 .sb-onboarding-wizard-steps {
4416 margin-top: 50px;
4417 height: 20px;
4418 display: flex;
4419 align-items: center;
4420 justify-content: space-between;
4421 }
4422
4423 .sb-onboarding-wizard-steps:before {
4424 content: '';
4425 position: absolute;
4426 width: 100%;
4427 height: 2px;
4428 background: #CED0D9;
4429 margin-top: -1px;
4430 }
4431
4432 .sb-onboarding-wizard-step-icon {
4433 width: 20px;
4434 height: 20px;
4435 position: relative;
4436 background: #fff;
4437 border: 4px solid #CED0D9;
4438 border-radius: 25px;
4439 box-sizing: border-box;
4440 }
4441
4442 .sb-onboarding-wizard-step-icon:before {
4443 content: '';
4444 position: absolute;
4445 width: calc(100% + 6px);
4446 height: calc(100% + 6px);
4447 border: 3px solid #E6E6EB;
4448 left: -6px;
4449 top: -6px;
4450 border-radius: inherit;
4451 z-index: 1;
4452 }
4453
4454 .sb-onboarding-wizard-step-icon[data-active="true"] {
4455 border-color: #0096CC;
4456 }
4457
4458 .sb-onboarding-wizard-step-icon[data-active="done"] {
4459 background: #2C324C;
4460 border-color: #2C324C;
4461 }
4462
4463 .sb-onboarding-wizard-step-icon[data-active="done"]:after {
4464 content: '';
4465 position: absolute;
4466 height: 3px;
4467 width: 8px;
4468 color: #fff;
4469 border-left: 2px solid currentColor;
4470 border-bottom: 2px solid currentColor;
4471 -webkit-transform: rotate(-45deg);
4472 transform: rotate(-45deg);
4473 top: 2px;
4474 left: 1px;
4475 }
4476
4477 .sb-onboarding-wizard-step-ctn {
4478 width: 100%;
4479 float: left;
4480 margin-top: 30px;
4481 }
4482
4483 .sb-onboarding-wizard-step-wrapper {
4484 background: #fff;
4485 border-radius: 5px;
4486 padding-bottom: 20px;
4487 box-shadow: 0px 4px 5px 0px #0000000D, 0px 1px 2px 0px #0000000D;
4488 }
4489
4490 /*
4491 .sb-onboarding-wizard-step-welcome {
4492 display: flex;
4493 justify-content: center;
4494 align-items: center;
4495 flex-direction: column;
4496 text-align: center;
4497 padding: 100px 20%;
4498 }
4499 */
4500 .sb-onboarding-wizard-step-welcome {
4501 display: grid;
4502 grid-template-columns: 55% 45%;
4503 padding-bottom: 0px;
4504 }
4505
4506 .sb-onboarding-wizard-welcome-text {
4507 padding: 0px 10%;
4508 display: flex;
4509 flex-direction: column;
4510 justify-content: center;
4511 }
4512
4513 .sb-onboarding-wizard-welcome-banner {
4514 background-color: #0068A0;
4515 border-top-right-radius: 5px;
4516 border-bottom-right-radius: 5px;
4517 }
4518
4519 .sb-onboarding-wizard-welcome-banner img {
4520 width: 100%;
4521 height: auto;
4522 float: left;
4523 border-radius: inherit;
4524 }
4525
4526 .sb-onboarding-wizard-welcome-btns {
4527 display: flex;
4528 column-gap: 15px;
4529 }
4530
4531 .sb-onboarding-wizard-step-welcome h3 {
4532 font-size: 24px !important;
4533 font-weight: 600 !important;
4534 line-height: 29px !important;
4535 margin-top: 0px !important;
4536 margin-bottom: 5px !important;
4537 }
4538
4539 .sb-onboarding-wizard-step-welcome p {
4540 font-size: 14px;
4541 font-weight: 400;
4542 line-height: 22px;
4543 margin-bottom: 45px;
4544 color: #696D80;
4545 }
4546
4547 .sb-onboarding-wizard-step-welcome button {
4548 padding: 16px 25px;
4549 font-weight: 600;
4550 border-radius: 4px;
4551 flex-grow: 1;
4552 position: relative;
4553 }
4554
4555 .sb-onboarding-wizard-step-welcome button.sb-btn-wizard-next:before,
4556 .sb-onboarding-wizard-upgrade-btns a.sb-btn-wizard-next:before {
4557 left: unset;
4558 top: 21px;
4559 right: 40px;
4560 }
4561
4562
4563 .sb-onboarding-wizard-step-top {
4564 display: flex;
4565 flex-direction: column;
4566 padding: 20px 20px;
4567 border-bottom: 1px solid #E6E6EB;
4568 }
4569
4570 .sb-onboarding-wizard-step-top[data-large="true"] {
4571 padding: 30px 20px;
4572 }
4573
4574 .sb-onboarding-wizard-step-top strong {
4575 font-size: 12px;
4576 font-weight: 700;
4577 line-height: 19px;
4578 letter-spacing: 0.05em;
4579 color: #696D80;
4580 }
4581
4582 .sb-onboarding-wizard-step-top h4 {
4583 font-size: 18px !important;
4584 font-weight: 600 !important;
4585 line-height: 25px !important;
4586 color: #000;
4587 }
4588
4589 .sb-onboarding-wizard-step-top[data-large="true"] h4 {
4590 font-size: 20px !important;
4591 }
4592
4593 .sb-onboarding-wizard-step-top span {
4594 font-size: 14px;
4595 font-weight: 400;
4596 line-height: 22px;
4597 color: #696D80;
4598 }
4599
4600 .sb-onboarding-wizard-step-pag-btns {
4601 display: flex;
4602 justify-content: flex-end;
4603 margin-top: 30px;
4604 }
4605
4606 .sb-onboarding-wizard-step-pag-btns button {
4607 padding: 10px 20px 10px 33px !important;
4608 margin-left: 20px !important;
4609 border-radius: 5px;
4610 position: relative;
4611 }
4612
4613 .sb-btn-wizard-next:before,
4614 .sb-btn-wizard-back:before {
4615 content: '';
4616 position: absolute;
4617 width: 5px;
4618 height: 5px;
4619 border-left: 2px solid currentColor;
4620 border-bottom: 2px solid currentColor;
4621 left: 15px;
4622 top: 15px;
4623 -webkit-transform: rotate(45deg);
4624 transform: rotate(45deg);
4625 }
4626
4627 .sb-btn-wizard-next:before {
4628 left: 15px;
4629 top: 15px;
4630 -webkit-transform: rotate(230deg);
4631 transform: rotate(230deg);
4632 }
4633
4634 .sb-onboarding-wizard-ctn button {
4635 -webkit-transition: unset !important;
4636 transition: unset !important;
4637 }
4638
4639 .sb-onboarding-wizard-elements-list>div {
4640 padding: 25px;
4641 }
4642
4643 .sb-onboarding-wizard-elements-list>div:nth-child(odd),
4644 .sb-onboarding-wizard-success-list>div:nth-child(odd) {
4645 background: #F9F9FA;
4646 }
4647
4648 .sb-onboarding-wizard-elem-info {
4649 display: inline-flex;
4650 width: calc(100% - 50px);
4651 float: left;
4652 align-content: flex-start;
4653 }
4654 .sb-onboarding-wizard-elem-info[data-type="select"]{
4655 width: calc(100% - 210px);
4656 }
4657 .sb-onboarding-wizard-elem-select{
4658 float: right;
4659 }
4660 .sb-onboarding-wizard-elem-select select{
4661 max-width: 200px!important;
4662 border: 1px solid #D0D1D7!important;
4663 padding: 3px 35px 3px 15px!important;
4664 height: 40px!important;
4665 font-size: 14px!important;
4666 color: #141B38!important;
4667 -webkit-appearance: none!important;
4668 appearance: none!important;
4669 background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABSSURBVHgBfc4hCkAhDAbgjV3slQcvvHuYDWY1G8zewyIWb6YuCCLqD4Pt5wtD54NBQA2XVKiWcorl/X7s+DkhJYUhPk54IN5plCue0Tb8M8/aNx/uIpRVqbbFAAAAAElFTkSuQmCC) no-repeat right 15px top 55%!important;
4670 box-sizing: border-box;
4671 }
4672
4673 .sb-onboarding-wizard-elem-icon {
4674 width: 28px;
4675 height: 28px;
4676 margin-right: 20px;
4677 display: flex;
4678 justify-content: center;
4679 align-items: center;
4680 }
4681
4682 .sb-onboarding-wizard-elem-icon img {
4683 width: 28px;
4684 height: 28px;
4685 float: left;
4686 }
4687
4688 .sb-onboarding-wizard-elem-text {
4689 display: flex;
4690 flex-direction: column;
4691 }
4692
4693 .sb-onboarding-wizard-elem-text strong {
4694 font-size: 16px;
4695 font-weight: 600;
4696 line-height: 26px;
4697 }
4698
4699 .sb-onboarding-wizard-elem-text span {
4700 font-size: 14px;
4701 font-weight: 400;
4702 line-height: 22px;
4703 color: #434960;
4704 }
4705
4706 .sb-onboarding-wizard-elem-toggle {
4707 width: 50px;
4708 float: right;
4709 }
4710
4711 .sb-onboarding-wizard-elem-toggle>div {
4712 width: 36px;
4713 height: 16px;
4714 padding: 2px;
4715 border-radius: 31px;
4716 background-color: #9295A6;
4717 position: relative;
4718 cursor: pointer;
4719 }
4720
4721
4722 .sb-onboarding-wizard-elem-toggle>div[data-color="green"][data-active="true"] {
4723 background-color: #59AB46;
4724 }
4725
4726 .sb-onboarding-wizard-elem-toggle>div[data-uncheck="true"] {
4727 opacity: .5;
4728 cursor: auto;
4729 }
4730
4731 .sb-onboarding-wizard-elem-toggle>div:before {
4732 content: '';
4733 position: absolute;
4734 width: 16px;
4735 height: 16px;
4736 border-radius: 50px;
4737 top: 2px;
4738 left: 3px;
4739 background-color: #fff;
4740 box-shadow: 0px 1px 2px 0px #00000040;
4741 -webkit-transition: all .2s ease-in-out;
4742 transition: all .2s ease-in-out;
4743 }
4744
4745 .sb-onboarding-wizard-elem-toggle>div[data-active="true"]:before {
4746 left: 22px;
4747 }
4748
4749 .sb-onboarding-wizard-elem-toggle>div[data-color="blue"][data-active="true"] {
4750 background-color: #0096CC;
4751 }
4752
4753 .sb-onboarding-wizard-elements-list-hd {
4754 padding: 20px !important;
4755 padding-top: 25px !important;
4756 background-color: #fff !important;
4757 border-bottom: 1px solid #E6E6EB !important;
4758 font-size: 18px !important;
4759 font-weight: 600 !important;
4760 line-height: 25px !important;
4761 }
4762
4763 .sb-onboarding-wizard-step-configuref {
4764 padding-bottom: 30px;
4765 }
4766
4767 .sb-onboarding-wizard-success-list {
4768 overflow: hidden;
4769 }
4770
4771 .sb-onboarding-wizard-step-success {
4772 padding-bottom: 0px;
4773 }
4774
4775 .sb-onboarding-wizard-succes-elem {
4776 padding: 0px 22px;
4777 display: flex;
4778 align-items: center;
4779 column-gap: 10px;
4780 visibility: hidden;
4781 opacity: 0;
4782 height: 0px;
4783 transform: translateX(-20px);
4784 transition: all .3s ease-in-out;
4785 }
4786
4787 .sb-onboarding-wizard-success-list[data-done="true"] .sb-onboarding-wizard-succes-elem {
4788 height: 54px;
4789 visibility: visible;
4790 opacity: 1;
4791 transform: translateX(0px);
4792 }
4793
4794 .sb-onboarding-wizard-success-list[data-done="true"] .sb-onboarding-wizard-succes-elem:last-of-type {
4795 margin-bottom: 20px;
4796 }
4797
4798 .sb-onboarding-wizard-succes-icon {
4799 width: 20px;
4800 height: 20px;
4801 color: #468737;
4802 }
4803
4804 .sb-onboarding-wizard-succes-icon svg path {
4805 stroke: currentColor;
4806 }
4807
4808 .sb-onboarding-wizard-succes-text {
4809 font-size: 16px;
4810 font-weight: 400;
4811 line-height: 26px;
4812 color: #2C324C;
4813 }
4814
4815 .sb-onboarding-wizard-upgrader {
4816 margin-top: 30px;
4817 /* background: #F9F9FA; */
4818 padding: 30px 10%;
4819 box-shadow: 0px 4px 50px 0px #0000000D, 0px 1px 2px 0px #0000000D;
4820 border-radius: 5px;
4821 }
4822
4823 .sb-onboarding-wizard-features-ctn,
4824 .sb-onboarding-wizard-license-ctn {
4825 background: #fff;
4826 border: 1px solid #E6E6EB;
4827 box-shadow: 0px 4px 5px 0px #0000000D, 0px 1px 2px 0px #0000000D;
4828 margin-bottom: 20px;
4829 border-radius: 5px;
4830 }
4831
4832 .sb-onboarding-wizard-upgrader-features {
4833 background: #F9F9FA;
4834 display: flex;
4835 justify-content: center;
4836 align-items: center;
4837 padding: 15px 40px;
4838 column-gap: 8px;
4839 border-top-right-radius: 8px;
4840 border-top-left-radius: 8px;
4841 }
4842
4843 .sb-onboarding-wizard-upgrader-feature-el {
4844 display: inline-flex;
4845 font-size: 13px;
4846 font-weight: 600;
4847 line-height: 21px;
4848 column-gap: 10px;
4849 justify-content: center;
4850 align-items: center;
4851 padding: 4px 8px;
4852 background: #FFFFFF;
4853 box-shadow: 0px 4px 10px 0px #0000000D, 0px 1px 2px 0px #0000000D;
4854 border-radius: 6px;
4855 margin: 3px 0px;
4856 }
4857
4858 .sb-onboarding-wizard-upgrader-feature-el svg {
4859 float: left;
4860 }
4861
4862 .sb-onboarding-wizard-upgrader-action-ctn {
4863 display: flex;
4864 flex-direction: column;
4865 justify-content: center;
4866 align-items: center;
4867 padding: 40px 20px;
4868 }
4869
4870 .sb-onboarding-wizard-upgrader-action-ctn h4 {
4871 font-size: 18px !important;
4872 font-weight: 600 !important;
4873 line-height: 25px !important;
4874 }
4875
4876 .sb-onboarding-wizard-upgrader-action-ctn p {
4877 font-size: 15px;
4878 font-weight: 400;
4879 line-height: 21px;
4880 color: #696D80;
4881 padding: 0 20%;
4882 margin-bottom: 22px;
4883 text-align: center;
4884 }
4885
4886 .sb-onboarding-wizard-upgrader-action-ctn a {
4887 font-size: 16px;
4888 font-weight: 600;
4889 line-height: 26px;
4890 text-align: left;
4891 padding: 10px 35px;
4892 border: 0px;
4893 border-radius: 4px;
4894 }
4895
4896 .sb-onboarding-wizard-upgrader-bonus {
4897 display: flex;
4898 justify-content: center;
4899 align-items: center;
4900 background: #FFEFCC;
4901 border-bottom-right-radius: 8px;
4902 border-bottom-left-radius: 8px;
4903 font-size: 13px;
4904 font-weight: 400;
4905 line-height: 21px;
4906 padding: 8px 10px;
4907 column-gap: 5px;
4908 }
4909
4910 .sb-onboarding-wizard-license-ctn {
4911 display: flex;
4912 flex-direction: column;
4913 justify-content: center;
4914 align-items: center;
4915 padding: 40px 60px;
4916 }
4917
4918 .sb-onboarding-wizard-license-ctn strong {
4919 font-size: 20px;
4920 font-weight: 600;
4921 line-height: 25px;
4922 text-align: center;
4923 color: #000;
4924 }
4925
4926 .sb-onboarding-wizard-license-ctn p {
4927 font-size: 14px;
4928 font-weight: 400;
4929 line-height: 21px;
4930 text-align: center;
4931 color: #696D80;
4932 margin-top: 5px;
4933 margin-bottom: 22px;
4934 }
4935
4936 .sb-onboarding-wizard-license-inp-ctn {
4937 display: flex;
4938 width: 100%;
4939 padding: 0 5%;
4940 align-items: center;
4941 justify-content: center;
4942 box-sizing: border-box;
4943 column-gap: 12px;
4944 }
4945
4946 .sb-onboarding-wizard-license-inp-ctn input {
4947 flex: 1;
4948 padding: 5px 10px !important;
4949 border: 1px solid #E6E6EB
4950 }
4951
4952 .sb-onboarding-wizard-license-inp-ctn button {
4953 height: 40px;
4954 font-size: 14px;
4955 font-weight: 600;
4956 line-height: 22px;
4957 }
4958
4959 .sb-onboarding-wizard-finish-ctn {
4960 display: flex;
4961 justify-content: center;
4962 align-items: center;
4963 }
4964
4965 .sb-onboarding-wizard-finish-ctn button {
4966 font-weight: 600;
4967 font-size: 12px;
4968 color: #141B38 !important;
4969 padding: 13px 23px;
4970 line-height: 1em;
4971 }
4972
4973 .sb-onboarding-wizard-finish-ctn button svg {
4974 margin-left: 10px;
4975 float: left;
4976 margin-top: 3px;
4977 }
4978
4979 .sb-onboarding-wizard-sources-list {
4980 display: grid;
4981 grid-template-columns: 32.66% 32.66% 32.66%;
4982 grid-column-gap: 1%;
4983 margin-bottom: 10px;
4984 padding: 10px 20px;
4985 }
4986
4987 .sb-onboarding-wizard-sources-list>div {
4988 display: flex;
4989 height: 52px;
4990 position: relative;
4991 border-radius: 3px;
4992 margin-bottom: 10px;
4993 }
4994
4995 .sb-onboarding-wizard-source-newitem {
4996 justify-content: center;
4997 align-items: center;
4998 background: #EBF5FF;
4999 border: 1px solid #EBF5FF;
5000 color: #0096CC;
5001 cursor: pointer;
5002 }
5003
5004 .sb-onboarding-wizard-source-newitem span {
5005 color: inherit !important;
5006 margin-left: 10px !important;
5007 }
5008
5009 .sb-onboarding-wizard-source-item {
5010 align-items: center;
5011 box-sizing: border-box;
5012 padding: 0 10px;
5013 border: 1px solid #CED0D9;
5014 padding-bottom: 2px;
5015 }
5016
5017 .sb-onboarding-wizard-source-item strong {
5018 color: #000;
5019 }
5020
5021 .sb-onboarding-wizard-source-item-avatar {
5022 position: relative;
5023 width: 32px;
5024 height: 32px;
5025 border-radius: 50px;
5026 margin-right: 12px;
5027 }
5028
5029 .sb-onboarding-wizard-source-item-avatar img {
5030 width: inherit;
5031 height: inherit;
5032 border-radius: 50px;
5033 float: left;
5034 }
5035
5036 .sb-onboarding-wizard-source-item-avatar svg {
5037 position: absolute;
5038 right: -5px;
5039 bottom: -3px;
5040 }
5041
5042 .sb-onboarding-wizard-source-item-delete {
5043 display: flex;
5044 width: 20px;
5045 height: 20px;
5046 justify-content: center;
5047 align-items: center;
5048 cursor: pointer;
5049 margin-left: auto;
5050 }
5051
5052 .sb-onboarding-wizard-source-item-delete svg {
5053 float: left;
5054 }
5055
5056 .sb-onboarding-wizard-succes-name {
5057 text-transform: capitalize;
5058 }
5059
5060 .sb-onboarding-wizard-upgrade-ctn {
5061 display: grid;
5062 grid-template-columns: 54% 46%;
5063 background-color: #0068A0;
5064 box-shadow: 0px 4px 5px 0px #0000000D, 0px 1px 2px 0px #0000000D;
5065 margin-top: 20px;
5066 margin-bottom: 20px;
5067 border-radius: 5px;
5068 }
5069
5070 .sb-onboarding-wizard-upgrade-banner img {
5071 width: 100%;
5072 float: left;
5073 border-top-right-radius: 5px;
5074 border-bottom-right-radius: 5px;
5075 }
5076
5077 .sb-onboarding-wizard-upgrade-text {
5078 padding: 0px 10%;
5079 display: flex;
5080 flex-direction: column;
5081 justify-content: center;
5082 }
5083
5084 .sb-onboarding-wizard-upgrade-text h3 {
5085 color: #fff;
5086 }
5087
5088 .sb-onboarding-wizard-upgrade-text p {
5089 color: #fff;
5090 margin: 25px 0px;
5091 }
5092
5093 .sb-onboarding-wizard-upgrade-btns a,
5094 .sb-onboarding-wizard-upgrade-btns a:hover {
5095 color: #0068A0;
5096 background: #fff;
5097 padding: 16px 25px;
5098 position: relative;
5099 }
5100
5101 .sb-onboarding-wizard-upgrade-off {
5102 padding: 12px 20px;
5103 display: grid;
5104 grid-template-columns: 50px calc(100% - 50px);
5105 background: #FFDF99;
5106 margin-top: 18px;
5107 border-radius: 4px;
5108 }
5109
5110 .sb-onboarding-wizard-upgrade-off div {
5111 display: flex;
5112 width: 35px;
5113 height: 35px;
5114 justify-content: center;
5115 align-items: center;
5116 }
5117
5118 .sb-onboarding-wizard-upgrade-off div svg {
5119 float: left;
5120 }
5121
5122 .sb-onboarding-wizard-upgrade-off span {
5123 color: #331F00;
5124 }
5125
5126 .sb-onboarding-wizard-close {
5127 top: 0px;
5128 position: fixed;
5129 display: flex;
5130 justify-content: center;
5131 align-items: center;
5132 width: 120px;
5133 height: 40px;
5134 right: 100px;
5135 background-color: #434960;
5136 color: #fff;
5137 font-size: 14px;
5138 font-weight: 600;
5139 column-gap: 10px;
5140 border-bottom-left-radius: 4px;
5141 border-bottom-right-radius: 4px;
5142 cursor: pointer;
5143 z-index: 99;
5144 }
5145
5146 .facebook-feed_page_cff-setup .cff-header-notice {
5147 display: none;
5148 }
5149
5150 .sb-btn-wizard-next:before,
5151 .sb-btn-wizard-install:before {
5152 left: unset !important;
5153 right: 16px !important;
5154 }
5155
5156 button.sb-btn-wizard-install,
5157 div:not(.sb-onboarding-wizard-welcome-btns)>button.sb-btn-wizard-next {
5158 padding: 10px 33px 10px 20px !important;
5159 }
5160
5161 .sb-onboarding-wizard-step-wrapper.sb-onboarding-wizard-step-installp {
5162 padding-bottom: 0px;
5163 }
5164
5165 .sb-onboarding-wizard-elem:last-of-type {
5166 border-bottom-right-radius: 5px;
5167 border-bottom-left-radius: 5px;
5168 }
5169
5170 .sb-onboarding-wizard-license-error {
5171 color: #D72C2C;
5172 display: flex;
5173 margin-top: 20px;
5174 font-weight: 500;
5175 }
5176
5177 .sb-onboarding-wizard-license-error a {
5178 text-decoration: underline;
5179 }
5180
5181 .sb-onboarding-wizard-license-inp-ctn button svg {
5182 fill: currentColor !important;
5183 margin-right: 10px;
5184 }
5185
5186 .sb-onboarding-wizard-license-inp-ctn button svg path {
5187 fill: currentColor !important;
5188 }
5189
5190 @media (min-width: 760px) and (max-width: 960px) {
5191 .sb-onboarding-wizard-step-welcome {
5192 grid-template-columns: 70% 30%;
5193 }
5194
5195 .sb-onboarding-wizard-welcome-text {
5196 padding: 100px 10%;
5197 }
5198
5199 .sb-onboarding-wizard-welcome-banner {
5200 justify-content: center;
5201 display: flex;
5202 align-items: center;
5203 }
5204
5205 }
5206
5207 @media all and (max-width: 760px) {
5208 .sb-onboarding-wizard-step-welcome {
5209 display: flex;
5210 flex-direction: column-reverse;
5211 margin-bottom: 20px;
5212 }
5213
5214 .sb-onboarding-wizard-welcome-text {
5215 padding: 100px 10%;
5216 }
5217 }
5218
5219 @media all and (max-width: 960px) {
5220 .sb-onboarding-wizard-ctn {
5221 width: 100%;
5222 left: 0px;
5223 top: 0;
5224 }
5225
5226 .sb-onboarding-wizard-sources-list {
5227 grid-template-columns: 49% 49%;
5228 }
5229 }
5230
5231 .sb-onboarding-wizard-smash-list {
5232 display: flex;
5233 align-items: center;
5234 margin-top: 10px;
5235 }
5236
5237 .sb-onboarding-wizard-smash-inside {
5238 display: flex;
5239 padding: 6px 10px;
5240 border: 1px solid #E6E6EB;
5241 border-radius: 4px;
5242 column-gap: 10px;
5243 align-items: center;
5244 }
5245
5246 .sb-onboarding-wizard-smash-list svg {
5247 float: left;
5248 fill: #888;
5249 }
5250
5251 .sb-onboarding-wizard-smash-elem {
5252 display: flex;
5253 align-items: center;
5254 column-gap: 5px;
5255 text-transform: capitalize;
5256 }
5257
5258 .sb-onboarding-wizard-smash-elem span {
5259 color: #333;
5260 font-size: 14px;
5261 font-weight: 500;
5262 }
5263
5264 .sb-onboarding-wizard-smash-elem img {
5265 width: 20px;
5266 height: auto;
5267 float: left;
5268 }
5269
5270 .sb-onboarding-wizard-smash-inside .sb-control-elem-tltp {
5271 margin-left: unset;
5272 width: 14px;
5273 height: 14px;
5274 cursor: pointer;
5275 }
5276
5277 .sb-onboarding-wizard-smash-inside .sb-control-elem-tltp-content {
5278 position: absolute;
5279 opacity: 0;
5280 visibility: hidden;
5281 top: -30px;
5282 left: 7px;
5283 -webkit-transition: all .2s ease-in-out;
5284 transition: all .2s ease-in-out;
5285 }
5286
5287 .sb-onboarding-wizard-smash-inside .sb-control-elem-tltp:hover .sb-control-elem-tltp-content {
5288 opacity: 1;
5289 visibility: visible;
5290 top: -16px;
5291 max-width: 300px;
5292 width: auto;
5293 left: 7px;
5294 }
5295
5296 .sb-onboarding-wizard-clicking {
5297 width: 300px;
5298 font-size: 14px;
5299 color: #3b4262;
5300 line-height: 1.7em;
5301 position: absolute;
5302 bottom: -65px;
5303 display: flex;
5304 column-gap: 10px;
5305 }
5306
5307 .sb-onboarding-wizard-clicking svg {
5308 fill: currentColor;
5309 margin-top: 5px;
5310 }
5311
5312 .sb-onboarding-wizard-clicking span>span {
5313 text-transform: capitalize;
5314 }