Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5446 | Rev 5568 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5363 stevensc 1
.overlay:before {
2
    content: "";
3
    position: absolute;
4
    top: 0;
5
    left: 0;
6
    width: 100%;
7
    height: 100%;
8
    background-color: rgba(0, 0, 0, 0.75);
9
    z-index: 99;
10
}
11
 
12
/* ========== login_register ========== */
13
 
14
.break-ellipsis {
15
    max-width: 15ch;
16
    text-overflow: ellipsis;
17
    white-space: nowrap;
18
    overflow: hidden;
19
}
20
 
21
.user-account {
22
    border-left: 1px solid #dd3e2b;
23
    border-right: 1px solid #dd3e2b;
24
    box-sizing: border-box;
25
    position: relative;
26
    padding: 0 1rem;
27
}
28
 
29
/* =================== main-section ================= */
30
 
31
main {
32
    width: 100%;
33
 
34
    @media (min-width: 768px) {
35
        padding: 0 1rem;
36
    }
37
 
38
    @media (min-width: 1024px) {
39
        padding: 0 5%;
40
    }
41
}
42
 
43
.members-container {
44
    display: flex;
45
    flex-direction: column;
46
    gap: 0.5rem;
47
    align-items: center;
48
    justify-content: center;
49
}
50
 
51
.empty-section {
52
    display: grid;
53
    place-items: center;
54
    height: 100%;
55
    min-height: 50vmin;
56
    width: 100%;
57
}
58
 
59
.notification-list {
60
    display: flex;
61
    flex-direction: column;
62
    gap: 1rem;
63
    padding: 1rem;
64
    background: var(--bg-color);
65
    border-radius: var(--border-radius);
66
    box-shadow: var(--light-shadow);
67
    border: 1px solid var(--border-primary);
68
 
69
    .notification-header {
70
        display: flex;
71
        align-items: center;
72
        justify-content: space-between;
73
        position: relative;
74
    }
75
 
76
    ul {
77
        display: flex;
78
        flex-direction: column;
79
        gap: 1rem;
80
 
81
        .notification-item {
82
            display: flex;
83
            flex-direction: column;
84
            justify-content: center;
85
            gap: 0.5rem;
86
 
87
            a,
88
            span {
89
                color: $font-color;
90
            }
91
 
92
            a {
93
                position: relative;
94
 
95
                &::before {
96
                    content: "";
97
                    width: 15px;
98
                    height: 15px;
99
                    border-radius: 100px;
100
                    background-color: var(--background-gray);
101
                    position: absolute;
102
                    top: 50%;
103
                    left: -1.2rem;
104
                    transform: translateY(-50%);
105
                }
106
            }
107
        }
108
    }
109
}
110
 
111
.full-width {
112
    float: left;
113
    width: 100%;
114
    background-color: #fff;
115
    margin-bottom: 20px;
116
}
117
 
118
/* ============= Suggestions ============ */
119
 
120
.sd-title {
121
    width: 100%;
122
    position: relative;
123
    display: grid;
124
    background-color: transparent;
125
    padding: 0 5px 20px;
126
 
127
    h3,
128
    a,
129
    label {
130
        color: $title-color;
131
    }
132
 
133
    h4 {
134
        margin-bottom: 5px;
135
        font-size: 16px;
136
        font-weight: 600;
137
        line-height: 24px;
138
    }
139
 
140
    h3 {
141
        font-size: 1.1rem;
142
        font-weight: 700;
143
    }
144
 
145
    a,
146
    label {
147
        font-size: 1rem;
148
        font-weight: 600;
149
        cursor: pointer;
150
    }
151
 
152
    i {
153
        color: $icons-color;
154
        font-size: 24px;
155
        position: absolute;
156
        right: 5px;
157
        top: 18px;
158
    }
159
}
160
 
161
.suggestion-usd {
162
    width: 100%;
163
    padding: 15px 20px;
164
 
165
    img {
166
        border-radius: 100px;
167
        background: #fff;
168
    }
169
 
170
    &>span {
171
        margin-top: 4px;
172
        position: relative;
173
        margin-left: 1rem;
174
 
175
        i {
176
            color: #b2b2b2;
177
            width: 25px;
178
            height: 25px;
179
            border-radius: 3px;
180
            cursor: pointer;
181
            text-align: center;
182
            display: flex;
183
            justify-content: center;
184
            align-items: center;
185
 
186
            &:hover {
187
                background-color: #0961bf !important;
188
                color: #fff;
189
                border-radius: 3px;
190
            }
191
        }
192
    }
193
}
194
 
195
.sgt-text {
196
    padding-left: 10px;
197
 
198
    h4 {
199
        color: $font-color;
200
        font-size: 14px;
201
        font-weight: 400;
202
        margin-bottom: 4px;
203
    }
204
 
205
    span {
206
        color: #686868;
207
        font-size: 14px;
208
    }
209
}
210
 
211
.icon-button {
212
    color: #b2b2b2;
213
    width: 25px;
214
    height: 25px;
215
    border-radius: 3px;
216
    cursor: pointer;
217
    text-align: center;
218
    display: flex !important;
219
    justify-content: center;
220
    align-items: center;
221
 
222
    &:hover {
223
        background-color: #0961bf !important;
224
        color: #fff;
225
    }
226
}
227
 
228
.view-more>a {
229
    color: #e44d3a;
230
    font-size: 14px;
231
    font-weight: 700;
232
}
233
 
234
.view-more>a:hover {
235
    color: #e44d3a;
236
}
237
 
238
/* =================== main-ws-sec ================== */
239
 
240
.main-ws-sec {
241
    width: 100%;
242
}
243
 
244
/* ================ posts-section ================== */
245
 
246
.posts-section {
247
    width: 100%;
248
    display: flex;
249
    flex-direction: column;
250
    gap: 0.5rem;
251
}
252
 
253
.reviewtext {
254
    margin: 0 -20px;
255
}
256
 
257
.reviewtext p {
258
    padding-left: 20px;
259
}
260
 
261
.post-bar {
262
    display: flex;
263
    flex-direction: column;
264
    padding: 1rem;
265
    width: 100%;
266
    border-radius: $border-radius;
267
    border-bottom: solid 1px $border-primary;
268
    border-top: solid 1px $border-primary;
269
    box-shadow: $light-shadow;
270
    background-color: $bg-color;
271
    gap: 0.5rem;
272
    box-shadow: $shadow;
273
}
274
 
275
.post_topbar {
276
    width: 100%;
277
    position: relative;
278
    display: flex;
279
    justify-content: space-between;
280
    color: $subtitle-color;
281
}
282
 
283
.feed-options,
284
.comments-options {
285
    display: none;
286
    position: absolute;
287
    top: 36px;
288
    right: 5px;
289
    z-index: 100;
290
    height: fit-content;
291
    min-width: 150px;
292
    padding: 0.5rem;
293
    background-color: $bg-color;
294
    border: 1px solid $border-primary;
295
    border-radius: $border-radius;
296
    border-start-end-radius: 0;
297
    box-shadow: $shadow;
298
 
299
    &.active {
300
        display: block;
301
    }
302
 
303
    li .option-btn {
304
        cursor: pointer;
305
        color: $font-color;
306
        width: 100%;
307
        text-align: left;
308
        transition: all 0.2s;
309
 
310
        &:hover {
311
            font-weight: bold;
312
        }
313
    }
314
}
315
 
316
.comments-options {
317
    top: 15px;
318
}
319
 
320
.usy-dt {
321
    display: flex;
322
    gap: 0.5rem;
323
 
324
    img {
325
        border-radius: 100px;
326
        background-color: #fff;
327
    }
328
}
329
 
330
.ed-opts {
331
    position: relative;
332
 
333
    &>a {
334
        color: #b2b2b2;
335
        font-size: 24px;
336
        position: relative;
337
 
338
        &:hover {
339
            color: #e44d3a;
340
        }
341
    }
342
}
343
 
344
.ed-options {
345
    position: absolute;
346
    top: 100%;
347
    right: 0;
348
    width: 130px;
349
    background-color: $bg-color;
350
    box-shadow: $light-shadow;
351
    padding: 20px;
352
    visibility: hidden;
353
    z-index: 5;
354
 
355
    &.active {
356
        visibility: visible;
357
    }
358
 
359
    li {
360
        width: 100%;
361
        margin-bottom: 15px;
362
 
363
        &:last-child {
364
            margin-bottom: 0;
365
        }
366
 
367
        a {
368
            color: #686868;
369
            font-size: 14px;
370
            font-weight: 600;
371
        }
372
    }
373
}
374
 
375
.usy-name {
376
    display: flex;
377
    flex-direction: column;
378
    justify-content: center;
379
 
380
    h3 {
381
        color: $subtitle-color;
382
        font-size: 18px;
383
        text-transform: capitalize;
384
        font-weight: 600;
385
    }
386
 
387
    span {
388
        color: $subtitle-color;
389
        font-size: 14px;
390
    }
391
 
392
    img {
393
        margin-top: 4px;
394
        margin-right: 6px;
395
    }
396
 
397
    .bklink img {
398
        margin-top: 1px;
399
        margin-right: 6px;
400
    }
401
}
402
 
403
.epi-sec {
404
    float: left;
405
    width: 100%;
406
    padding: 0;
407
}
408
 
409
.usy-name .bklink {
410
    float: left;
411
    margin-top: 5px !important;
412
    margin-bottom: 15px;
413
}
414
 
415
.descp {
416
    float: left;
417
    margin-top: 15px;
418
    margin-bottom: 15px;
419
}
420
 
421
.descp li {
422
    display: inline-block;
423
    margin-right: 15px;
424
}
425
 
426
.descp li span {
427
    color: #b2b2b2;
428
    font-size: 14px;
429
    float: left;
430
}
431
 
432
.descp li img {
433
    margin-right: 5px;
434
}
435
 
436
.bk-links li {
437
    display: inline-block;
438
    margin-right: 7px;
439
}
440
 
441
.bk-links li:last-child {
442
    margin-right: 0;
443
}
444
 
445
.bk-links li i {
446
    color: #fff;
447
    font-size: 24px;
448
    width: 33px;
449
    height: 30px;
450
    padding-left: 0px;
451
    background-color: #53d690;
452
    text-align: center;
453
    line-height: 30px;
454
}
455
 
456
.bk-links li i.la-envelope {
457
    background-color: #e44d3a;
458
}
459
 
460
.bid_now {
461
    color: #fff;
462
    background-color: #51a5fb;
463
    text-transform: capitalize;
464
    display: inline-block;
465
    height: 30px;
466
    padding: 0 10px;
467
    line-height: 30px;
468
    position: relative;
469
    top: -3px;
470
}
471
 
472
.bid_now:hover {
473
    color: #fff;
474
}
475
 
476
/* ============== job_descp ============ */
477
 
478
.job_descp {
479
    width: 100%;
480
    display: grid;
481
    gap: 0.5rem;
482
 
483
    h3 {
484
        color: $subtitle-color;
485
        font-size: 16px;
486
        font-weight: 600;
487
    }
488
 
489
    &>p {
490
        color: $font-color;
491
        font-size: 15px;
492
        line-height: 24px;
493
    }
494
 
495
    video,
496
    img {
497
        width: 100%;
498
        max-height: 500px;
499
        border-radius: $border-radius;
500
        object-fit: cover;
501
        background-color: $white;
502
    }
503
}
504
 
505
.job-dt {
506
    width: 100%;
507
    margin-bottom: 22px;
508
}
509
 
510
.job-dt li {
511
    display: inline-block;
512
    margin-right: 15px;
513
}
514
 
515
.job-dt li a {
516
    text-transform: capitalize;
517
    padding: 5px 13px;
518
    -webkit-border-radius: 30px;
519
    -moz-border-radius: 30px;
520
    -ms-border-radius: 30px;
521
    -o-border-radius: 30px;
522
    border-radius: 3px;
523
    display: inline-block;
524
    font-size: 14px;
525
    font-weight: 500;
526
}
527
 
528
.job-dt li span {
529
    color: #333;
530
    font-size: 16px;
531
    font-weight: 600;
532
}
533
 
534
/* ============= skill-tags =========== */
535
 
536
.inmail_contacts {
537
    max-height: 80vh;
538
    display: grid;
539
    grid-template-rows: auto 1fr;
540
}
541
 
542
/* ============= skill-tags =========== */
543
 
544
.skill-tags {
545
    /* float: left; */
546
    width: 100%;
547
    /* margin-bottom: 15px; */
548
    display: flex;
549
    align-items: center;
550
    margin-top: 0.5rem;
551
    flex-wrap: wrap;
552
    gap: 0.5rem;
553
}
554
 
555
.skill-tags li {
556
    display: inline-block;
557
    margin-right: 6px;
558
    /* margin-bottom: 10px; */
559
}
560
 
561
.skill-tags li a {
562
    display: inline-block;
563
    color: #b2b2b2;
564
    font-size: 14px;
565
    background-color: #f1f1f1;
566
    -webkit-border-radius: 30px;
567
    -moz-border-radius: 30px;
568
    -ms-border-radius: 30px;
569
    -o-border-radius: 30px;
570
    border-radius: 30px;
571
    padding: 7px 15px;
572
    font-weight: 500;
573
}
574
 
575
/* ========== job-status-bar ========== */
576
 
577
.job-status-bar {
578
    width: 100%;
579
}
580
 
581
.reactions-list {
582
    width: 100%;
583
    display: flex;
584
    align-items: center;
585
    justify-content: space-around;
586
    padding-bottom: 10px;
587
    border-bottom: 1px solid #cdd2e1;
588
 
589
    li a,
590
    li button {
591
        color: $subtitle-color;
592
        font-size: 1rem;
593
    }
594
 
595
    @media (min-width: 768px) {
596
        justify-content: flex-start;
597
        gap: 1.5rem;
598
 
599
        li a,
600
        li button {
601
            font-size: 1rem;
602
        }
603
    }
604
}
605
 
606
.img-icon {
607
    height: 1rem;
608
    width: 1rem;
609
 
610
    &.lg {
611
        height: 1.5rem;
612
        width: 1.5rem;
613
    }
614
 
615
    &.options {
616
        height: 1.5rem;
617
        width: auto;
618
    }
619
 
620
    &.options-sm {
621
        height: 1rem;
622
        width: auto;
623
    }
624
 
625
    &.options-lg {
626
        height: 1.5rem;
627
        width: auto;
628
    }
629
}
630
 
631
.like-com {
632
    width: 100%;
633
    display: flex;
634
    justify-content: space-around;
635
    gap: 1rem;
636
 
637
    li {
638
        color: $font-color;
639
 
640
        a {
641
            color: $subtitle-color;
642
 
643
            &:hover,
644
            &.active {
645
                color: #e44d3a;
646
            }
647
 
648
            i {
649
                margin-right: 2px;
650
                font-size: 14px;
651
                position: relative;
652
                top: 2px;
653
            }
654
        }
655
 
656
        span {
657
            color: #ffffff;
658
            font-size: 13px;
659
            width: 30px;
660
            height: 30px;
661
            line-height: 30px;
662
            border-radius: 30px;
663
            text-align: center;
664
            font-weight: 600;
665
            margin-left: -25px;
666
        }
667
 
668
        .com {
669
            position: relative;
670
 
671
            img {
672
                margin-right: 10px;
673
            }
674
        }
675
    }
676
}
677
 
678
.job-status-bar>a {
679
    color: #b2b2b2 !important;
680
    font-size: 14px;
681
    cursor: pointer;
682
}
683
 
684
.job-status-bar>a:hover {
685
    color: #e44d3a !important;
686
}
687
 
688
.job-status-bar>a i {
689
    font-size: 14px;
690
    margin-right: 7px;
691
    position: relative;
692
    top: 1px;
693
}
694
 
695
/* ============= top-profiles ============ */
696
 
697
.top-profiles {
698
    float: left;
699
    width: 100%;
700
    border: 1px solid #e5e5e5;
701
    margin-bottom: 20px;
702
}
703
 
704
.pf-hd {
705
    float: left;
706
    width: 100%;
707
    border-bottom: 1px solid #e5e5e5;
708
    padding: 20px 20px;
709
    position: relative;
710
}
711
 
712
.pf-hd h3 {
713
    color: #000000;
714
    font-size: 20px;
715
    font-weight: 600;
716
    text-transform: capitalize;
717
    float: left;
718
}
719
 
720
.pf-hd i {
721
    position: absolute;
722
    top: 50%;
723
    -webkit-transform: translateY(-50%);
724
    -moz-transform: translateY(-50%);
725
    -ms-transform: translateY(-50%);
726
    -o-transform: translateY(-50%);
727
    transform: translateY(-50%);
728
    right: 7px;
729
    color: #b2b2b2;
730
    font-size: 24px;
731
}
732
 
733
 
734
/* =============== comment-section ============== */
735
 
736
.comment-section {
737
    float: left;
738
    width: 100%;
739
    background-color: #fff;
740
    padding: 20px;
741
    box-shadow: 0px 3px #e4e4e4;
742
    margin-top: 1rem;
743
}
744
 
745
.plus-ic {
746
    float: left;
747
    width: 100%;
748
    text-align: center;
749
    margin-bottom: 20px;
750
}
751
 
752
.plus-ic i {
753
    width: 30px;
754
    height: 30px;
755
    line-height: 30px;
756
    border: 1px solid #d2d2d2;
757
    text-align: center;
758
    color: #b2b2b2;
759
    -webkit-border-radius: 100px;
760
    -moz-border-radius: 100px;
761
    -ms-border-radius: 100px;
762
    -o-border-radius: 100px;
763
    border-radius: 100px;
764
}
765
 
766
/* =============== comment-sec ================ */
767
 
768
.bg-img {
769
    display: table-cell;
770
}
771
 
772
.bg-img img {
773
    -webkit-border-radius: 100px;
774
    -moz-border-radius: 100px;
775
    -ms-border-radius: 100px;
776
    -o-border-radius: 100px;
777
    border-radius: 100px;
778
}
779
 
780
.comment {
781
    display: table-cell;
782
    vertical-align: top;
783
    width: 100%;
784
    padding-left: 10px;
785
}
786
 
787
.comment h3 {
788
    color: #000000;
789
    font-size: 16px;
790
    font-weight: 600;
791
    margin-bottom: 10px;
792
}
793
 
794
.comment span {
795
    color: #b2b2b2;
796
    font-size: 14px;
797
    display: block;
798
    margin-bottom: 14px;
799
}
800
 
801
.comment p {
802
    color: #686868;
803
    font-size: 14px;
804
    margin-bottom: 10px;
805
    line-height: 20px;
806
}
807
 
808
.comment>a {
809
    display: inline-block;
810
    color: #b2b2b2;
811
    font-size: 14px;
812
    font-weight: 600;
813
}
814
 
815
.comment>a.active,
816
.comment>a:hover {
817
    color: #e44d3a;
818
}
819
 
820
.comment>a i {
821
    font-weight: 600;
822
    margin-right: 6px;
823
}
824
 
825
/* =============== post-comment ============= */
826
 
827
.post-comment {
828
    float: left;
829
    width: 100%;
830
}
831
 
832
.cm_img {
833
    float: left;
834
    width: 40px;
835
    margin-right: 10px;
836
}
837
 
838
.comment_box {
839
    float: none;
840
}
841
 
842
.comment_box input {
843
    width: 372px;
844
    height: 40px;
845
    border: 1px solid #e5e5e5;
846
    background-color: #efefef;
847
    padding-left: 10px;
848
    color: #b2b2b2;
849
    font-size: 14px;
850
    font-weight: 600;
851
    line-height: 40px;
852
    resize: none;
853
}
854
 
855
.no_results {
856
    display: grid;
857
    place-items: center;
858
    min-height: 200px;
859
}
860
 
