PluginProbe
WP Directory Kit / 1.5.9
WP Directory Kit v1.5.9
1.5.9 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 trunk 1.1.0 1.1.6 1.1.8 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.8 All 37 releases
wpdirectorykit / public / css / wpdirectorykit-public.scss

wpdirectorykit-public.scss in WP Directory Kit 1.5.9, at public/css/wpdirectorykit-public.scss

2,138 lines 47.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 $color_hover: #0074e4;
2 $primary_color: #0074e4;
3 $secondary_color: #0052a2;
4 $text_color: #161616;
5
6 body {
7 overflow-x: hidden;
8 z-index: 0;
9 position: relative;
10 }
11
12 .wdk-listing-card {
13
14 & {
15 display: flex;
16 flex-direction: column;
17 overflow: hidden;
18 }
19
20 &.list {
21 display: flex;
22 flex-direction: row;
23 }
24
25 &.grid .wdk-thumbnail {
26 flex: initial !important;
27 }
28
29 &.list .wdk-content {
30 display: flex;
31 flex-direction: column;
32 flex: 1 2 auto
33 }
34
35 &.list .wdk-content .wdk-features-part {
36 -webkit-flex: 1 2 auto;
37 flex: 1 2 auto;
38 white-space: normal;
39 }
40
41 &.list .wdk-thumbnail {
42 flex: 0 0 270px;
43 font-size: 0;
44 overflow: hidden;
45 min-height: 180px;
46 }
47
48 .agent_logo_link {
49 display: inline-block;
50 .agent_logo {
51 display: block;
52 }
53 }
54
55 .agent_logo {
56 max-width: 40px;
57 max-height: 40px;
58 }
59
60 .wdk-thumbnail .wdk-image.media {
61 position: relative;
62 z-index: 15;
63 background-color: #000;
64
65 iframe,video {
66 height: 100% !important;
67 }
68 }
69
70 .wdk-thumbnail .wdk-image {
71 width: 100%;
72 height: 16vw;
73 object-fit: cover;
74 }
75
76 &.list .wdk-thumbnail .wdk-image {
77 width: 100%;
78 height: 100%;
79 object-fit: cover;
80 position: absolute;
81 height: 100% !important;
82 }
83
84 &{
85 background: #fff;
86 box-shadow: 0 0 10px rgba(1, 1, 1, 0.11);
87 }
88
89 .wdk-thumbnail .wdk-thumbnail_link {
90 position: absolute;
91 bottom: 0;
92 left: 0;
93 right: 0;
94 top: 0;
95 height: 100%;
96 width: 100%;
97 z-index: 10;
98 }
99
100 .wdk-thumbnail {
101 position: relative;
102 font-size: 0;
103 }
104
105 .wdk-thumbnail .wdk-over-image-bottom,
106 .wdk-thumbnail .wdk-over-image-top {
107 position: absolute;
108 color: #fff;
109 font-size: 12px;
110 font-weight: 600;
111 z-index: 21;
112 }
113
114 .wdk-thumbnail .wdk-over-image-top {
115 margin: 18px 17px;
116 top: 0;
117 left: 0;
118 }
119
120 .wdk-divider {
121 border-bottom: 1px solid #e7e7e7;
122 margin: 19px 20px 0;
123 }
124
125 .wdk-thumbnail .wdk-over-image-bottom {
126 bottom: 0;
127 left: 0;
128 width: 100%;
129 padding: 13px 21px 13px;
130 background-color: rgba(0, 0, 0, 0.32);
131 font-weight: 800;
132 text-transform: uppercase;
133 .wdk-item {
134 line-height: 1.5;
135 }
136 }
137
138 .wdk-thumbnail .wdk-over-image-top span {
139 top: 0;
140 left: 0;
141 padding: 4px 20px 8px;
142 background-color: #0074e4;
143 margin: 2px 4px;
144 font-size: 11px;
145 text-transform: uppercase;
146 padding: 4px 12px;
147 border-radius: 3px;
148 display: inline-block;
149 }
150
151 .wdk-thumbnail:before,
152 .wdk-thumbnail:after {
153 content: '';
154 position: absolute;
155 top: 0;
156 left: 0;
157 width: 50%;
158 height: 100%;
159 background: rgba(0, 82, 162, 0.95);
160 opacity: 0;
161 visibility: hidden;
162 transition: all 0.4s ease-in-out;
163 z-index: 1;
164 }
165 .wdk-thumbnail:after {
166 right: 0;
167 left: auto;
168 }
169
170 .overlay {
171 position: absolute;
172 left: 0;
173 right: 0;
174 top: 0;
175 bottom: 0;
176 background: rgba(0, 82, 162, 0.7);
177 opacity: 0;
178 transition: all 0.4s ease-in-out;
179 }
180
181 &:hover .wdk-thumbnail::before,
182 &:hover .wdk-thumbnail::after {
183 opacity: 1;
184 visibility: visible;
185 width: 0;
186 }
187
188 &:hover .overlay {
189 opacity: 1;
190 }
191
192 .wdk-title .title {
193 span {
194 display: -webkit-box;
195 -webkit-box-orient: vertical;
196 overflow: hidden;
197 }
198 &{
199 color: $text_color;
200 font-weight: 700;
201 margin-top: 0;
202 margin-bottom: 0;
203 font-size: 18px;
204 padding: 15px 20px 0;
205 }
206 &:hover {
207 color: $color_hover;
208 }
209 }
210
211 .wdk-title .title a:hover,
212 .wdk-title .title a {
213 color: inherit
214 }
215
216 .wdk-subtitle-part {
217 color: #a3a3a3;
218 padding: 3px 20px 8px;
219 font-size: 13px;
220 font-weight: 300;
221
222 .wdk-stroke {
223 display: -webkit-box;
224 -webkit-box-orient: vertical;
225 -webkit-line-clamp: 1;
226 overflow: hidden;
227
228 span {
229 display: inline;
230 }
231 }
232 }
233
234 .wdk-sublistings-part{
235 color: #000;
236 padding: 3px 20px 8px;
237 font-size: 13px;
238 font-weight: 300;
239
240 > span {
241 overflow: hidden;
242 text-overflow: ellipsis;
243 display: -webkit-box;
244 -webkit-line-clamp: 3;
245 -webkit-box-orient: vertical;
246 }
247
248 ul>li {
249 padding: 10px 0;
250 display: flex;
251 align-items: center;
252 flex-wrap: wrap;
253 overflow: hidden;
254 justify-content: space-between;
255
256 span,a {
257
258 }
259 }
260
261 ul>li:not(:last-child) {
262 border-bottom: 1px solid #eee;
263 }
264
265 a {
266 transition: all .15s;
267 font-weight: 500;
268 &:hover {
269 color: #0074e4;
270 }
271 }
272
273 .stars-lst {
274 display: inline-block;
275 padding-right: 1px;
276 span {
277 display: inline-block;
278 margin: 0;
279 margin-right: -2px;
280
281 i {
282 display: inline-block;
283 color: #f3b00f;
284 font-size: 13px;
285
286 &.innactive {
287 color: #aaa;
288 }
289 }
290
291 img {
292 display: inline-block;
293 margin: 0;
294 margin-right: -2px;
295 max-width: 15px;
296 max-height: 15px;
297 }
298 }
299 }
300
301 }
302
303 .wdk-features-part {
304 color: $text_color;
305 font-size: 13px;
306 font-weight: 400;
307 padding-top: 0;
308 margin: 0 20px;
309 display: block;
310 text-overflow: ellipsis;
311 white-space: nowrap;
312 max-width: 100%;
313 overflow: hidden;
314 padding-bottom: 3px;
315 .wdk-icon {
316 max-height: 16px;
317 max-width: 16px;
318 margin-right: 3px;
319 display: inline-block;
320 }
321
322
323 span.wdk-field-item span {
324 &:before {
325 display: none !important;
326 }
327
328 margin: initial !important;
329 top: initial !important;
330 }
331 }
332
333 .wdk-features-part span {
334 margin-right: 2px;
335 position: relative;
336 top: 3px;
337 }
338
339 .wdk-features-part span:not(:empty):not(:first-child)::before {
340 content: '\2022';
341 position: initial;
342 display: inline-block;
343 line-height: 15px;
344 padding: 0 4px 0 4px;
345 background: initial;
346 font-size: 14px;
347 }
348
349 .wdk-footer {
350 display: flex;
351 }
352
353 .wdk-footer .wdk-left {
354 flex: 1 2 auto;
355 }
356
357 .wdk-footer .wdk-right {
358 flex: 0 0;
359 display: flex;
360 justify-content: center;
361 align-content: center;
362 align-items: center;
363 }
364
365 .wdk-footer .wdk-btn {
366 text-align: center;
367 font-size: 18px;
368 padding: 10px 20px;
369 display: flex;
370 justify-content: center;
371 align-content: center;
372 align-items: center;
373 color: $text_color;
374 }
375
376 .wdk-footer .wdk-btn:hover {
377 color: $color_hover;
378 }
379
380 .wdk-footer .wdk-price {
381 color: $color_hover;
382 font-size: 22px;
383 padding: 10px 20px;
384 font-weight: 500;
385 }
386
387 &.is_featured .wdk-thumbnail .wdk-over-image-bottom {
388 background-color: #0074e494;
389 }
390
391 &.is_featured {
392 box-shadow: 0 0 10px #0074e475;
393 }
394
395 &.list .wdk-subtitle-part {
396 padding: 15px 20px 8px;
397 }
398
399 .wdk-thumbnail .wdk-over-image-bottom .wdk-favorites-actions {
400 float: right;
401 margin-left: 10px;
402 }
403
404 .wdk-thumbnail .wdk-over-image-bottom .wdk-compare-listing-button-actions {
405 float: right;
406 margin-top: -2px;
407 margin-bottom: -2px;
408
409 .fa-custom-ajax-indicator {
410 margin-top: 4px;
411 }
412 }
413
414 .wdk-thumbnail .wdk-over-image-bottom .wdk-compare-listing-button-actions a {
415 color: #fff;
416 }
417
418 .wdk-thumbnail .wdk-compare-listing-button-actions.loading .fa-custom-ajax-indicator {
419 margin-top: 2px;
420 }
421
422 .wdk-thumbnail .wdk-favorites-actions .fa-custom-ajax-indicator {
423 margin-top: 0;
424 }
425
426
427 .wdk-listing-item-agent {
428 display: flex;
429 flex-wrap: nowrap;
430 gap: 15px;
431 padding: 5px 15px;
432 align-items: center;
433 color: #000;
434 .agent-thumbnail {
435 a {
436 display: block;
437 }
438 img {
439 max-width: 70px;
440 max-height: 70px;
441 }
442 }
443
444 .agent-cont {
445 flex: 1 2 auto;
446 overflow: hidden;
447 gap: 5px;
448 display: flex;
449 flex-direction: column;
450 color: #000;
451 .by {
452 font-size: 14px;
453 }
454
455 .title {
456 color: #000;
457 margin: 0;
458 font-size: 18px;
459 font-weight: 600;
460 }
461 }
462 }
463 }
464
465 .wdk-listing-card.is_multiline_enabled .wdk-features-part {
466 text-overflow: initial;
467 white-space: initial;
468 overflow: initial;
469 flex-wrap: wrap;
470 >span {
471 display: inline-block;
472 }
473 }
474
475
476 .view-list .wdk-row .wdk-col {
477 -webkit-flex: 0 0 calc(100% / 1) !important;
478 -ms-flex: 0 0 calc(100% / 1) !important;
479 flex: 0 0 calc(100% / 1) !important;
480 }
481
482 .wdk-filter-head {
483 &{
484 display: flex;
485 align-items: center;
486 justify-content: space-between;
487 margin: -25px -10px;
488 padding-bottom: 15px;
489 color: $text_color;
490 font-size: 14px;
491 -webkit-flex-wrap: wrap;
492 flex-wrap: wrap;
493 }
494
495 .filter-group {
496 padding: 15px 10px;
497 display: flex;
498 align-items: center;
499 justify-content: flex-start;
500
501 &.filter-status {
502 color: #161616;
503 font-size: 14px;
504 &>span {
505 color: inherit;
506 font-size: inherit;
507 }
508 }
509 }
510
511 .filter-group select {
512 border: 0;
513 color: #80868c;
514 font-size: 15px;
515 font-weight: 300;
516 }
517
518 .filter-group.wmvc-view-type {
519 flex: 1 2 auto;
520 }
521
522 .filter-group.wmvc-view-type a {
523 display: inline-flex;
524 padding: 3px 5px;
525 color: $text_color;
526 align-items: center;
527 justify-content: center;
528 }
529
530 .filter-group.wmvc-view-type a.active,
531 .filter-group.wmvc-view-type a:hover {
532 color: $color_hover;
533 }
534 }
535
536
537 /* pagination */
538 .wdk-pagination.pagination {
539 & {
540 margin-top: 25px;
541 margin-bottom: 0;
542 display: flex;
543 }
544
545 .displaying-num {
546 display: flex;
547 justify-content: center;
548 align-items: center;
549 margin-right: 10px;
550 }
551
552 .nav-links > *.wdk_pages_range
553 {
554 border: 0;
555 }
556
557 .nav-links > *.disabled
558 {
559 cursor: not-allowed;
560 pointer-events: all !important;
561 }
562
563 .nav-links {
564 & {
565 display: -ms-flexbox;
566 display: flex;
567 padding-left: 0;
568 border-radius: .25rem;
569 flex-wrap: wrap;
570 }
571
572 & >* {
573 display: inline-block;
574 margin-right: 10px;
575 margin-bottom: 10px;
576 }
577
578 & >*:first-child,
579 & >*:last-child {
580 border-radius: 100px;
581 }
582
583 & >*:last-child {
584 margin-right: 0;
585 }
586
587 & >* {
588 position: relative;
589 display: flex;
590 justify-content: center;
591 align-items: center;
592 width: 40px;
593 height: 40px;
594 border: 1px solid #e1e2e6;
595 color: #7e7f82;
596 background-color: white;
597 font-size: 14px;
598 text-align: center;
599 text-decoration: none !important;
600 transition: border-color .3s, color .3s, background-color .3s;
601 border-radius: 100px;
602 }
603
604 & >*.current,
605 & >*:hover {
606 border-color: $color_hover;
607 color: $color_hover;
608 background-color: inherit;
609 }
610
611 & >*> span {
612 width: initial;
613 height: initial;
614 border: initial;
615 color: inherit;
616 background-color: initial;
617 font-size: inherit;
618 text-align: inherit;
619 line-height: initial;
620 margin-right: initial;
621 }
622
623 .wdk_pages_range {
624 white-space: nowrap;
625 }
626 }
627 }
628
629 /* end pagination */
630
631 /* alerts css */
632 body .wdk_alert a {
633 text-decoration: underline !important;
634 text-underline-offset: 2px;
635 color: inherit;
636 }
637
638 .wdk_alert {
639 &{
640 position: relative;
641 padding: .75rem 1.25rem;
642 margin-bottom: 1rem;
643 border: 1px solid transparent;
644 border-radius: .25rem;
645 width: 100%;
646 }
647
648 a {
649 text-decoration: underline !important;
650 text-underline-offset: 2px;
651 color: inherit;
652 }
653
654 &.wdk_alert-primary {
655 color: #004085;
656 background-color: #cce5ff;
657 border-color: #b8daff;
658 }
659 &.wdk_alert-secondary {
660 color: #383d41;
661 background-color: #e2e3e5;
662 border-color: #d6d8db;
663 }
664 &.wdk_alert-success {
665 color: #155724;
666 background-color: #d4edda;
667 border-color: #c3e6cb;
668 }
669 &.wdk_alert-danger {
670 color: #721c24;
671 background-color: #f8d7da;
672 border-color: #f5c6cb;
673 }
674 &.wdk_alert-warning {
675 color: #856404;
676 background-color: #fff3cd;
677 border-color: #ffeeba;
678 }
679 &.wdk_alert-info {
680 color: #0c5460;
681 background-color: #d1ecf1;
682 border-color: #bee5eb;
683 }
684 &.wdk_alert-light {
685 color: #818182;
686 background-color: #fefefe;
687 border-color: #fdfdfe;
688 }
689 &.wdk_alert-dark {
690 color: #1b1e21;
691 background-color: #d6d8d9;
692 border-color: #c6c8ca;
693 }
694 }
695
696 .wdk_label {
697 &{
698 position: relative;
699 padding: .75rem 1.25rem;
700 margin-bottom: 1rem;
701 border: 1px solid transparent;
702 border-radius: .25rem;
703 display: inline-block;
704 }
705
706 &.wdk_label-primary {
707 color: #004085;
708 background-color: #cce5ff;
709 border-color: #b8daff;
710 }
711 &.wdk_label-secondary {
712 color: #383d41;
713 background-color: #e2e3e5;
714 border-color: #d6d8db;
715 }
716 &.wdk_label-success {
717 color: #155724;
718 background-color: #d4edda;
719 border-color: #c3e6cb;
720 }
721 &.wdk_label-danger {
722 color: #721c24;
723 background-color: #f8d7da;
724 border-color: #f5c6cb;
725 }
726 &.wdk_label-warning {
727 color: #856404;
728 background-color: #fff3cd;
729 border-color: #ffeeba;
730 }
731 &.wdk_label-info {
732 color: #0c5460;
733 background-color: #d1ecf1;
734 border-color: #bee5eb;
735 }
736 &.wdk_label-light {
737 color: #818182;
738 background-color: #fefefe;
739 border-color: #fdfdfe;
740 }
741 &.wdk_label-dark {
742 color: #1b1e21;
743 background-color: #d6d8d9;
744 border-color: #c6c8ca;
745 }
746 }
747 /* end alerts css */
748
749 /* wdk-field */
750
751 .wdk-search {
752 & {
753 position: relative;
754 }
755
756 &:not(.ai_search_enable) {
757 .wdk-field-group-ai-search {
758 display: none !important;
759 }
760 }
761
762 &.section_more_before_buttons {
763 .wdk-col-btns {
764 order: 100;
765 }
766
767 }
768
769 .wdk-search-tabs {
770 position: absolute;
771 bottom: 100%;
772 margin-bottom: 20px;
773 max-width: 100%;
774 left: 0;
775 font-size: 0;
776 label {
777 position: relative;
778 background: #fff;
779 color: #000;
780 padding: 12px 60px;
781 display: inline-block;
782 cursor: pointer;
783 font-size: 15px;
784 font-family: "Montserrat";
785 margin: 3px 4px;
786 transition: all .15s;
787 font-weight: 300;
788 border-radius: 0;
789 &:hover {
790 background: #0A2138;
791 color: #fff;
792 }
793 transition: all .15s;
794
795 &:after {
796 content: '';
797 position: absolute;
798 width: 0;
799 height: 0;
800 border-left: 7px solid transparent;
801 border-right: 7px solid transparent;
802 border-top: 7px solid #fff;
803 top: 100%;
804 left: 50%;
805 margin-left: -5px;
806 transition: all .15s;
807 }
808
809 &:hover:after {
810 border-top-color: #0a2138;
811 }
812 }
813
814 input {
815 display: none;
816 }
817
818 input:checked + label {
819 background: #0A2138;
820 color: #fff;
821 }
822
823 input:checked + label:after {
824 border-top-color: #0a2138;
825 }
826
827 label:first-of-type {
828 margin-left: 0 !important;
829 }
830
831 label:last-of-type {
832 margin-right: 0 !important;
833 }
834
835 @media (max-width: 767px) {
836 position: initial;
837 flex-wrap: wrap;
838 justify-content: space-between;
839 margin-left: -5px;
840 margin-right: -5px;
841 width: initial;
842 max-width: initial;
843 display: flex;
844
845 label::after {
846 display: none;
847 }
848
849 label {
850 flex: 2 1 auto;
851 margin: 5px 5px;
852 text-align: center;
853 }
854
855
856 label:first-of-type {
857 margin-left: 5px !important;
858 }
859
860 label:last-of-type {
861 margin-right: 5px !important;
862 }
863
864 }
865 }
866
867 &:not(.layout_inline) .wdk-search-tabs {
868 width: 100%;
869 text-align: center;
870
871 label {
872 background: #0074e4;
873 color: #fff;
874 padding: 5px 12px;
875 &:hover {
876 background: #0A2138;
877 }
878 transition: all .15s;
879
880 &:after {
881 border-top: 7px solid #0074e4;
882 }
883
884 &:hover:after {
885 border-top-color: #0A2138;
886 }
887 }
888
889 }
890
891 .wdk-field.CHECKBOX .wdk-field-label {
892 padding: 3px 0;
893 }
894
895 .wdk-field-label {
896 padding: 7px 0px 0 9px;
897 }
898
899 .min_max_row {
900 flex-wrap: nowrap !important;
901 }
902
903 .min_max_row .wdk-col.wdk-col-6 {
904 flex: 0 50% !important;
905 width: initial !important;
906 }
907
908 &.layout_inline .min_max_wdk-field {
909 /*flex: 10000 0 !important;*/
910 min-width: 160px;
911 }
912
913 &.layout_inline .wdk-field {
914 display: flex;
915 align-items: flex-end;
916 flex-direction: row;
917 }
918
919 &.layout_inline .wdk-field.CHECKBOX {
920 align-items: flex-end;
921 }
922
923 .wdk-col-btns {
924 align-items: flex-end;
925 display: flex;
926 }
927
928 &.layout_inline .wdk-field .wdk-field-group {
929 flex: 1 2 auto;
930 }
931
932 &.layout_inline .wdk-field .wdk-field-label,
933 &.layout_inline .wdk-field .wdk-field-group {
934 margin-left: 0 !important;
935 margin-right: 0 !important;
936 }
937
938 &.layout_inline .wdk-field .wdk-field-label {
939 padding-right: 10px;
940 padding-top: 10px;
941 }
942
943 .wdk-field.wdk-field-btn {
944 display: flex;
945 flex-direction: column;
946 }
947
948 #wdk-form-additional {
949 display: block;
950 flex: 0 0 calc(100%) !important;
951 width: 100%;
952
953 }
954
955 #wdk-form-additional .wdk-row .wdk-col.CHECKBOX:first-child .wdk-field-label {
956 padding-left: 0;
957 }
958
959 .wdk-field select:not(.sel_class),
960 .wdk_dropdown_tree > .btn-group:not(.sel_class) .btn {
961 color: #9f9898ed !important;
962 }
963
964 input::-webkit-placeholder {
965 color: #9f9898ed;
966 opacity: 1;
967 }
968
969 input::-moz-placeholder {
970 color: #9f9898ed;
971 opacity: 1;
972 }
973
974 input::placeholder {
975 color: #9f9898ed;
976 opacity: 1;
977 }
978
979 /* inline */
980 &.layout_inline .wdk-row div.wdk-col {
981 width: auto;
982 -webkit-flex: 1 2 150px;
983 flex: 1 2 150px;
984 padding-left: 0;
985 padding-right: 0;
986 margin-bottom: 0;
987 }
988
989 &.layout_inline .wdk-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), &.layout_inline .wdk-field select,
990 &.layout_inline .wdk-field input,
991 &.layout_inline .wdk-row div.wdk-col .wdk-field input[type="text"]="text""] {
992 //border-radius: 0 0 0 0;
993 }
994
995 &.layout_inline .wdk-row .wdk-field-btn {
996 margin-left: 0;
997 margin-right: 0;
998 display: flex;
999 flex-direction: row;
1000 margin-bottom: 0;
1001 }
1002
1003 &.layout_inline .wdk-row .wdk-col:not(.wdk-field) {
1004 width: auto;
1005 -webkit-flex: 0 0 auto;
1006 flex: 0 0 auto;
1007 }
1008
1009 &.layout_inline .wdk-row .wdk-field-btn .wdk-field-group {
1010 padding-left: 0;
1011 padding-right: 0;
1012 width: auto;
1013 -webkit-flex: 0 0 auto;
1014 flex: 0 0 auto;
1015 margin-bottom: 0;
1016 }
1017
1018 &.layout_inline .wdk-field button.wdk-search-additional-btn,
1019 &.layout_inline .wdk-field button.wdk-search-start,
1020 &.layout_inline .wdk-row .wdk-field button.wdk-search-additional-btn {
1021 border-radius: 0 0 0 0;
1022 }
1023
1024 &.layout_inline .wdk-row {
1025 margin-left: 0;
1026 margin-right: 0;
1027 margin-bottom: 0;
1028 }
1029
1030 .wdk-field-btn .wdk-field-group {
1031 margin-bottom: 10px;
1032 }
1033
1034 .wdk-field.MORE {
1035 width: 100% !important;
1036 padding: 0 !important;
1037 margin: 0 !important;
1038 }
1039
1040 /* [START] Search form Edit Control */
1041
1042 &:hover .section-widget-control {
1043 opacity: 1;
1044 visibility: visible;
1045 }
1046
1047 .section-widget-control {
1048 position: absolute;
1049 right: -15px;
1050 top: -15px;
1051 z-index: 100;
1052 opacity: 0;
1053 visibility: hidden;
1054 -webkit-transition: all .5s;
1055 -o-transition: all .5s;
1056 transition: all .5s;
1057 font-size: 0;
1058 z-index: 1;
1059 &.right {
1060 z-index: 0;
1061 right: initial;
1062 left: 100%;
1063 top: 0;
1064 }
1065
1066 &.right .wdk-c-btn {
1067 height: 46px;
1068 padding: 10px 10px;
1069 display: flex;
1070 align-items: center;
1071 justify-content: center;
1072 }
1073 }
1074 .section-widget-control .wdk-c-btn {
1075 display: inline-block;
1076 padding: 5px 5px;
1077 color: white;
1078 -webkit-transition: all .5s;
1079 -o-transition: all .5s;
1080 transition: all .5s;
1081 z-index: 1;
1082 }
1083
1084 .section-widget-control .wdk-save-search-button {
1085 z-index: 0;
1086 .fas {
1087 font-family: 'FontAwesome';
1088 color: #fff;
1089 font-size: 16px;
1090 }
1091 }
1092
1093 .section-widget-control .wdk-c-save {
1094 background-color: #31f731;
1095 border-color: #31f731;
1096 }
1097
1098 .section-widget-control .wdk-c-save:hover {
1099 background-color: #27bd27;
1100 border-color: #27bd27;
1101 }
1102
1103 .section-widget-control .wdk-c-edit {
1104 background-color: #F9B418;
1105 border-color: #F9B418;
1106 }
1107
1108 .section-widget-control .wdk-c-edit:hover {
1109 background-color: #e78800;
1110 border-color: #e78800;
1111 }
1112
1113 .widget-with-control .section-widget-control {
1114 opacity: 0;
1115 -webkit-transition: all .5s;
1116 -o-transition: all .5s;
1117 transition: all .5s;
1118 }
1119
1120 .widget-with-control:hover .section-widget-control {
1121 opacity: 1;
1122 }
1123
1124 .widget-with-control .form-horisontal.wdk_search_form {
1125 position: relative;
1126 }
1127
1128 .widget-with-control .form-horisontal.wdk_search_form .section-widget-control {
1129 right: 20px;
1130 bottom: calc(100% - 27px);
1131 }
1132
1133 .side-search-form.widget-with-control {
1134 position: relative;
1135 }
1136
1137 .side-search-form.widget-with-control .section-widget-control {
1138 right: 0;
1139 top: 0;
1140 }
1141
1142 /* [End] Search form Edit Control */
1143
1144 }
1145
1146 /* shortcode */
1147
1148 .wdk-shortcode {
1149 .wdk-listings-list .wdk-row .wdk-col {
1150 padding: 0 0;
1151 }
1152 }
1153
1154 .wdk-element .wdk-search.layout_inline .wdk-field {
1155 .wdk-field-group {
1156 position: relative;
1157 }
1158
1159 &.LOCATION,
1160 &.CATEGORY {
1161 min-width: 185px;
1162 }
1163 }
1164
1165 .wdk-field {
1166 .wdk-field-group {
1167 position: relative;
1168 width: 100%;
1169 }
1170
1171 &.LOCATION,
1172 &.CATEGORY {
1173 min-width: 185px;
1174 }
1175
1176 &.LOCATION .wdk-field-group,
1177 &.CATEGORY .wdk-field-group {
1178 max-width: 100%;
1179 .select2 {
1180 overflow: hidden;
1181 min-height: 46px;
1182 }
1183 }
1184
1185 &.CHECKBOX {
1186 align-items: flex-end;
1187 }
1188
1189 &.CHECKBOX .wdk-field-label {
1190 padding: 3px 10px;
1191 }
1192
1193 &.CHECKBOX .wdk-field-label input {
1194 position: relative;
1195 top: -1px;
1196 }
1197
1198 &{
1199 display: flex;
1200 flex-wrap: wrap;
1201 flex-direction: column;
1202 justify-content: flex-start;
1203 margin-bottom: 10px;
1204 }
1205
1206 .wdk-field-label {
1207 display: block;
1208 margin-bottom: 10px;
1209 text-align: left;
1210 width: 100%;
1211 cursor: pointer;
1212 }
1213
1214 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
1215 .select2.select2-container,
1216 select.form-control[multiple]],
1217 select[multiple]],
1218 select {
1219 height: 46px;
1220 padding: 0 10px;
1221 width: 100%;
1222 color: #000;
1223 font-size: 15px;
1224 font-family: "Montserrat";
1225 font-weight: 300;
1226 border: 1px solid #eaeaea;
1227 border-radius: 0;
1228 background: #fff;
1229 box-shadow: none;
1230 outline: none;
1231 }
1232
1233 .select2.select2-container .select2-search__field:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
1234 height: 44px;
1235 padding-left: 0;
1236 padding-right: 0;
1237 }
1238
1239 select.form-control.select_ajax[multiple]] {
1240 option {
1241 height: 100%;
1242 display: flex;
1243 align-items: center;
1244 background: transparent;
1245 color: #000;
1246 }
1247 }
1248
1249 .select2.select2-container {
1250 .select2-selection__rendered,
1251 .select2-selection,
1252 .selection {
1253 height: 100%;
1254 }
1255 }
1256
1257 select {
1258 -webkit-appearance: none;
1259 background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 15px top 55%;
1260 background-size: auto;
1261 background-size: 16px 16px;
1262 cursor: pointer;
1263 vertical-align: middle;
1264
1265 }
1266
1267 select option:hover {
1268 background: $secondary_color;
1269 color: #fff;
1270 }
1271
1272 &.checkbox label {
1273 display: flex;
1274 flex-wrap: wrap;
1275 flex-direction: row;
1276 justify-content: flex-start;
1277 align-items: center;
1278 }
1279
1280 button.wdk-search-additional-btn,
1281 button.wdk-search-start {
1282 color: #fff;
1283 font-family: "Montserrat";
1284 font-weight: 400;
1285 background-color: $color_hover;
1286 height: 46px;
1287 border: none;
1288 border-radius: 3px;
1289 width: 100%;
1290 padding: 0 30px;
1291 font-size: 16px;
1292 cursor: pointer;
1293 }
1294
1295 button.wdk-ai-search {
1296 color: #fff;
1297 font-family: "Montserrat";
1298 font-weight: 400;
1299 background-color: #F97316;
1300 height: 46px;
1301 border: none;
1302 border-radius: 0;
1303 width: 100%;
1304 padding: 0 30px;
1305 font-size: 16px;
1306 cursor: pointer;
1307 }
1308
1309 button.wdk-ai-search:hover {
1310 background-color: #EA580C;
1311 }
1312
1313 button.wdk-search-additional-btn {
1314 background-color: $secondary_color;
1315 }
1316
1317 button.wdk-search-start:hover {
1318 background: $secondary_color;
1319 }
1320
1321 button.wdk-search-start.wdk-search-reset {
1322 background: #000;
1323 }
1324
1325 button.wdk-search-start.wdk-search-reset:hover {
1326 background: #383838;
1327 }
1328 }
1329
1330 .wdk-search .wdk-row .wdk-field-btn {
1331 margin-left: -15px;
1332 margin-right: -15px;
1333 width: calc(100% + 15px + 15px);
1334 .wdk-field-group {
1335 padding-left: 15px;
1336 padding-right: 15px;
1337 }
1338 }
1339
1340 .wdk-element .wdk-search {
1341 .wdk-row .wdk-col {
1342 -webkit-flex: 0 0 calc(100% / 1);
1343 -ms-flex: 0 0 calc(100% / 1);
1344 flex: 0 0 calc(100% / 1);
1345 flex: 0 0 calc(100% / 1);
1346 padding: 0 15px;
1347 }
1348 }
1349
1350 .wdk-load-animation,
1351 .wdk-click-load-animation {
1352 position: relative;
1353 }
1354
1355 .wdk-load-animation i.fa-ajax-indicator,
1356 .wdk-click-load-animation i.fa-ajax-indicator {
1357 position: absolute;
1358 top: 50%;
1359 margin-top: -7px;
1360 margin-left: 1px;
1361 }
1362
1363 /* end wdk-field */
1364
1365 body .elementinvader-addons-for-elementor .wl-menu-toggle {
1366 background-color: transparent;
1367 width: auto;
1368 display: inline-block;
1369 }
1370
1371 /* ui select */
1372
1373 .wdk-hidden {
1374 display: none !important;
1375 }
1376
1377 #ui-datepicker-div {
1378 z-index: 100 !important;
1379 }
1380
1381 .admin-bar #ui-datepicker-div {
1382 margin-top: -30px;
1383 }
1384
1385 .elementinvader_contact_form .wdk-booking {
1386 display: inline-block;
1387 margin-top: 15px;
1388 color: #fff;
1389 font-family: "Montserrat";
1390 font-weight: 400;
1391 background: #0074e4;
1392 border: none;
1393 border-radius: 3px;
1394 padding: 13.5px 30px;
1395 font-size: 16px;
1396 cursor: pointer;
1397 text-align: center;
1398 transition: all .15s;
1399
1400 &:hover {
1401 background: #0052a2;
1402 }
1403 }
1404
1405 .wdk-search .section-widget-control .wdk-c-btn {
1406 position: relative;
1407
1408 .fa-ajax-indicator {
1409 display: inline-block;
1410 font-family: 'FontAwesome';
1411 font-size: 20px;
1412 position: absolute;
1413 top: 50%;
1414 left: 50%;
1415 transform: translate(-50%, 25px);
1416 margin-left: -10px;
1417 margin-top: -9px;
1418 opacity: 0;
1419 }
1420
1421 &.loading {
1422 i,.dashicons {
1423 opacity: .1;
1424 }
1425 i.fa-ajax-indicator {
1426 opacity: 1;
1427 }
1428 }
1429 }
1430
1431 .wdk-field-group .select2-container--default {
1432 height: initial !important;
1433 position: relative;
1434
1435 &.select2-container--focus .select2-selection--multiple,
1436 & {
1437 width: 100% !important;
1438 border: 0;
1439 min-width: 150px;
1440 }
1441
1442 .select2-selection--multiple,
1443 .select2-selection--multiple .select2-search,
1444 .select2-selection--multiple input.select2-search__field,
1445 .select2-container--focus .select2-selection--multiple,
1446 & {
1447 background: transparent;
1448 }
1449 .select2-selection--multiple {
1450 &.select2-container--focus .select2-selection--multiple,
1451 &{
1452 border: 0;
1453 }
1454
1455 .select2-search__field {
1456 border: 0 !important;
1457 padding-left: 0;
1458 padding-right: 0;
1459 }
1460
1461 .select2-selection__rendered li {
1462 list-style: none;
1463 margin: 0;
1464
1465 &.select2-search--inline {
1466 flex: 1 2 auto;
1467 }
1468
1469 input.select2-search__field[style*="width: 0"]*="width: 0""] {
1470 min-width: 100%;
1471 }
1472
1473 &.select2-selection__choice {
1474 padding: 5px 6px;
1475 margin: 3px 3px;
1476 }
1477 }
1478
1479 .select2-selection__rendered {
1480 padding: 0;
1481 flex-wrap: nowrap;
1482 display: flex;
1483 justify-content: flex-start;
1484 align-items: center;
1485 }
1486 @media (max-width: 767px) {
1487 .select2-selection__rendered {
1488 flex-wrap: wrap;
1489 }
1490 }
1491 }
1492 &.select2 .select2-selection::after {
1493 content: "\f107";
1494 font-family: 'Font Awesome 5 Free';
1495 font-weight: 900;
1496 position: absolute;
1497 right: 0;
1498 font-size: 16px;
1499 transform: translateY(-50%);
1500 top: 50%;
1501 }
1502 .select2-selection {
1503 position: relative;
1504 display: flex;
1505 align-items: center;
1506 }
1507 .select2.select2-container {
1508 width: 100%;
1509 }
1510 .select2-search {
1511 position: relative;
1512 }
1513 }
1514
1515 .elementinvader_contact_form {
1516 .list_booking_price {
1517 width: 100%;
1518 font-size: 14px;
1519 td, th {
1520 padding: 10px;
1521 border: 1px solid #ddd;
1522 text-align: left;
1523 }
1524
1525 th {
1526 font-weight: 400;
1527 }
1528
1529 tr.total_price {
1530 th,td {
1531 font-weight: 500;
1532 }
1533
1534 }
1535
1536 td {
1537 font-size: 13px;
1538 color: #0074e4;
1539 margin-bottom: 2px;
1540
1541 &.price {
1542
1543 }
1544
1545 &.total_price {
1546 color: #b31111;
1547 }
1548
1549 .title {
1550 font-weight: 600;
1551 }
1552 }
1553 }
1554 .fee_group {
1555 .fee_price {
1556 font-size: 13px;
1557 color: #0074e4;
1558 font-style: italic;
1559 margin-left: 3px;
1560 font-weight: 500;
1561 }
1562 }
1563
1564 input[type="checkbox"]="checkbox""] {
1565 cursor: pointer;
1566 }
1567 }
1568
1569 .wdk-element .wdk-listing-agent .agent-cont .meta-item i.fab {
1570 font-family: 'Font Awesome 5 Brands';
1571 }
1572
1573
1574 .wdk-listing-card .wdk_js_gallery_slider_box {
1575
1576 & .wdk_js_gallery_slider,
1577 & .slick-slide,
1578 & .slick-track,
1579 & .slick-list,
1580 & {
1581 height: 100%;
1582 }
1583
1584 .wdk_js_gallery_slider {
1585 margin-bottom: 0;
1586 position: relative;
1587 z-index: 15;
1588
1589 & .slick-track {
1590 display: flex;
1591 }
1592
1593 & .slick-slide,
1594 & .slick-track,
1595 & .slick-list,
1596 & {
1597 height: 100%;
1598 }
1599
1600 & .slick-list {
1601 width: 100%;
1602 }
1603
1604 &.slick-dotted.slick-slider {
1605 margin-bottom: 0;
1606 }
1607
1608
1609 .slick-dots li button::before {
1610 display: none;
1611 }
1612
1613 .slick-dots {
1614 list-style: none !important;
1615 position: absolute;
1616 bottom: 5px !important;
1617 display: none !important;
1618 }
1619
1620 .slick-next {
1621 right: 16px;
1622 z-index: 2;
1623 }
1624
1625 .slick-prev {
1626 left: 16px;
1627 z-index: 2;
1628 }
1629
1630 .slick-next, .slick-prev {
1631 z-index: 20;
1632 }
1633
1634 .slick-dots li button {
1635 border: 1px solid transparent;
1636 }
1637
1638 .slick-dots li.slick-active button {
1639 border: 1px solid #0979e5;
1640 }
1641
1642 &:not(.slick-initialized) >div:not(:nth-child(1)):not(.wdk_js_gallery_slider-carousel_arrows) {
1643 display: none !important;
1644 }
1645 }
1646
1647 .wdk_js_gallery_slider-carousel_arrows > a {
1648 position: absolute;
1649 top: 50%;
1650 transform: translateY(-50%);
1651 color: #fff;
1652 font-size: 18px;
1653 z-index: 15;
1654 cursor: pointer;
1655 opacity: 0.1;
1656 text-shadow: -2px 0px 2px #00000075;
1657
1658 &.wdk-slider-prev {
1659 left: 10px;
1660 }
1661
1662 &.wdk-slider-next {
1663 right: 10px;
1664 }
1665
1666 span {
1667 font-size: 35px;
1668 width: initial;
1669 height: initial;
1670 }
1671
1672 transition: all 0.4s;
1673 }
1674 .wdk_js_gallery_slider-carousel_arrows > a:focus,
1675 &:hover .wdk_js_gallery_slider-carousel_arrows > a {
1676 opacity: 1;
1677 color: #fff;
1678 }
1679 }
1680
1681 .wdk-depend-hidden {
1682 display: none !important;
1683 }
1684
1685 .wdk_mobile_footer_menu {
1686 display: none;
1687
1688 @media (max-width: 767px) {
1689 display: flex;
1690 }
1691
1692 background: #fff;
1693 border-top: 1px solid #777;
1694 color: #777;
1695 position: fixed;
1696 bottom: 0;
1697 width: 100%;
1698 z-index: 1000;
1699 justify-content: space-between;
1700 align-items: center;
1701
1702 &>.wdk-footer-menu,
1703 &>a {
1704 flex: 1 1 auto;
1705 text-align: center;
1706 font-size: 26px;
1707 &:hover {
1708 box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.11) inset;
1709 }
1710
1711 .dashicons {
1712 font-size: inherit;
1713 width: initial;
1714 height: initial;
1715 }
1716 }
1717
1718 /* custom */
1719
1720 .dash-btn {
1721 font-size: 20px;
1722 padding-top: 16px;
1723 padding-bottom: 15px;
1724 }
1725
1726 .sign-btn {
1727 font-size: 18px;
1728 padding-top: 17px;
1729 padding-bottom: 16px;
1730 }
1731
1732 .wdk-footer-menu label {
1733 font-size: 29px;
1734 padding-top: 7px;
1735 padding-bottom: 7px;
1736 display: flex;
1737 justify-content: center;
1738 align-items: center;
1739 }
1740
1741 & label,
1742 &>a {
1743 padding: 11px 5px 11px 5px;
1744 display: flex;
1745 align-items: center;
1746 justify-content: center;
1747 }
1748
1749 a,label {
1750 transition: all .15s;
1751
1752 &:hover {
1753 color: #0074e4
1754 }
1755 }
1756
1757 .wdk-footer-menu {
1758 flex: 1 1 auto;
1759 text-align: center;
1760 position: relative;
1761
1762 input {
1763 display: none;
1764 };
1765
1766 label {
1767 cursor: pointer;
1768 width: 100%;
1769 height: 100%;
1770 }
1771
1772 .menu__box {
1773 position: absolute;
1774 bottom: 100%;
1775 right: 0;
1776 margin-bottom: 15px;
1777 background: #fff;
1778 padding: 5px 10px;
1779 width: auto;
1780 border: 1px solid #777;
1781 visibility: hidden;
1782 opacity: 0;
1783 transition: all .15s;
1784
1785 a {
1786 padding: 3px 0;
1787 display: block;
1788 font-size: 14px;
1789 }
1790 }
1791
1792
1793 input:checked ~ .menu__box {
1794 visibility: visible;
1795 opacity: 1;
1796 }
1797
1798 input:not(:checked) ~ .wdk_mobile_footer_menu_gumb-open {
1799
1800 }
1801
1802 .wdk_mobile_footer_menu_gumb {
1803
1804
1805 }
1806 }
1807 }
1808
1809 body .elementor-element.elementor-widget .wdk-search {
1810 .wdk-row {
1811 & {
1812 display: -ms-flexbox;
1813 display: flex;
1814 -ms-flex-wrap: wrap;
1815 flex-wrap: wrap;
1816 margin-right: -15px;
1817 margin-left: -15px;
1818 }
1819
1820 & > [class*='wdk-col-']*='wdk-col-']:not(.wdk-col-btns)
1821 {
1822 position: relative;
1823 width: 100%;
1824 padding-right: 15px;
1825 padding-left: 15px;
1826 box-sizing: border-box;
1827 }
1828
1829 @for $i from 1 through 12 {
1830 .wdk-col-#{$i} {
1831 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
1832 flex: 0 0 calc(100% / 12 * #{$i});
1833 max-width: calc(100% / 12 * #{$i});
1834 }
1835 }
1836
1837 @media (min-width:992px){
1838 @for $i from 1 through 12 {
1839 .wdk-col-md-#{$i} {
1840 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
1841 flex: 0 0 calc(100% / 12 * #{$i});
1842 max-width: calc(100% / 12 * #{$i});
1843 }
1844 }
1845 }
1846 }
1847 }
1848
1849 body .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle
1850 {
1851 background-position: -58px 3px;
1852 }
1853
1854 body .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle-remove
1855 {
1856 background-position: -178px 1px;
1857 }
1858
1859 body .leaflet-control-custom.leaflet-draw-toolbar {
1860 margin-top: 0;
1861 }
1862
1863 body .wdk_dropdown_tree .list_container {
1864 max-width: 100%;
1865 z-index: 10001;
1866 .list_scroll ul li {
1867 white-space: nowrap;
1868 overflow: hidden;
1869 text-overflow: ellipsis;
1870 max-width: 100%;
1871 }
1872 }
1873
1874 @media (max-width: 767px) {
1875 .WdkScrollMobileSwipe {
1876 display: flex;
1877 flex-wrap: nowrap !important;
1878 overflow: auto !important;
1879 }
1880 .WdkScrollMobileSwipe .elementor-column {
1881 width: 100%;
1882 flex: 0 0 100%;
1883 }
1884 }
1885
1886 .wdk-textarea-load-more-wrapper {
1887 text-align: center;
1888 overflow: hidden;
1889 .wdk-textarea-load-more-button {
1890 cursor: pointer;
1891 position: relative;
1892 }
1893
1894 .wdk-textarea-load-more-button:before,
1895 .wdk-textarea-load-more-button:after {
1896 content: "";
1897 position: absolute;
1898 font-size: 12px;
1899 vertical-align: middle;
1900 top: 50%;
1901 border-bottom: 1px dashed #636363;
1902 margin-top: 0px;
1903 letter-spacing: 4px;
1904 width: 100vw;
1905 height: 1px;
1906 }
1907
1908 .wdk-textarea-load-more-button:after {
1909 left: 105%;
1910 }
1911
1912 .wdk-textarea-load-more-button:before {
1913 right: 105%;
1914 }
1915 }
1916
1917 .elementor-editor-active {
1918
1919 .wdk-listing-card .wdk_js_gallery_slider_box .wdk_js_gallery_slider .slick-track {
1920 width: 100% !important;
1921
1922 .slick-slide {
1923 width: 100% !important;
1924 }
1925
1926 .slick-slide:not(:first-child) {
1927 display: none;
1928 }
1929
1930 }
1931 }
1932
1933
1934 .wdk-field-value.TEXTAREA p {
1935 margin-bottom: 15px;
1936 }
1937
1938 .wdk-element .complete_link {
1939 position: absolute;
1940 top: 0;
1941 left: 0;
1942 width: 100%;
1943 height: 100%;
1944 }
1945
1946 .wdk-stroke {
1947 display: -webkit-box;
1948 -webkit-box-orient: vertical;
1949 overflow: hidden;
1950 }
1951
1952 .wdk-compare-table,
1953 .woocommerce,
1954 .wdk-compare-listing-button-element,
1955 .wdk-currencies-list-elementt,
1956 .wdk-facebook-comments-element,
1957 .wdk-favorites-element,
1958 .wdk-listing-claim-element,
1959 .wdk-membership-element,
1960 .wdk-mortgage-element,
1961 .wdk-payments-element,
1962 .wdk-pdf-export-element,
1963 .wdk-report-abuse-element,
1964 .wdk-reviews-element,
1965 .wdk-save-search-element,
1966 .wdk-svg-map-element,
1967 .wdk-booking-element {
1968 word-break: normal;
1969 }
1970
1971 body.wdk_disable_outline_on_focus {
1972
1973 a:focus-visible, select:focus-visible, button:focus-visible, .wl-menu-toggle:focus-visible, a:focus, .wl-menu-toggle:focus, select:focus, input:focus, textarea:focus, button:focus,
1974 a:focus-visible, select:focus-visible, button:focus-visible, .wl-menu-toggle:focus-visible, a:focus, .wl-menu-toggle:focus, select:focus, button:focus,
1975 * {
1976 outline: none !important;
1977 }
1978 }
1979
1980 /* Popup */
1981
1982
1983
1984
1985 .jconfirm.wdk-ai-search-popup {
1986 .jconfirm-box {
1987 width: 600px;
1988 max-width: 95%;
1989 padding: 20px;
1990 border-radius: 12px;
1991 background: #fff;
1992 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
1993 }
1994
1995 .form-alerts:not(:empty) {
1996 margin-bottom: 15px;
1997 display: block;
1998 width: 100%;
1999 }
2000
2001 .form-alerts {
2002 font-size: 14px;
2003 font-style: italic;
2004 }
2005
2006 // reset
2007 .jconfirm-content-pane,
2008 .jconfirm-box .jconfirm-buttons .wdk-ai-search,
2009 .btn {
2010 margin: 0 !important;
2011 }
2012
2013 .jconfirm-buttons,
2014 div.jconfirm-title-c {
2015 padding: 0 !important;
2016 }
2017
2018 .jconfirm-box .jconfirm-buttons,
2019 .jconfirm-box {
2020 display: flex;
2021 flex-direction: column;
2022 gap: 15px;
2023 }
2024
2025
2026 // Textarea
2027 textarea.form-control {
2028 display: block;
2029 width: 100%;
2030 min-height: 150px;
2031 box-sizing: border-box;
2032
2033 padding: 18px 20px;
2034
2035 font-family: "Montserrat", sans-serif;
2036 font-size: 15px;
2037 font-weight: 400;
2038 line-height: 1.5;
2039 color: #334155;
2040
2041 background: #f8fafc;
2042 border: 1px solid #d9e2ec;
2043 border-radius: 10px;
2044
2045 outline: none;
2046 resize: vertical;
2047
2048 transition: all .2s ease;
2049
2050 &::placeholder {
2051 color: #94a3b8;
2052 opacity: 1;
2053 }
2054
2055 &:focus {
2056 background: #fff;
2057 border-color: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);;
2058 box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
2059 }
2060
2061 &.fpai-error {
2062 background: #fff4f4;
2063 border-color: #ef4444;
2064 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
2065 }
2066 }
2067
2068 form {
2069 margin: 0;
2070 }
2071
2072 .form-group {
2073 margin: 0;
2074 }
2075
2076 // AI button
2077 .jconfirm-box .jconfirm-buttons {
2078 .wdk-ai-search {
2079 width: 100%;
2080 height: 46px;
2081 margin-top: 18px;
2082
2083 border: none;
2084 border-radius: 8px;
2085
2086 color: #fff;
2087 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
2088
2089 font-family: "Montserrat", sans-serif;
2090 font-size: 15px;
2091 font-weight: 500;
2092 text-transform: capitalize;
2093 cursor: pointer;
2094
2095 transition:
2096 background-color .2s ease,
2097 transform .15s ease,
2098 box-shadow .2s ease;
2099
2100 &:hover {
2101 transform: translateY(-2px);
2102 box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
2103 background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
2104 transform: translateY(0);
2105 }
2106 }
2107
2108 .wdk-ai-close {
2109 width: 100%;
2110 height: 46px;
2111 padding: 0 30px;
2112 color: #475569;
2113 background: #f1f5f9;
2114 font-family: "Montserrat", sans-serif;
2115 font-size: 15px;
2116 font-weight: 500;
2117 border: 1px solid #e2e8f0;
2118 border-radius: 7px;
2119 cursor: pointer;
2120 transition: all .2s ease;
2121
2122 &:hover {
2123 color: #334155;
2124 background: #e2e8f0;
2125 border-color: #cbd5e1;
2126 }
2127 }
2128
2129
2130 }
2131
2132 }
2133
2134 body.wdk-popup-open {
2135 overflow: hidden;
2136 }
2137
2138 @import 'animation.scss';