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