861
.no_results h2 {
862
    font-weight: 700;
863
}
864
 
865
.chat-title {
866
    font-size: 1.3rem;
867
}
868
 
869
.comment_box form button {
870
    float: right;
871
    color: #fff;
872
    background-color: #e44d3a;
873
    height: 40px;
874
    padding: 0 10px;
875
    text-align: center;
876
    font-size: 14px;
877
    border: 0;
878
    margin-left: 10px;
879
    cursor: pointer;
880
    font-weight: 600;
881
}
882
 
883
/* ============== process-comm ============= */
884
 
885
.process-comm {
886
    float: left;
887
    width: 100%;
888
    text-align: center;
889
    padding-top: 40px;
890
}
891
 
892
.process-comm img {
893
    float: none;
894
}
895
 
896
/* =============== right-sidebar ============= */
897
 
898
.widget {
899
    width: 100%;
900
    background-color: $bg-color;
901
}
902
 
903
.widget-about {
904
    text-align: center;
905
 
906
    h3 {
907
        color: $title-color;
908
        font-size: 20px;
909
        font-weight: 600;
910
    }
911
 
912
    span {
913
        color: $subtitle-color;
914
        font-size: 14px;
915
        width: 100%;
916
    }
917
 
918
    p {
919
        color: $font-color;
920
    }
921
}
922
 
923
.sign_link {
924
    float: left;
925
    width: 100%;
926
    /* border-top: 1px solid #e5e5e5; */
927
    padding: 18px 0 0 0;
928
}
929
 
930
.sign_link h3 {
931
    color: #000000;
932
    font-size: 18px;
933
    font-weight: 600;
934
    margin-bottom: 5px;
935
    text-transform: uppercase;
936
}
937
 
938
.sign_link h3 a {
939
    color: #000;
940
}
941
 
942
.sign_link>a {
943
    display: inline-block;
944
    color: #e44d3a;
945
    font-size: 14px;
946
    font-weight: 500;
947
}
948
 
949
.sign_link>a:hover {
950
    color: #e44d3a;
951
}
952
 
953
/* ============== Widget Jobs ============ */
954
 
955
.jobs-list {
956
    float: left;
957
    width: 100%;
958
    padding: 20px 20px;
959
}
960
 
961
.job-info {
962
    float: left;
963
    width: 100%;
964
    margin-bottom: 22px;
965
}
966
 
967
.job-info:last-child {
968
    margin-bottom: 0;
969
}
970
 
971
.job-details {
972
    float: left;
973
    width: 165px;
974
}
975
 
976
.job-details h3 {
977
    color: #000000;
978
    font-size: 14px;
979
    font-weight: 600;
980
    margin-bottom: 10px;
981
}
982
 
983
.job-details p {
984
    color: #686868;
985
    font-size: 14px;
986
    line-height: 20px;
987
}
988
 
989
.hr-rate {
990
    float: right;
991
    width: 40px;
992
}
993
 
994
.hr-rate span {
995
    color: #000000;
996
    font-size: 14px;
997
    font-weight: 600;
998
    float: right;
999
}
1000
 
1001
/* ================ post-project-popup =============== */
1002
 
1003
.post-popup {
1004
    width: 570px;
1005
    margin: 0 auto;
1006
    position: fixed;
1007
    top: 50%;
1008
    left: 50%;
1009
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.65);
1010
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.65);
1011
    -ms-transform: translateX(-50%) translateY(-50%) scale(0.65);
1012
    -o-transform: translateX(-50%) translateY(-50%) scale(0.65);
1013
    transform: translateX(-50%) translateY(-50%) scale(0.65);
1014
    opacity: 0;
1015
    visibility: hidden;
1016
    z-index: 0;
1017
}
1018
 
1019
.post-popup.active {
1020
    opacity: 1;
1021
    visibility: visible;
1022
    z-index: 999;
1023
    transform: scale(1) translateX(-50%) translateY(-50%);
1024
}
1025
 
1026
.post-project>a {
1027
    position: absolute;
1028
    top: -20px;
1029
    right: -20px;
1030
    color: #fff;
1031
    font-size: 22px;
1032
    cursor: pointer;
1033
}
1034
 
1035
.post-project>a:hover {
1036
    color: #fff;
1037
}
1038
 
1039
.post-project {
1040
    float: left;
1041
    width: 100%;
1042
    position: relative;
1043
}
1044
 
1045
.post-project h3 {
1046
    float: left;
1047
    width: 100%;
1048
    background-color: #e44d3a;
1049
    color: #fff;
1050
    text-align: center;
1051
    font-size: 18px;
1052
    font-weight: 500;
1053
    padding: 20px 0;
1054
}
1055
 
1056
::-webkit-input-placeholder {
1057
    /* Chrome/Opera/Safari */
1058
    color: #b2b2b2;
1059
}
1060
 
1061
::-moz-placeholder {
1062
    /* Firefox 19+ */
1063
    color: #b2b2b2;
1064
}
1065
 
1066
:-ms-input-placeholder {
1067
    /* IE 10+ */
1068
    color: #b2b2b2;
1069
}
1070
 
1071
:-moz-placeholder {
1072
    /* Firefox 18- */
1073
    color: #b2b2b2;
1074
}
1075
 
1076
.price-sec {
1077
    float: left;
1078
    width: 100%;
1079
}
1080
 
1081
.price-br {
1082
    float: left;
1083
    width: 225px !important;
1084
    position: relative;
1085
}
1086
 
1087
.price-br>i {
1088
    position: absolute;
1089
    top: 0;
1090
    right: 0;
1091
    color: #b2b2b2;
1092
    font-size: 18px;
1093
    width: 40px;
1094
    height: 40px;
1095
    line-height: 40px;
1096
    border-left: 1px solid #e5e5e5;
1097
    text-align: center;
1098
}
1099
 
1100
.price-sec span {
1101
    color: #b2b2b2;
1102
    font-size: 14px;
1103
    float: left;
1104
    padding: 12px 17px 0 17px;
1105
}
1106
 
1107
select {
1108
    -webkit-appearance: none;
1109
    -moz-appearance: none;
1110
}
1111
 
1112
.inp-field {
1113
    float: left;
1114
    width: 100%;
1115
    position: relative;
1116
}
1117
 
1118
.inp-field:before {
1119
    content: "\f107";
1120
    position: absolute;
1121
    top: 13px;
1122
    right: 15px;
1123
    color: #717171;
1124
    font-family: fontawesome;
1125
}
1126
 
1127
.post-popup.job_post .price-br {
1128
    width: 100% !important;
1129
}
1130
 
1131
/* ================= sign-in ================ */
1132
 
1133
.sign-in {
1134
    background-color: #e75348;
1135
}
1136
 
1137
.sign-in-page {
1138
    width: 100%;
1139
    padding: 2rem 1rem;
1140
 
1141
    .row {
1142
        row-gap: 1rem;
1143
    }
1144
 
1145
    @media (min-width: 768px) {
1146
        padding: 2rem 0 0;
1147
    }
1148
}
1149
 
1150
.signin-popup {
1151
    margin: 0 auto;
1152
    position: relative;
1153
}
1154
 
1155
.signin-popup:before {
1156
    content: "";
1157
    position: absolute;
1158
    top: -16px;
1159
    left: 56px;
1160
    width: 30px;
1161
    height: 30px;
1162
    background-color: #fff;
1163
    -webkit-border-radius: 100px;
1164
    -moz-border-radius: 100px;
1165
    -ms-border-radius: 100px;
1166
    -o-border-radius: 100px;
1167
    border-radius: 100px;
1168
}
1169
 
1170
.signin-popup:after {
1171
    content: "";
1172
    position: absolute;
1173
    top: -37px;
1174
    left: 43px;
1175
    width: 20px;
1176
    height: 20px;
1177
    background-color: #fff;
1178
    -webkit-border-radius: 100px;
1179
    -moz-border-radius: 100px;
1180
    -ms-border-radius: 100px;
1181
    -o-border-radius: 100px;
1182
    border-radius: 100px;
1183
}
1184
 
1185
.signin-pop {
1186
    width: 100%;
1187
    background-color: #fff;
1188
    position: relative;
1189
}
1190
 
1191
.signin-pop:before {
1192
    content: "";
1193
    position: absolute;
1194
    top: 0;
1195
    left: 50%;
1196
    -webkit-transform: translateX(-50%);
1197
    -moz-transform: translateX(-50%);
1198
    -ms-transform: translateX(-50%);
1199
    -o-transform: translateX(-50%);
1200
    transform: translateX(-50%);
1201
    height: 100%;
1202
    width: 1px;
1203
    background-color: #f0f0f0;
1204
}
1205
 
1206
.dff-tab {
1207
    display: none;
1208
}
1209
 
1210
.dff-tab.current {
1211
    display: block;
1212
}
1213
 
1214
.cmp-info {
1215
    width: 100%;
1216
    display: grid;
1217
    place-items: center;
1218
    height: 100%;
1219
 
1220
    .cm-logo {
1221
        display: flex;
1222
        flex-direction: column;
1223
        align-items: center;
1224
        justify-content: center;
1225
        padding: 0;
1226
        width: 100%;
1227
 
1228
        img {
1229
            margin-bottom: 0.5rem;
1230
            width: 100%;
1231
            object-fit: scale-down;
1232
        }
1233
    }
1234
 
1235
    @media (min-width: 721px) {
1236
        .cm-logo {
1237
            padding: 0 3rem;
1238
        }
1239
    }
1240
}
1241
 
1242
/* =============== login-sec ============= */
1243
 
1244
.login-sec,
1245
.sign_in_sec {
1246
    display: flex;
1247
    flex-direction: column;
1248
    row-gap: 1rem;
1249
}
1250
 
1251
.login-sec {
1252
    width: 100%;
1253
 
1254
    @media (min-width: 768px) {
1255
        padding: 0 3rem;
1256
    }
1257
}
1258
 
1259
.sign-control {
1260
    width: 100%;
1261
    margin-bottom: 1.5rem;
1262
    display: flex;
1263
 
1264
    li {
1265
        display: inline-block;
1266
 
1267
        a {
1268
            font-size: 14px;
1269
            padding: 7px 10px;
1270
            background-color: $button-bg-tertiary;
1271
        }
1272
    }
1273
}
1274
 
1275
.sign_in_sec {
1276
    width: 100%;
1277
    display: none;
1278
 
1279
    &.current {
1280
        display: flex;
1281
    }
1282
 
1283
    h3 {
1284
        font-size: 18px;
1285
        font-weight: 600;
1286
        position: relative;
1287
        width: fit-content;
1288
        padding-bottom: 0.5rem;
1289
 
1290
        &:before {
1291
            content: "";
1292
            position: absolute;
1293
            background-color: #0961bf;
1294
            bottom: 0;
1295
            left: 0;
1296
            width: 100%;
1297
            height: 2px;
1298
        }
1299
    }
1300
 
1301
    form {
1302
        width: 100%;
1303
 
1304
        input,
1305
        input:-webkit-autofill,
1306
        input:-webkit-autofill:hover,
1307
        input:-webkit-autofill:focus,
1308
        select:-webkit-autofill,
1309
        select {
1310
            box-shadow: 0 0 0px 1000px $bg-color inset;
1311
            height: 40px;
1312
            color: $font-color;
1313
            background-color: $bg-color !important;
1314
            border: 1px solid $border-primary;
1315
            font-size: 14px;
1316
            padding: 0 15px 0 40px;
1317
            width: 100%;
1318
        }
1319
 
1320
        select {
1321
            line-height: 40px;
1322
            height: 40px;
1323
        }
1324
 
1325
        button {
1326
            color: $button-text-color-secondary;
1327
            border: 1px solid $border-primary;
1328
            font-size: 16px;
1329
            background-color: $button-bg-secondary;
1330
            padding: 12px 27px;
1331
            font-weight: 500;
1332
            cursor: pointer;
1333
 
1334
            &:disabled {
1335
                background-color: #dddddd;
1336
                color: #a3a1a1;
1337
            }
1338
        }
1339
    }
1340
}
1341
 
1342
.sign_in_sec_button {
1343
    color: #ffffff;
1344
    font-size: 16px;
1345
    background-color: #66a7dd;
1346
    padding: 12px 27px;
1347
    border: 0;
1348
    font-weight: 500;
1349
    cursor: pointer;
1350
}
1351
 
1352
/* ============= sign_in_sec ============= */
1353
 
1354
.sn-field {
1355
    width: 100%;
1356
    position: relative;
1357
 
1358
    &>i {
1359
        position: absolute;
1360
        top: 50%;
1361
        left: 15px;
1362
        color: #666666;
1363
        font-size: 16px;
1364
        transform: translateY(-50%);
1365
    }
1366
 
1367
    &>span {
1368
        position: absolute;
1369
        top: 50%;
1370
        right: 15px;
1371
        font-weight: 700;
1372
        color: #666666;
1373
        font-size: 15px;
1374
        -webkit-transform: translateY(-50%);
1375
        -moz-transform: translateY(-50%);
1376
        -ms-transform: translateY(-50%);
1377
        -o-transform: translateY(-50%);
1378
        transform: translateY(-50%);
1379
    }
1380
}
1381
 
1382
.checky-sec {
1383
    /* float: left; */
1384
    width: 100%;
1385
    margin-top: 10px;
1386
}
1387
 
1388
.checky-sec.st2 small {
1389
    font-size: 13px;
1390
    width: 90%;
1391
    line-height: 20px;
1392
}
1393
 
1394
.checky-sec.st2 .fgt-sec input[type="checkbox"]+label span {
1395
    margin-top: 3px;
1396
}
1397
 
1398
.fgt-sec * {
1399
    cursor: pointer;
1400
}
1401
 
1402
.fgt-sec input[type="checkbox"] {
1403
    display: none;
1404
}
1405
 
1406
.fgt-sec label {
1407
    float: left;
1408
}
1409
 
1410
.fgt-sec input[type="checkbox"]+label span {
1411
    display: inline-block;
1412
    width: 15px;
1413
    height: 15px;
1414
    position: relative;
1415
    border: 1px solid #d2d2d2;
1416
    -webkit-border-radius: 100px;
1417
    -moz-border-radius: 100px;
1418
    -ms-border-radius: 100px;
1419
    -o-border-radius: 100px;
1420
    border-radius: 100px;
1421
}
1422
 
1423
.fgt-sec input[type="checkbox"]+label span:before {
1424
    content: "";
1425
    width: 7px;
1426
    height: 7px;
1427
    -webkit-border-radius: 100px;
1428
    -moz-border-radius: 100px;
1429
    -ms-border-radius: 100px;
1430
    -o-border-radius: 100px;
1431
    border-radius: 100px;
1432
    font-size: 8px;
1433
    color: #ffffff;
1434
    opacity: 0;
1435
    visibility: hidden;
1436
    background-color: #e44d3a;
1437
    position: absolute;
1438
    font-family: fontawesome;
1439
    top: 50%;
1440
    left: 50%;
1441
    -webkit-transform: translateX(-50%) translateY(-50%);
1442
    -moz-transform: translateX(-50%) translateY(-50%);
1443
    -ms-transform: translateX(-50%) translateY(-50%);
1444
    -o-transform: translateX(-50%) translateY(-50%);
1445
    transform: translateX(-50%) translateY(-50%);
1446
}
1447
 
1448
.fgt-sec input[type="checkbox"]:checked+label span:before {
1449
    opacity: 1;
1450
    visibility: visible;
1451
}
1452
 
1453
.fgt-sec small {
1454
    /* float: left; */
1455
    color: #000000;
1456
    font-size: 14px;
1457
    font-weight: 500;
1458
    padding-left: 10px;
1459
}
1460
 
1461
.checky-sec>a {
1462
    float: right;
1463
    color: #000000;
1464
    font-size: 14px;
1465
    font-weight: 500;
1466
}
1467
 
1468
/* ======= Radio Button Styles ======= */
1469
 
1470
.fgt-sec input[type="radio"] {
1471
    display: none;
1472
}
1473
 
1474
.fgt-sec label {
1475
    float: left;
1476
}
1477
 
1478
.fgt-sec input[type="radio"]+label span {
1479
    display: inline-block;
1480
    width: 15px;
1481
    height: 15px;
1482
    position: relative;
1483
    border: 1px solid #d2d2d2;
1484
    -webkit-border-radius: 100px;
1485
    -moz-border-radius: 100px;
1486
    -ms-border-radius: 100px;
1487
    -o-border-radius: 100px;
1488
    border-radius: 100px;
1489
}
1490
 
1491
.fgt-sec input[type="radio"]+label span:before {
1492
    content: "";
1493
    width: 7px;
1494
    height: 7px;
1495
    -webkit-border-radius: 100px;
1496
    -moz-border-radius: 100px;
1497
    -ms-border-radius: 100px;
1498
    -o-border-radius: 100px;
1499
    border-radius: 100px;
1500
    font-size: 8px;
1501
    color: #ffffff;
1502
    opacity: 0;
1503
    visibility: hidden;
1504
    background-color: #e44d3a;
1505
    position: absolute;
1506
    font-family: fontawesome;
1507
    top: 49%;
1508
    left: 49%;
1509
    -webkit-transform: translateX(-50%) translateY(-50%);
1510
    -moz-transform: translateX(-50%) translateY(-50%);
1511
    -ms-transform: translateX(-50%) translateY(-50%);
1512
    -o-transform: translateX(-50%) translateY(-50%);
1513
    transform: translateX(-50%) translateY(-50%);
1514
}
1515
 
1516
.fgt-sec input[type="radio"]:checked+label span:before {
1517
    opacity: 1;
1518
    visibility: visible;
1519
}
1520
 
1521
/* =============== signup-tab ============== */
1522
 
1523
.signup-tab {
1524
    float: left;
1525
    width: 100%;
1526
    border: 1px solid #e5e5e5;
1527
    text-align: center;
1528
    padding: 15px 0;
1529
    margin-bottom: 20px;
1530
    position: relative;
1531
    margin-top: -30px;
1532
}
1533
 
1534
.signup-tab>i {
1535
    position: absolute;
1536
    top: 15px;
1537
    left: 13px;
1538
    color: #000;
1539
    font-size: 14px;
1540
}
1541
 
1542
.signup-tab h2 {
1543
    color: #000000;
1544
    font-size: 14px;
1545
    font-weight: 500;
1546
    margin-bottom: 15px;
1547
}
1548
 
1549
.signup-tab ul {
1550
    float: left;
1551
    width: 100%;
1552
}
1553
 
1554
.signup-tab ul li {
1555
    display: inline-block;
1556
    margin-right: -4px;
1557
}
1558
 
1559
.signup-tab ul li a {
1560
    color: #000000;
1561
    font-size: 14px;
1562
    font-weight: 500;
1563
    background-color: #e5e5e5;
1564
    padding: 10px 15px;
1565
    -webkit-border-radius: 3px 0px 0px 3px;
1566
    -moz-border-radius: 3px 0px 0px 3px;
1567
    -ms-border-radius: 3px 0px 0px 3px;
1568
    -o-border-radius: 3px 0px 0px 3px;
1569
    border-radius: 3px 0px 0px 3px;
1570
    display: inline-block;
1571
}
1572
 
1573
.signup-tab ul li.current a {
1574
    background-color: #e44d3a;
1575
    color: #fff;
1576
}
1577
 
1578
.signup-tab ul li:last-child a {
1579
    -webkit-border-radius: 0px 3px 3px 0px;
1580
    -moz-border-radius: 0px 3px 3px 0px;
1581
    -ms-border-radius: 0px 3px 3px 0px;
1582
    -o-border-radius: 0px 3px 3px 0px;
1583
    border-radius: 0px 3px 3px 0px;
1584
}
1585
 
