PluginProbe
Powerkit – Supercharge your WordPress Site / 2.5.5
Powerkit – Supercharge your WordPress Site v2.5.5
3.1.1 3.1.0 3.0.9 3.0.8 trunk 2.2.6 2.2.7 2.2.8 2.2.9 2.3.0 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.3.9 2.4.0 2.4.1 2.4.2 2.4.3 2.4.4 2.4.5 All 87 releases
powerkit / assets / css / powerkit.css

powerkit.css in Powerkit – Supercharge your WordPress Site 2.5.5, at assets/css/powerkit.css

1,461 lines 25.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * All of the CSS for your public-facing functionality should be
3 * included in this file.
4 */
5 /**
6 * Environment for all styles (variables, additions, etc).
7 */
8 /*--------------------------------------------------------------*/
9 /* Include */
10 /*--------------------------------------------------------------*/
11 @font-face {
12 font-family: 'powerkit-icons';
13 src: url("../fonts/powerkit-icons.woff") format("woff"), url("../fonts/powerkit-icons.ttf") format("truetype"), url("../fonts/powerkit-icons.svg") format("svg");
14 font-weight: normal;
15 font-style: normal;
16 font-display: swap;
17 }
18
19 [class^="pk-icon-"],
20 [class*=" pk-icon-"] {
21 font-family: 'powerkit-icons' !important;
22 font-style: normal;
23 font-weight: normal;
24 font-variant: normal;
25 text-transform: none;
26 line-height: 1;
27 -webkit-font-smoothing: antialiased;
28 -moz-osx-font-smoothing: grayscale;
29 }
30
31 .pk-icon-alert-circle:before {
32 content: "\e946";
33 }
34
35 .pk-icon-star-half:before {
36 content: "\e938";
37 }
38
39 .pk-icon-star-full:before {
40 content: "\e939";
41 }
42
43 .pk-icon-star-empty:before {
44 content: "\e93a";
45 }
46
47 .pk-icon-discord:before {
48 content: "\e947";
49 }
50
51 .pk-icon-tiktok:before {
52 content: "\e948";
53 }
54
55 .pk-icon-mix:before {
56 content: "\e93c";
57 }
58
59 .pk-icon-strava:before {
60 content: "\e93b";
61 }
62
63 .pk-icon-microblog:before {
64 content: "\e937";
65 }
66
67 .pk-icon-mastodon:before {
68 content: "\e935";
69 }
70
71 .pk-icon-goodreads:before {
72 content: "\e934";
73 }
74
75 .pk-icon-codepen:before {
76 content: "\e924";
77 }
78
79 .pk-icon-medium:before {
80 content: "\e906";
81 }
82
83 .pk-icon-powerkit:before {
84 content: "\e904";
85 }
86
87 .pk-icon-line:before {
88 content: "\e90e";
89 }
90
91 .pk-icon-fb-messenger:before {
92 content: "\e90a";
93 }
94
95 .pk-icon-pixelfed:before {
96 content: "\e936";
97 }
98
99 .pk-icon-steam:before {
100 content: "\e932";
101 }
102
103 .pk-icon-thumbtack:before {
104 content: "\e933";
105 }
106
107 .pk-icon-tripadvisor:before {
108 content: "\e931";
109 }
110
111 .pk-icon-slideshare:before {
112 content: "\e925";
113 }
114
115 .pk-icon-producthunt:before {
116 content: "\e930";
117 }
118
119 .pk-icon-meetup:before {
120 content: "\e92f";
121 }
122
123 .pk-icon-houzz:before {
124 content: "\e92e";
125 }
126
127 .pk-icon-deviantart:before {
128 content: "\e92d";
129 }
130
131 .pk-icon-delicious:before {
132 content: "\e92c";
133 }
134
135 .pk-icon-500px:before {
136 content: "\e92b";
137 }
138
139 .pk-icon-bitbucket:before {
140 content: "\e929";
141 }
142
143 .pk-icon-jsfiddle:before {
144 content: "\e928";
145 }
146
147 .pk-icon-freecodecamp:before {
148 content: "\e927";
149 }
150
151 .pk-icon-gitlab:before {
152 content: "\e926";
153 }
154
155 .pk-icon-stackoverflow:before {
156 content: "\e923";
157 }
158
159 .pk-icon-wechat:before {
160 content: "\e91e";
161 }
162
163 .pk-icon-xing:before {
164 content: "\e91c";
165 }
166
167 .pk-icon-ok:before {
168 content: "\e91d";
169 }
170
171 .pk-icon-snapchat:before {
172 content: "\e917";
173 }
174
175 .pk-icon-behance:before {
176 content: "\f1b4";
177 }
178
179 .pk-icon-diamond:before {
180 content: "\f219";
181 }
182
183 .pk-icon-dribbble:before {
184 content: "\f17d";
185 }
186
187 .pk-icon-facebook:before {
188 content: "\e949";
189 }
190
191 .pk-icon-feed:before {
192 content: "\f09e";
193 }
194
195 .pk-icon-rss:before {
196 content: "\f09e";
197 }
198
199 .pk-icon-get-pocket:before {
200 content: "\f265";
201 }
202
203 .pk-icon-pocket:before {
204 content: "\f265";
205 }
206
207 .pk-icon-google-plus:before {
208 content: "\f0d5";
209 }
210
211 .pk-icon-googleplus:before {
212 content: "\f0d5";
213 }
214
215 .pk-icon-linkedin:before {
216 content: "\f0e1";
217 }
218
219 .pk-icon-map-marker:before {
220 content: "\f041";
221 }
222
223 .pk-icon-phone:before {
224 content: "\f095";
225 }
226
227 .pk-icon-viber:before {
228 content: "\f095";
229 }
230
231 .pk-icon-pinterest:before {
232 content: "\f0d2";
233 }
234
235 .pk-icon-retweet:before {
236 content: "\f079";
237 }
238
239 .pk-icon-soundcloud:before {
240 content: "\f1be";
241 }
242
243 .pk-icon-spotify:before {
244 content: "\f1bc";
245 }
246
247 .pk-icon-stumbleupon:before {
248 content: "\f1a4";
249 }
250
251 .pk-icon-tumblr:before {
252 content: "\f173";
253 }
254
255 .pk-icon-twitter:before {
256 content: "\f099";
257 }
258
259 .pk-icon-vimeo:before {
260 content: "\f27d";
261 }
262
263 .pk-icon-vk:before {
264 content: "\f189";
265 }
266
267 .pk-icon-vkontakte:before {
268 content: "\f189";
269 }
270
271 .pk-icon-whatsapp:before {
272 content: "\f232";
273 }
274
275 .pk-icon-youtube:before {
276 content: "\e945";
277 }
278
279 .pk-icon-foursquare:before {
280 content: "\e92a";
281 }
282
283 .pk-icon-yelp:before {
284 content: "\e922";
285 }
286
287 .pk-icon-weibo:before {
288 content: "\e91f";
289 }
290
291 .pk-icon-apple:before {
292 content: "\e921";
293 }
294
295 .pk-icon-flickr:before {
296 content: "\e918";
297 }
298
299 .pk-icon-bloglovin:before {
300 content: "\e944";
301 }
302
303 .pk-icon-twitch:before {
304 content: "\e905";
305 }
306
307 .pk-icon-github:before {
308 content: "\e90f";
309 }
310
311 .pk-icon-instagram:before {
312 content: "\e90c";
313 }
314
315 .pk-icon-telegram:before {
316 content: "\e909";
317 }
318
319 .pk-icon-reddit:before {
320 content: "\e90b";
321 }
322
323 .pk-icon-android:before {
324 content: "\e920";
325 }
326
327 .pk-icon-link:before {
328 content: "\e91b";
329 }
330
331 .pk-icon-globe:before {
332 content: "\e91a";
333 }
334
335 .pk-icon-website:before {
336 content: "\e91a";
337 }
338
339 .pk-icon-bell:before {
340 content: "\e919";
341 }
342
343 .pk-icon-zoom-in:before {
344 content: "\e916";
345 }
346
347 .pk-icon-check:before {
348 content: "\e912";
349 }
350
351 .pk-icon-minus:before {
352 content: "\e90d";
353 }
354
355 .pk-icon-chevron-right:before {
356 content: "\e914";
357 }
358
359 .pk-icon-chevron-left:before {
360 content: "\e915";
361 }
362
363 .pk-icon-x:before {
364 content: "\e913";
365 }
366
367 .pk-icon-arrow-right-circle:before {
368 content: "\e911";
369 }
370
371 .pk-icon-arrow-left-circle:before {
372 content: "\e910";
373 }
374
375 .pk-icon-up:before {
376 content: "\e908";
377 }
378
379 .pk-icon-comment:before {
380 content: "\e900";
381 }
382
383 .pk-icon-refresh-cw:before {
384 content: "\e902";
385 }
386
387 .pk-icon-reply:before {
388 content: "\e903";
389 }
390
391 .pk-icon-like:before {
392 content: "\e901";
393 }
394
395 .pk-icon-mail:before {
396 content: "\e002";
397 }
398
399 .pk-icon-email:before {
400 content: "\e002";
401 }
402
403 .pk-icon-video:before {
404 content: "\e018";
405 }
406
407 .pk-icon-share:before {
408 content: "\e93d";
409 }
410
411 .pk-icon-watch:before {
412 content: "\e93f";
413 }
414
415 .pk-icon-eye:before {
416 content: "\e93e";
417 }
418
419 .pk-icon-arrow-right:before {
420 content: "\e940";
421 }
422
423 .pk-icon-arrow-left:before {
424 content: "\e941";
425 }
426
427 .pk-icon-arrow-down:before {
428 content: "\e942";
429 }
430
431 .pk-icon-arrow-up:before {
432 content: "\e943";
433 }
434
435 .pk-container {
436 width: 100%;
437 padding-right: 20px;
438 padding-left: 20px;
439 margin-right: auto;
440 margin-left: auto;
441 }
442
443 @media (min-width: 576px) {
444 .pk-container {
445 max-width: 540px;
446 }
447 }
448
449 @media (min-width: 768px) {
450 .pk-container {
451 max-width: 720px;
452 }
453 }
454
455 @media (min-width: 992px) {
456 .pk-container {
457 max-width: 960px;
458 }
459 }
460
461 @media (min-width: 1200px) {
462 .pk-container {
463 max-width: 1140px;
464 }
465 }
466
467 .pk-container-fluid {
468 width: 100%;
469 padding-right: 20px;
470 padding-left: 20px;
471 margin-right: auto;
472 margin-left: auto;
473 }
474
475 .pk-row {
476 display: flex;
477 flex-wrap: wrap;
478 margin-right: -20px;
479 margin-left: -20px;
480 }
481
482 .pk-col-1, .pk-col-2, .pk-col-3, .pk-col-4, .pk-col-5, .pk-col-6, .pk-col-7, .pk-col-8, .pk-col-9, .pk-col-10, .pk-col-11, .pk-col-12, .pk-col-sm-1, .pk-col-sm-2, .pk-col-sm-3, .pk-col-sm-4, .pk-col-sm-5, .pk-col-sm-6, .pk-col-sm-7, .pk-col-sm-8, .pk-col-sm-9, .pk-col-sm-10, .pk-col-sm-11, .pk-col-sm-12, .pk-col-md-1, .pk-col-md-2, .pk-col-md-3, .pk-col-md-4, .pk-col-md-5, .pk-col-md-6, .pk-col-md-7, .pk-col-md-8, .pk-col-md-9, .pk-col-md-10, .pk-col-md-11, .pk-col-md-12, .pk-col-lg-1, .pk-col-lg-2, .pk-col-lg-3, .pk-col-lg-4, .pk-col-lg-5, .pk-col-lg-6, .pk-col-lg-7, .pk-col-lg-8, .pk-col-lg-9, .pk-col-lg-10, .pk-col-lg-11, .pk-col-lg-12, .pk-col-xl-1, .pk-col-xl-2, .pk-col-xl-3, .pk-col-xl-4, .pk-col-xl-5, .pk-col-xl-6, .pk-col-xl-7, .pk-col-xl-8, .pk-col-xl-9, .pk-col-xl-10, .pk-col-xl-11, .pk-col-xl-12 {
483 position: relative;
484 width: 100%;
485 min-height: 1px;
486 padding-right: 20px;
487 padding-left: 20px;
488 }
489
490 .pk-col-1 {
491 flex: 0 0 8.3333333333%;
492 max-width: 8.3333333333%;
493 }
494
495 .pk-col-2 {
496 flex: 0 0 16.6666666667%;
497 max-width: 16.6666666667%;
498 }
499
500 .pk-col-3 {
501 flex: 0 0 25%;
502 max-width: 25%;
503 }
504
505 .pk-col-4 {
506 flex: 0 0 33.3333333333%;
507 max-width: 33.3333333333%;
508 }
509
510 .pk-col-5 {
511 flex: 0 0 41.6666666667%;
512 max-width: 41.6666666667%;
513 }
514
515 .pk-col-6 {
516 flex: 0 0 50%;
517 max-width: 50%;
518 }
519
520 .pk-col-7 {
521 flex: 0 0 58.3333333333%;
522 max-width: 58.3333333333%;
523 }
524
525 .pk-col-8 {
526 flex: 0 0 66.6666666667%;
527 max-width: 66.6666666667%;
528 }
529
530 .pk-col-9 {
531 flex: 0 0 75%;
532 max-width: 75%;
533 }
534
535 .pk-col-10 {
536 flex: 0 0 83.3333333333%;
537 max-width: 83.3333333333%;
538 }
539
540 .pk-col-11 {
541 flex: 0 0 91.6666666667%;
542 max-width: 91.6666666667%;
543 }
544
545 .pk-col-12 {
546 flex: 0 0 100%;
547 max-width: 100%;
548 }
549
550 @media (min-width: 576px) {
551 .pk-col-sm-1 {
552 flex: 0 0 8.3333333333%;
553 max-width: 8.3333333333%;
554 }
555 .pk-col-sm-2 {
556 flex: 0 0 16.6666666667%;
557 max-width: 16.6666666667%;
558 }
559 .pk-col-sm-3 {
560 flex: 0 0 25%;
561 max-width: 25%;
562 }
563 .pk-col-sm-4 {
564 flex: 0 0 33.3333333333%;
565 max-width: 33.3333333333%;
566 }
567 .pk-col-sm-5 {
568 flex: 0 0 41.6666666667%;
569 max-width: 41.6666666667%;
570 }
571 .pk-col-sm-6 {
572 flex: 0 0 50%;
573 max-width: 50%;
574 }
575 .pk-col-sm-7 {
576 flex: 0 0 58.3333333333%;
577 max-width: 58.3333333333%;
578 }
579 .pk-col-sm-8 {
580 flex: 0 0 66.6666666667%;
581 max-width: 66.6666666667%;
582 }
583 .pk-col-sm-9 {
584 flex: 0 0 75%;
585 max-width: 75%;
586 }
587 .pk-col-sm-10 {
588 flex: 0 0 83.3333333333%;
589 max-width: 83.3333333333%;
590 }
591 .pk-col-sm-11 {
592 flex: 0 0 91.6666666667%;
593 max-width: 91.6666666667%;
594 }
595 .pk-col-sm-12 {
596 flex: 0 0 100%;
597 max-width: 100%;
598 }
599 }
600
601 @media (min-width: 768px) {
602 .pk-col-md-1 {
603 flex: 0 0 8.3333333333%;
604 max-width: 8.3333333333%;
605 }
606 .pk-col-md-2 {
607 flex: 0 0 16.6666666667%;
608 max-width: 16.6666666667%;
609 }
610 .pk-col-md-3 {
611 flex: 0 0 25%;
612 max-width: 25%;
613 }
614 .pk-col-md-4 {
615 flex: 0 0 33.3333333333%;
616 max-width: 33.3333333333%;
617 }
618 .pk-col-md-5 {
619 flex: 0 0 41.6666666667%;
620 max-width: 41.6666666667%;
621 }
622 .pk-col-md-6 {
623 flex: 0 0 50%;
624 max-width: 50%;
625 }
626 .pk-col-md-7 {
627 flex: 0 0 58.3333333333%;
628 max-width: 58.3333333333%;
629 }
630 .pk-col-md-8 {
631 flex: 0 0 66.6666666667%;
632 max-width: 66.6666666667%;
633 }
634 .pk-col-md-9 {
635 flex: 0 0 75%;
636 max-width: 75%;
637 }
638 .pk-col-md-10 {
639 flex: 0 0 83.3333333333%;
640 max-width: 83.3333333333%;
641 }
642 .pk-col-md-11 {
643 flex: 0 0 91.6666666667%;
644 max-width: 91.6666666667%;
645 }
646 .pk-col-md-12 {
647 flex: 0 0 100%;
648 max-width: 100%;
649 }
650 }
651
652 @media (min-width: 992px) {
653 .pk-col-lg-1 {
654 flex: 0 0 8.3333333333%;
655 max-width: 8.3333333333%;
656 }
657 .pk-col-lg-2 {
658 flex: 0 0 16.6666666667%;
659 max-width: 16.6666666667%;
660 }
661 .pk-col-lg-3 {
662 flex: 0 0 25%;
663 max-width: 25%;
664 }
665 .pk-col-lg-4 {
666 flex: 0 0 33.3333333333%;
667 max-width: 33.3333333333%;
668 }
669 .pk-col-lg-5 {
670 flex: 0 0 41.6666666667%;
671 max-width: 41.6666666667%;
672 }
673 .pk-col-lg-6 {
674 flex: 0 0 50%;
675 max-width: 50%;
676 }
677 .pk-col-lg-7 {
678 flex: 0 0 58.3333333333%;
679 max-width: 58.3333333333%;
680 }
681 .pk-col-lg-8 {
682 flex: 0 0 66.6666666667%;
683 max-width: 66.6666666667%;
684 }
685 .pk-col-lg-9 {
686 flex: 0 0 75%;
687 max-width: 75%;
688 }
689 .pk-col-lg-10 {
690 flex: 0 0 83.3333333333%;
691 max-width: 83.3333333333%;
692 }
693 .pk-col-lg-11 {
694 flex: 0 0 91.6666666667%;
695 max-width: 91.6666666667%;
696 }
697 .pk-col-lg-12 {
698 flex: 0 0 100%;
699 max-width: 100%;
700 }
701 }
702
703 @media (min-width: 1200px) {
704 .pk-col-xl-1 {
705 flex: 0 0 8.3333333333%;
706 max-width: 8.3333333333%;
707 }
708 .pk-col-xl-2 {
709 flex: 0 0 16.6666666667%;
710 max-width: 16.6666666667%;
711 }
712 .pk-col-xl-3 {
713 flex: 0 0 25%;
714 max-width: 25%;
715 }
716 .pk-col-xl-4 {
717 flex: 0 0 33.3333333333%;
718 max-width: 33.3333333333%;
719 }
720 .pk-col-xl-5 {
721 flex: 0 0 41.6666666667%;
722 max-width: 41.6666666667%;
723 }
724 .pk-col-xl-6 {
725 flex: 0 0 50%;
726 max-width: 50%;
727 }
728 .pk-col-xl-7 {
729 flex: 0 0 58.3333333333%;
730 max-width: 58.3333333333%;
731 }
732 .pk-col-xl-8 {
733 flex: 0 0 66.6666666667%;
734 max-width: 66.6666666667%;
735 }
736 .pk-col-xl-9 {
737 flex: 0 0 75%;
738 max-width: 75%;
739 }
740 .pk-col-xl-10 {
741 flex: 0 0 83.3333333333%;
742 max-width: 83.3333333333%;
743 }
744 .pk-col-xl-11 {
745 flex: 0 0 91.6666666667%;
746 max-width: 91.6666666667%;
747 }
748 .pk-col-xl-12 {
749 flex: 0 0 100%;
750 max-width: 100%;
751 }
752 }
753
754 .pk-d-none {
755 display: none;
756 }
757
758 .pk-clearfix {
759 clear: both;
760 }
761
762 .pk-clearfix:after {
763 content: '';
764 clear: both;
765 display: table;
766 }
767
768 .pk-post-meta {
769 --pk-post-meta-color: #dee2e6;
770 padding-left: 0;
771 list-style: none;
772 color: var(--pk-post-meta-color);
773 padding: 0;
774 margin: 0;
775 }
776
777 .pk-post-meta > li {
778 display: inline-block;
779 }
780
781 .pk-post-meta > li:not(:last-child) {
782 margin-right: 0.5rem;
783 }
784
785 .pk-post-meta li + li:before {
786 margin-right: 0.5rem;
787 content: "\b7";
788 }
789
790 .pk-post-meta .pk-icon {
791 margin-right: 0.25rem;
792 }
793
794 .pk-meta-category .post-categories {
795 padding-left: 0;
796 list-style: none;
797 padding: 0;
798 margin: 0;
799 }
800
801 .pk-meta-category .post-categories > li {
802 display: inline-block;
803 }
804
805 .pk-meta-category .post-categories > li:not(:last-child) {
806 margin-right: 0.5rem;
807 }
808
809 .pk-meta-category .post-categories li:not(:last-child):after {
810 content: ",";
811 }
812
813 .post-meta .pk-meta-category .post-categories {
814 margin-bottom: 0;
815 }
816
817 .pk-meta-author span + a,
818 .pk-meta-author a + span {
819 margin-left: 0.25rem;
820 }
821
822 /* Blocks */
823 /*--------------------------------------------------------------*/
824 .wp-block-button.is-pk-button-full-width,
825 .entry-content .wp-block-button.is-pk-button-full-width {
826 width: 100%;
827 }
828
829 .wp-block-button.is-pk-button-full-width .wp-block-button__link,
830 .entry-content .wp-block-button.is-pk-button-full-width .wp-block-button__link {
831 width: 100%;
832 }
833
834 .wp-block-button.is-pk-button-size-sm .wp-block-button__link,
835 .entry-content .wp-block-button.is-pk-button-size-sm .wp-block-button__link {
836 padding: 0.25rem 0.5rem;
837 }
838
839 .wp-block-button.is-pk-button-size-lg .wp-block-button__link,
840 .entry-content .wp-block-button.is-pk-button-size-lg .wp-block-button__link {
841 padding: 1rem 2rem;
842 }
843
844 /* Color Styles */
845 /*--------------------------------------------------------------*/
846 .pk-color-primary {
847 --pk-primary-color: #343a40;
848 color: var(--pk-primary-color);
849 }
850
851 .pk-color-secondary {
852 --pk-secondary-color: #A0A0A0;
853 color: var(--pk-secondary-color);
854 }
855
856 .pk-bg-primary {
857 --pk-primary-background: #343a40;
858 background-color: var(--pk-primary-background);
859 }
860
861 .pk-bg-overlay {
862 --pk-overlay-background: rgba(52, 58, 64, 0.5);
863 background-color: var(--pk-overlay-background);
864 }
865
866 /* Font Styles */
867 /*--------------------------------------------------------------*/
868 .pk-font-primary {
869 --pk-primary-font-weight: 700;
870 font-weight: var(--pk-primary-font-weight);
871 }
872
873 .pk-font-secondary {
874 --pk-secondary-font-size: 80%;
875 --pk-secondary-font-color: #6c757d;
876 font-size: var(--pk-secondary-font-size);
877 color: var(--pk-secondary-font-color);
878 }
879
880 .pk-font-heading {
881 --pk-heading-font-weight: 700;
882 --pk-heading-font-color: #212529;
883 font-weight: var(--pk-heading-font-weight);
884 color: var(--pk-heading-font-color);
885 }
886
887 /* Background */
888 /*--------------------------------------------------------------*/
889 .pk-bg-primary {
890 background-color: #007bff;
891 }
892
893 a.pk-bg-primary:hover, a.pk-bg-primary:focus,
894 button.pk-bg-primary:hover,
895 button.pk-bg-primary:focus {
896 background-color: #0062cc;
897 }
898
899 .pk-bg-secondary {
900 background-color: #A0A0A0;
901 }
902
903 a.pk-bg-secondary:hover, a.pk-bg-secondary:focus,
904 button.pk-bg-secondary:hover,
905 button.pk-bg-secondary:focus {
906 background-color: #878686;
907 }
908
909 .pk-bg-success {
910 background-color: #28a745;
911 }
912
913 a.pk-bg-success:hover, a.pk-bg-success:focus,
914 button.pk-bg-success:hover,
915 button.pk-bg-success:focus {
916 background-color: #1e7e34;
917 }
918
919 .pk-bg-info {
920 background-color: #17a2b8;
921 }
922
923 a.pk-bg-info:hover, a.pk-bg-info:focus,
924 button.pk-bg-info:hover,
925 button.pk-bg-info:focus {
926 background-color: #117a8b;
927 }
928
929 .pk-bg-warning {
930 background-color: #ffc107;
931 }
932
933 a.pk-bg-warning:hover, a.pk-bg-warning:focus,
934 button.pk-bg-warning:hover,
935 button.pk-bg-warning:focus {
936 background-color: #d39e00;
937 }
938
939 .pk-bg-danger {
940 background-color: #dc3545;
941 }
942
943 a.pk-bg-danger:hover, a.pk-bg-danger:focus,
944 button.pk-bg-danger:hover,
945 button.pk-bg-danger:focus {
946 background-color: #bd2130;
947 }
948
949 .pk-bg-light {
950 background-color: #f8f9fa;
951 }
952
953 a.pk-bg-light:hover, a.pk-bg-light:focus,
954 button.pk-bg-light:hover,
955 button.pk-bg-light:focus {
956 background-color: #dae0e5;
957 }
958
959 .pk-bg-dark {
960 background-color: #343a40;
961 }
962
963 a.pk-bg-dark:hover, a.pk-bg-dark:focus,
964 button.pk-bg-dark:hover,
965 button.pk-bg-dark:focus {
966 background-color: #1d2124;
967 }
968
969 .pk-bg-white {
970 --pk-bg-white: #fff;
971 background-color: var(--pk-bg-white);
972 }
973
974 .pk-bg-transparent {
975 --pk-bg-transparent: transparent;
976 background-color: var(--pk-bg-transparent);
977 }
978
979 /* Alerts */
980 /*--------------------------------------------------------------*/
981 .pk-alert {
982 --pk-alert-background: #f8f9fa;
983 --pk-alert-heading-color: inherit;
984 --pk-alert-close-color: #000;
985 --pk-alert-close-hover-color: #000;
986 --pk-alert-font-size: 0.875rem;
987 --pk-alert-link-font-weight: 700;
988 --pk-alert-close-font-size: 1rem;
989 --pk-alert-close-line-height: 1;
990 --pk-alert-close-text-shadow: 0 1px 0 #fff;
991 --pk-alert-close-opacity: .75;
992 }
993
994 /*--------------------------------------------------------------*/
995 .pk-alert {
996 position: relative;
997 padding: 0.5rem 1rem;
998 margin-bottom: 1rem;
999 background: var(--pk-alert-background);
1000 font-size: var(--pk-alert-font-size);
1001 }
1002
1003 .pk-alert a {
1004 text-decoration: underline;
1005 text-shadow: none;
1006 border: none;
1007 }
1008
1009 .pk-alert a:hover {
1010 text-decoration: none;
1011 text-shadow: none;
1012 border: none;
1013 }
1014
1015 .pk-alert p {
1016 margin-bottom: 0.5rem;
1017 }
1018
1019 .pk-alert > *:last-child {
1020 margin-bottom: 0;
1021 }
1022
1023 .pk-alert-multiline {
1024 padding: 1.25rem 1.75rem;
1025 }
1026
1027 .pk-alert-heading {
1028 color: var(--pk-alert-heading-color);
1029 }
1030
1031 .pk-alert-link {
1032 font-weight: var(--pk-alert-link-font-weight);
1033 }
1034
1035 .pk-alert-dismissible {
1036 padding-right: 4rem;
1037 }
1038
1039 .pk-alert-dismissible .pk-close {
1040 position: absolute;
1041 top: 0;
1042 right: 0;
1043 height: 100%;
1044 padding: 0 1rem;
1045 color: inherit;
1046 }
1047
1048 .pk-close {
1049 float: right;
1050 font-size: var(--pk-alert-close-font-size);
1051 line-height: var(--pk-alert-close-line-height);
1052 color: var(--pk-alert-close-color);
1053 text-shadow: var(--pk-alert-close-text-shadow);
1054 opacity: var(--pk-alert-close-opacity);
1055 }
1056
1057 .pk-close:hover, .pk-close:focus {
1058 color: var(--pk-alert-close-hover-color);
1059 text-decoration: none;
1060 opacity: 1;
1061 }
1062
1063 button.pk-close {
1064 padding: 0;
1065 text-decoration: none !important;
1066 border: none !important;
1067 -webkit-appearance: none !important;
1068 background-color: transparent !important;
1069 box-shadow: none !important;
1070 }
1071
1072 .pk-alert-primary {
1073 border-left: #007bff 2px solid;
1074 }
1075
1076 .pk-alert-primary .pk-icon-close,
1077 .pk-alert-primary .pk-alert-title {
1078 color: #0062cc;
1079 }
1080
1081 .pk-alert-secondary {
1082 border-left: #A0A0A0 2px solid;
1083 }
1084
1085 .pk-alert-secondary .pk-icon-close,
1086 .pk-alert-secondary .pk-alert-title {
1087 color: #878686;
1088 }
1089
1090 .pk-alert-success {
1091 border-left: #28a745 2px solid;
1092 }
1093
1094 .pk-alert-success .pk-icon-close,
1095 .pk-alert-success .pk-alert-title {
1096 color: #1e7e34;
1097 }
1098
1099 .pk-alert-info {
1100 border-left: #17a2b8 2px solid;
1101 }
1102
1103 .pk-alert-info .pk-icon-close,
1104 .pk-alert-info .pk-alert-title {
1105 color: #117a8b;
1106 }
1107
1108 .pk-alert-warning {
1109 border-left: #ffc107 2px solid;
1110 }
1111
1112 .pk-alert-warning .pk-icon-close,
1113 .pk-alert-warning .pk-alert-title {
1114 color: #d39e00;
1115 }
1116
1117 .pk-alert-danger {
1118 border-left: #dc3545 2px solid;
1119 }
1120
1121 .pk-alert-danger .pk-icon-close,
1122 .pk-alert-danger .pk-alert-title {
1123 color: #bd2130;
1124 }
1125
1126 .pk-alert-light {
1127 border-left: #f8f9fa 2px solid;
1128 }
1129
1130 .pk-alert-light .pk-icon-close,
1131 .pk-alert-light .pk-alert-title {
1132 color: #dae0e5;
1133 }
1134
1135 .pk-alert-dark {
1136 border-left: #343a40 2px solid;
1137 }
1138
1139 .pk-alert-dark .pk-icon-close,
1140 .pk-alert-dark .pk-alert-title {
1141 color: #1d2124;
1142 }
1143
1144 /* ToolTip */
1145 /*--------------------------------------------------------------*/
1146 .pk-tippy .pk-alert {
1147 display: none;
1148 }
1149
1150 .tippy-content .pk-alert {
1151 border: none;
1152 background: none;
1153 color: inherit;
1154 font-size: inherit;
1155 padding: 0;
1156 margin: 0;
1157 max-width: 600px;
1158 }
1159
1160 /* Badges */
1161 /*--------------------------------------------------------------*/
1162 .pk-badge {
1163 --pk-badge-background: #f8f9fa;
1164 --pk-badge-color: inherit;
1165 --pk-badge-primary-background: #00A0D2;
1166 --pk-badge-primary-color: #FFFFFF;
1167 --pk-badge-light-background: #FFFFFF;
1168 --pk-badge-light-color: #000000;
1169 --pk-badge-border-radius: 30px;
1170 --pk-badge-font-size: 75%;
1171 --pk-badge-line-height: 1;
1172 }
1173
1174 /*--------------------------------------------------------------*/
1175 .pk-badge {
1176 background: var(--pk-badge-background);
1177 color: var(--pk-badge-color);
1178 display: inline-block;
1179 padding: 0.3em 0.6em;
1180 font-size: var(--pk-badge-font-size);
1181 text-align: center;
1182 white-space: nowrap;
1183 vertical-align: baseline;
1184 border-radius: var(--pk-badge-border-radius);
1185 text-transform: uppercase;
1186 line-height: var(--pk-badge-line-height);
1187 }
1188
1189 .pk-badge:empty {
1190 display: none;
1191 }
1192
1193 .menu-item .pk-badge {
1194 margin-left: 0.5rem;
1195 }
1196
1197 .pk-button .pk-badge {
1198 position: relative;
1199 top: -1px;
1200 }
1201
1202 .pk-badge-primary {
1203 background: rgba(0, 123, 255, 0.1);
1204 color: #0056b3;
1205 }
1206
1207 .pk-badge-secondary {
1208 background: rgba(160, 160, 160, 0.1);
1209 color: #7a7a7a;
1210 }
1211
1212 .pk-badge-success {
1213 background: rgba(40, 167, 69, 0.1);
1214 color: #19692c;
1215 }
1216
1217 .pk-badge-info {
1218 background: rgba(23, 162, 184, 0.1);
1219 color: #0f6674;
1220 }
1221
1222 .pk-badge-warning {
1223 background: rgba(255, 193, 7, 0.1);
1224 color: #ba8b00;
1225 }
1226
1227 .pk-badge-danger {
1228 background: rgba(220, 53, 69, 0.1);
1229 color: #a71d2a;
1230 }
1231
1232 .pk-badge-light {
1233 background: rgba(248, 249, 250, 0.1);
1234 color: #cbd3da;
1235 }
1236
1237 .pk-badge-dark {
1238 background: rgba(52, 58, 64, 0.1);
1239 color: #121416;
1240 }
1241
1242 .pk-badge-primary {
1243 background: var(--pk-badge-primary-background);
1244 color: var(--pk-badge-primary-color);
1245 }
1246
1247 .pk-badge-light {
1248 background: var(--pk-badge-light-background);
1249 color: var(--pk-badge-light-color);
1250 }
1251
1252 /* Tippy */
1253 /*--------------------------------------------------------------*/
1254 .tippy-tooltip {
1255 color: #fff;
1256 }
1257
1258 .tippy-tooltip a {
1259 text-decoration: underline;
1260 color: inherit;
1261 }
1262
1263 .tippy-tooltip a:hover {
1264 text-decoration: none;
1265 color: inherit;
1266 }
1267
1268 /* Flickity */
1269 /*--------------------------------------------------------------*/
1270 [pk-flickity="init"] {
1271 --pk-flickity-button-background: hsla(0, 0%, 100%, 0.75);
1272 --pk-flickity-button-color: #333;
1273 --pk-flickity-button-hover-background: white;
1274 --pk-flickity-button-focus-box-shadow: 0 0 0 5px #19F;
1275 --pk-flickity-button-active-opacity: 0.6;
1276 --pk-flickity-button-disabled-opacity: 0.3;
1277 --pk-flickity-button-icon-fill: #333;
1278 --pk-flickity-prev-next-border-radius: 50%;
1279 --pk-flickity-page-info-font-size: .75rem;
1280 --pk-flickity-page-info-line-height: 1;
1281 --pk-flickity-dot-width: 10px;
1282 --pk-flickity-dot-height: 10px;
1283 --pk-flickity-dot-margin: 0 3px;
1284 --pk-flickity-dot-background: #333;
1285 --pk-flickity-dot-border-radius: 50%;
1286 --pk-flickity-dot-opacity: 0.25;
1287 }
1288
1289 [pk-flickity="init"].flickity-enabled {
1290 position: relative;
1291 padding-bottom: 0;
1292 }
1293
1294 [pk-flickity="init"].flickity-enabled:focus {
1295 outline: none;
1296 }
1297
1298 [pk-flickity="init"].flickity-enabled.is-animate .flickity-viewport {
1299 transition: height 0.2s;
1300 }
1301
1302 [pk-flickity="init"].flickity-enabled.is-draggable {
1303 -webkit-tap-highlight-color: transparent;
1304 -webkit-user-select: none;
1305 -moz-user-select: none;
1306 -ms-user-select: none;
1307 user-select: none;
1308 }
1309
1310 [pk-flickity="init"].flickity-enabled.is-draggable .flickity-viewport {
1311 cursor: move;
1312 cursor: -webkit-grab;
1313 cursor: grab;
1314 }
1315
1316 [pk-flickity="init"].flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
1317 cursor: -webkit-grabbing;
1318 cursor: grabbing;
1319 }
1320
1321 [pk-flickity="init"] .flickity-viewport {
1322 overflow: hidden;
1323 position: relative;
1324 height: 100%;
1325 }
1326
1327 [pk-flickity="init"] .flickity-slider {
1328 position: absolute;
1329 width: 100%;
1330 height: 100%;
1331 }
1332
1333 [pk-flickity="init"] .flickity-button {
1334 position: absolute;
1335 background: var(--pk-flickity-button-background);
1336 border: none;
1337 color: var(--pk-flickity-button-color);
1338 }
1339
1340 [pk-flickity="init"] .flickity-button:hover {
1341 background: var(--pk-flickity-button-hover-background);
1342 cursor: pointer;
1343 }
1344
1345 [pk-flickity="init"] .flickity-button:focus {
1346 outline: none;
1347 box-shadow: var(--pk-flickity-button-focus-box-shadow);
1348 }
1349
1350 [pk-flickity="init"] .flickity-button:active {
1351 opacity: var(--pk-flickity-button-active-opacity);
1352 }
1353
1354 [pk-flickity="init"] .flickity-button:disabled {
1355 opacity: var(--pk-flickity-button-disabled-opacity);
1356 cursor: auto;
1357 /* prevent disabled button from capturing pointer up event. #716 */
1358 pointer-events: none;
1359 }
1360
1361 [pk-flickity="init"] .flickity-button-icon {
1362 fill: var(--pk-flickity-button-icon-fill);
1363 }
1364
1365 [pk-flickity="init"] .flickity-prev-next-button {
1366 top: 50%;
1367 width: 44px;
1368 height: 44px;
1369 border-radius: var(--pk-flickity-prev-next-border-radius);
1370 /* vertically center */
1371 margin-top: -22px;
1372 }
1373
1374 [pk-flickity="init"] .flickity-prev-next-button.previous {
1375 left: 1rem;
1376 }
1377
1378 [pk-flickity="init"] .flickity-prev-next-button.next {
1379 right: 1rem;
1380 }
1381
1382 [pk-flickity="init"] .flickity-rtl .flickity-prev-next-button.previous {
1383 left: auto;
1384 right: 10px;
1385 }
1386
1387 [pk-flickity="init"] .flickity-rtl .flickity-prev-next-button.next {
1388 right: auto;
1389 left: 10px;
1390 }
1391
1392 [pk-flickity="init"] .flickity-prev-next-button .flickity-button-icon {
1393 position: absolute;
1394 left: 30%;
1395 top: 30%;
1396 width: 40%;
1397 height: 40%;
1398 }
1399
1400 [pk-flickity="init"] [data-sg-page-info="true"],
1401 [pk-flickity="init"] [data-sg-page-dots="true"] {
1402 padding-bottom: 50px;
1403 }
1404
1405 [pk-flickity="init"] [data-sg-page-info="true"] .flickity-prev-next-button,
1406 [pk-flickity="init"] [data-sg-page-dots="true"] .flickity-prev-next-button {
1407 /* vertically center */
1408 margin-top: -52px;
1409 }
1410
1411 [pk-flickity="init"] .flickity-pages {
1412 position: relative;
1413 }
1414
1415 [pk-flickity="init"] .flickity-page-info {
1416 position: absolute;
1417 top: 50%;
1418 right: 0;
1419 transform: translateY(-50%);
1420 display: flex;
1421 align-items: center;
1422 font-size: var(--pk-flickity-page-info-font-size);
1423 line-height: var(--pk-flickity-page-info-line-height);
1424 }
1425
1426 [pk-flickity="init"] .flickity-page-info span:not(:last-child) {
1427 margin-right: .25rem;
1428 }
1429
1430 [pk-flickity="init"] .flickity-page-dots {
1431 padding: 1rem 3rem 0;
1432 list-style: none;
1433 text-align: center;
1434 list-style: none;
1435 text-align: center;
1436 line-height: 1;
1437 display: flex;
1438 justify-content: center;
1439 align-items: center;
1440 margin: 0;
1441 }
1442
1443 [pk-flickity="init"] .flickity-rtl .flickity-page-dots {
1444 direction: rtl;
1445 }
1446
1447 [pk-flickity="init"] .flickity-page-dots .dot {
1448 display: inline-block;
1449 width: var(--pk-flickity-dot-width);
1450 height: var(--pk-flickity-dot-height);
1451 margin: var(--pk-flickity-dot-margin);
1452 background: var(--pk-flickity-dot-background);
1453 border-radius: var(--pk-flickity-dot-border-radius);
1454 opacity: var(--pk-flickity-dot-opacity);
1455 cursor: pointer;
1456 }
1457
1458 [pk-flickity="init"] .flickity-page-dots .dot.is-selected {
1459 opacity: 1;
1460 }
1461