PluginProbe
WP Directory Kit / 1.5.7
WP Directory Kit v1.5.7
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.7, at public/css/wpdirectorykit-public.scss

2,127 lines 47.3 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 &.section_more_before_buttons {
757 .wdk-col-btns {
758 order: 100;
759 }
760
761 }
762
763 .wdk-search-tabs {
764 position: absolute;
765 bottom: 100%;
766 margin-bottom: 20px;
767 max-width: 100%;
768 left: 0;
769 font-size: 0;
770 label {
771 position: relative;
772 background: #fff;
773 color: #000;
774 padding: 12px 60px;
775 display: inline-block;
776 cursor: pointer;
777 font-size: 15px;
778 font-family: "Montserrat";
779 margin: 3px 4px;
780 transition: all .15s;
781 font-weight: 300;
782 border-radius: 0;
783 &:hover {
784 background: #0A2138;
785 color: #fff;
786 }
787 transition: all .15s;
788
789 &:after {
790 content: '';
791 position: absolute;
792 width: 0;
793 height: 0;
794 border-left: 7px solid transparent;
795 border-right: 7px solid transparent;
796 border-top: 7px solid #fff;
797 top: 100%;
798 left: 50%;
799 margin-left: -5px;
800 transition: all .15s;
801 }
802
803 &:hover:after {
804 border-top-color: #0a2138;
805 }
806 }
807
808 input {
809 display: none;
810 }
811
812 input:checked + label {
813 background: #0A2138;
814 color: #fff;
815 }
816
817 input:checked + label:after {
818 border-top-color: #0a2138;
819 }
820
821 label:first-of-type {
822 margin-left: 0 !important;
823 }
824
825 label:last-of-type {
826 margin-right: 0 !important;
827 }
828
829 @media (max-width: 767px) {
830 position: initial;
831 flex-wrap: wrap;
832 justify-content: space-between;
833 margin-left: -5px;
834 margin-right: -5px;
835 width: initial;
836 max-width: initial;
837 display: flex;
838
839 label::after {
840 display: none;
841 }
842
843 label {
844 flex: 2 1 auto;
845 margin: 5px 5px;
846 text-align: center;
847 }
848
849
850 label:first-of-type {
851 margin-left: 5px !important;
852 }
853
854 label:last-of-type {
855 margin-right: 5px !important;
856 }
857
858 }
859 }
860
861 &:not(.layout_inline) .wdk-search-tabs {
862 width: 100%;
863 text-align: center;
864
865 label {
866 background: #0074e4;
867 color: #fff;
868 padding: 5px 12px;
869 &:hover {
870 background: #0A2138;
871 }
872 transition: all .15s;
873
874 &:after {
875 border-top: 7px solid #0074e4;
876 }
877
878 &:hover:after {
879 border-top-color: #0A2138;
880 }
881 }
882
883 }
884
885 .wdk-field.CHECKBOX .wdk-field-label {
886 padding: 3px 0;
887 }
888
889 .wdk-field-label {
890 padding: 7px 0px 0 9px;
891 }
892
893 .min_max_row {
894 flex-wrap: nowrap !important;
895 }
896
897 .min_max_row .wdk-col.wdk-col-6 {
898 flex: 0 50% !important;
899 width: initial !important;
900 }
901
902 &.layout_inline .min_max_wdk-field {
903 /*flex: 10000 0 !important;*/
904 min-width: 160px;
905 }
906
907 &.layout_inline .wdk-field {
908 display: flex;
909 align-items: flex-end;
910 flex-direction: row;
911 }
912
913 &.layout_inline .wdk-field.CHECKBOX {
914 align-items: flex-end;
915 }
916
917 .wdk-col-btns {
918 align-items: flex-end;
919 display: flex;
920 }
921
922 &.layout_inline .wdk-field .wdk-field-group {
923 flex: 1 2 auto;
924 }
925
926 &.layout_inline .wdk-field .wdk-field-label,
927 &.layout_inline .wdk-field .wdk-field-group {
928 margin-left: 0 !important;
929 margin-right: 0 !important;
930 }
931
932 &.layout_inline .wdk-field .wdk-field-label {
933 padding-right: 10px;
934 padding-top: 10px;
935 }
936
937 .wdk-field.wdk-field-btn {
938 display: flex;
939 flex-direction: column;
940 }
941
942 #wdk-form-additional {
943 display: block;
944 flex: 0 0 calc(100%) !important;
945 width: 100%;
946
947 }
948
949 #wdk-form-additional .wdk-row .wdk-col.CHECKBOX:first-child .wdk-field-label {
950 padding-left: 0;
951 }
952
953 .wdk-field select:not(.sel_class),
954 .wdk_dropdown_tree > .btn-group:not(.sel_class) .btn {
955 color: #9f9898ed !important;
956 }
957
958 input::-webkit-placeholder {
959 color: #9f9898ed;
960 opacity: 1;
961 }
962
963 input::-moz-placeholder {
964 color: #9f9898ed;
965 opacity: 1;
966 }
967
968 input::placeholder {
969 color: #9f9898ed;
970 opacity: 1;
971 }
972
973 /* inline */
974 &.layout_inline .wdk-row div.wdk-col {
975 width: auto;
976 -webkit-flex: 1 2 150px;
977 flex: 1 2 150px;
978 padding-left: 0;
979 padding-right: 0;
980 margin-bottom: 0;
981 }
982
983 &.layout_inline .wdk-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), &.layout_inline .wdk-field select,
984 &.layout_inline .wdk-field input,
985 &.layout_inline .wdk-row div.wdk-col .wdk-field input[type="text"]="text""] {
986 //border-radius: 0 0 0 0;
987 }
988
989 &.layout_inline .wdk-row .wdk-field-btn {
990 margin-left: 0;
991 margin-right: 0;
992 display: flex;
993 flex-direction: row;
994 margin-bottom: 0;
995 }
996
997 &.layout_inline .wdk-row .wdk-col:not(.wdk-field) {
998 width: auto;
999 -webkit-flex: 0 0 auto;
1000 flex: 0 0 auto;
1001 }
1002
1003 &.layout_inline .wdk-row .wdk-field-btn .wdk-field-group {
1004 padding-left: 0;
1005 padding-right: 0;
1006 width: auto;
1007 -webkit-flex: 0 0 auto;
1008 flex: 0 0 auto;
1009 margin-bottom: 0;
1010 }
1011
1012 &.layout_inline .wdk-field button.wdk-search-additional-btn,
1013 &.layout_inline .wdk-field button.wdk-search-start,
1014 &.layout_inline .wdk-row .wdk-field button.wdk-search-additional-btn {
1015 border-radius: 0 0 0 0;
1016 }
1017
1018 &.layout_inline .wdk-row {
1019 margin-left: 0;
1020 margin-right: 0;
1021 margin-bottom: 0;
1022 }
1023
1024 .wdk-field-btn .wdk-field-group {
1025 margin-bottom: 10px;
1026 }
1027
1028 .wdk-field.MORE {
1029 width: 100% !important;
1030 padding: 0 !important;
1031 margin: 0 !important;
1032 }
1033
1034 /* [START] Search form Edit Control */
1035
1036 &:hover .section-widget-control {
1037 opacity: 1;
1038 visibility: visible;
1039 }
1040
1041 .section-widget-control {
1042 position: absolute;
1043 right: -15px;
1044 top: -15px;
1045 z-index: 100;
1046 opacity: 0;
1047 visibility: hidden;
1048 -webkit-transition: all .5s;
1049 -o-transition: all .5s;
1050 transition: all .5s;
1051 font-size: 0;
1052 z-index: 1;
1053 &.right {
1054 z-index: 0;
1055 right: initial;
1056 left: 100%;
1057 top: 0;
1058 }
1059
1060 &.right .wdk-c-btn {
1061 height: 46px;
1062 padding: 10px 10px;
1063 display: flex;
1064 align-items: center;
1065 justify-content: center;
1066 }
1067 }
1068 .section-widget-control .wdk-c-btn {
1069 display: inline-block;
1070 padding: 5px 5px;
1071 color: white;
1072 -webkit-transition: all .5s;
1073 -o-transition: all .5s;
1074 transition: all .5s;
1075 z-index: 1;
1076 }
1077
1078 .section-widget-control .wdk-save-search-button {
1079 z-index: 0;
1080 .fas {
1081 font-family: 'FontAwesome';
1082 color: #fff;
1083 font-size: 16px;
1084 }
1085 }
1086
1087 .section-widget-control .wdk-c-save {
1088 background-color: #31f731;
1089 border-color: #31f731;
1090 }
1091
1092 .section-widget-control .wdk-c-save:hover {
1093 background-color: #27bd27;
1094 border-color: #27bd27;
1095 }
1096
1097 .section-widget-control .wdk-c-edit {
1098 background-color: #F9B418;
1099 border-color: #F9B418;
1100 }
1101
1102 .section-widget-control .wdk-c-edit:hover {
1103 background-color: #e78800;
1104 border-color: #e78800;
1105 }
1106
1107 .widget-with-control .section-widget-control {
1108 opacity: 0;
1109 -webkit-transition: all .5s;
1110 -o-transition: all .5s;
1111 transition: all .5s;
1112 }
1113
1114 .widget-with-control:hover .section-widget-control {
1115 opacity: 1;
1116 }
1117
1118 .widget-with-control .form-horisontal.wdk_search_form {
1119 position: relative;
1120 }
1121
1122 .widget-with-control .form-horisontal.wdk_search_form .section-widget-control {
1123 right: 20px;
1124 bottom: calc(100% - 27px);
1125 }
1126
1127 .side-search-form.widget-with-control {
1128 position: relative;
1129 }
1130
1131 .side-search-form.widget-with-control .section-widget-control {
1132 right: 0;
1133 top: 0;
1134 }
1135
1136 /* [End] Search form Edit Control */
1137
1138 }
1139
1140 /* shortcode */
1141
1142 .wdk-shortcode {
1143 .wdk-listings-list .wdk-row .wdk-col {
1144 padding: 0 0;
1145 }
1146 }
1147
1148 .wdk-element .wdk-search.layout_inline .wdk-field {
1149 .wdk-field-group {
1150 position: relative;
1151 }
1152
1153 &.LOCATION,
1154 &.CATEGORY {
1155 min-width: 185px;
1156 }
1157 }
1158
1159 .wdk-field {
1160 .wdk-field-group {
1161 position: relative;
1162 width: 100%;
1163 }
1164
1165 &.LOCATION,
1166 &.CATEGORY {
1167 min-width: 185px;
1168 }
1169
1170 &.LOCATION .wdk-field-group,
1171 &.CATEGORY .wdk-field-group {
1172 max-width: 100%;
1173 .select2 {
1174 overflow: hidden;
1175 min-height: 46px;
1176 }
1177 }
1178
1179 &.CHECKBOX {
1180 align-items: flex-end;
1181 }
1182
1183 &.CHECKBOX .wdk-field-label {
1184 padding: 3px 10px;
1185 }
1186
1187 &.CHECKBOX .wdk-field-label input {
1188 position: relative;
1189 top: -1px;
1190 }
1191
1192 &{
1193 display: flex;
1194 flex-wrap: wrap;
1195 flex-direction: column;
1196 justify-content: flex-start;
1197 margin-bottom: 10px;
1198 }
1199
1200 .wdk-field-label {
1201 display: block;
1202 margin-bottom: 10px;
1203 text-align: left;
1204 width: 100%;
1205 cursor: pointer;
1206 }
1207
1208 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
1209 .select2.select2-container,
1210 select.form-control[multiple]],
1211 select[multiple]],
1212 select {
1213 height: 46px;
1214 padding: 0 10px;
1215 width: 100%;
1216 color: #000;
1217 font-size: 15px;
1218 font-family: "Montserrat";
1219 font-weight: 300;
1220 border: 1px solid #eaeaea;
1221 border-radius: 0;
1222 background: #fff;
1223 box-shadow: none;
1224 outline: none;
1225 }
1226
1227 .select2.select2-container .select2-search__field:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
1228 height: 44px;
1229 padding-left: 0;
1230 padding-right: 0;
1231 }
1232
1233 select.form-control.select_ajax[multiple]] {
1234 option {
1235 height: 100%;
1236 display: flex;
1237 align-items: center;
1238 background: transparent;
1239 color: #000;
1240 }
1241 }
1242
1243 .select2.select2-container {
1244 .select2-selection__rendered,
1245 .select2-selection,
1246 .selection {
1247 height: 100%;
1248 }
1249 }
1250
1251 select {
1252 -webkit-appearance: none;
1253 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%;
1254 background-size: auto;
1255 background-size: 16px 16px;
1256 cursor: pointer;
1257 vertical-align: middle;
1258
1259 }
1260
1261 select option:hover {
1262 background: $secondary_color;
1263 color: #fff;
1264 }
1265
1266 &.checkbox label {
1267 display: flex;
1268 flex-wrap: wrap;
1269 flex-direction: row;
1270 justify-content: flex-start;
1271 align-items: center;
1272 }
1273
1274 button.wdk-search-additional-btn,
1275 button.wdk-search-start {
1276 color: #fff;
1277 font-family: "Montserrat";
1278 font-weight: 400;
1279 background-color: $color_hover;
1280 height: 46px;
1281 border: none;
1282 border-radius: 3px;
1283 width: 100%;
1284 padding: 0 30px;
1285 font-size: 16px;
1286 cursor: pointer;
1287 }
1288
1289 button.wdk-ai-search {
1290 color: #fff;
1291 font-family: "Montserrat";
1292 font-weight: 400;
1293 background-color: #F97316;
1294 height: 46px;
1295 border: none;
1296 border-radius: 0;
1297 width: 100%;
1298 padding: 0 30px;
1299 font-size: 16px;
1300 cursor: pointer;
1301 }
1302
1303 button.wdk-ai-search:hover {
1304 background-color: #EA580C;
1305 }
1306
1307 button.wdk-search-additional-btn {
1308 background-color: $secondary_color;
1309 }
1310
1311 button.wdk-search-start:hover {
1312 background: $secondary_color;
1313 }
1314
1315 button.wdk-search-start.wdk-search-reset {
1316 background: #000;
1317 }
1318
1319 button.wdk-search-start.wdk-search-reset:hover {
1320 background: #383838;
1321 }
1322 }
1323
1324 .wdk-search .wdk-row .wdk-field-btn {
1325 margin-left: -15px;
1326 margin-right: -15px;
1327 width: calc(100% + 15px + 15px);
1328 .wdk-field-group {
1329 padding-left: 15px;
1330 padding-right: 15px;
1331 }
1332 }
1333
1334 .wdk-element .wdk-search {
1335 .wdk-row .wdk-col {
1336 -webkit-flex: 0 0 calc(100% / 1);
1337 -ms-flex: 0 0 calc(100% / 1);
1338 flex: 0 0 calc(100% / 1);
1339 flex: 0 0 calc(100% / 1);
1340 padding: 0 15px;
1341 }
1342 }
1343
1344 .wdk-load-animation,
1345 .wdk-click-load-animation {
1346 position: relative;
1347 }
1348
1349 .wdk-load-animation i.fa-ajax-indicator,
1350 .wdk-click-load-animation i.fa-ajax-indicator {
1351 position: absolute;
1352 top: 50%;
1353 margin-top: -7px;
1354 margin-left: 1px;
1355 }
1356
1357 /* end wdk-field */
1358
1359 body .elementinvader-addons-for-elementor .wl-menu-toggle {
1360 background-color: transparent;
1361 width: auto;
1362 display: inline-block;
1363 }
1364
1365 /* ui select */
1366
1367 .wdk-hidden {
1368 display: none !important;
1369 }
1370
1371 #ui-datepicker-div {
1372 z-index: 100 !important;
1373 }
1374
1375 .admin-bar #ui-datepicker-div {
1376 margin-top: -30px;
1377 }
1378
1379 .elementinvader_contact_form .wdk-booking {
1380 display: inline-block;
1381 margin-top: 15px;
1382 color: #fff;
1383 font-family: "Montserrat";
1384 font-weight: 400;
1385 background: #0074e4;
1386 border: none;
1387 border-radius: 3px;
1388 padding: 13.5px 30px;
1389 font-size: 16px;
1390 cursor: pointer;
1391 text-align: center;
1392 transition: all .15s;
1393
1394 &:hover {
1395 background: #0052a2;
1396 }
1397 }
1398
1399 .wdk-search .section-widget-control .wdk-c-btn {
1400 position: relative;
1401
1402 .fa-ajax-indicator {
1403 display: inline-block;
1404 font-family: 'FontAwesome';
1405 font-size: 20px;
1406 position: absolute;
1407 top: 50%;
1408 left: 50%;
1409 transform: translate(-50%, 25px);
1410 margin-left: -10px;
1411 margin-top: -9px;
1412 opacity: 0;
1413 }
1414
1415 &.loading {
1416 i,.dashicons {
1417 opacity: .1;
1418 }
1419 i.fa-ajax-indicator {
1420 opacity: 1;
1421 }
1422 }
1423 }
1424
1425 .wdk-field-group .select2-container--default {
1426 height: initial !important;
1427 position: relative;
1428
1429 &.select2-container--focus .select2-selection--multiple,
1430 & {
1431 width: 100% !important;
1432 border: 0;
1433 min-width: 150px;
1434 }
1435
1436 .select2-selection--multiple,
1437 .select2-selection--multiple .select2-search,
1438 .select2-selection--multiple input.select2-search__field,
1439 .select2-container--focus .select2-selection--multiple,
1440 & {
1441 background: transparent;
1442 }
1443 .select2-selection--multiple {
1444 &.select2-container--focus .select2-selection--multiple,
1445 &{
1446 border: 0;
1447 }
1448
1449 .select2-search__field {
1450 border: 0 !important;
1451 padding-left: 0;
1452 padding-right: 0;
1453 }
1454
1455 .select2-selection__rendered li {
1456 list-style: none;
1457 margin: 0;
1458
1459 &.select2-search--inline {
1460 flex: 1 2 auto;
1461 }
1462
1463 input.select2-search__field[style*="width: 0"]*="width: 0""] {
1464 min-width: 100%;
1465 }
1466
1467 &.select2-selection__choice {
1468 padding: 5px 6px;
1469 margin: 3px 3px;
1470 }
1471 }
1472
1473 .select2-selection__rendered {
1474 padding: 0;
1475 flex-wrap: nowrap;
1476 display: flex;
1477 justify-content: flex-start;
1478 align-items: center;
1479 }
1480 @media (max-width: 767px) {
1481 .select2-selection__rendered {
1482 flex-wrap: wrap;
1483 }
1484 }
1485 }
1486 &.select2 .select2-selection::after {
1487 content: "\f107";
1488 font-family: 'Font Awesome 5 Free';
1489 font-weight: 900;
1490 position: absolute;
1491 right: 0;
1492 font-size: 16px;
1493 transform: translateY(-50%);
1494 top: 50%;
1495 }
1496 .select2-selection {
1497 position: relative;
1498 display: flex;
1499 align-items: center;
1500 }
1501 .select2.select2-container {
1502 width: 100%;
1503 }
1504 .select2-search {
1505 position: relative;
1506 }
1507 }
1508
1509 .elementinvader_contact_form {
1510 .list_booking_price {
1511 width: 100%;
1512 font-size: 14px;
1513 td, th {
1514 padding: 10px;
1515 border: 1px solid #ddd;
1516 text-align: left;
1517 }
1518
1519 th {
1520 font-weight: 400;
1521 }
1522
1523 tr.total_price {
1524 th,td {
1525 font-weight: 500;
1526 }
1527
1528 }
1529
1530 td {
1531 font-size: 13px;
1532 color: #0074e4;
1533 margin-bottom: 2px;
1534
1535 &.price {
1536
1537 }
1538
1539 &.total_price {
1540 color: #b31111;
1541 }
1542
1543 .title {
1544 font-weight: 600;
1545 }
1546 }
1547 }
1548 .fee_group {
1549 .fee_price {
1550 font-size: 13px;
1551 color: #0074e4;
1552 font-style: italic;
1553 margin-left: 3px;
1554 font-weight: 500;
1555 }
1556 }
1557
1558 input[type="checkbox"]="checkbox""] {
1559 cursor: pointer;
1560 }
1561 }
1562
1563 .wdk-element .wdk-listing-agent .agent-cont .meta-item i.fab {
1564 font-family: 'Font Awesome 5 Brands';
1565 }
1566
1567
1568 .wdk-listing-card .wdk_js_gallery_slider_box {
1569
1570 & .wdk_js_gallery_slider,
1571 & .slick-slide,
1572 & .slick-track,
1573 & .slick-list,
1574 & {
1575 height: 100%;
1576 }
1577
1578 .wdk_js_gallery_slider {
1579 margin-bottom: 0;
1580 position: relative;
1581 z-index: 15;
1582
1583 & .slick-track {
1584 display: flex;
1585 }
1586
1587 & .slick-slide,
1588 & .slick-track,
1589 & .slick-list,
1590 & {
1591 height: 100%;
1592 }
1593
1594 & .slick-list {
1595 width: 100%;
1596 }
1597
1598 &.slick-dotted.slick-slider {
1599 margin-bottom: 0;
1600 }
1601
1602
1603 .slick-dots li button::before {
1604 display: none;
1605 }
1606
1607 .slick-dots {
1608 list-style: none !important;
1609 position: absolute;
1610 bottom: 5px !important;
1611 display: none !important;
1612 }
1613
1614 .slick-next {
1615 right: 16px;
1616 z-index: 2;
1617 }
1618
1619 .slick-prev {
1620 left: 16px;
1621 z-index: 2;
1622 }
1623
1624 .slick-next, .slick-prev {
1625 z-index: 20;
1626 }
1627
1628 .slick-dots li button {
1629 border: 1px solid transparent;
1630 }
1631
1632 .slick-dots li.slick-active button {
1633 border: 1px solid #0979e5;
1634 }
1635
1636 &:not(.slick-initialized) >div:not(:nth-child(1)):not(.wdk_js_gallery_slider-carousel_arrows) {
1637 display: none !important;
1638 }
1639 }
1640
1641 .wdk_js_gallery_slider-carousel_arrows > a {
1642 position: absolute;
1643 top: 50%;
1644 transform: translateY(-50%);
1645 color: #fff;
1646 font-size: 18px;
1647 z-index: 15;
1648 cursor: pointer;
1649 opacity: 0.1;
1650 text-shadow: -2px 0px 2px #00000075;
1651
1652 &.wdk-slider-prev {
1653 left: 10px;
1654 }
1655
1656 &.wdk-slider-next {
1657 right: 10px;
1658 }
1659
1660 span {
1661 font-size: 35px;
1662 width: initial;
1663 height: initial;
1664 }
1665
1666 transition: all 0.4s;
1667 }
1668 .wdk_js_gallery_slider-carousel_arrows > a:focus,
1669 &:hover .wdk_js_gallery_slider-carousel_arrows > a {
1670 opacity: 1;
1671 color: #fff;
1672 }
1673 }
1674
1675 .wdk-depend-hidden {
1676 display: none !important;
1677 }
1678
1679 .wdk_mobile_footer_menu {
1680 display: none;
1681
1682 @media (max-width: 767px) {
1683 display: flex;
1684 }
1685
1686 background: #fff;
1687 border-top: 1px solid #777;
1688 color: #777;
1689 position: fixed;
1690 bottom: 0;
1691 width: 100%;
1692 z-index: 1000;
1693 justify-content: space-between;
1694 align-items: center;
1695
1696 &>.wdk-footer-menu,
1697 &>a {
1698 flex: 1 1 auto;
1699 text-align: center;
1700 font-size: 26px;
1701 &:hover {
1702 box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.11) inset;
1703 }
1704
1705 .dashicons {
1706 font-size: inherit;
1707 width: initial;
1708 height: initial;
1709 }
1710 }
1711
1712 /* custom */
1713
1714 .dash-btn {
1715 font-size: 20px;
1716 padding-top: 16px;
1717 padding-bottom: 15px;
1718 }
1719
1720 .sign-btn {
1721 font-size: 18px;
1722 padding-top: 17px;
1723 padding-bottom: 16px;
1724 }
1725
1726 .wdk-footer-menu label {
1727 font-size: 29px;
1728 padding-top: 7px;
1729 padding-bottom: 7px;
1730 display: flex;
1731 justify-content: center;
1732 align-items: center;
1733 }
1734
1735 & label,
1736 &>a {
1737 padding: 11px 5px 11px 5px;
1738 display: flex;
1739 align-items: center;
1740 justify-content: center;
1741 }
1742
1743 a,label {
1744 transition: all .15s;
1745
1746 &:hover {
1747 color: #0074e4
1748 }
1749 }
1750
1751 .wdk-footer-menu {
1752 flex: 1 1 auto;
1753 text-align: center;
1754 position: relative;
1755
1756 input {
1757 display: none;
1758 };
1759
1760 label {
1761 cursor: pointer;
1762 width: 100%;
1763 height: 100%;
1764 }
1765
1766 .menu__box {
1767 position: absolute;
1768 bottom: 100%;
1769 right: 0;
1770 margin-bottom: 15px;
1771 background: #fff;
1772 padding: 5px 10px;
1773 width: auto;
1774 border: 1px solid #777;
1775 visibility: hidden;
1776 opacity: 0;
1777 transition: all .15s;
1778
1779 a {
1780 padding: 3px 0;
1781 display: block;
1782 font-size: 14px;
1783 }
1784 }
1785
1786
1787 input:checked ~ .menu__box {
1788 visibility: visible;
1789 opacity: 1;
1790 }
1791
1792 input:not(:checked) ~ .wdk_mobile_footer_menu_gumb-open {
1793
1794 }
1795
1796 .wdk_mobile_footer_menu_gumb {
1797
1798
1799 }
1800 }
1801 }
1802
1803 body .elementor-element.elementor-widget .wdk-search {
1804 .wdk-row {
1805 & {
1806 display: -ms-flexbox;
1807 display: flex;
1808 -ms-flex-wrap: wrap;
1809 flex-wrap: wrap;
1810 margin-right: -15px;
1811 margin-left: -15px;
1812 }
1813
1814 & > [class*='wdk-col-']*='wdk-col-']:not(.wdk-col-btns)
1815 {
1816 position: relative;
1817 width: 100%;
1818 padding-right: 15px;
1819 padding-left: 15px;
1820 box-sizing: border-box;
1821 }
1822
1823 @for $i from 1 through 12 {
1824 .wdk-col-#{$i} {
1825 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
1826 flex: 0 0 calc(100% / 12 * #{$i});
1827 max-width: calc(100% / 12 * #{$i});
1828 }
1829 }
1830
1831 @media (min-width:992px){
1832 @for $i from 1 through 12 {
1833 .wdk-col-md-#{$i} {
1834 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
1835 flex: 0 0 calc(100% / 12 * #{$i});
1836 max-width: calc(100% / 12 * #{$i});
1837 }
1838 }
1839 }
1840 }
1841 }
1842
1843 body .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle
1844 {
1845 background-position: -58px 3px;
1846 }
1847
1848 body .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle-remove
1849 {
1850 background-position: -178px 1px;
1851 }
1852
1853 body .leaflet-control-custom.leaflet-draw-toolbar {
1854 margin-top: 0;
1855 }
1856
1857 body .wdk_dropdown_tree .list_container {
1858 max-width: 100%;
1859 z-index: 10001;
1860 .list_scroll ul li {
1861 white-space: nowrap;
1862 overflow: hidden;
1863 text-overflow: ellipsis;
1864 max-width: 100%;
1865 }
1866 }
1867
1868 @media (max-width: 767px) {
1869 .WdkScrollMobileSwipe {
1870 display: flex;
1871 flex-wrap: nowrap !important;
1872 overflow: auto !important;
1873 }
1874 .WdkScrollMobileSwipe .elementor-column {
1875 width: 100%;
1876 flex: 0 0 100%;
1877 }
1878 }
1879
1880 .wdk-textarea-load-more-wrapper {
1881 text-align: center;
1882 overflow: hidden;
1883 .wdk-textarea-load-more-button {
1884 cursor: pointer;
1885 position: relative;
1886 }
1887
1888 .wdk-textarea-load-more-button:before,
1889 .wdk-textarea-load-more-button:after {
1890 content: "";
1891 position: absolute;
1892 font-size: 12px;
1893 vertical-align: middle;
1894 top: 50%;
1895 border-bottom: 1px dashed #636363;
1896 margin-top: 0px;
1897 letter-spacing: 4px;
1898 width: 100vw;
1899 height: 1px;
1900 }
1901
1902 .wdk-textarea-load-more-button:after {
1903 left: 105%;
1904 }
1905
1906 .wdk-textarea-load-more-button:before {
1907 right: 105%;
1908 }
1909 }
1910
1911 .elementor-editor-active {
1912
1913 .wdk-listing-card .wdk_js_gallery_slider_box .wdk_js_gallery_slider .slick-track {
1914 width: 100% !important;
1915
1916 .slick-slide {
1917 width: 100% !important;
1918 }
1919
1920 .slick-slide:not(:first-child) {
1921 display: none;
1922 }
1923
1924 }
1925 }
1926
1927
1928 .wdk-field-value.TEXTAREA p {
1929 margin-bottom: 15px;
1930 }
1931
1932 .wdk-element .complete_link {
1933 position: absolute;
1934 top: 0;
1935 left: 0;
1936 width: 100%;
1937 height: 100%;
1938 }
1939
1940 .wdk-stroke {
1941 display: -webkit-box;
1942 -webkit-box-orient: vertical;
1943 overflow: hidden;
1944 }
1945
1946 .wdk-compare-table,
1947 .woocommerce,
1948 .wdk-compare-listing-button-element,
1949 .wdk-currencies-list-elementt,
1950 .wdk-facebook-comments-element,
1951 .wdk-favorites-element,
1952 .wdk-listing-claim-element,
1953 .wdk-membership-element,
1954 .wdk-mortgage-element,
1955 .wdk-payments-element,
1956 .wdk-pdf-export-element,
1957 .wdk-report-abuse-element,
1958 .wdk-reviews-element,
1959 .wdk-save-search-element,
1960 .wdk-svg-map-element,
1961 .wdk-booking-element {
1962 word-break: normal;
1963 }
1964
1965 body.wdk_disable_outline_on_focus {
1966
1967 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,
1968 a:focus-visible, select:focus-visible, button:focus-visible, .wl-menu-toggle:focus-visible, a:focus, .wl-menu-toggle:focus, select:focus, button:focus,
1969 * {
1970 outline: none !important;
1971 }
1972 }
1973
1974 /* Popup */
1975
1976
1977
1978
1979 .jconfirm.wdk-ai-search-popup {
1980 .jconfirm-box {
1981 width: 600px;
1982 max-width: 95%;
1983 padding: 20px;
1984 border-radius: 12px;
1985 background: #fff;
1986 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
1987 }
1988
1989 .form-alerts:not(:empty) {
1990 margin-bottom: 15px;
1991 display: block;
1992 width: 100%;
1993 }
1994
1995 // reset
1996 .jconfirm-content-pane,
1997 .jconfirm-box .jconfirm-buttons .wdk-ai-search,
1998 .btn {
1999 margin: 0 !important;
2000 }
2001
2002 .jconfirm-buttons,
2003 div.jconfirm-title-c {
2004 padding: 0 !important;
2005 }
2006
2007 .jconfirm-box .jconfirm-buttons,
2008 .jconfirm-box {
2009 display: flex;
2010 flex-direction: column;
2011 gap: 15px;
2012 }
2013
2014
2015 // Textarea
2016 textarea.form-control {
2017 display: block;
2018 width: 100%;
2019 min-height: 150px;
2020 box-sizing: border-box;
2021
2022 padding: 18px 20px;
2023
2024 font-family: "Montserrat", sans-serif;
2025 font-size: 15px;
2026 font-weight: 400;
2027 line-height: 1.5;
2028 color: #334155;
2029
2030 background: #f8fafc;
2031 border: 1px solid #d9e2ec;
2032 border-radius: 10px;
2033
2034 outline: none;
2035 resize: vertical;
2036
2037 transition: all .2s ease;
2038
2039 &::placeholder {
2040 color: #94a3b8;
2041 opacity: 1;
2042 }
2043
2044 &:focus {
2045 background: #fff;
2046 border-color: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);;
2047 box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
2048 }
2049
2050 &.fpai-error {
2051 background: #fff4f4;
2052 border-color: #ef4444;
2053 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
2054 }
2055 }
2056
2057 form {
2058 margin: 0;
2059 }
2060
2061 .form-group {
2062 margin: 0;
2063 }
2064
2065 // AI button
2066 .jconfirm-box .jconfirm-buttons {
2067 .wdk-ai-search {
2068 width: 100%;
2069 height: 46px;
2070 margin-top: 18px;
2071
2072 border: none;
2073 border-radius: 8px;
2074
2075 color: #fff;
2076 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
2077
2078 font-family: "Montserrat", sans-serif;
2079 font-size: 15px;
2080 font-weight: 500;
2081 text-transform: capitalize;
2082 cursor: pointer;
2083
2084 transition:
2085 background-color .2s ease,
2086 transform .15s ease,
2087 box-shadow .2s ease;
2088
2089 &:hover {
2090 transform: translateY(-2px);
2091 box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
2092 background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
2093 transform: translateY(0);
2094 }
2095 }
2096
2097 .wdk-ai-close {
2098 width: 100%;
2099 height: 46px;
2100 padding: 0 30px;
2101 color: #475569;
2102 background: #f1f5f9;
2103 font-family: "Montserrat", sans-serif;
2104 font-size: 15px;
2105 font-weight: 500;
2106 border: 1px solid #e2e8f0;
2107 border-radius: 7px;
2108 cursor: pointer;
2109 transition: all .2s ease;
2110
2111 &:hover {
2112 color: #334155;
2113 background: #e2e8f0;
2114 border-color: #cbd5e1;
2115 }
2116 }
2117
2118
2119 }
2120
2121 }
2122
2123 body.wdk-popup-open {
2124 overflow: hidden;
2125 }
2126
2127 @import 'animation.scss';