1586
/* ============ login-resources ============= */
1587
 
1588
.login-resources {
1589
    h4 {
1590
        color: $title-color;
1591
        font-size: 14px;
1592
        font-weight: 600;
1593
        text-transform: uppercase;
1594
    }
1595
 
1596
    &,
1597
    ul {
1598
        width: 100%;
1599
        display: flex;
1600
        flex-direction: column;
1601
        gap: 1rem;
1602
 
1603
        li {
1604
            width: 100%;
1605
 
1606
            a {
1607
                display: block;
1608
                padding: 10px;
1609
 
1610
                i {
1611
                    margin-right: 15px;
1612
                }
1613
            }
1614
        }
1615
    }
1616
}
1617
 
1618
.fb {
1619
    background-color: #3b5998;
1620
}
1621
 
1622
.tw {
1623
    background-color: #4099ff;
1624
}
1625
 
1626
.tw .fa-twitter {
1627
    color: #fff;
1628
}
1629
 
1630
/* =============== footy-sec ============= */
1631
 
1632
.footy-sec {
1633
    width: 100%;
1634
    padding: 2rem 0;
1635
 
1636
    &.container {
1637
        display: flex;
1638
        flex-wrap: wrap;
1639
        align-items: center;
1640
        justify-content: center;
1641
        gap: 1rem;
1642
 
1643
        .row {
1644
            gap: 1rem;
1645
            width: 94% !important;
1646
            display: flex;
1647
            justify-content: space-evenly;
1648
        }
1649
    }
1650
 
1651
    p {
1652
        font-size: 14px;
1653
        font-weight: 500;
1654
        order: 3;
1655
 
1656
        img {
1657
            padding-right: 5px;
1658
            position: relative;
1659
            top: 6px;
1660
        }
1661
    }
1662
 
1663
    ul {
1664
        margin-top: 5px;
1665
 
1666
        li {
1667
            display: inline-block;
1668
            padding: 0 10px;
1669
            border-right: 1px solid #ffffff;
1670
 
1671
            &:last-child {
1672
                border-right: none;
1673
            }
1674
 
1675
            a {
1676
                display: inline-block;
1677
                color: #3b5998;
1678
                font-size: 14px;
1679
                font-weight: 500;
1680
            }
1681
        }
1682
    }
1683
}
1684
 
1685
footer {
1686
    width: 100%;
1687
    display: none;
1688
 
1689
    a {
1690
        color: $font-color;
1691
    }
1692
 
1693
    &.footer-row {
1694
        display: grid;
1695
        gap: 5px;
1696
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
1697
    }
1698
 
1699
    @media (min-width: 768px) {
1700
        display: block;
1701
    }
1702
}
1703
 
1704
.footy-sec.mn {
1705
    p {
1706
        color: #b2b2b2;
1707
    }
1708
 
1709
    ul {
1710
        padding: 30px 0;
1711
 
1712
        li {
1713
            border-color: #b2b2b2;
1714
 
1715
            a {
1716
                color: $subtitle-color;
1717
 
1718
                &:hover {
1719
                    color: #e44d3a;
1720
                }
1721
            }
1722
        }
1723
    }
1724
}
1725
 
1726
.fl-rgt {
1727
    max-width: 40px;
1728
    display: inline-flex;
1729
}
1730
 
1731
/* ================== USER PROFILE =================== */
1732
 
1733
 
1734
 
1735
.cover-sec {
1736
    background-color: #fff;
1737
    margin-bottom: 1.5rem;
1738
    max-height: 280px;
1739
    overflow: hidden;
1740
 
1741
    img {
1742
        width: 100%;
1743
    }
1744
 
1745
    &>a {
1746
        display: inline-block;
1747
        color: #e44d3a;
1748
        font-size: 16px;
1749
        background-color: #fff;
1750
        border: 1px solid #e44d3a;
1751
        position: absolute;
1752
        top: 30px;
1753
        right: 0;
1754
        padding: 10px 15px;
1755
        font-weight: 600;
1756
        margin-right: 15px;
1757
 
1758
        i {
1759
            padding-right: 5px;
1760
        }
1761
    }
1762
}
1763
 
1764
.horizontal-list .row {
1765
    display: flex;
1766
    flex-wrap: wrap;
1767
    align-items: flex-end;
1768
    justify-content: center;
1769
    gap: 0.5rem;
1770
 
1771
    .btn {
1772
        padding: 0.2rem 0.6rem;
1773
    }
1774
}
1775
 
1776
/* ============= user_profile ============= */
1777
 
1778
.user_profile {
1779
    width: 100%;
1780
    background-color: $bg-color;
1781
    padding: 1rem 0.25rem;
1782
    border-radius: $border-radius;
1783
    border-top: 1px solid $border-primary;
1784
    border-bottom: 1px solid $border-primary;
1785
    text-align: center;
1786
    box-shadow: $shadow;
1787
    display: flex;
1788
    flex-direction: column;
1789
    justify-content: center;
1790
    align-items: center;
1791
    gap: 1rem;
1792
    position: relative;
1793
    padding-top: 120px;
1794
 
1795
    @media (min-width: 768px) {
1796
        padding-top: 1rem;
1797
    }
1798
}
1799
 
1800
.user-pro-img {
1801
    width: 100%;
1802
    text-align: center;
1803
    position: absolute;
1804
    bottom: 50%;
1805
 
1806
    @media (min-width: 768px) {
1807
        bottom: auto;
1808
        position: relative;
1809
    }
1810
 
1811
    .add-dp {
1812
        position: absolute;
1813
        top: 10px;
1814
        left: 60%;
1815
    }
1816
 
1817
    img {
1818
        width: 160px;
1819
        border-radius: 100px;
1820
        background: #fff;
1821
        box-shadow: $light-shadow;
1822
        border: 1px solid $border-primary;
1823
    }
1824
}
1825
 
1826
.add-dp {
1827
    margin: -16px;
1828
    padding: 0;
1829
 
1830
    i {
1831
        bottom: 0;
1832
        font-size: 14px;
1833
        box-shadow: none;
1834
        position: relative;
1835
        border-radius: 50px;
1836
        width: 40px;
1837
        height: 40px;
1838
        background: #0961bf;
1839
        padding: 12px;
1840
        color: #ffff;
1841
        left: 0;
1842
        top: -5px;
1843
 
1844
        &:hover {
1845
            font-size: 14px;
1846
            border: 2px solid #fff;
1847
            background: #1dac98;
1848
            padding: 11px;
1849
        }
1850
    }
1851
 
1852
    input[type="file"] {
1853
        opacity: 0;
1854
        padding: 10px 0px 9px;
1855
        display: none;
1856
    }
1857
}
1858
 
1859
.user_pro_status {
1860
    width: 100%;
1861
}
1862
 
1863
.flw-hr {
1864
    float: left;
1865
    width: 100%;
1866
    margin-bottom: 30px;
1867
}
1868
 
1869
.flw-hr li {
1870
    display: inline-block;
1871
    margin-right: 17px;
1872
}
1873
 
1874
.flw-hr li:last-child {
1875
    margin-right: 0;
1876
}
1877
 
1878
.flw-hr li a {
1879
    display: inline-block;
1880
    color: #ffffff;
1881
    font-size: 16px;
1882
    font-weight: 600;
1883
    padding: 11px 15px;
1884
}
1885
 
1886
.flw-hr li a i {
1887
    padding-right: 5px;
1888
}
1889
 
1890
.flww {
1891
    background-color: #53d690;
1892
}
1893
 
1894
.hre {
1895
    background-color: #51a5fb;
1896
}
1897
 
1898
/* =============== flw-status ============ */
1899
 
1900
.flw-status {
1901
    width: 100%;
1902
    display: flex;
1903
    justify-content: center;
1904
    gap: 1rem;
1905
 
1906
    li {
1907
        display: flex;
1908
        flex-direction: column;
1909
        gap: 0.5rem;
1910
 
1911
        span,
1912
        b {
1913
            color: $font-color;
1914
        }
1915
 
1916
        b {
1917
            font-weight: 600;
1918
        }
1919
    }
1920
}
1921
 
1922
/* ================== social_links ============= */
1923
 
1924
.social_links {
1925
    width: 100%;
1926
    text-align: left;
1927
 
1928
    li {
1929
        width: 100%;
1930
        padding: 15px 15px;
1931
        border-bottom: 1px solid #e5e5e5;
1932
 
1933
        a {
1934
            width: 100%;
1935
            color: #51a5fb;
1936
            font-size: 14px;
1937
            font-weight: 400;
1938
            text-overflow: ellipsis;
1939
            white-space: nowrap;
1940
            overflow: hidden;
1941
 
1942
            i {
1943
                padding-right: 5px;
1944
                font-size: 20px;
1945
                position: relative;
1946
                top: 3px;
1947
            }
1948
        }
1949
    }
1950
}
1951
 
1952
@media (min-width: 721px) {
1953
    .group-view-tab {
1954
        margin-left: 3.5rem;
1955
    }
1956
 
1957
    .group-view-tab span {
1958
        text-overflow: ellipsis;
1959
        white-space: nowrap;
1960
        overflow: hidden;
1961
    }
1962
}
1963
 
1964
@media (max-width: 720px) {
1965
    .group-view-tab {
1966
        margin-left: 3.5rem;
1967
    }
1968
}
1969
 
1970
.text-decoration-underline {
1971
    text-decoration: underline !important;
1972
}
1973
 
1974
.ellipsis {
1975
    text-overflow: ellipsis;
1976
    white-space: nowrap;
1977
    overflow: hidden;
1978
}
1979
 
1980
.la-globe {
1981
    color: #51a5fb;
1982
}
1983
 
1984
/* ================= user-tab-sec ============== */
1985
 
1986
.notifications-grid {
1987
    display: grid;
1988
    grid-template-columns: 1fr;
1989
    gap: 1rem;
1990
}
1991
 
1992
@media (min-width: 768px) {
1993
    .notifications-grid {
1994
        display: grid;
1995
        grid-template-columns: 30% 70%;
1996
        padding: 0 5%;
1997
    }
1998
}
1999
 
2000
.show_filters {
2001
    display: block;
2002
}
2003
 
2004
.hidden_filters {
2005
    display: none !important;
2006
}
2007
 
2008
@media (min-width: 768px) {
2009
    .show_filters {
2010
        display: none;
2011
    }
2012
 
2013
    .hidden_filters {
2014
        display: block !important;
2015
    }
2016
}
2017
 
2018
/* ================= user-tab-sec ============== */
2019
 
2020
.user-tab-sec {
2021
    width: 100%;
2022
 
2023
    h3 {
2024
        color: $title-color;
2025
        font-size: 1.5rem;
2026
        font-weight: 600;
2027
        text-transform: capitalize;
2028
    }
2029
}
2030
 
2031
.star-descp {
2032
    float: left;
2033
    width: 100%;
2034
    margin-bottom: 10px;
2035
}
2036
 
2037
.star-descp ul li {
2038
    margin-right: 5px !important;
2039
}
2040
 
2041
.star-descp>a {
2042
    float: left;
2043
    color: #51a5fb;
2044
    font-size: 18px;
2045
    font-weight: 600;
2046
    margin-left: 20px;
2047
    text-decoration: underline;
2048
}
2049
 
2050
.star-descp>a:hover {
2051
    color: #51a5fb;
2052
}
2053
 
2054
.star-descp span {
2055
    float: left;
2056
    color: #686868;
2057
    font-size: 18px;
2058
    font-weight: 600;
2059
    margin-right: 20px;
2060
}
2061
 
2062
.star-descp>ul {
2063
    float: left;
2064
}
2065
 
2066
.star-descp ul li {
2067
    display: inline-block;
2068
}
2069
 
2070
.star-descp ul li i {
2071
    color: #b7ce1f;
2072
    font-size: 16px;
2073
}
2074
 
2075
.tab-feed {
2076
    float: left;
2077
    width: 100%;
2078
    margin-bottom: 45px;
2079
    margin-top: 20px;
2080
}
2081
 
2082
.tab-feed ul {
2083
    float: left;
2084
    width: 100%;
2085
}
2086
 
2087
.tab-feed ul li {
2088
    display: inline-block;
2089
    margin-right: 35px;
2090
    text-align: center;
2091
}
2092
 
2093
.savetext ul {
2094
    border-bottom: none !important;
2095
}
2096
 
2097
.tab-feed.st2 ul li {
2098
    margin-right: 17px;
2099
}
2100
 
2101
.tab-feed ul li:last-child {
2102
    margin-right: 0;
2103
}
2104
 
2105
.tab-feed ul li.active img {
2106
    filter: grayscale(0);
2107
}
2108
 
2109
.tab-feed ul li.active span {
2110
    color: #e44d3a;
2111
}
2112
 
2113
.tab-feed ul li img {
2114
    float: none;
2115
    margin-bottom: 5px;
2116
    filter: grayscale(100%);
2117
}
2118
 
2119
.tab-feed ul li span {
2120
    display: block;
2121
    color: #b2b2b2;
2122
    font-weight: 400;
2123
    font-size: 16px;
2124
}
2125
 
2126
.tab-feed ul li:last-child {
2127
    margin-right: 0;
2128
}
2129
 
2130
/* ================ message-btn ============= */
2131
 
2132
.message-btn a {
2133
    display: inline-block;
2134
    font-size: 16px;
2135
    padding: 12px;
2136
    font-weight: 500;
2137
}
2138
 
2139
.message-btn a:hover {
2140
    color: #fff;
2141
}
2142
 
2143
.message-btn a i {
2144
    padding-right: 5px;
2145
}
2146
 
2147
/* ============== widget-portfolio ============== */
2148
 
2149
.wd-heady {
2150
    float: left;
2151
    width: 100%;
2152
    padding: 20px 20px;
2153
    border-bottom: 1px solid #e5e5e5;
2154
}
2155
 
2156
.wd-heady h3 {
2157
    color: #000000;
2158
    font-size: 18px;
2159
    font-weight: 600;
2160
    float: left;
2161
}
2162
 
2163
.wd-heady img {
2164
    float: right;
2165
}
2166
 
2167
.pf-gallery {
2168
    float: left;
2169
    width: 100%;
2170
    padding: 15px 15px;
2171
}
2172
 
2173
.pf-gallery ul {
2174
    float: left;
2175
    width: 100%;
2176
}
2177
 
2178
.pf-gallery ul li {
2179
    float: left;
2180
    width: 33.33%;
2181
    padding: 5px;
2182
    overflow: hidden;
2183
}
2184
 
2185
.pf-gallery ul li:hover {
2186
    -webkit-transform: scale(1.2);
2187
    -moz-transform: scale(1.2);
2188
    -ms-transform: scale(1.2);
2189
    -o-transform: scale(1.2);
2190
    transform: scale(1.2);
2191
}
2192
 
2193
.pf-gallery img {
2194
    width: 100%;
2195
}
2196
 
2197
.product-feed-tab {
2198
    display: flex;
2199
    flex-direction: column;
2200
    gap: 0.5rem;
2201
}
2202
 
2203
.product-feed-tab.current {
2204
    display: block;
2205
}
2206
 
2207
/* ==================== portfolio-gallery-sec ==================== */
2208
 
2209
.row {
2210
    margin: 0;
2211
}
2212
 
2213
/* ============== overview-box ============= */
2214
 
2215
.close-box {
2216
    position: absolute;
2217
    top: -20px;
2218
    right: -20px;
2219
    color: #fff;
2220
    font-size: 14px;
2221
    text-align: center;
2222
    width: 22px;
2223
    height: 22px;
2224
    line-height: 22px;
2225
    border: 1px solid #fff;
2226
    border-radius: 100px;
2227
    font-weight: 600;
2228
}
2229
 
2230
.close-box:hover {
2231
    color: #fff;
2232
}
2233
 
2234
.save {
2235
    background-color: #e44d3a;
2236
    color: #fff;
2237
    border-color: transparent;
2238
}
2239
 
2240
.save-add {
2241
    background-color: #fff;
2242
    padding: 13px 13px !important;
2243
}
2244
 
2245
.cancel {
2246
    background-color: #fff;
2247
    color: #000;
2248
}
2249
 
2250
.datepicky {
2251
    float: left;
2252
    width: 100%;
2253
}
2254
 
2255
.no-left-pd {
2256
    padding: 0;
2257
}
2258
 
2259
.no-righ-pd {
2260
    padding-right: 0;
2261
}
2262
 
2263
.datefm {
2264
    width: 100%;
2265
    position: relative;
2266
 
2267
    i {
2268
        position: absolute;
2269
        top: 11px;
2270
        right: 15px;
2271
        font-size: 18px;
2272
        color: #b2b2b2;
2273
    }
2274
}
2275
 
2276
.close-skl {
2277
    position: absolute;
2278
    top: 10px;
2279
    right: 10px;
2280
    color: #b2b2b2;
2281
    font-size: 14px;
2282
}
2283
 
2284
.file-submit {
2285
    border: 1px solid #e5e5e5;
2286
    position: relative;
2287
    padding: 0px;
2288
    height: 40px;
2289
    margin-bottom: 20px;
2290
    border-radius: 3px;
2291
}
2292
 
2293
.file-submit [type="file"] {
2294
    height: 40px;
2295
    overflow: hidden;
2296
    width: 100%;
2297
    float: left;
2298
    position: absolute;
2299
    padding: 10px 4px 0px 12px;
2300
    font-size: 14px;
2301
    opacity: 0;
2302
    display: none;
2303
}
2304
 
2305
.file-submit [type="file"]+label {
2306
    background: #e44d3a;
2307
    border: none;
2308
    float: left;
2309
    border-top-right-radius: 0px;
2310
    border-bottom-right-radius: 0px;
2311
    border-top-left-radius: 3px;
2312
    border-bottom-left-radius: 3px;
2313
    color: #fff;
2314
    cursor: pointer;
2315
    /* display: inline-block; */
2316
    font-size: 14px;
2317
    font-weight: 500;
2318
    outline: none;
2319
    padding: 12px 15px;
2320
    position: relative;
2321
    transition: all 0.3s;
2322
    vertical-align: middle;
2323
    margin: 0;
2324
}
2325
 
2326
.file-submit.nomg {
2327
    border: 0;
2328
    margin-bottom: 20px;
2329
}
2330
 
2331
.file-submit.nomg input {
2332
    margin-bottom: 0;
2333
    padding-top: 0;
2334
}
2335
 
2336
.daty {
2337
    float: left;
2338
    width: 100%;
2339
    position: relative;
2340
}
2341
 
2342
.daty>i {
2343
    position: absolute;
2344
    top: 10px;
2345
    right: 15px;
2346
    color: #b2b2b2;
2347
    font-size: 20px;
2348
}
2349
 
2350
a:hover {
2351
    color: initial;
2352
}
2353
 
2354
.pf-img {
2355
    float: left;
2356
    width: 100%;
2357
    background-color: #f2f2f2;
2358
    padding: 15px;
2359
    margin-bottom: 20px;
2360
}
2361
 
2362
/* ================= billing-method ============== */
2363
 
2364
.billing-method {
2365
    float: left;
2366
    width: 100%;
2367
    background-color: #fff;
2368
    border-left: 1px solid #e4e4e4;
2369
    border-right: 1px solid #e4e4e4;
2370
    border-bottom: 1px solid #e4e4e4;
2371
    margin-bottom: 20px;
2372
}
2373
 
2374
.billing-method ul {
2375
    float: left;
2376
    width: 100%;
2377
}
2378
 
2379
.billing-method ul li {
2380
    float: left;
2381
    width: 100%;
2382
    border-bottom: 1px solid #e5e5e5;
2383
    padding: 25px 20px;
2384
}
2385
 
2386
.billing-method ul li h3 {
2387
    color: #000000;
2388
    font-size: 18px;
2389
    font-weight: 600;
2390
    float: left;
2391
}
2392
 
2393
.billing-method ul li a,
2394
.billing-method ul li span {
2395
    float: right;
2396
    color: #000000;
2397
    font-size: 13px;
2398
    text-transform: capitalize;
2399
    font-weight: 600;
2400
    margin-top: 3px;
2401
}
2402
 
2403
.billing-method ul li i {
2404
    font-size: 13px;
2405
    color: #e44d3a;
2406
}
2407
 
2408
.lt-sec {
2409
    float: left;
2410
    width: 100%;
2411
    text-align: center;
2412
    padding: 30px 0;
2413
}
2414
 
2415
.lt-sec img {
2416
    float: none;
2417
    margin-bottom: 15px;
2418
}
2419
 
2420
.lt-sec h4 {
2421
    color: #686868;
2422
    font-size: 18px;
2423
    font-weight: 600;
2424
    margin-bottom: 25px;
2425
}
2426
 
2427
.lt-sec>a {
2428
    display: inline-block;
2429
    color: #ffffff;
2430
    font-size: 16px;
2431
    background-color: #e44d3a;
2432
    padding: 10px 25px;
2433
}
2434
 
2435
/* ============== add-billing-method ============== */
2436
 
2437
.add-billing-method {
2438
    float: left;
2439
    width: 100%;
2440
    background-color: #fff;
2441
    border-left: 1px solid #e4e4e4;
2442
    border-right: 1px solid #e4e4e4;
2443
    border-bottom: 1px solid #e4e4e4;
2444
}
2445
 
2446
.add-billing-method h3 {
2447
    color: #000000;
2448
    font-size: 18px;
2449
    font-weight: 600;
2450
    padding: 20px 20px;
2451
    border-bottom: 1px solid #e5e5e5;
2452
}
2453
 
2454
.add-billing-method>h4 {
2455
    color: #686868;
2456
    font-size: 13px;
2457
    font-weight: 500;
2458
    padding: 20px 20px;
2459
    border-bottom: 1px solid #e5e5e5;
2460
    float: left;
2461
    width: 100%;
2462
}
2463
 
2464
.add-billing-method img {
2465
    margin-right: 10px;
2466
}
2467
 
2468
.add-billing-method span {
2469
    margin-top: 4px;
2470
    float: left;
2471
}
2472
 
2473
/* ============= payment_methods ============ */
2474
 
2475
.payment_methods {
2476
    float: left;
2477
    width: 100%;
2478
}
2479
 
2480
.payment_methods>h4 {
2481
    color: #000000;
2482
    font-size: 16px;
2483
    font-weight: 600;
2484
    position: relative;
2485
    padding: 25px 20px 25px 45px;
2486
    float: left;
2487
    width: 100%;
2488
}
2489
 
2490
.rowwy {
2491
    float: left;
2492
    width: 100%;
2493
}
2494
 
2495
.pd-left-none {
2496
    padding-left: 0;
2497
}
2498
 
2499
.pd-right-none {
2500
    padding-right: 0;
2501
}
2502
 
2503
.payment_methods h4:before {
2504
    content: "";
2505
    position: absolute;
2506
    top: 50%;
2507
    -webkit-transform: translateY(-50%);
2508
    -moz-transform: translateY(-50%);
2509
    -ms-transform: translateY(-50%);
2510
    -o-transform: translateY(-50%);
2511
    transform: translateY(-50%);
2512
    left: 20px;
2513
    width: 15px;
2514
    height: 15px;
2515
    border: 1px solid #e6e6e6;
2516
    -webkit-border-radius: 100px;
2517
    -moz-border-radius: 100px;
2518
    -ms-border-radius: 100px;
2519
    -o-border-radius: 100px;
2520
    border-radius: 100px;
2521
}
2522
 
2523
.payment_methods h4:after {
2524
    content: "";
2525
    position: absolute;
2526
    top: 50%;
2527
    -webkit-transform: translateY(-50%);
2528
    -moz-transform: translateY(-50%);
2529
    -ms-transform: translateY(-50%);
2530
    -o-transform: translateY(-50%);
2531
    transform: translateY(-50%);
2532
    left: 24px;
2533
    width: 7px;
2534
    height: 7px;
2535
    background-color: #e44d3a;
2536
    -webkit-border-radius: 100px;
2537
    -moz-border-radius: 100px;
2538
    -ms-border-radius: 100px;
2539
    -o-border-radius: 100px;
2540
    border-radius: 100px;
2541
}
2542
 
2543
.payment_methods form {
2544
    float: left;
2545
    width: 100%;
2546
    padding-bottom: 30px;
2547
    border-bottom: 1px solid #e5e5e5;
2548
}
2549
 
2550
.payment_methods form button {
2551
    color: #ffffff;
2552
    font-size: 16px;
2553
    background-color: #e44d3a;
2554
    padding: 10px 15px;
2555
    border: 0;
2556
    cursor: pointer;
2557
}
2558
 
2559
.payment_methods form input {
2560
    width: 100%;
2561
    height: 40px;
2562
    border: 1px solid #e5e5e5;
2563
    padding: 0 12px;
2564
}
2565
 
2566
.cc-head {
2567
    float: left;
2568
    width: 100%;
2569
    margin-bottom: 10px;
2570
}
2571
 
2572
.cc-head h5 {
2573
    float: left;
2574
    color: #000000;
2575
    font-size: 16px;
2576
    font-weight: 600;
2577
    margin-top: 4px;
2578
}
2579
 
2580
.cc-head h5 i {
2581
    color: #b2b2b2;
2582
    font-size: 14px;
2583
}
2584
 
2585
.cc-head ul {
2586
    float: right;
2587
}
2588
 
2589
.cc-head ul li {
2590
    display: inline-block;
2591
}
2592
 
2593
.inpt-field {
2594
    float: left;
2595
    width: 100%;
2596
    position: relative;
2597
    margin-bottom: 20px;
2598
}
2599
 
2600
.no-pdd {
2601
    padding: 0;
2602
}
2603
 
2604
.inpt-field.pd-moree input {
2605
    padding-left: 40px !important;
2606
}
2607
 
2608
.inpt-field i {
2609
    color: #b2b2b2;
2610
    font-size: 18px;
2611
    position: absolute;
2612
    top: 50%;
2613
    left: 15px;
2614
    transform: translateY(-50%);
2615
}
2616
 
2617
/* ============== companies-info ============== */
2618
 
2619
.companies-info {
2620
    display: flex;
2621
    flex-direction: column;
2622
    gap: 1rem;
2623
}
2624
 
2625
.title {
2626
    font-size: 1.1rem;
2627
    font-weight: 600;
2628
}
2629
 
2630
.company-title {
2631
    display: flex;
2632
    justify-content: space-between;
2633
 
2634
    h3 {
2635
        color: $title-color;
2636
        font-size: 20px;
2637
        font-weight: 600;
2638
    }
2639
}
2640
 
2641
.default-link {
2642
    color: #0860bf;
2643
}
2644
 
2645
.default-link:hover {
2646
    font-weight: bold;
2647
    color: #0860bf;
2648
    transition: all 0.5s;
2649
}
2650
 
2651
.companies-list {
2652
    width: 100%;
2653
    display: grid;
2654
    gap: 0.5rem;
2655
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
2656
    position: relative;
2657
}
2658
 
2659
.company_profile_info {
2660
    /* float: left; */
2661
    width: 100%;
2662
    background-color: #fff;
2663
    text-align: center;
2664
    border-left: 1px solid #e4e4e4;
2665
    border-right: 1px solid #e4e4e4;
2666
    border-bottom: 1px solid #e4e4e4;
2667
    margin-bottom: 30px;
2668
}
2669
 
2670
// INMAIL
2671
 
2672
.messages-line {
2673
    display: flex;
2674
    flex-direction: column-reverse;
2675
    flex: 1;
2676
    overflow: auto;
2677
}
2678
 
2679
// END INMAIL
2680
 
2681
.marketplace_card {
2682
    background: $bg-color;
2683
    border-radius: $border-radius;
2684
    display: flex;
2685
    flex-direction: column;
2686
    max-width: 250px;
2687
    overflow: hidden;
2688
    transition: all 200ms;
2689
    margin: auto;
2690
 
2691
    img {
2692
        object-fit: cover;
2693
        aspect-ratio: 4/2.5;
2694
    }
2695
 
2696
    &:hover {
2697
        transform: translateY(-1rem);
2698
        box-shadow: $light-shadow;
2699
    }
2700
 
2701
    .microlearning-up-info {
2702
        display: flex;
2703
        flex-direction: column;
2704
        gap: .5rem;
2705
        padding: 1rem .5rem;
2706
 
2707
        h3 {
2708
            color: $title-color;
2709
            font-size: 1.1rem;
2710
            font-weight: 600;
2711
        }
2712
 
2713
        h4 {
2714
            color: $subtitle-color;
2715
            font-size: .9rem;
2716
            font-weight: 500;
2717
        }
2718
 
2719
        ul {
2720
            display: flex;
2721
            gap: 1rem;
2722
 
2723
            a {
2724
                display: inline-block;
2725
                padding: 0 12px;
2726
                color: $font-color;
2727
                height: 35px;
2728
                line-height: 35px;
2729
 
2730
                i {
2731
                    font-size: 24px;
2732
                    position: relative;
2733
                    top: 3px;
2734
                }
2735
            }
2736
        }
2737
    }
2738
}
2739
 
2740
.company-up-info {
2741
    /* float: left; */
2742
    width: 100%;
2743
    padding: 20px 0;
2744
    border-bottom: 1px solid #e5e5e5;
2745
}
2746
 
2747
.company-up-info .description {
2748
    margin-bottom: 10px;
2749
}
2750
 
2751
.company-up-info img {
2752
    float: none;
2753
    margin-bottom: 10px;
2754
    -webkit-border-radius: 100px;
2755
    -moz-border-radius: 100px;
2756
    -ms-border-radius: 100px;
2757
    -o-border-radius: 100px;
2758
    border-radius: 100px;
2759
    height: 90px;
2760
    object-fit: cover;
2761
}
2762
 
2763
.company-up-info h3 {
2764
    color: #000000;
2765
    font-size: 18px;
2766
    font-weight: 600;
2767
    margin-bottom: 10px;
2768
}
2769
 
2770
.company-up-info h4 {
2771
    color: #686868;
2772
    font-size: 14px;
2773
    font-weight: 500;
2774
    margin-bottom: 21px;
2775
}
2776
 
2777
.company-up-info h6 {
2778
    color: #686868;
2779
    font-size: 15px;
2780
    font-weight: 500;
2781
    margin-bottom: 10px;
2782
}
2783
 
2784
.company-up-info ul {
2785
    /* float: left; */
2786
    width: 100%;
2787
}
2788
 
2789
.company-up-info ul li {
2790
    display: inline-block;
2791
    margin-right: 6px;
2792
}
2793
 
2794
.company-up-info ul li a i {
2795
    font-size: 24px;
2796
    position: relative;
2797
    top: 3px;
2798
}
2799
 
2800
.follow {
2801
    background-color: #53d690;
2802
}
2803
 
2804
.message-us {
2805
    background-color: #e44d3a;
2806
}
2807
 
2808
.hire-us {
2809
    background-color: #51a5fb;
2810
}
2811
 
2812
.company_profile_info .cancelButton {
2813
    display: inline-block;
2814
    color: #000000;
2815
    font-size: 16px;
2816
    font-weight: 500;
2817
    margin: 18px 0;
2818
}
2819
 
2820
/* ============= search-sec ============= */
2821
 
2822
.list-col {
2823
    display: flex;
2824
    gap: 20px;
2825
    flex-direction: column;
2826
}
2827
 
2828
.search-sec {
2829
    width: 100%;
2830
    margin-top: 15px;
2831
}
2832
 
2833
.search-box {
2834
    width: 100%;
2835
    position: relative;
5369 stevensc 2836
    background-color: $bg-color;
5363 stevensc 2837
 
2838
    input,
2839
    input:focus {
2840
        background: $bg-color;
2841
        color: $font-color;
2842
        width: 100%;
2843
        height: 40px;
2844
        padding: 0 15px;
2845
        background: var(--background-light-gray);
2846
        color: var(--gray);
2847
        font-size: 14px;
2848
        border: solid 1px $border-primary;
2849
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
2850
    }
2851
 
2852
    button {
2853
        position: absolute;
2854
        top: 0;
2855
        right: 0;
2856
        border: solid 1px $border-primary;
2857
        color: var(--gray);
2858
        font-size: 16px;
2859
        font-weight: 500;
2860
        height: 100%;
2861
        padding: 0 28px;
2862
        cursor: pointer;
2863
        border-radius: 0 4px 4px 0;
2864
    }
2865
}
2866
 
2867
 
2868
/* =============== filter-secs ============== */
2869
 
5390 stevensc 2870
.filter-form {
2871
    display: flex;
2872
    flex-direction: column;
2873
    gap: 1rem;
2874
}
2875
 
5363 stevensc 2876
.filter-secs {
2877
    width: 100%;
5390 stevensc 2878
    background-color: $bg-color;
2879
    border: 1px solid $border-primary;
2880
    border-radius: $border-radius;
2881
    box-shadow: $shadow;
5363 stevensc 2882
}
2883
 
2884
.filter-heading {
2885
    width: 100%;
5390 stevensc 2886
    padding: 1rem;
2887
    border-bottom: 1px solid $border-primary;
5363 stevensc 2888
 
5390 stevensc 2889
    h3 {
2890
        font-size: 18px;
2891
        font-weight: 600;
5391 stevensc 2892
        color: $subtitle-color;
5390 stevensc 2893
    }
5363 stevensc 2894
 
5390 stevensc 2895
    a {
2896
        font-size: 14px;
2897
        margin-top: 4px;
5391 stevensc 2898
        color: $title-color;
5390 stevensc 2899
    }
5363 stevensc 2900
}
2901
 
5390 stevensc 2902
 
5363 stevensc 2903
.filter-ttl {
2904
    width: 100%;
2905
    border-bottom: 1px solid #e5e5e5;
2906
    padding: 0 0 16px 0;
2907
    margin-bottom: 10px;
2908
 
5390 stevensc 2909
    h3 {
2910
        padding: 0;
2911
        font-size: 16px;
2912
        color: #000000;
2913
        font-weight: 400;
2914
    }
5363 stevensc 2915
 
5390 stevensc 2916
    a {
2917
        font-size: 14px;
2918
        color: #666666;
2919
    }
5363 stevensc 2920
 
5390 stevensc 2921
    .dropdown a {
2922
        color: #666666;
2923
    }
5363 stevensc 2924
}
2925
 
2926
 
2927
 
2928
.filter-dd {
2929
    float: left;
2930
    width: 100%;
2931
    margin-bottom: 15px;
2932
}
2933
 
2934
.filter-dd form {
2935
    float: left;
2936
    width: 100%;
2937
    position: relative;
2938
}
2939
 
2940
.filter-dd form input,
2941
.filter-dd form select {
2942
    width: 100%;
2943
    height: 30px;
2944
    background-color: #f2f2f2;
2945
    padding: 0 10px;
2946
    color: #b2b2b2;
2947
    font-size: 12px;
2948
    font-weight: 600;
2949
    border: 0;
2950
    border: 1px solid #e5e5e5;
2951
}
2952
 
2953
.job-tp i {
2954
    color: #666666;
2955
    position: absolute;
2956
    top: 9px;
2957
    right: 15px;
2958
    font-size: 14px;
2959
}
2960
 
2961
.avail-checks {
2962
    width: 100%;
5390 stevensc 2963
    padding: 1rem;
5363 stevensc 2964
 
5390 stevensc 2965
    input[type="radio"] {
2966
        display: none;
2967
    }
5363 stevensc 2968
 
5390 stevensc 2969
    input[type="radio"]+label span {
2970
        display: inline-block;
2971
        width: 15px;
2972
        height: 15px;
2973
        position: relative;
2974
        margin-top: 3px;
2975
        border: 1px solid #d2d2d2;
2976
        border-radius: 100px;
2977
    }
5363 stevensc 2978
 
5390 stevensc 2979
    input[type="radio"]+label span:before {
2980
        content: "";
2981
        opacity: 0;
2982
        visibility: hidden;
2983
        position: absolute;
2984
        width: 7px;
2985
        height: 7px;
2986
        border-radius: 100px;
2987
        background-color: #e44d3a;
2988
        top: 3px;
2989
        left: 3px;
2990
    }
5363 stevensc 2991
 
5390 stevensc 2992
    input[type="radio"]:checked+label span:before {
2993
        opacity: 1;
2994
        visibility: visible;
2995
    }
5363 stevensc 2996
 
5390 stevensc 2997
    small {
2998
        color: #909090;
2999
        font-size: 14px;
3000
        padding-left: 10px;
3001
        font-weight: 500;
3002
    }
5363 stevensc 3003
 
5390 stevensc 3004
    ul {
3005
        display: flex;
3006
        flex-direction: column;
3007
        gap: .5rem;
3008
    }
5363 stevensc 3009
}
3010
 
3011
 
3012
 
3013
/* =========== Range Slider ========== */
3014
 
3015
.rg-slider {
3016
    float: left;
3017
    width: 100%;
3018
}
3019
 
3020
.slider-container {
3021
    width: 100% !important;
3022
    padding-top: 50px;
3023
    position: relative;
3024
}
3025
 
3026
.theme-green .back-bar {
3027
    height: 5px;
3028
    border: 1px solid #e5e5e5;
3029
    -webkit-border-radius: 30px;
3030
    -moz-border-radius: 30px;
3031
    -ms-border-radius: 30px;
3032
    -o-border-radius: 30px;
3033
    border-radius: 30px;
3034
}
3035
 
3036
.theme-green .back-bar .pointer {
3037
    width: 17px;
3038
    height: 17px;
3039
    -webkit-border-radius: 100px;
3040
    -moz-border-radius: 100px;
3041
    -ms-border-radius: 100px;
3042
    -o-border-radius: 100px;
3043
    border-radius: 100px;
3044
    background-color: #e44d3a;
3045
    border: 2px solid #e3e3e3;
3046
    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3047
    -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3048
    -ms-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3049
    -o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3050
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3051
}
3052
 
3053
.theme-green .back-bar .pointer {
3054
    top: -7px;
3055
}
3056
 
3057
.slider-container .back-bar .pointer-label {
3058
    top: -50px;
3059
    height: 26px;
3060
    background-color: #e5e5e5;
3061
    -webkit-border-radius: 30px;
3062
    -moz-border-radius: 30px;
3063
    -ms-border-radius: 30px;
3064
    -o-border-radius: 30px;
3065
    border-radius: 30px;
3066
    line-height: 26px;
3067
    width: 50px;
3068
}
3069
 
3070
.pointer-label.low {
3071
    left: 0 !important;
3072
}
3073
 
3074
.pointer-label.high {
3075
    left: 70px !important;
3076
}
3077
 
3078
.pointer-label.low:before {
3079
    content: "";
3080
    position: absolute;
3081
    top: 13px;
3082
    right: -14px;
3083
    width: 8px;
3084
    height: 1px;
3085
    background-color: #e5e5e5;
3086
}
3087
 
3088
.rg-limit {
3089
    float: left;
3090
    width: 100%;
3091
    margin-top: 16px;
3092
}
3093
 
3094
.rg-limit h4 {
3095
    color: #686868;
3096
    font-size: 15px;
3097
    font-weight: 600;
3098
    float: left;
3099
}
3100
 
3101
.rg-limit h4:last-child {
3102
    float: right;
3103
}
3104
 
3105
/* ============== chatbox-list ============== */
3106
 
3107
.ext_share {
3108
    display: flex;
3109
    position: absolute;
3110
    align-items: center;
3111
    padding: 5px 1rem;
3112
    bottom: calc(100% + 0.5rem);
3113
    gap: 0.5rem;
3114
    left: 50%;
3115
    width: 16.5rem;
3116
    flex-wrap: wrap;
3117
    overflow-x: scroll;
3118
    transform: translateX(-90%);
3119
    border-radius: 20px;
3120
    background-color: #fff;
3121
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
3122
 
3123
    &.post {
3124
        transform: none;
3125
        bottom: 100%;
3126
        right: 1.5rem;
3127
        z-index: 200;
3128
    }
3129
 
3130
    @media (min-width: 768px) {
3131
        transform: translateX(-43%);
3132
    }
3133
}
3134
 
3135
.highlighted {
3136
    backdrop-filter: blur(35px);
3137
    animation: droping 1s ease infinite;
3138
}
3139
 
3140
@keyframes droping {
3141
    0% {
3142
        box-shadow: 0 0 5px #96bde9;
3143
    }
3144
 
3145
    50% {
3146
        box-shadow: 0 0 12px #96bde9;
3147
    }
3148
 
3149
    100% {
3150
        box-shadow: 0 0 5px #96bde9;
3151
    }
3152
}
3153
 
3154
.chat-mg {
3155
    display: inline-block;
3156
    position: relative;
3157
}
3158
 
3159
.chat-mg img {
3160
    width: 70px;
3161
    height: 70px;
3162
    -webkit-border-radius: 100px;
3163
    -moz-border-radius: 100px;
3164
    -ms-border-radius: 100px;
3165
    -o-border-radius: 100px;
3166
    border-radius: 100px;
3167
}
3168
 
3169
.chat-mg span {
3170
    position: absolute;
3171
    top: -5px;
3172
    right: 10px;
3173
    width: 20px;
3174
    height: 20px;
3175
    background-color: #e44d3a;
3176
    text-align: center;
3177
    font-size: 12px;
3178
    color: #fff;
3179
    line-height: 20px;
3180
    -webkit-border-radius: 100px;
3181
    -moz-border-radius: 100px;
3182
    -ms-border-radius: 100px;
3183
    -o-border-radius: 100px;
3184
    border-radius: 100px;
3185
}
3186
 
3187
.chat-mg.bx img {
3188
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3189
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3190
    -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3191
    -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3192
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3193
}
3194
 
3195
.conversation-box {
3196
    position: absolute;
3197
    bottom: 132%;
3198
    right: 100%;
3199
    width: 350px;
3200
    background-color: #fff;
3201
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3202
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3203
    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3204
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3205
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3206
    opacity: 0;
3207
    visibility: hidden;
3208
    z-index: 0;
3209
}
3210
 
3211
.conversation-box.active {
3212
    opacity: 1;
3213
    visibility: visible;
3214
    z-index: 9999;
3215
}
3216
 
3217
.conversation-box:before {
3218
    content: "";
3219
    position: absolute;
3220
    bottom: -7px;
3221
    right: 26px;
3222
    border-top: 15px solid #fff;
3223
    border-right: 15px solid transparent;
3224
    -webkit-transform: rotate(225deg);
3225
    -moz-transform: rotate(225deg);
3226
    -ms-transform: rotate(225deg);
3227
    -o-transform: rotate(225deg);
3228
    transform: rotate(225deg);
3229
}
3230
 
3231
.con-title {
3232
    float: left;
3233
    width: 100%;
3234
    background-color: #e44d3a;
3235
    padding: 15px 25px;
3236
    -webkit-border-radius: 10px 10px 0 0;
3237
    -moz-border-radius: 10px 10px 0 0;
3238
    -ms-border-radius: 10px 10px 0 0;
3239
    -o-border-radius: 10px 10px 0 0;
3240
    border-radius: 10px 10px 0 0;
3241
}
3242
 
3243
.con-title h3 {
3244
    float: left;
3245
    color: #ffffff;
3246
    font-size: 16px;
3247
    font-weight: 600;
3248
}
3249
 
3250
.con-title>a {
3251
    float: right;
3252
    color: #fff;
3253
    font-size: 20px;
3254
}
3255
 
3256
.chat-list {
3257
    float: left;
3258
    width: 100%;
3259
    min-height: 390px;
3260
}
3261
 
3262
.conv-list {
3263
    float: left;
3264
    width: 100%;
3265
    display: table;
3266
    padding: 20px 25px;
3267
    position: relative;
3268
}
3269
 
3270
.conv-list:hover,
3271
.conv-list.active {
3272
    background-color: #efefef;
3273
}
3274
 
3275
.msg-numbers {
3276
    position: absolute;
3277
    bottom: 18px;
3278
    right: 25px;
3279
    width: 25px;
3280
    height: 25px;
3281
    background-color: #e77667;
3282
    text-align: center;
3283
    line-height: 25px;
3284
    color: #fff;
3285
    font-size: 13px;
3286
    -webkit-border-radius: 100px;
3287
    -moz-border-radius: 100px;
3288
    -ms-border-radius: 100px;
3289
    -o-border-radius: 100px;
3290
    border-radius: 100px;
3291
}
3292
 
3293
.usrr-pic {
3294
    display: table-cell;
3295
    position: relative;
3296
}
3297
 
3298
.active-status {
3299
    width: 9px;
3300
    height: 9px;
3301
    border: 2px solid #ecf5fb;
3302
    -webkit-border-radius: 100px;
3303
    -moz-border-radius: 100px;
3304
    -ms-border-radius: 100px;
3305
    -o-border-radius: 100px;
3306
    border-radius: 100px;
3307
    position: absolute;
3308
    top: -3px;
3309
    right: 0;
3310
}
3311
 
3312
.activee {
3313
    background-color: #e44d3a;
3314
}
3315
 
3316
.usy-info {
3317
    display: table-cell;
3318
    vertical-align: top;
3319
    width: 100%;
3320
    padding-left: 15px;
3321
}
3322
 
3323
.usy-info h3 {
3324
    color: #000000;
3325
    font-size: 18px;
3326
    font-weight: 600;
3327
    margin-bottom: 5px;
3328
}
3329
 
3330
.usy-info span {
3331
    color: #686868;
3332
    font-size: 16px;
3333
    float: left;
3334
}
3335
 
3336
.usy-info span img {
3337
    padding-left: 5px;
3338
    float: right;
3339
}
3340
 
3341
.ct-time {
3342
    position: absolute;
3343
    top: 20px;
3344
    right: 25px;
3345
}
3346
 
3347
.ct-time span {
3348
    color: #b2b2b2;
3349
    font-size: 14px;
3350
}
3351
 
3352
.st-icons {
3353
    float: right;
3354
    margin-top: 7px;
3355
}
3356
 
3357
.st-icons a {
3358
    color: #fff;
3359
    font-size: 20px;
3360
    margin-right: 5px;
3361
}
3362
 
3363
.chat-hist {
3364
    float: left;
3365
    width: 100%;
3366
    background-color: #fff;
3367
    height: 280px;
3368
}
3369
 
3370
.chat-msg {
3371
    float: left;
3372
    width: 100%;
3373
    padding-right: 25px;
3374
    margin-bottom: 15px;
3375
}
3376
 
3377
.chat-msg p {
3378
    color: #ffffff;
3379
    font-size: 14px;
3380
    background-color: #e44d3a;
3381
    line-height: 18px;
3382
    -webkit-border-radius: 15px;
3383
    -moz-border-radius: 15px;
3384
    -ms-border-radius: 15px;
3385
    -o-border-radius: 15px;
3386
    border-radius: 15px;
3387
    padding: 10px 15px;
3388
    width: 80%;
3389
    float: right;
3390
    margin-bottom: 10px;
3391
}
3392
 
3393
.mg-3 {
3394
    margin-bottom: 3px;
3395
}
3396
 
3397
.chat-msg span {
3398
    float: right;
3399
    color: #b1b1b1;
3400
    width: 100%;
3401
    font-size: 9px;
3402
    text-align: right;
3403
}
3404
 
3405
.status-info {
3406
    width: 8px;
3407
    height: 8px;
3408
    background-color: #fff;
3409
    -webkit-border-radius: 100px;
3410
    -moz-border-radius: 100px;
3411
    -ms-border-radius: 100px;
3412
    -o-border-radius: 100px;
3413
    border-radius: 100px;
3414
    display: inline-block;
3415
    margin-left: 7px;
3416
}
3417
 
3418
.chat-user-info h3 {
3419
    margin-top: 7px;
3420
    margin-left: 10px;
3421
}
3422
 
3423
.date-nd {
3424
    float: left;
3425
    width: 100%;
3426
    text-align: center;
3427
    margin-bottom: 20px;
3428
    position: relative;
3429
}
3430
 
3431
.date-nd:before,
3432
.date-nd:after {
3433
    content: "";
3434
    position: absolute;
3435
    top: 10px;
3436
    left: 15px;
3437
    width: 92px;
3438
    height: 1px;
3439
    background-color: #e5e5e5;
3440
}
3441
 
3442
.date-nd:after {
3443
    left: auto;
3444
    right: 15px;
3445
}
3446
 
3447
.date-nd span {
3448
    color: #b1b1b1;
3449
    font-size: 12px;
3450
    text-align: center;
3451
}
3452
 
3453
.chat-msg.st2 p {
3454
    background-color: #efefef;
3455
    color: #686868;
3456
    float: left;
3457
    width: 55%;
3458
}
3459
 
3460
.chat-msg.st2 {
3461
    padding-left: 25px;
3462
}
3463
 
3464
.chat-msg.st2 span {
3465
    float: left;
3466
    text-align: left;
3467
}
3468
 
3469
/* =========== typing-msg =========== */
3470
 
3471
.typing-msg {
3472
    float: left;
3473
    width: 100%;
3474
    border-top: 1px solid #e6e6e6;
3475
    padding-top: 15px;
3476
}
3477
 
3478
.typing-msg form {
3479
    float: left;
3480
    width: 100%;
3481
    position: relative;
3482
}
3483
 
3484
.typing-msg form textarea {
3485
    width: 100%;
3486
    height: 30px;
3487
    background-color: #fff;
3488
    padding: 0 20px;
3489
    color: #b2b2b2;
3490
    font-size: 16px;
3491
    border: 0;
3492
    resize: none;
3493
}
3494
 
3495
.typing-msg form button {
3496
    color: #e44d3a;
3497
    font-size: 18px;
3498
    font-weight: 600;
3499
    position: absolute;
3500
    top: 2px;
3501
    right: 20px;
3502
    background: none;
3503
    border: 0;
3504
    cursor: pointer;
3505
}
3506
 
3507
.ft-options {
3508
    float: left;
3509
    width: 100%;
3510
    padding: 0 20px 8px 20px;
3511
}
3512
 
3513
.ft-options li {
3514
    display: inline-block;
3515
    margin-right: 15px;
3516
}
3517
 
3518
.ft-options li a {
3519
    color: #b2b2b2;
3520
    font-size: 24px;
3521
    display: inline-block;
3522
}
3523
 
3524
.mCSB_scrollTools {
3525
    right: -5px;
3526
}
3527
 
3528
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
3529
    background-color: #cccccc;
3530
    width: 5px;
3531
}
3532
 
3533
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
3534
    opacity: 0;
3535
}
3536
 
3537
/* ============ Menu Btn =============*/
3538
 
3539
.menu-btn {
3540
    float: right;
3541
    display: none;
3542
}
3543
 
3544
.menu-btn a {
3545
    font-size: 24px;
3546
    color: #fff;
3547
    display: inline-block;
3548
    padding-top: 16px;
3549
    padding-left: 20px;
3550
}
3551
 
3552
/* ============= account-tabs-setting ============ */
3553
 
3554
/* .profile-account-setting {} */
3555
 
3556
.account-tabs-setting {
3557
    width: 100%;
3558
}
3559
 
3560
.account-tabs-setting h1 {
3561
    font-size: 1rem;
3562
    font-weight: 700;
3563
    margin: 2rem auto;
3564
    text-align: center;
3565
    color: $title-color;
3566
}
3567
 
3568
.acc-leftbar {
3569
    width: 100%;
3570
    background-color: $bg-color;
3571
    border: 1px solid $border-primary;
3572
    border-radius: 10px;
3573
    overflow: hidden;
3574
}
3575
 
3576
.acc-leftbar .nav-tabs>a {
3577
    border-bottom: 1px solid $border-primary;
3578
    color: $subtitle-color;
3579
    font-size: 16px;
3580
    font-weight: 700;
3581
    margin: 0 auto;
3582
    padding: 1rem 0;
3583
    width: 90%;
3584
}
3585
 
3586
.nav-tabs {
3587
    border-bottom: 0;
3588
}
3589
 
3590
.acc-leftbar .nav-tabs>a:last-child {
3591
    border-bottom: 0;
3592
}
3593
 
3594
.acc-leftbar .nav-tabs>a i {
3595
    font-size: 1.5rem;
3596
    position: relative;
3597
    width: 50px;
3598
    height: 50px;
3599
    display: inline-flex;
3600
    align-items: center;
3601
    background-color: $bg-color-secondary;
3602
    border-radius: 100px;
3603
    justify-content: center;
3604
    margin-right: 5px;
3605
}
3606
 
3607
.nav-tabs .nav-item.show .nav-link,
3608
.nav-tabs .nav-link.active {
3609
    background-color: inherit;
3610
    color: #e44d3a;
3611
    border-color: inherit;
3612
}
3613
 
3614
/* ============= acc-setting ============ */
3615
 
3616
.settings-container {
3617
    font-weight: normal;
3618
}
3619
 
3620
.settings-container h2 {
3621
    font-size: 18px;
3622
    font-weight: 600;
3623
    margin: 0.5rem auto;
3624
    color: $subtitle-color;
3625
}
3626
 
3627
.acc-setting_content {
3628
    padding: 2rem 1rem;
3629
    width: 100%;
3630
    overflow: hidden;
3631
    border-radius: 10px;
3632
    background-color: $bg-color;
3633
    border: 1px solid $border-primary;
3634
    box-shadow: 1px 0 4px var(--background-gray);
3635
}
3636
 
3637
.acc-setting {
3638
    display: flex;
3639
    flex-direction: column;
3640
    gap: 1rem;
3641
    border-radius: $border-radius;
3642
    border: 1px solid $border-primary;
3643
    padding: 1rem;
3644
    background-color: #fff;
3645
 
3646
    form {
3647
        align-items: flex-start;
3648
        display: flex;
3649
        flex-direction: column;
3650
        gap: 0.5rem;
3651
    }
3652
 
3653
    &>h3 {
3654
        color: $subtitle-color;
3655
        font-weight: 600;
3656
        font-size: 18px;
3657
    }
3658
 
3659
    .notbat {
3660
        display: flex;
3661
        justify-content: space-between;
3662
        border-top: 1px solid $border-primary;
3663
        padding: 0.5rem 1rem;
3664
        width: 100%;
3665
 
3666
        &>span {
3667
            max-width: 70%;
3668
        }
3669
    }
3670
 
3671
    .inputs__container {
3672
        display: flex;
3673
        width: 100%;
3674
        gap: 1rem;
3675
        align-items: center;
3676
        flex-wrap: wrap;
3677
    }
3678
 
3679
    .cp-field {
3680
        width: 100%;
3681
        display: flex;
3682
        flex-direction: column;
3683
        gap: 0.5rem;
3684
        align-items: flex-start;
3685
    }
3686
 
3687
    @media (min-width: 768px) {
3688
        .cp-field {
3689
            flex: 1;
3690
        }
3691
    }
3692
}
3693
 
3694
.toggle-btn {
3695
    position: absolute;
3696
    top: 35px;
3697
    right: 20px;
3698
}
3699
 
3700
/* =============== Password Update ============ */
3701
 
3702
.cp-field {
3703
    h5 {
3704
        color: $title-color;
3705
        font-size: 16px;
3706
        font-weight: 600;
3707
    }
3708
 
3709
    input,
3710
    select,
3711
    .custom-input {
3712
        height: 40px;
3713
        padding: 0 40px;
3714
    }
3715
 
3716
    input,
3717
    textarea,
3718
    select,
3719
    .custom-input {
3720
        width: 100% !important;
3721
        background-color: $bg-color !important;
3722
        color: $font-color !important;
3723
        box-shadow: 0 0 2px $border-primary !important;
3724
        border-radius: 10px !important;
3725
        border: none !important;
3726
        margin-top: 4px;
3727
    }
3728
 
3729
    textarea {
3730
        padding: 20px;
3731
        height: 115px;
3732
    }
3733
}
3734
 
3735
.cpp-fiel {
3736
    width: 100%;
3737
    position: relative;
3738
}
3739
 
3740
.cpp-fiel i {
3741
    position: absolute;
3742
    top: 12px;
3743
    left: 15px;
3744
    color: #b2b2b2;
3745
    font-size: 16px;
3746
}
3747
 
3748
/* =============== notifications-list ============= */
3749
 
3750
.notfication-details {
3751
    float: left;
3752
    width: 100%;
3753
    padding: 20px;
3754
    border-bottom: 1px solid #e5e5e5;
3755
}
3756
 
3757
.notfication-details:last-child {
3758
    border-bottom: 0;
3759
}
3760
 
3761
.noty-user-img {
3762
    float: left;
3763
    width: 35px;
3764
}
3765
 
3766
.noty-user-img img {
3767
    width: 100%;
3768
}
3769
 
3770
.notification-info {
3771
    float: left;
3772
    width: auto;
3773
    padding-left: 10px;
3774
}
3775
 
3776
.notification-info h3 {
3777
    color: #686868;
3778
    font-size: 14px;
3779
    font-weight: 500;
3780
    border: 0;
3781
    padding: 0;
3782
    margin-bottom: 6px;
3783
}
3784
 
3785
.notification-info h3 a {
3786
    color: #000000;
3787
    font-size: 16px;
3788
    font-weight: 600;
3789
    display: inline-block;
3790
}
3791
 
3792
.notification-info>span {
3793
    display: inline-block;
3794
    color: #b2b2b2;
3795
    font-size: 12px;
3796
    font-weight: 600;
3797
}
3798
 
3799
/* ============== requests-list ============== */
3800
 
3801
.requests-list {
3802
    float: left;
3803
    width: 100%;
3804
    padding-bottom: 0;
3805
}
3806
 
3807
.request-details {
3808
    float: left;
3809
    width: 100%;
3810
    padding: 20px;
3811
    border-bottom: 1px solid #e5e5e5;
3812
}
3813
 
3814
.request-details:last-child {
3815
    border-bottom: 0;
3816
}
3817
 
3818
.request-info {
3819
    float: left;
3820
    padding-left: 10px;
3821
}
3822
 
3823
.request-info h3 {
3824
    color: #000000;
3825
    font-size: 14px;
3826
    font-weight: 600;
3827
    padding: 0;
3828
    border: 0;
3829
    margin-bottom: 3px;
3830
}
3831
 
3832
.request-info span {
3833
    color: #686868;
3834
    font-size: 12px;
3835
    display: inline-block;
3836
}
3837
 
3838
.accept-feat {
3839
    float: right;
3840
}
3841
 
3842
.accept-feat ul li {
3843
    display: inline-block;
3844
}
3845
 
3846
.accept-feat ul li button {
3847
    cursor: pointer;
3848
}
3849
 
3850
.accept-req {
3851
    color: #ffffff;
3852
    font-size: 16px;
3853
    background-color: #51a5fb;
3854
    height: 30px;
3855
    padding: 0 20px;
3856
    font-weight: 600;
3857
    border: 0;
3858
    border: 1px solid #51a5fb;
3859
}
3860
 
3861
.close-req {
3862
    height: 30px;
3863
    width: 30px;
3864
    text-align: center;
3865
    line-height: 30px;
3866
    border: 1px solid #e5e5e5;
3867
    background: inherit;
3868
    color: #b2b2b2;
3869
    margin-left: 7px;
3870
}
3871
 
3872
.close-req i {
3873
    font-weight: 600;
3874
}
3875
 
3876
/* ============= Profile Sattus =========== */
3877
 
3878
.profile-bx-details {
3879
    float: left;
3880
    width: 100%;
3881
    padding: 30px 7px 30px 7px;
3882
}
3883
 
3884
.profile-bx-details .row .col-lg-3 {
3885
    padding: 0 7px;
3886
}
3887
 
3888
.profile-bx-info {
3889
    float: left;
3890
    width: 100%;
3891
    background-color: #f2f2f2;
3892
    padding: 20px;
3893
    border: 1px solid #e5e5e5;
3894
}
3895
 
3896
.pro-bx {
3897
    float: left;
3898
    width: 100%;
3899
    border-bottom: 1px solid #e5e5e5;
3900
    padding-bottom: 10px;
3901
}
3902
 
3903
.bx-info {
3904
    float: left;
3905
    margin-top: 7px;
3906
    padding-left: 10px;
3907
}
3908
 
3909
.bx-info h3 {
3910
    color: #e44d3a;
3911
    font-size: 20px;
3912
    font-weight: 600;
3913
    margin-bottom: 5px;
3914
}
3915
 
3916
.bx-info h5 {
3917
    color: #000000;
3918
    font-size: 14px;
3919
    font-weight: 600;
3920
    margin: 0;
3921
    padding: 0;
3922
    border: 0;
3923
}
3924
 
3925
.pd-left-20 {
3926
    padding-left: 20px;
3927
    padding-right: 0;
3928
}
3929
 
3930
.pd-left-15 {
3931
    padding-left: 15px;
3932
    padding-right: 0;
3933
}
3934
 
3935
.pd-left-right {
3936
    padding-left: 15px;
3937
    padding-right: 20px;
3938
}
3939
 
3940
.profile-bx-info>p {
3941
    float: left;
3942
    width: 100%;
3943
    font-size: 14px;
3944
    line-height: 20px;
3945
    padding-top: 5px;
3946
}
3947
 
3948
/* =========== pro-work-status ========= */
3949
 
3950
.pro-work-status {
3951
    float: left;
3952
    width: 100%;
3953
    padding: 0 15px;
3954
}
3955
 
3956
.pro-work-status h4 {
3957
    color: #000000;
3958
    font-size: 18px;
3959
    font-weight: 600;
3960
    margin-bottom: 50px;
3961
}
3962
 
3963
/* ============== messages-page ============== */
3964
 
3965
.messages-page {
3966
    padding: 20px 0;
3967
}
3968
 
3969
.messages-sec {
3970
    width: 100%;
3971
    border-radius: 10px;
3972
    overflow: hidden;
3973
    background-color: transparent;
3974
}
3975
 
3976
.msgs-list {
3977
    width: 100%;
3978
}
3979
 
3980
.inmail_conversations-list {
3981
    border-right: 1px solid #3333;
3982
    padding-left: 0;
3983
    padding-right: 0;
3984
}
3985
 
3986
.active-tab {
3987
    border-bottom: solid 2px #e4e4e4;
3988
}
3989
 
3990
.msg-title {
3991
    color: #000000;
3992
    font-size: 18px;
3993
    font-weight: 600;
3994
}
3995
 
3996
.date-chat {
3997
    font-size: 0.6rem;
3998
    color: var(--gray);
3999
    padding-top: 5%;
4000
}
4001
 
4002
.messages-list {
4003
    overflow-y: scroll;
4004
 
4005
    li {
4006
        cursor: pointer;
4007
 
4008
        &.active {
4009
            background-color: #efefef;
4010
        }
4011
    }
4012
}
4013
 
4014
.text-chat-title {
4015
    color: var(--gray) !important;
4016
    font-size: 1rem;
4017
}
4018
 
4019
.usr-msg-details {
4020
    display: flex;
4021
    align-items: center;
4022
    gap: 0.5rem;
4023
    padding: 0.5rem 1rem;
4024
    border-radius: $border-radius;
4025
 
4026
    &:hover,
4027
    &.is_selected {
4028
        background: $light-gray;
4029
    }
4030
 
4031
    .usr-ms-img {
4032
        width: 40px;
4033
        height: 40px;
4034
        border-radius: 50%;
4035
        overflow: hidden;
4036
 
4037
        img {
4038
            object-fit: cover;
4039
        }
4040
    }
4041
 
4042
    .usr-mg-info {
4043
        h3 {
4044
            color: $subtitle-color;
4045
            font-size: 18px;
4046
            font-weight: 600;
4047
        }
4048
 
4049
        p {
4050
            color: $font-color;
4051
            font-size: 16px;
4052
        }
4053
    }
4054
}
4055
 
4056
.msg-status {
4057
    border-radius: 100px;
4058
    background-color: #e44d3a;
4059
    position: absolute;
4060
    top: -3px;
4061
    right: 0;
4062
    width: 6px;
4063
    height: 6px;
4064
}
4065
 
4066
.messages-list ul li.active .msg-status {
4067
    border: 2px solid #ecf5fb;
4068
    height: 10px;
4069
    width: 10px;
4070
}
4071
 
4072
.msg-notifc {
4073
    position: absolute;
4074
    /* bottom: 0;
4075
    right: 0; */
4076
    width: 25px;
4077
    height: 25px;
4078
    -webkit-border-radius: 100px;
4079
    -moz-border-radius: 100px;
4080
    -ms-border-radius: 100px;
4081
    -o-border-radius: 100px;
4082
    border-radius: 100px;
4083
    background-color: #e77667;
4084
    text-align: center;
4085
    line-height: 25px;
4086
    font-size: 13px;
4087
    color: #fff;
4088
}
4089
 
4090
.posted_time {
4091
    position: absolute;
4092
    top: 2px;
4093
    right: 0;
4094
    color: #b2b2b2;
4095
    font-size: 14px;
4096
}
4097
 
4098
/* =============== main-message-box ============= */
4099
 
4100
.main-conversation-box {
4101
    width: 100%;
4102
    background-color: $bg-color;
4103
    position: relative;
4104
    height: 80vh;
4105
    display: grid;
4106
    grid-template-rows: auto 65% auto;
4107
}
4108
 
4109
.inmail-conversation-container {
4110
    width: 100%;
4111
    background-color: $bg-color;
4112
    position: relative;
4113
    height: 80vh;
4114
    gap: 0.5rem;
4115
    display: grid;
4116
    grid-template-rows: 5% 80% 15%;
4117
}
4118
 
4119
@media (min-width: 992px) {
4120
    .inmail-conversation-container {
4121
        grid-template-rows: 85% 15%;
4122
    }
4123
}
4124
 
4125
.inmail-conversation-box {
4126
    width: 100%;
4127
    position: relative;
4128
    display: grid;
4129
    grid-template-rows: auto 85%;
4130
    overflow: hidden;
4131
}
4132
 
4133
.message-bar-head {
4134
    height: 13vh;
4135
    width: 100%;
4136
    padding: 20px;
4137
    border-bottom: 1px solid $border-primary;
4138
}
4139
 
4140
.message-bar-head .usr-msg-details {
4141
    width: auto;
4142
}
4143
 
4144
.message-bar-head>a {
4145
    float: right;
4146
    color: #b2b2b2;
4147
    font-size: 20px;
4148
    padding-top: 15px;
4149
}
4150
 
4151
.main-message-box {
4152
    display: flex;
4153
    width: 100%;
4154
    position: relative;
4155
    margin-bottom: 15.5px;
4156
 
4157
    .message-inner-dt {
4158
        width: 100%;
4159
 
4160
        &>img {
4161
            display: inline-block;
4162
            width: auto;
4163
            max-height: 180px;
4164
        }
4165
 
4166
        &>p {
4167
            font-size: 14px;
4168
        }
4169
    }
4170
 
4171
    .message-dt {
4172
        border-radius: $border-radius;
4173
        border-top-left-radius: 0;
4174
        width: auto;
4175
        padding: 0.5rem;
4176
        margin-left: 15px;
4177
        background-color: $chat-send;
4178
        color: $chat-color;
4179
        box-shadow: $white-backdrop;
4180
    }
4181
 
4182
    .messg-usr-img {
4183
        margin-left: 20px;
4184
        width: 50px;
4185
    }
4186
 
4187
    .message-dt>span {
4188
        color: #b2b2b2;
4189
        font-size: 14px;
4190
        float: left;
4191
        width: 100%;
4192
        margin-top: 7px;
4193
    }
4194
 
4195
    &.ta-right {
4196
        flex-direction: row-reverse;
4197
    }
4198
 
4199
    &.ta-right .messg-usr-img {
4200
        margin-left: 0;
4201
        margin-right: 20px;
4202
    }
4203
 
4204
    &.ta-right .message-dt {
4205
        border-top-left-radius: $border-radius;
4206
        border-top-right-radius: 0;
4207
        margin-right: 15px;
4208
        background-color: $chat-received;
4209
    }
4210
 
4211
    &.ta-right .message-dt>span {
4212
        float: right;
4213
        width: auto;
4214
    }
4215
}
4216
 
4217
.messg-usr-img img {
4218
    width: 100%;
4219
    background: #fff;
4220
    border-radius: 100px;
4221
}
4222
 
4223
.img-bx {
4224
    background-color: #efefef;
4225
    padding: 20px;
4226
}
4227
 
4228
.message-dt.st3 .message-inner-dt {
4229
    &>p {
4230
        background-color: #efefef;
4231
        color: #686868;
4232
        width: auto;
4233
        padding: 10px 15px;
4234
        float: left;
4235
    }
4236
 
4237
    &>img {
4238
        float: right;
4239
        position: relative;
4240
        top: 3px;
4241
        padding-left: 5px;
4242
    }
4243
}
4244
 
4245
.main-message-box.st3 .messg-usr-img {
4246
    bottom: 13px;
4247
}
4248
 
4249
/* ============== Calendar ============ */
4250
 
4251
.calendar-event {
4252
    display: flex;
4253
    flex-direction: column;
4254
    border-radius: $border-radius;
4255
    padding: 0.5rem;
4256
}
4257
 
4258
/* ============== message-send-area ============ */
4259
 
4260
.inmail-submit-btn {
4261
    width: 6%;
4262
}
4263
 
4264
.chat-header a {
4265
    text-decoration: none;
4266
    color: var(--dark);
4267
}
4268
 
4269
.chat-header h2 {
4270
    font-weight: 700;
4271
    text-align: center;
4272
}
4273
 
4274
.chat_contacts {
4275
    background-color: $bg-color;
4276
    border-radius: $border-radius;
4277
    border: 1px solid $border-primary;
4278
    display: flex;
4279
    flex-direction: column;
4280
    height: 100%;
4281
    gap: 0.5rem;
4282
    padding: 1rem 0.5rem;
4283
    max-height: 80vh;
4284
}
4285
 
4286
.contact__search,
4287
.group__search {
4288
    display: flex;
4289
    align-items: center;
4290
    border-radius: 30px;
4291
    height: 1.5rem;
4292
    color: gray;
4293
    cursor: pointer;
4294
    transition: all 0.2s;
4295
 
4296
    &:hover {
4297
        color: #000;
4298
    }
4299
 
4300
    &>input {
4301
        display: none;
4302
        border: none;
4303
        outline: none;
4304
        background: none;
4305
    }
4306
 
4307
    &.show {
4308
        padding: 0.5rem;
4309
        background-color: #eef3f0;
4310
        width: -webkit-fill-available;
4311
 
4312
        &>input {
4313
            display: initial;
4314
        }
4315
    }
4316
}
4317
 
4318
.group__search {
4319
    flex: initial;
4320
    margin: 0 1rem;
4321
 
4322
    input {
4323
        display: initial;
4324
    }
4325
}
4326
 
4327
/* ============== forum-links ============= */
4328
 
4329
.forum-sec {
4330
    background-color: #fff;
4331
}
4332
 
4333
.forum-links {
4334
    float: left;
4335
    width: 100%;
4336
}
4337
 
4338
.forum-links.active {
4339
    opacity: 1;
4340
    visibility: visible;
4341
    z-index: 9999;
4342
}
4343
 
4344
.forum-links ul li {
4345
    display: inline-block;
4346
    padding: 20px 0;
4347
    margin-right: 45px;
4348
    border-bottom: 2px solid transparent;
4349
}
4350
 
4351
.forum-links ul li.active {
4352
    border-color: #e44d3a;
4353
}
4354
 
4355
.forum-links ul li.active a {
4356
    color: #e44d3a;
4357
}
4358
 
4359
.forum-links ul li a {
4360
    display: inline-block;
4361
    color: #b2b2b2;
4362
    font-size: 14px;
4363
    font-weight: 600;
4364
}
4365
 
4366
.forum-links-btn {
4367
    float: left;
4368
    width: 100%;
4369
    text-align: center;
4370
    display: none;
4371
    padding: 20px 0;
4372
}
4373
 
4374
.forum-links-btn a {
4375
    color: #000;
4376
    font-size: 30px;
4377
    display: inline-block;
4378
}
4379
 
4380
/* ================ forum-page =============== */
4381
 
4382
.forum-page {
4383
    padding: 50px 0;
4384
}
4385
 
4386
.forum-questions-sec {
4387
    float: left;
4388
    width: 100%;
4389
}
4390
 
4391
.forum-questions {
4392
    float: left;
4393
    width: 100%;
4394
    background-color: #fff;
4395
}
4396
 
4397
.usr-question {
4398
    float: left;
4399
    width: 100%;
4400
    position: relative;
4401
    padding: 25px;
4402
    border-bottom: 1px solid #e5e5e5;
4403
}
4404
 
4405
.usr_img {
4406
    float: left;
4407
    width: 60px;
4408
}
4409
 
4410
.usr_img img {
4411
    width: 100%;
4412
    -webkit-border-radius: 100px;
4413
    -moz-border-radius: 100px;
4414
    -ms-border-radius: 100px;
4415
    -o-border-radius: 100px;
4416
    border-radius: 100px;
4417
}
4418
 
4419
.usr_quest {
4420
    float: left;
4421
    width: 90%;
4422
    padding-left: 15px;
4423
}
4424
 
4425
.usr_quest>h3 {
4426
    color: #000000;
4427
    font-size: 17px;
4428
    font-weight: 600;
4429
    margin-bottom: 20px;
4430
}
4431
 
4432
.forum-post-view .usr_quest>h3 {
4433
    margin-bottom: 10px;
4434
}
4435
 
4436
.react-links {
4437
    float: left;
4438
    width: 100%;
4439
}
4440
 
4441
.react-links li {
4442
    display: inline-block;
4443
    margin-right: 30px;
4444
}
4445
 
4446
.react-links li a {
4447
    display: inline-block;
4448
    color: #b2b2b2;
4449
    font-size: 14px;
4450
    font-weight: 600;
4451
}
4452
 
4453
.react-links li a:hover {
4454
    color: #e44d3a;
4455
}
4456
 
4457
.react-links li a i {
4458
    padding-right: 7px;
4459
}
4460
 
4461
.react-links li:last-child {
4462
    margin-right: 0;
4463
}
4464
 
4465
/* ============= quest-tags ============ */
4466
 
4467
.quest-tags {
4468
    float: left;
4469
    width: 100%;
4470
    margin-top: 20px;
4471
}
4472
 
4473
.quest-tags li {
4474
    display: inline-block;
4475
    margin-right: 10px;
4476
}
4477
 
4478
.quest-tags li a {
4479
    display: inline-block;
4480
    color: #ffffff;
4481
    background-color: #53d690;
4482
    -webkit-border-radius: 3px;
4483
    -moz-border-radius: 3px;
4484
    -ms-border-radius: 3px;
4485
    -o-border-radius: 3px;
4486
    border-radius: 3px;
4487
    padding: 7px 25px;
4488
}
4489
 
4490
.quest-posted-time {
4491
    position: absolute;
4492
    bottom: 30px;
4493
    right: 20px;
4494
    color: #b2b2b2;
4495
    font-size: 14px;
4496
}
4497
 
4498
.quest-posted-time i {
4499
    padding-right: 5px;
4500
}
4501
 
4502
.pd-right-none {
4503
    padding-right: 0;
4504
}
4505
 
4506
/* =========== navigation ============ */
4507
 
4508
.pagination {
4509
    float: left;
4510
    width: 100%;
4511
    /* background-color: #fff; */
4512
    padding: 13px 25px;
4513
}
4514
 
4515
.full-pagi {
4516
    float: left;
4517
    width: 100%;
4518
    padding-right: 0;
4519
    text-align: inherit;
4520
    margin-top: 20px;
4521
}
4522
 
4523
.pagination li {
4524
    padding: 0;
4525
    margin-right: 10px;
4526
}
4527
 
4528
.pagination li .page-link {
4529
    /* background-color: #e5e5e5; */
4530
    color: #b2b2b2;
4531
}
4532
 
4533
.pagination li .page-link.active {
4534
    background-color: #e44d3a;
4535
    color: #fff;
4536
    border-color: transparent;
4537
}
4538
 
4539
.pvr {
4540
    padding: 0.5rem 30px;
4541
}
4542
 
4543
/* ======== next-prev ========*/
4544
 
4545
.next-prev {
4546
    float: left;
4547
    width: 100%;
4548
    background-color: #fff;
4549
    margin-top: 20px;
4550
    padding: 12px 25px;
4551
}
4552
 
4553
.next-prev>a {
4554
    width: 90px;
4555
    height: 35px;
4556
    text-align: center;
4557
    line-height: 35px;
4558
    color: #b2b2b2;
4559
    font-size: 14px;
4560
    background-color: #e5e5e5;
4561
}
4562
 
4563
.next-prev>a:hover {
4564
    color: #fff;
4565
    background-color: #e44d3a;
4566
}
4567
 
4568
.fl-left {
4569
    float: left;
4570
}
4571
 
4572
.fl-right {
4573
    float: right;
4574
}
4575
 
4576
/* ========== widget-feat ========= */
4577
 
4578
.widget-feat {
4579
    padding: 25px 20px;
4580
}
4581
 
4582
.widget-feat ul {
4583
    float: left;
4584
    width: 100%;
4585
}
4586
 
4587
.widget-feat ul li {
4588
    float: left;
4589
    width: 25%;
4590
    text-align: center;
4591
}
4592
 
4593
.widget-feat ul li i {
4594
    display: block;
4595
    font-size: 18px;
4596
    margin-bottom: 9px;
4597
}
4598
 
4599
.widget-feat ul li span {
4600
    display: block;
4601
    color: #686868;
4602
    font-size: 16px;
4603
    font-weight: 500;
4604
}
4605
 
4606
.widget-feat ul li i.fa-heart {
4607
    color: #53d690;
4608
}
4609
 
4610
.widget-feat ul li i.fa-comment {
4611
    color: #e44d3a;
4612
}
4613
 
4614
.widget-feat ul li i.fa-share-alt {
4615
    color: #51a5fb;
4616
}
4617
 
4618
.widget-feat ul li i.fa-eye {
4619
    color: #00b540;
4620
}
4621
 
4622
/* =============== ANIMATION LOADER =============== */
4623
 
4624
.spinner {
4625
    margin: 0 auto 0;
4626
    width: 80px;
4627
    text-align: center;
4628
    height: 80px;
4629
    border-radius: 100px;
4630
    background-color: #fff;
4631
    line-height: 80px;
4632
    border: 1px solid #e1e1e1;
4633
    cursor: pointer;
4634
 
4635
    &>div {
4636
        width: 15px;
4637
        height: 15px;
4638
        background-color: #b9b9b9;
4639
        border-radius: 100%;
4640
        display: inline-block;
4641
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
4642
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
4643
    }
4644
 
4645
    .bounce1 {
4646
        -webkit-animation-delay: -0.32s;
4647
        animation-delay: -0.32s;
4648
    }
4649
 
4650
    .bounce2 {
4651
        -webkit-animation-delay: -0.16s;
4652
        animation-delay: -0.16s;
4653
    }
4654
 
4655
    @keyframes sk-bouncedelay {
4656
 
4657
        0%,
4658
        80%,
4659
        100% {
4660
            -webkit-transform: scale(0);
4661
            transform: scale(0);
4662
        }
4663
 
4664
        40% {
4665
            -webkit-transform: scale(1);
4666
            transform: scale(1);
4667
        }
4668
    }
4669
}
4670
 
4671
 
4672
.wordpressdevlp {
4673
    background-color: #fff;
4674
}
4675
 
4676
.bgclr {
4677
    background-color: #fff;
4678
    margin-bottom: 15px;
4679
}
4680
 
4681
.cadidatesbtn {
4682
    position: absolute;
4683
    left: 0;
4684
    padding-top: 5px;
4685
}
4686
 
4687
.cadidatesbtn button {
4688
    background-color: #e44d3a;
4689
    border: none;
4690
    margin-top: -3px;
4691
}
4692
 
4693
.cadidatesbtn button:hover {
4694
    background-color: #e44d3a;
4695
}
4696
 
4697
.cadidatesbtn span {
4698
    background-color: #bd2e1c;
4699
    color: #fff;
4700
    margin-right: 10px;
4701
    padding: 0.25em 0.5em;
4702
    font-weight: 600;
4703
    font-size: 12px;
4704
}
4705
 
4706
.wordpressdevlp i {
4707
    color: #e86554;
4708
    font-size: 18px;
4709
    font-weight: bold;
4710
    padding-right: 5px;
4711
}
4712
 
4713
.wordpressdevlp h2 {
4714
    font-size: 18px;
4715
    font-weight: 600;
4716
}
4717
 
4718
.cadidatesbtn i {
4719
    color: #b2b2b2;
4720
    border: 1px solid #b2b2b2;
4721
    font-size: 14px;
4722
    text-align: center;
4723
    margin-left: 7px;
4724
    border-radius: 3px;
4725
    padding: 10px;
4726
}
4727
 
4728
.cadidatesbtn i:hover {
4729
    background-color: #e44d3a;
4730
    color: #fff;
4731
    border: 1px solid #e44d3a;
4732
}
4733
 
4734
.inner {
4735
    border-bottom: 2px solid #e5e5e5;
4736
    padding-bottom: 10px;
4737
}
4738
 
4739
.inner li a:hover {
4740
    color: #e44d3a;
4741
    border-bottom: 2px solid #e44d3a;
4742
    padding-bottom: 9px;
4743
}
4744
 
4745
.inner li a {
4746
    color: #000000;
4747
}
4748
 
4749
.posttext {
4750
    position: absolute;
4751
    left: 0;
4752
}
4753
 
4754
.deatile h3 {
4755
    font-size: 14px;
4756
    font-weight: bold;
4757
    padding-bottom: 5px;
4758
}
4759
 
4760
.clrbtn a {
4761
    background-color: #e44d3a;
4762
    color: #fff;
4763
    padding: 5px 10px 5px 10px;
4764
    margin-right: 15px;
4765
}
4766
 
4767
.transpairentbtn a {
4768
    color: #222;
4769
    border: 2px solid #f1f1f1;
4770
    padding: 5px 10px 5px 10px;
4771
}
4772
 
4773
.savetext h3 {
4774
    font-size: 14px;
4775
    font-weight: bold;
4776
    padding-bottom: 5px;
4777
}
4778
 
4779
.devepbtn .clrbtn {
4780
    padding: 7px 20px;
4781
}
4782
 
4783
.devepbtn a {
4784
    color: #666666;
4785
    border: 1px solid #b2b2b2;
4786
    padding: 7px 10px 7px 10px;
4787
    border-radius: 3px;
4788
    margin-right: 5px;
4789
}
4790
 
4791
.devepbtn a:hover i {
4792
    color: #fff;
4793
}
4794
 
4795
.devepbtn a:hover {
4796
    background-color: #e44d3a;
4797
    color: #fff;
4798
}
4799
 
4800
.rew-reply hr {
4801
    margin-left: -20px;
4802
    margin-right: -20px;
4803
}
4804
 
4805
.rew-reply p {
4806
    padding-left: 20px;
4807
}
4808
 
4809
.rew-reply ul {
4810
    padding-left: 20px;
4811
}
4812
 
4813
.devepbtn {
4814
    margin-top: 30px;
4815
    padding-left: 20px;
4816
}
4817
 
4818
.rep-thanks hr {
4819
    margin-right: -20px;
4820
    margin-left: -20px;
4821
}
4822
 
4823
.profilecnd {
4824
    margin-bottom: 0px;
4825
}
4826
 
4827
.devepbtn i {
4828
    color: #b2b2b2;
4829
    font-size: 14px;
4830
}
4831
 
4832
.appliedinfo {
4833
    padding-left: 0;
4834
    padding-top: 20px !important;
4835
    padding-bottom: 10px;
4836
}
4837
 
4838
.epi2 {
4839
    padding: 0;
4840
}
4841
 
4842
.review a {
4843
    line-height: 16px;
4844
    font-size: 14px;
4845
    text-decoration: none;
4846
    font-weight: 500;
4847
    margin-left: 15px;
4848
}
4849
 
4850
.add-pic-box {
4851
    display: inline-block;
4852
    color: #e44d3a;
4853
    font-size: 16px;
4854
    position: absolute;
4855
    top: 30px;
4856
    right: 0;
4857
    font-weight: 600;
4858
    margin-right: 0;
4859
    width: 100%;
4860
}
4861
 
4862
.add-pic-box [type="file"] {
4863
    height: 0;
4864
    overflow: hidden;
4865
    width: 0;
4866
    float: left;
4867
}
4868
 
4869
.add-pic-box [type="file"]+label {
4870
    background: #fff;
4871
    border: 2px solid #e44d3a;
4872
    border-radius: 3px;
4873
    color: #e44d3a;
4874
    cursor: pointer;
4875
    /* display: inline-block; */
4876
    font-size: 15px;
4877
    font-weight: 600;
4878
    outline: none;
4879
    padding: 12px 20px;
4880
    position: relative;
4881
    transition: all 0.3s;
4882
    vertical-align: middle;
4883
    margin: 0;
4884
    float: right;
4885
    text-transform: uppercase;
4886
}
4887
 
4888
.add-pic-box [type="file"]+label:hover {
4889
    background: #e44d3a;
4890
    color: #fff;
4891
}
4892
 
4893
.noreview li i {
4894
    color: #b2b2b2;
4895
}
4896
 
4897
.review-tb {
4898
    margin: 0 0 10px;
4899
    padding-left: 20px;
4900
}
4901
 
4902
.noreview ul li i {
4903
    color: #b2b2b2;
4904
}
4905
 
4906
.mngdetl {
4907
    border-bottom: none;
4908
}
4909
 
4910
.post-reply {
4911
    padding-top: 0;
4912
    padding-bottom: 0;
4913
}
4914
 
4915
.activebidbtn i:hover {
4916
    background-color: #e44d3a;
4917
    color: #fff;
4918
    border: none;
4919
}
4920
 
4921
.reviewtitle h2 {
4922
    font-size: 17px;
4923
    font-weight: 600;
4924
}
4925
 
4926
.horiline {
4927
    width: 118%;
4928
    position: relative;
4929
    left: -40px;
4930
}
4931
 
4932
.tahnks {
4933
    font-weight: 500;
4934
    margin-top: 5px;
4935
}
4936
 
4937
/*about-page*/
4938
 
4939
.banner span {
4940
    position: absolute;
4941
    display: flex;
4942
    background-color: #222;
4943
    width: 100%;
4944
    opacity: 0.9;
4945
    justify-content: center;
4946
    padding: 10px;
4947
    margin-top: 0;
4948
    color: #fff;
4949
}
4950
 
4951
.innertitle {
4952
    margin-top: 130px;
4953
}
4954
 
4955
.Company-overview {
4956
    padding-bottom: 50px;
4957
}
4958
 
4959
.bennertext {
4960
    position: absolute;
4961
    left: 20%;
4962
    right: 20%;
4963
    text-align: center;
4964
}
4965
 
4966
.bannerimage img {
4967
    height: 100%;
4968
}
4969
 
4970
.innertitle h2 {
4971
    color: #fff;
4972
    font-size: 30px;
4973
    line-height: 32px;
4974
    font-weight: 600;
4975
    margin-bottom: 20px;
4976
}
4977
 
4978
.innertitle p {
4979
    color: #fff;
4980
    font-size: 16px;
4981
}
4982
 
4983
.Company-overview h2 {
4984
    padding-top: 100px;
4985
    font-size: 24px;
4986
    font-weight: 600;
4987
    padding-bottom: 12px;
4988
}
4989
 
4990
.Company-overview p {
4991
    font-size: 15px;
4992
    font-weight: 500;
4993
}
4994
 
4995
.Company-overview img {
4996
    float: right;
4997
    padding-top: 25px;
4998
}
4999
 
5000
.blog {
5001
    text-align: center;
5002
    display: inline-block;
5003
    margin-bottom: 50px;
5004
}
5005
 
5006
.blog img {
5007
    padding-bottom: 30px;
5008
}
5009
 
5010
.blog h2 {
5011
    font-size: 18px;
5012
    font-weight: 600;
5013
    padding-bottom: 30px;
5014
}
5015
 
5016
.blog a {
5017
    background-color: #ff4500;
5018
    color: #fff;
5019
    padding: 7px 25px 7px 25px;
5020
    border-radius: 3px;
5021
    font-size: 16px;
5022
    font-weight: 500;
5023
}
5024
 
5025
.services {
5026
    padding-top: 80px;
5027
    padding-bottom: 80px;
5028
}
5029
 
5030
.video {
5031
    padding-bottom: 40px;
5032
}
5033
 
5034
.search-container {
5035
    text-align: center;
5036
}
5037
 
5038
.search-container input[type="text"] {
5039
    padding: 6px 15px;
5040
    margin-top: 8px;
5041
    font-size: 17px;
5042
    border: none;
5043
    height: 50px;
5044
    width: 50%;
5045
    margin-bottom: 25px;
5046
    border-top-left-radius: 3px;
5047
    border-top-right-radius: 0px;
5048
    border-bottom-left-radius: 3px;
5049
    border-bottom-right-radius: 0px;
5050
}
5051
 
5052
.searchtitle {
5053
    text-align: center;
5054
}
5055
 
5056
.searchtitle h2 {
5057
    color: #fff;
5058
    font-size: 30px;
5059
    font-weight: 400;
5060
    padding-bottom: 10px;
5061
}
5062
 
5063
.search-container button {
5064
    padding: 8px 10px;
5065
    text-align: center;
5066
    margin-top: 8px;
5067
    margin-left: -3px;
5068
    margin-right: 18px;
5069
    background: #efefef;
5070
    font-size: 17px;
5071
    border: none;
5072
    cursor: pointer;
5073
    height: 50px;
5074
    width: 6%;
5075
    border-bottom-right-radius: 3px;
5076
    border-top-right-radius: 3px;
5077
}
5078
 
5079
.topsearch i {
5080
    color: #e44d3a;
5081
}
5082
 
5083
.dropdown-toggle::after {
5084
    position: absolute;
5085
    right: 15px;
5086
    color: #b2b2b2;
5087
    top: 7px;
5088
}
5089
 
5090
.help-paddy {
5091
    padding: 0 !important;
5092
}
5093
 
5094
.paddy {
5095
    padding: 20px;
5096
    float: left;
5097
}
5098
 
5099
.dropdown-menu {
5100
    position: absolute;
5101
    top: 100%;
5102
    left: 0;
5103
    z-index: 1000;
5104
    display: none;
5105
    float: left;
5106
    min-width: 10rem;
5107
    padding: 0.5rem 0;
5108
    margin: 0.125rem 0 0;
5109
    font-size: 1rem;
5110
    color: #212529;
5111
    text-align: left;
5112
    list-style: none;
5113
    background-color: #fff;
5114
    width: 100%;
5115
    background-clip: padding-box;
5116
    border: none;
5117
    border-radius: 0.25rem;
5118
}
5119
 
5120
.radio-form p {
5121
    display: -webkit-inline-box;
5122
}
5123
 
5124
.dropdown a {
5125
    color: #000000;
5126
    font-size: 16px;
5127
    font-weight: 400;
5128
    padding: 0 20px;
5129
}
5130
 
5131
.accountnone {
5132
    border: none;
5133
}
5134
 
5135
.helpforum {
5136
    background-color: #fff;
5137
    padding: 15px 0;
5138
    box-shadow: 0px 2px #c6c6c6;
5139
}
5140
 
5141
.helpforum h3 {
5142
    font-size: 18px;
5143
    font-weight: 600;
5144
}
5145
 
5146
.helpforum a {
5147
    background-color: #e44d3a;
5148
    color: #fff;
5149
    padding: 10px 15px 10px 15px;
5150
    line-height: 4;
5151
    border-radius: 3px;
5152
}
5153
 
5154
.helpforum p {
5155
    line-height: 3;
5156
}
5157
 
5158
.actionstitle h3 {
5159
    font-size: 18px;
5160
    font-weight: 400;
5161
    color: #000;
5162
    padding-top: 30px;
5163
}
5164
 
5165
.actionstitle img {
5166
    padding-right: 10px;
5167
}
5168
 
5169
.actionstext a {
5170
    font-size: 16px;
5171
    font-weight: 500;
5172
    color: #e44d3a;
5173
    line-height: 2;
5174
    display: block;
5175
}
5176
 
5177
.helpform {
5178
    text-align: center;
5179
    padding-top: 70px;
5180
}
5181
 
5182
.helpform h3 {
5183
    font-size: 18px;
5184
    font-weight: 400;
5185
    color: #e44d3a;
5186
    margin-bottom: 10px;
5187
}
5188
 
5189
.helpform a {
5190
    background-color: #e44d3a;
5191
    color: #fff;
5192
    padding: 10px 15px 10px 15px;
5193
    border-radius: 3px;
5194
}
5195
 
5196
.helpform p {
5197
    margin-bottom: 30px;
5198
}
5199
 
5200
.helpform img {
5201
    float: unset;
5202
    padding-bottom: 10px;
5203
}
5204
 
5205
.bookingsideber h3 {
5206
    color: #000;
5207
}
5208
 
5209
.bookingsideber h3:active {
5210
    color: #e44d3a;
5211
}
5212
 
5213
.helpforum h4 {
5214
    font-size: 16px;
5215
    font-weight: 600;
5216
}
5217
 
5218
.bloktext {
5219
    padding-left: 25px;
5220
}
5221
 
5222
.privacy {
5223
    background-color: #fff;
5224
    height: 850px;
5225
}
5226
 
5227
.privacydropd .dropdown-toggle::after {
5228
    float: right;
5229
    vertical-align: 0.255em;
5230
}
5231
 
5232
/* .checkbox {} */
5233
 
5234
.form-check {
5235
    padding-left: 0;
5236
}
5237
 
5238
.btns a {
5239
    color: #000;
5240
    border: 1px solid #e5e5e5;
5241
    padding: 10px 25px 10px 25px;
5242
    margin-left: 15px;
5243
    border-radius: 5px;
5244
    font-weight: 600;
5245
}
5246
 
5247
.btns {
5248
    padding-top: 20px;
5249
}
5250
 
5251
.btns a:hover {
5252
    background-color: #e44d3a;
5253
    color: #fff;
5254
}
5255
 
5256
.privacy h3 {
5257
    font-size: 18px;
5258
    font-weight: 600;
5259
    padding-top: 18px;
5260
    margin-bottom: 10px;
5261
}
5262
 
5263
.privacy p {
5264
    padding-top: 0px;
5265
    display: inline-block;
5266
}
5267
 
5268
.form-group {
5269
    margin-bottom: 1rem;
5270
    padding-top: 0px;
5271
}
5272
 
5273
.privacy i {
5274
    float: right;
5275
    color: #e44d3a;
5276
    font-size: 20px;
5277
    font-weight: 600;
5278
}
5279
 
5280
.dropdown-menu input {
5281
    margin-right: 10px;
5282
    margin-top: 15px;
5283
}
5284
 
5285
.dropdown-menu a {
5286
    padding: 10px 0 10px 40px;
5287
    margin-bottom: 10px;
5288
}
5289
 
5290
.dropdown-menu form {
5291
    margin-bottom: 10px;
5292
    margin-top: 10px;
5293
}
5294
 
5295
.privacydropd p {
5296
    margin-left: 20px;
5297
    margin-top: 5px;
5298
}
5299
 
5300
.privabtns {
5301
    margin-top: 20px;
5302
}
5303
 
5304
.privabtns {
5305
    padding-bottom: 15px;
5306
}
5307
 
5308
.privabtns a {
5309
    margin-right: 15px;
5310
    padding: 8px 25px;
5311
    color: #000000;
5312
    border: 1px solid #e5e5e5;
5313
}
5314
 
5315
.privabtns a:hover {
5316
    color: #fff;
5317
    background-color: #e44d3a;
5318
}
5319
 
5320
.privac {
5321
    background-color: #fff;
5322
    height: 560px;
5323
    padding-top: 20px;
5324
}
5325
 
5326
.privac h3 {
5327
    font-size: 18px;
5328
    font-weight: 600;
5329
}
5330
 
5331
.bids-detail ul {
5332
    display: -webkit-inline-box;
5333
}
5334
 
5335
.bids-detail ul li {
5336
    margin-right: 30px;
5337
}
5338
 
5339
.bids-detail h3 {
5340
    font-size: 16px;
5341
    font-weight: 400;
5342
}
5343
 
5344
.bids-detail {
5345
    background-color: #fff;
5346
    padding: 20px;
5347
    margin-bottom: 25px;
5348
    box-shadow: 0px 2px #e4e4e4;
5349
}
5350
 
5351
.dropdown-menu.show {
5352
    display: contents;
5353
}
5354
 
5355
.postpaid:checked:after {
5356
    content: "\f17b";
5357
    font: normal normal normal 16px/1 "LineAwesome";
5358
    font-weight: 600;
5359
    border: 1px solid #fff;
5360
    color: #ffffff;
5361
    text-align: center;
5362
    font-size: 12px;
5363
    width: 100%;
5364
    height: 100%;
5365
    background: #e44d3a;
5366
    display: block;
5367
    border-radius: 50%;
5368
    padding-top: 3px;
5369
}
5370
 
5371
.postpaid:focus {
5372
    border: 1px solid #fff;
5373
    width: 25px;
5374
    height: 25px;
5375
}
5376
 
5377
.postpaid {
5378
    -webkit-appearance: none;
5379
    content: "";
5380
    width: 20px;
5381
    height: 20px;
5382
    border-radius: 50%;
5383
    border: 1px solid #5e5e5e;
5384
    outline: 0;
5385
    margin-right: 5px;
5386
}
5387
 
5388
/* .main-ws-sec .job-status-bar {} */
5389
 
5390
.main-ws-sec .btm-line {
5391
    padding-bottom: 20px !important;
5392
    border-bottom: 1px solid #e5e5e5 !important;
5393
    margin-bottom: 20px;
5394
}
5395
 
5396
.job-status-bar hr {
5397
    margin: 0 -40px;
5398
}
5399
 
5400
.reply-area {
5401
    padding-left: 55px;
5402
}
5403
 
5404
.reply-rply1 {
5405
    margin: 24px 0;
5406
}
5407
 
5408
.reply-area p {
5409
    padding-bottom: 10px;
5410
}
5411
 
5412
.reply-area span {
5413
    cursor: pointer;
5414
}
5415
 
5416
.reply-area span:hover {
5417
    color: #e44d3a;
5418
}
5419
 
5420
.reply-area i {
5421
    font-size: 16px;
5422
    font-weight: 600;
5423
    padding-right: 8px;
5424
}
5425
 
5426
.comment-area .la-plus-circle {
5427
    display: block;
5428
    text-align: center;
5429
    font-size: 40px;
5430
    color: #b2b2b2;
5431
}
5432
 
5433
.reply-area span {
5434
    padding-top: 5px;
5435
    color: #b2b2b2;
5436
}
5437
 
5438
.comt span {
5439
    font-size: 16px;
5440
    color: #666666;
5441
}
5442
 
5443
.comt i {
5444
    padding-right: 8px;
5445
}
5446
 
5447
.postcomment .form-control {
5448
    width: 112%;
5449
    margin-left: -50px;
5450
    background-color: #efefef;
5451
    border-radius: 3px;
5452
}
5453
 
5454
.postcomment a {
5455
    background-color: #e44d3a;
5456
    color: #fff;
5457
    padding: 9px 25px 8px 25px;
5458
    line-height: 37px;
5459
    border-radius: 3px;
5460
}
5461
 
5462
.postcomment {
5463
    padding-top: 30px;
5464
}
5465
 
5466
.widget-projectid {
5467
    padding: 15px;
5468
}
5469
 
5470
.widget-projectid h3 {
5471
    padding-bottom: 7px;
5472
    font-size: 14px;
5473
    font-weight: 600;
5474
}
5475
 
5476
.paymethd p {
5477
    color: #e44d3a;
5478
}
5479
 
5480
.copylink p {
5481
    background-color: #efefef;
5482
    padding: 7px 0 8px 10px;
5483
}
5484
 
5485
.copylink a {
5486
    background-color: #e44d3a;
5487
    color: #fff;
5488
    padding: 10px 15px 10px 15px;
5489
    border-radius: 4px;
5490
}
5491
 
5492
.copylink span {
5493
    padding: 30px 0 20px;
5494
}
5495
 
5496
.copylink i {
5497
    float: unset;
5498
    position: unset;
5499
}
5500
 
5501
.copylink .la-facebook {
5502
    background-color: #3b5998;
5503
    color: #fff;
5504
}
5505
 
5506
.copylink .la-twitter {
5507
    color: #1da1f2;
5508
}
5509
 
5510
.copylink .la-pinterest-p {
5511
    background-color: #fff;
5512
    color: #c11628;
5513
    border-radius: 50%;
5514
}
5515
 
5516
.copylink img {
5517
    padding-right: 10px;
5518
}
5519
 
5520
.freelancerbiding {
5521
    background-color: #fff;
5522
    padding-top: 20px;
5523
}
5524
 
5525
.freelancerbiding h3 {
5526
    font-size: 18px;
5527
    font-weight: 400;
5528
}
5529
 
5530
.repcent {
5531
    text-align: left;
5532
}
5533
 
5534
.bidrit {
5535
    float: right;
5536
}
5537
 
5538
.repcent i {
5539
    padding-left: 5px;
5540
}
5541
 
5542
.star {
5543
    display: inline-flex;
5544
    padding: 5px 0;
5545
}
5546
 
5547
.star li i {
5548
    color: #bfd337;
5549
}
5550
 
5551
.repcent span {
5552
    color: #51a5fb;
5553
}
5554
 
5555
.repcent p {
5556
    padding-left: 7px;
5557
}
5558
 
5559
.noreview ul li i {
5560
    color: #b2b2b2;
5561
}
5562
 
5563
.paymethd .star li i {
5564
    position: unset;
5565
    font-size: 14px;
5566
}
5567
 
5568
.paymethd .star a {
5569
    color: #51a5fb;
5570
    padding-left: 12px;
5571
}
5572
 
5573
.notice {
5574
    background-color: #ddf3ff;
5575
    padding: 15px;
5576
}
5577
 
5578
.notice span {
5579
    font-weight: 500;
5580
    padding-right: 5px;
5581
}
5582
 
5583
.delivery .input-group select {
5584
    width: 150px;
5585
    height: 50px !important;
5586
    font-size: 19px;
5587
    border: 1px solid #e5e5e5;
5588
    border-radius: 3px;
5589
}
5590
 
5591
.place-bid-btn {
5592
    font-size: 15px;
5593
    font-weight: 500;
5594
    color: #fff !important;
5595
    background-color: #e44d3a !important;
5596
    border: none;
5597
    padding: 10px;
5598
    border: 1px solid #e44d3a;
5599
    border-radius: 3px;
5600
}
5601
 
5602
.usy-dt .reply {
5603
    margin: 3px 0 0 10px;
5604
    width: 360px;
5605
    height: 40px;
5606
    background-color: #efefef;
5607
    border: 1px solid #e5e5e5;
5608
    padding-left: 10px;
5609
    border-radius: 3px;
5610
}
5611
 
5612
.replybtn {
5613
    background-color: #e44d3a;
5614
    color: #fff;
5615
    padding: 10px;
5616
    margin-left: 15px;
5617
    border-radius: 3px;
5618
}
5619
 
5620
.replybtn:hover {
5621
    color: #fff;
5622
}
5623
 
5624
.rewivew ul li {
5625
    margin-right: 5px !important;
5626
}
5627
 
5628
.security hr {
5629
    margin-right: -15px;
5630
    margin-left: -15px;
5631
}
5632
 
5633
.privacy .la-check {
5634
    float: left;
5635
    font-size: 12px;
5636
    margin: 5px 5px 0 0;
5637
    padding: 3px;
5638
    background-color: #e44d3a;
5639
    color: #fff;
5640
    border-radius: 50%;
5641
}
5642
 
5643
ul#myTab {
5644
    border-bottom: 1px solid #e5e5e5;
5645
}
5646
 
5647
.nav-tabs .nav-link {
5648
    border: none;
5649
}
5650
 
5651
.noborder {
5652
    border-bottom: none;
5653
}
5654
 
5655
.manbids {
5656
    margin-bottom: 0 !important;
5657
}
5658
 
5659
.noreply {
5660
    padding-top: 30px;
5661
}
5662
 
5663
#my-bids .nav-tabs {
5664
    margin-bottom: 20px;
5665
    margin-top: 7px;
5666
    padding-bottom: 0;
5667
}
5668
 
5669
#my-bids ul {
5670
    margin-bottom: 15px;
5671
    margin-top: 7px;
5672
    padding-bottom: 0;
5673
}
5674
 
5675
.savedjob-info p {
5676
    color: #666666;
5677
    margin-top: 5px;
5678
}
5679
 
5680
#my-bids ul li a {
5681
    color: #000000;
5682
    font-size: 16px;
5683
    font-weight: 500;
5684
}
5685
 
5686
#my-bids li a:hover {
5687
    color: #e44d3a;
5688
}
5689
 
5690
#saved-jobs ul {
5691
    margin-bottom: 20px;
5692
}
5693
 
5694
#saved-jobs ul li a {
5695
    color: #000000;
5696
    font-size: 16px;
5697
    font-weight: 500;
5698
}
5699
 
5700
#saved-jobs li a:hover {
5701
    color: #e44d3a;
5702
}
5703
 
5704
.wordpressdevlp h2 {
5705
    font-size: 18px;
5706
    font-weight: 600;
5707
    margin-bottom: 15px;
5708
}
5709
 
5710
#saved-jobs .nav-tabs .nav-item.show .nav-link,
5711
#saved-jobs .nav-tabs .nav-link.active {
5712
    background-color: inherit;
5713
    color: #e44d3a !important;
5714
    padding-bottom: 9px;
5715
    border-bottom: 2px solid #e44d3a !important;
5716
}
5717
 
5718
#my-bids .nav-tabs .nav-item.show .nav-link,
5719
#my-bids .nav-tabs .nav-link.active {
5720
    background-color: inherit;
5721
    color: #e44d3a !important;
5722
    padding-bottom: 9px;
5723
    border-bottom: 2px solid #e44d3a !important;
5724
}
5725
 
5726
.descptab li img {
5727
    float: left !important;
5728
    filter: inherit !important;
5729
}
5730
 
5731
.bklink {
5732
    border-bottom: none !important;
5733
    width: unset !important;
5734
    float: right !important;
5735
}
5736
 
5737
.bklik {
5738
    border-bottom: none !important;
5739
}
5740
 
5741
/*////////////////////////////////////////My css//////////////////////////////// //////////////////////////////////////////////////////////////////////////////*/
5742
 
5743
.savedjob-info li {
5744
    display: inline-block;
5745
    padding-left: 25px;
5746
}
5747
 
5748
.savedjob-info h3 {
5749
    font-size: 14px;
5750
    font-weight: 500;
5751
}
5752
 
5753
.settingjb ul li {
5754
    margin-right: 25px !important;
5755
}
5756
 
5757
.mangebid li {
5758
    padding-left: 0;
5759
    padding-right: 20px;
5760
    padding-top: 10px;
5761
}
5762
 
5763
.bk-links.bklink li {
5764
    padding-right: 0;
5765
}
5766
 
5767
.bidsbtn {
5768
    position: relative;
5769
}
5770
 
5771
.biddersinfo li {
5772
    padding-left: 0;
5773
    padding-right: 20px;
5774
}
5775
 
5776
#review {
5777
    background-color: #fff;
5778
    margin-bottom: 40px;
5779
}
5780
 
5781
.starreview {
5782
    padding-left: 20px;
5783
}
5784
 
5785
.replytext {
5786
    padding-bottom: 20px;
5787
}
5788
 
5789
.starrevi {
5790
    padding-left: 20px;
5791
}
5792
 
5793
.apply-jobbox {
5794
    text-align: center;
5795
}
5796
 
5797
.apply-jobbox form input {
5798
    width: 100%;
5799
    margin-top: 20px;
5800
    padding: 10px;
5801
    color: #222;
5802
    border: 1px solid #e5e5e5;
5803
    border-radius: 3px;
5804
    font-size: 14px;
5805
}
5806
 
5807
.apply-jobbox h3 {
5808
    margin: 20px 0;
5809
}
5810
 
5811
.select-files {
5812
    border: 1px solid #e5e5e5;
5813
    margin-top: 20px;
5814
    padding: 30px;
5815
    background: #efefef;
5816
}
5817
 
5818
.select-files button {
5819
    margin-bottom: 20px;
5820
    background-color: transparent;
5821
    border: 1px solid #e5e5e5;
5822
    padding: 10px 15px 10px 15px;
5823
    border-radius: 5px;
5824
    font-weight: 600;
5825
}
5826
 
5827
.select-files button:hover {
5828
    background-color: #e44d3a;
5829
    color: #fff;
5830
}
5831
 
5832
.close {
5833
    position: absolute;
5834
    right: 0px;
5835
    top: 0px;
5836
    color: #929292;
5837
    border: 1px solid;
5838
    border-radius: 50%;
5839
    height: 30px;
5840
    width: 30px;
5841
}
5842
 
5843
.mapouter iframe {
5844
    width: 100%;
5845
    height: 400px;
5846
}
5847
 
5848
.mapouter {
5849
    position: relative;
5850
    text-align: right;
5851
    height: 500px;
5852
    width: 100%;
5853
}
5854
 
5855
.gmap_canvas {
5856
    overflow: hidden;
5857
    background: none !important;
5858
}
5859
 
5860
.video-iframe {
5861
    width: 100%;
5862
    height: 400px;
5863
}
5864
 
5865
.custom-file-input {
5866
    color: transparent;
5867
    opacity: 1;
5868
    /* margin-left: 140px; */
5869
    margin-bottom: 10px;
5870
}
5871
 
5872
.custom-file-input::-webkit-file-upload-button {
5873
    visibility: hidden;
5874
}
5875
 
5876
.custom-file-input::before {
5877
    content: "Select Files";
5878
    color: #fff;
5879
    display: inline-block;
5880
    border: 1px solid #e5e5e5;
5881
    border-radius: 3px;
5882
    background: #e44d3a;
5883
    font-weight: 500;
5884
    padding: 10px 15px;
5885
    outline: none;
5886
    white-space: nowrap;
5887
    -webkit-user-select: none;
5888
    cursor: pointer;
5889
}
5890
 
5891
.custom-file-input:hover::before {
5892
    background-color: #e44d3a;
5893
    color: #fff;
5894
}
5895
 
5896
.custom-file-input:active {
5897
    outline: 0;
5898
}
5899
 
5900
.custom-file-input:active::before {
5901
    background: #e44d3a;
5902
    color: #fff;
5903
}
5904
 
5905
.bids-time {
5906
    float: right;
5907
}
5908
 
5909
.saved-post {
5910
    padding: 0;
5911
}
5912
 
5913
.saved-post p {
5914
    padding-bottom: 20px;
5915
}
5916
 
5917
.saved-info li {
5918
    padding-right: 25px;
5919
    padding-left: 0;
5920
}
5921
 
5922
.saved-btn {
5923
    padding: 0;
5924
    margin-bottom: -12px;
5925
}
5926
 
5927
.applied-post {
5928
    padding: 0;
5929
}
5930
 
5931
.post-bid {
5932
    padding: 0 !important;
5933
}
5934
 
5935
.bidsbtn {
5936
    padding-top: 0 !important;
5937
}
5938
 
5939
.active-bids {
5940
    padding: 0;
5941
}
5942
 
5943
.activ-bidinfo li {
5944
    padding-top: 10px;
5945
    padding-left: 0;
5946
    padding-right: 25px;
5947
}
5948
 
5949
.activebtn {
5950
    padding-left: 0;
5951
}
5952
 
5953
.p-all {
5954
    padding: 0px;
5955
    float: left;
5956
    width: 100%;
5957
    position: relative;
5958
}
5959
 
5960
.toggle-btn .custom-switch .custom-control-label::before {
5961
    left: -2.25rem;
5962
    width: 70px;
5963
    pointer-events: all;
5964
    border-radius: 100px;
5965
    height: 30px;
5966
    top: -1px;
5967
    box-shadow: none;
5968
}
5969
 
5970
.toggle-btn .custom-control-label::before {
5971
    position: absolute;
5972
    top: 0.25rem;
5973
    left: -1.5rem;
5974
    display: block;
5975
    width: 1rem;
5976
    height: 1rem;
5977
    pointer-events: none;
5978
    content: "";
5979
    background-color: #fff;
5980
    border: #e1e1e1 solid 2px;
5981
}
5982
 
5983
.custom-control-input:checked~.custom-control-label::before {
5984
    color: #fff;
5985
    border-color: #e44d3a;
5986
    background-color: #e44d3a;
5987
    box-shadow: none;
5988
    outline: none;
5989
}
5990
 
5991
.toggle-btn .custom-switch .custom-control-label::after {
5992
    top: calc(-1px + 2px);
5993
    left: calc(-36px + 2px);
5994
    width: calc(30px - 4px);
5995
    height: calc(30px - 4px);
5996
    background-color: #e1e1e1;
5997
    border-radius: 100%;
5998
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
5999
        -webkit-transform 0.15s ease-in-out;
6000
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
6001
        box-shadow 0.15s ease-in-out;
6002
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
6003
        box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
6004
}
6005
 
6006
.toggle-btn .custom-control-label::after {
6007
    position: absolute;
6008
    top: 0.25rem;
6009
    left: -1.5rem;
6010
    display: block;
6011
    width: 0;
6012
    height: 0;
6013
    content: "";
6014
    background: no-repeat 50%/50% 50%;
6015
}
6016
 
6017
.toggle-btn .custom-control-label {
6018
    position: initial;
6019
    margin-bottom: 0;
6020
    vertical-align: top;
6021
}
6022
 
6023
.toggle-btn .custom-switch .custom-control-input:checked~.custom-control-label::after {
6024
    background-color: #fff;
6025
    -webkit-transform: translateX(2.5rem);
6026
    transform: translateX(2.5rem);
6027
}
6028
 
6029
.custom-control-label {
6030
    position: relative;
6031
    margin-bottom: 0;
6032
    vertical-align: top;
6033
    line-height: 24px;
6034
    font-size: 14px;
6035
    color: #666666;
6036
}
6037
 
6038
.small-text-children p,
6039
.small-text-children span {
6040
    font-size: 0.8rem;
6041
}
6042
 
6043
.search-item-selected {
6044
    padding: 1px 10px;
6045
    background: var(--background-gray);
6046
    line-height: 1;
6047
    border-radius: 10px;
6048
    font-weight: bold;
6049
}
6050
 
6051
.row .sc-dkzDqf {
6052
    margin: 0 auto;
6053
}
6054
 
6055
.test-section .title,
6056
.test-section .description {
6057
    margin-bottom: 10px;
6058
}
6059
 
6060
.test-section .btn-danger {
6061
    margin-right: 10px;
6062
}
6063
 
6064
.test-section .panel-body {
6065
    padding: 20px 0px;
6066
}
6067
 
6068
.test-section .panel {
6069
    margin-top: 20px;
6070
    padding-bottom: 10px;
6071
}
6072
 
6073
.test-section .np-padding {
6074
    padding: 0px;
6075
}
6076
 
6077
.test-section .checkbox {
6078
    display: flex;
6079
    margin: 20px 0px;
6080
}
6081
 
6082
.test-section .option {
6083
    margin-left: 10px;
6084
}
6085
 
6086
.checkbox input[type="checkbox"],
6087
input[type="radio"] {
6088
    margin-top: 5px !important;
6089
}
6090
 
6091
.test-section h6 {
6092
    margin-bottom: 10px;
6093
    color: #0860bf;
6094
}
6095
 
6096
.wizard {
6097
    display: flex;
6098
    margin-top: 10px;
6099
}
6100
 
6101
.wizard li {
6102
    width: 50%;
6103
    display: inline-block;
6104
}
6105
 
6106
.btn-secondary:disabled,
6107
.btn-primary:disabled {
6108
    cursor: no-drop;
6109
}
6110
 
6111
.test-section .btn-primary {
6112
    margin-left: 10px;
6113
}
6114
 
6115
.previous {
6116
    text-align: left;
6117
}
6118
 
6119
.next {
6120
    text-align: right;
6121
}
6122
 
6123
.test-section .close {
6124
    border: none !important;
6125
    border-radius: 0px !important;
6126
}
6127
 
6128
.ratin-range {
6129
    display: block;
6130
}
6131
 
6132
.ratin-range li {
6133
    display: inline-block;
6134
    width: 6%;
6135
}
6136
 
6137
.ratin-range li .option {
6138
    margin-top: 2px !important;
6139
}
6140
 
6141
#react-self-evaluation .company-up-info ul {
6142
    width: 100%;
6143
    position: absolute;
6144
    float: left;
6145
    left: 0px;
6146
    bottom: 4vw;
6147
}
6148
 
6149
#react-self-evaluation .company-up-info {
6150
    padding: 30px 10px;
6151
    min-height: 20vw;
6152
    border: 1px solid #e5e5e5;
6153
}
6154
 
6155
#react-self-evaluation .company-up-info h3 {
6156
    width: 90%;
6157
    margin: 5px auto;
6158
}
6159
 
6160
.mb10 {
6161
    margin-bottom: 3vw;
6162
}
6163
 
6164
.opt-h6 {
6165
    font-weight: 600 !important;
6166
    color: #000 !important;
6167
}
6168
 
6169
// Alert notification
6170
 
6171
.alert-danger {
6172
    background-color: $danger !important;
6173
 
6174
    &:hover {
6175
        background-color: $danger-hover !important;
6176
    }
6177
}