Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5568 | Rev 5706 | 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
@media (min-width: 721px) {
1925
    .group-view-tab {
1926
        margin-left: 3.5rem;
1927
    }
1928
 
1929
    .group-view-tab span {
1930
        text-overflow: ellipsis;
1931
        white-space: nowrap;
1932
        overflow: hidden;
1933
    }
1934
}
1935
 
1936
@media (max-width: 720px) {
1937
    .group-view-tab {
1938
        margin-left: 3.5rem;
1939
    }
1940
}
1941
 
1942
.text-decoration-underline {
1943
    text-decoration: underline !important;
1944
}
1945
 
1946
.ellipsis {
1947
    text-overflow: ellipsis;
1948
    white-space: nowrap;
1949
    overflow: hidden;
1950
}
1951
 
1952
.la-globe {
1953
    color: #51a5fb;
1954
}
1955
 
1956
/* ================= user-tab-sec ============== */
1957
 
1958
.notifications-grid {
1959
    display: grid;
1960
    grid-template-columns: 1fr;
1961
    gap: 1rem;
1962
}
1963
 
1964
@media (min-width: 768px) {
1965
    .notifications-grid {
1966
        display: grid;
1967
        grid-template-columns: 30% 70%;
1968
        padding: 0 5%;
1969
    }
1970
}
1971
 
1972
.show_filters {
1973
    display: block;
1974
}
1975
 
1976
.hidden_filters {
1977
    display: none !important;
1978
}
1979
 
1980
@media (min-width: 768px) {
1981
    .show_filters {
1982
        display: none;
1983
    }
1984
 
1985
    .hidden_filters {
1986
        display: block !important;
1987
    }
1988
}
1989
 
1990
/* ================= user-tab-sec ============== */
1991
 
1992
.user-tab-sec {
1993
    width: 100%;
1994
 
1995
    h3 {
1996
        color: $title-color;
1997
        font-size: 1.5rem;
1998
        font-weight: 600;
1999
        text-transform: capitalize;
2000
    }
2001
}
2002
 
2003
.star-descp {
2004
    float: left;
2005
    width: 100%;
2006
    margin-bottom: 10px;
2007
}
2008
 
2009
.star-descp ul li {
2010
    margin-right: 5px !important;
2011
}
2012
 
2013
.star-descp>a {
2014
    float: left;
2015
    color: #51a5fb;
2016
    font-size: 18px;
2017
    font-weight: 600;
2018
    margin-left: 20px;
2019
    text-decoration: underline;
2020
}
2021
 
2022
.star-descp>a:hover {
2023
    color: #51a5fb;
2024
}
2025
 
2026
.star-descp span {
2027
    float: left;
2028
    color: #686868;
2029
    font-size: 18px;
2030
    font-weight: 600;
2031
    margin-right: 20px;
2032
}
2033
 
2034
.star-descp>ul {
2035
    float: left;
2036
}
2037
 
2038
.star-descp ul li {
2039
    display: inline-block;
2040
}
2041
 
2042
.star-descp ul li i {
2043
    color: #b7ce1f;
2044
    font-size: 16px;
2045
}
2046
 
2047
.tab-feed {
2048
    float: left;
2049
    width: 100%;
2050
    margin-bottom: 45px;
2051
    margin-top: 20px;
2052
}
2053
 
2054
.tab-feed ul {
2055
    float: left;
2056
    width: 100%;
2057
}
2058
 
2059
.tab-feed ul li {
2060
    display: inline-block;
2061
    margin-right: 35px;
2062
    text-align: center;
2063
}
2064
 
2065
.savetext ul {
2066
    border-bottom: none !important;
2067
}
2068
 
2069
.tab-feed.st2 ul li {
2070
    margin-right: 17px;
2071
}
2072
 
2073
.tab-feed ul li:last-child {
2074
    margin-right: 0;
2075
}
2076
 
2077
.tab-feed ul li.active img {
2078
    filter: grayscale(0);
2079
}
2080
 
2081
.tab-feed ul li.active span {
2082
    color: #e44d3a;
2083
}
2084
 
2085
.tab-feed ul li img {
2086
    float: none;
2087
    margin-bottom: 5px;
2088
    filter: grayscale(100%);
2089
}
2090
 
2091
.tab-feed ul li span {
2092
    display: block;
2093
    color: #b2b2b2;
2094
    font-weight: 400;
2095
    font-size: 16px;
2096
}
2097
 
2098
.tab-feed ul li:last-child {
2099
    margin-right: 0;
2100
}
2101
 
2102
/* ================ message-btn ============= */
2103
 
2104
.message-btn a {
2105
    display: inline-block;
2106
    font-size: 16px;
2107
    padding: 12px;
2108
    font-weight: 500;
2109
}
2110
 
2111
.message-btn a:hover {
2112
    color: #fff;
2113
}
2114
 
2115
.message-btn a i {
2116
    padding-right: 5px;
2117
}
2118
 
2119
/* ============== widget-portfolio ============== */
2120
 
2121
.wd-heady {
2122
    float: left;
2123
    width: 100%;
2124
    padding: 20px 20px;
2125
    border-bottom: 1px solid #e5e5e5;
2126
}
2127
 
2128
.wd-heady h3 {
2129
    color: #000000;
2130
    font-size: 18px;
2131
    font-weight: 600;
2132
    float: left;
2133
}
2134
 
2135
.wd-heady img {
2136
    float: right;
2137
}
2138
 
2139
.pf-gallery {
2140
    float: left;
2141
    width: 100%;
2142
    padding: 15px 15px;
2143
}
2144
 
2145
.pf-gallery ul {
2146
    float: left;
2147
    width: 100%;
2148
}
2149
 
2150
.pf-gallery ul li {
2151
    float: left;
2152
    width: 33.33%;
2153
    padding: 5px;
2154
    overflow: hidden;
2155
}
2156
 
2157
.pf-gallery ul li:hover {
2158
    -webkit-transform: scale(1.2);
2159
    -moz-transform: scale(1.2);
2160
    -ms-transform: scale(1.2);
2161
    -o-transform: scale(1.2);
2162
    transform: scale(1.2);
2163
}
2164
 
2165
.pf-gallery img {
2166
    width: 100%;
2167
}
2168
 
2169
.product-feed-tab {
2170
    display: flex;
2171
    flex-direction: column;
2172
    gap: 0.5rem;
2173
}
2174
 
2175
.product-feed-tab.current {
2176
    display: block;
2177
}
2178
 
2179
/* ==================== portfolio-gallery-sec ==================== */
2180
 
2181
.row {
2182
    margin: 0;
2183
}
2184
 
2185
/* ============== overview-box ============= */
2186
 
2187
.close-box {
2188
    position: absolute;
2189
    top: -20px;
2190
    right: -20px;
2191
    color: #fff;
2192
    font-size: 14px;
2193
    text-align: center;
2194
    width: 22px;
2195
    height: 22px;
2196
    line-height: 22px;
2197
    border: 1px solid #fff;
2198
    border-radius: 100px;
2199
    font-weight: 600;
2200
}
2201
 
2202
.close-box:hover {
2203
    color: #fff;
2204
}
2205
 
2206
.save {
2207
    background-color: #e44d3a;
2208
    color: #fff;
2209
    border-color: transparent;
2210
}
2211
 
2212
.save-add {
2213
    background-color: #fff;
2214
    padding: 13px 13px !important;
2215
}
2216
 
2217
.cancel {
2218
    background-color: #fff;
2219
    color: #000;
2220
}
2221
 
2222
.datepicky {
2223
    float: left;
2224
    width: 100%;
2225
}
2226
 
2227
.no-left-pd {
2228
    padding: 0;
2229
}
2230
 
2231
.no-righ-pd {
2232
    padding-right: 0;
2233
}
2234
 
2235
.datefm {
2236
    width: 100%;
2237
    position: relative;
2238
 
2239
    i {
2240
        position: absolute;
2241
        top: 11px;
2242
        right: 15px;
2243
        font-size: 18px;
2244
        color: #b2b2b2;
2245
    }
2246
}
2247
 
2248
.close-skl {
2249
    position: absolute;
2250
    top: 10px;
2251
    right: 10px;
2252
    color: #b2b2b2;
2253
    font-size: 14px;
2254
}
2255
 
2256
.file-submit {
2257
    border: 1px solid #e5e5e5;
2258
    position: relative;
2259
    padding: 0px;
2260
    height: 40px;
2261
    margin-bottom: 20px;
2262
    border-radius: 3px;
2263
}
2264
 
2265
.file-submit [type="file"] {
2266
    height: 40px;
2267
    overflow: hidden;
2268
    width: 100%;
2269
    float: left;
2270
    position: absolute;
2271
    padding: 10px 4px 0px 12px;
2272
    font-size: 14px;
2273
    opacity: 0;
2274
    display: none;
2275
}
2276
 
2277
.file-submit [type="file"]+label {
2278
    background: #e44d3a;
2279
    border: none;
2280
    float: left;
2281
    border-top-right-radius: 0px;
2282
    border-bottom-right-radius: 0px;
2283
    border-top-left-radius: 3px;
2284
    border-bottom-left-radius: 3px;
2285
    color: #fff;
2286
    cursor: pointer;
2287
    /* display: inline-block; */
2288
    font-size: 14px;
2289
    font-weight: 500;
2290
    outline: none;
2291
    padding: 12px 15px;
2292
    position: relative;
2293
    transition: all 0.3s;
2294
    vertical-align: middle;
2295
    margin: 0;
2296
}
2297
 
2298
.file-submit.nomg {
2299
    border: 0;
2300
    margin-bottom: 20px;
2301
}
2302
 
2303
.file-submit.nomg input {
2304
    margin-bottom: 0;
2305
    padding-top: 0;
2306
}
2307
 
2308
.daty {
2309
    float: left;
2310
    width: 100%;
2311
    position: relative;
2312
}
2313
 
2314
.daty>i {
2315
    position: absolute;
2316
    top: 10px;
2317
    right: 15px;
2318
    color: #b2b2b2;
2319
    font-size: 20px;
2320
}
2321
 
2322
a:hover {
2323
    color: initial;
2324
}
2325
 
2326
.pf-img {
2327
    float: left;
2328
    width: 100%;
2329
    background-color: #f2f2f2;
2330
    padding: 15px;
2331
    margin-bottom: 20px;
2332
}
2333
 
2334
/* ================= billing-method ============== */
2335
 
2336
.billing-method {
2337
    float: left;
2338
    width: 100%;
2339
    background-color: #fff;
2340
    border-left: 1px solid #e4e4e4;
2341
    border-right: 1px solid #e4e4e4;
2342
    border-bottom: 1px solid #e4e4e4;
2343
    margin-bottom: 20px;
2344
}
2345
 
2346
.billing-method ul {
2347
    float: left;
2348
    width: 100%;
2349
}
2350
 
2351
.billing-method ul li {
2352
    float: left;
2353
    width: 100%;
2354
    border-bottom: 1px solid #e5e5e5;
2355
    padding: 25px 20px;
2356
}
2357
 
2358
.billing-method ul li h3 {
2359
    color: #000000;
2360
    font-size: 18px;
2361
    font-weight: 600;
2362
    float: left;
2363
}
2364
 
2365
.billing-method ul li a,
2366
.billing-method ul li span {
2367
    float: right;
2368
    color: #000000;
2369
    font-size: 13px;
2370
    text-transform: capitalize;
2371
    font-weight: 600;
2372
    margin-top: 3px;
2373
}
2374
 
2375
.billing-method ul li i {
2376
    font-size: 13px;
2377
    color: #e44d3a;
2378
}
2379
 
2380
.lt-sec {
2381
    float: left;
2382
    width: 100%;
2383
    text-align: center;
2384
    padding: 30px 0;
2385
}
2386
 
2387
.lt-sec img {
2388
    float: none;
2389
    margin-bottom: 15px;
2390
}
2391
 
2392
.lt-sec h4 {
2393
    color: #686868;
2394
    font-size: 18px;
2395
    font-weight: 600;
2396
    margin-bottom: 25px;
2397
}
2398
 
2399
.lt-sec>a {
2400
    display: inline-block;
2401
    color: #ffffff;
2402
    font-size: 16px;
2403
    background-color: #e44d3a;
2404
    padding: 10px 25px;
2405
}
2406
 
2407
/* ============== add-billing-method ============== */
2408
 
2409
.add-billing-method {
2410
    float: left;
2411
    width: 100%;
2412
    background-color: #fff;
2413
    border-left: 1px solid #e4e4e4;
2414
    border-right: 1px solid #e4e4e4;
2415
    border-bottom: 1px solid #e4e4e4;
2416
}
2417
 
2418
.add-billing-method h3 {
2419
    color: #000000;
2420
    font-size: 18px;
2421
    font-weight: 600;
2422
    padding: 20px 20px;
2423
    border-bottom: 1px solid #e5e5e5;
2424
}
2425
 
2426
.add-billing-method>h4 {
2427
    color: #686868;
2428
    font-size: 13px;
2429
    font-weight: 500;
2430
    padding: 20px 20px;
2431
    border-bottom: 1px solid #e5e5e5;
2432
    float: left;
2433
    width: 100%;
2434
}
2435
 
2436
.add-billing-method img {
2437
    margin-right: 10px;
2438
}
2439
 
2440
.add-billing-method span {
2441
    margin-top: 4px;
2442
    float: left;
2443
}
2444
 
2445
/* ============= payment_methods ============ */
2446
 
2447
.payment_methods {
2448
    float: left;
2449
    width: 100%;
2450
}
2451
 
2452
.payment_methods>h4 {
2453
    color: #000000;
2454
    font-size: 16px;
2455
    font-weight: 600;
2456
    position: relative;
2457
    padding: 25px 20px 25px 45px;
2458
    float: left;
2459
    width: 100%;
2460
}
2461
 
2462
.rowwy {
2463
    float: left;
2464
    width: 100%;
2465
}
2466
 
2467
.pd-left-none {
2468
    padding-left: 0;
2469
}
2470
 
2471
.pd-right-none {
2472
    padding-right: 0;
2473
}
2474
 
2475
.payment_methods h4:before {
2476
    content: "";
2477
    position: absolute;
2478
    top: 50%;
2479
    -webkit-transform: translateY(-50%);
2480
    -moz-transform: translateY(-50%);
2481
    -ms-transform: translateY(-50%);
2482
    -o-transform: translateY(-50%);
2483
    transform: translateY(-50%);
2484
    left: 20px;
2485
    width: 15px;
2486
    height: 15px;
2487
    border: 1px solid #e6e6e6;
2488
    -webkit-border-radius: 100px;
2489
    -moz-border-radius: 100px;
2490
    -ms-border-radius: 100px;
2491
    -o-border-radius: 100px;
2492
    border-radius: 100px;
2493
}
2494
 
2495
.payment_methods h4:after {
2496
    content: "";
2497
    position: absolute;
2498
    top: 50%;
2499
    -webkit-transform: translateY(-50%);
2500
    -moz-transform: translateY(-50%);
2501
    -ms-transform: translateY(-50%);
2502
    -o-transform: translateY(-50%);
2503
    transform: translateY(-50%);
2504
    left: 24px;
2505
    width: 7px;
2506
    height: 7px;
2507
    background-color: #e44d3a;
2508
    -webkit-border-radius: 100px;
2509
    -moz-border-radius: 100px;
2510
    -ms-border-radius: 100px;
2511
    -o-border-radius: 100px;
2512
    border-radius: 100px;
2513
}
2514
 
2515
.payment_methods form {
2516
    float: left;
2517
    width: 100%;
2518
    padding-bottom: 30px;
2519
    border-bottom: 1px solid #e5e5e5;
2520
}
2521
 
2522
.payment_methods form button {
2523
    color: #ffffff;
2524
    font-size: 16px;
2525
    background-color: #e44d3a;
2526
    padding: 10px 15px;
2527
    border: 0;
2528
    cursor: pointer;
2529
}
2530
 
2531
.payment_methods form input {
2532
    width: 100%;
2533
    height: 40px;
2534
    border: 1px solid #e5e5e5;
2535
    padding: 0 12px;
2536
}
2537
 
2538
.cc-head {
2539
    float: left;
2540
    width: 100%;
2541
    margin-bottom: 10px;
2542
}
2543
 
2544
.cc-head h5 {
2545
    float: left;
2546
    color: #000000;
2547
    font-size: 16px;
2548
    font-weight: 600;
2549
    margin-top: 4px;
2550
}
2551
 
2552
.cc-head h5 i {
2553
    color: #b2b2b2;
2554
    font-size: 14px;
2555
}
2556
 
2557
.cc-head ul {
2558
    float: right;
2559
}
2560
 
2561
.cc-head ul li {
2562
    display: inline-block;
2563
}
2564
 
2565
.inpt-field {
2566
    float: left;
2567
    width: 100%;
2568
    position: relative;
2569
    margin-bottom: 20px;
2570
}
2571
 
2572
.no-pdd {
2573
    padding: 0;
2574
}
2575
 
2576
.inpt-field.pd-moree input {
2577
    padding-left: 40px !important;
2578
}
2579
 
2580
.inpt-field i {
2581
    color: #b2b2b2;
2582
    font-size: 18px;
2583
    position: absolute;
2584
    top: 50%;
2585
    left: 15px;
2586
    transform: translateY(-50%);
2587
}
2588
 
2589
/* ============== companies-info ============== */
2590
 
2591
.companies-info {
2592
    display: flex;
2593
    flex-direction: column;
2594
    gap: 1rem;
2595
}
2596
 
2597
.title {
2598
    font-size: 1.1rem;
2599
    font-weight: 600;
2600
}
2601
 
2602
.company-title {
2603
    display: flex;
2604
    justify-content: space-between;
2605
 
2606
    h3 {
2607
        color: $title-color;
2608
        font-size: 20px;
2609
        font-weight: 600;
2610
    }
2611
}
2612
 
2613
.default-link {
2614
    color: #0860bf;
2615
}
2616
 
2617
.default-link:hover {
2618
    font-weight: bold;
2619
    color: #0860bf;
2620
    transition: all 0.5s;
2621
}
2622
 
2623
.companies-list {
2624
    width: 100%;
2625
    display: grid;
2626
    gap: 0.5rem;
2627
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
2628
    position: relative;
2629
}
2630
 
2631
.company_profile_info {
2632
    /* float: left; */
2633
    width: 100%;
2634
    background-color: #fff;
2635
    text-align: center;
2636
    border-left: 1px solid #e4e4e4;
2637
    border-right: 1px solid #e4e4e4;
2638
    border-bottom: 1px solid #e4e4e4;
2639
    margin-bottom: 30px;
2640
}
2641
 
2642
// INMAIL
2643
 
2644
.messages-line {
2645
    display: flex;
2646
    flex-direction: column-reverse;
2647
    flex: 1;
2648
    overflow: auto;
2649
}
2650
 
2651
// END INMAIL
2652
 
2653
.marketplace_card {
2654
    background: $bg-color;
2655
    border-radius: $border-radius;
2656
    display: flex;
2657
    flex-direction: column;
2658
    max-width: 250px;
2659
    overflow: hidden;
2660
    transition: all 200ms;
2661
    margin: auto;
2662
 
2663
    img {
2664
        object-fit: cover;
2665
        aspect-ratio: 4/2.5;
2666
    }
2667
 
2668
    &:hover {
2669
        transform: translateY(-1rem);
2670
        box-shadow: $light-shadow;
2671
    }
2672
 
2673
    .microlearning-up-info {
2674
        display: flex;
2675
        flex-direction: column;
2676
        gap: .5rem;
2677
        padding: 1rem .5rem;
2678
 
2679
        h3 {
2680
            color: $title-color;
2681
            font-size: 1.1rem;
2682
            font-weight: 600;
2683
        }
2684
 
2685
        h4 {
2686
            color: $subtitle-color;
2687
            font-size: .9rem;
2688
            font-weight: 500;
2689
        }
2690
 
2691
        ul {
2692
            display: flex;
2693
            gap: 1rem;
2694
 
2695
            a {
2696
                display: inline-block;
2697
                padding: 0 12px;
2698
                color: $font-color;
2699
                height: 35px;
2700
                line-height: 35px;
2701
 
2702
                i {
2703
                    font-size: 24px;
2704
                    position: relative;
2705
                    top: 3px;
2706
                }
2707
            }
2708
        }
2709
    }
2710
}
2711
 
2712
.company-up-info {
2713
    /* float: left; */
2714
    width: 100%;
2715
    padding: 20px 0;
2716
    border-bottom: 1px solid #e5e5e5;
2717
}
2718
 
2719
.company-up-info .description {
2720
    margin-bottom: 10px;
2721
}
2722
 
2723
.company-up-info img {
2724
    float: none;
2725
    margin-bottom: 10px;
2726
    -webkit-border-radius: 100px;
2727
    -moz-border-radius: 100px;
2728
    -ms-border-radius: 100px;
2729
    -o-border-radius: 100px;
2730
    border-radius: 100px;
2731
    height: 90px;
2732
    object-fit: cover;
2733
}
2734
 
2735
.company-up-info h3 {
2736
    color: #000000;
2737
    font-size: 18px;
2738
    font-weight: 600;
2739
    margin-bottom: 10px;
2740
}
2741
 
2742
.company-up-info h4 {
2743
    color: #686868;
2744
    font-size: 14px;
2745
    font-weight: 500;
2746
    margin-bottom: 21px;
2747
}
2748
 
2749
.company-up-info h6 {
2750
    color: #686868;
2751
    font-size: 15px;
2752
    font-weight: 500;
2753
    margin-bottom: 10px;
2754
}
2755
 
2756
.company-up-info ul {
2757
    /* float: left; */
2758
    width: 100%;
2759
}
2760
 
2761
.company-up-info ul li {
2762
    display: inline-block;
2763
    margin-right: 6px;
2764
}
2765
 
2766
.company-up-info ul li a i {
2767
    font-size: 24px;
2768
    position: relative;
2769
    top: 3px;
2770
}
2771
 
2772
.follow {
2773
    background-color: #53d690;
2774
}
2775
 
2776
.message-us {
2777
    background-color: #e44d3a;
2778
}
2779
 
2780
.hire-us {
2781
    background-color: #51a5fb;
2782
}
2783
 
2784
.company_profile_info .cancelButton {
2785
    display: inline-block;
2786
    color: #000000;
2787
    font-size: 16px;
2788
    font-weight: 500;
2789
    margin: 18px 0;
2790
}
2791
 
2792
/* ============= search-sec ============= */
2793
 
2794
.list-col {
2795
    display: flex;
2796
    gap: 20px;
2797
    flex-direction: column;
2798
}
2799
 
2800
.search-sec {
2801
    width: 100%;
2802
    margin-top: 15px;
2803
}
2804
 
2805
.search-box {
2806
    width: 100%;
2807
    position: relative;
5369 stevensc 2808
    background-color: $bg-color;
5363 stevensc 2809
 
2810
    input,
2811
    input:focus {
2812
        background: $bg-color;
2813
        color: $font-color;
2814
        width: 100%;
2815
        height: 40px;
2816
        padding: 0 15px;
2817
        background: var(--background-light-gray);
2818
        color: var(--gray);
2819
        font-size: 14px;
2820
        border: solid 1px $border-primary;
2821
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
2822
    }
2823
 
2824
    button {
2825
        position: absolute;
2826
        top: 0;
2827
        right: 0;
2828
        border: solid 1px $border-primary;
2829
        color: var(--gray);
2830
        font-size: 16px;
2831
        font-weight: 500;
2832
        height: 100%;
2833
        padding: 0 28px;
2834
        cursor: pointer;
2835
        border-radius: 0 4px 4px 0;
2836
    }
2837
}
2838
 
2839
 
2840
/* =============== filter-secs ============== */
2841
 
5390 stevensc 2842
.filter-form {
2843
    display: flex;
2844
    flex-direction: column;
2845
    gap: 1rem;
2846
}
2847
 
5363 stevensc 2848
.filter-secs {
2849
    width: 100%;
5390 stevensc 2850
    background-color: $bg-color;
2851
    border: 1px solid $border-primary;
2852
    border-radius: $border-radius;
2853
    box-shadow: $shadow;
5363 stevensc 2854
}
2855
 
2856
.filter-heading {
2857
    width: 100%;
5390 stevensc 2858
    padding: 1rem;
2859
    border-bottom: 1px solid $border-primary;
5363 stevensc 2860
 
5390 stevensc 2861
    h3 {
2862
        font-size: 18px;
2863
        font-weight: 600;
5391 stevensc 2864
        color: $subtitle-color;
5390 stevensc 2865
    }
5363 stevensc 2866
 
5390 stevensc 2867
    a {
2868
        font-size: 14px;
2869
        margin-top: 4px;
5391 stevensc 2870
        color: $title-color;
5390 stevensc 2871
    }
5363 stevensc 2872
}
2873
 
5390 stevensc 2874
 
5363 stevensc 2875
.filter-ttl {
2876
    width: 100%;
2877
    border-bottom: 1px solid #e5e5e5;
2878
    padding: 0 0 16px 0;
2879
    margin-bottom: 10px;
2880
 
5390 stevensc 2881
    h3 {
2882
        padding: 0;
2883
        font-size: 16px;
2884
        color: #000000;
2885
        font-weight: 400;
2886
    }
5363 stevensc 2887
 
5390 stevensc 2888
    a {
2889
        font-size: 14px;
2890
        color: #666666;
2891
    }
5363 stevensc 2892
 
5390 stevensc 2893
    .dropdown a {
2894
        color: #666666;
2895
    }
5363 stevensc 2896
}
2897
 
2898
 
2899
 
2900
.filter-dd {
2901
    float: left;
2902
    width: 100%;
2903
    margin-bottom: 15px;
2904
}
2905
 
2906
.filter-dd form {
2907
    float: left;
2908
    width: 100%;
2909
    position: relative;
2910
}
2911
 
2912
.filter-dd form input,
2913
.filter-dd form select {
2914
    width: 100%;
2915
    height: 30px;
2916
    background-color: #f2f2f2;
2917
    padding: 0 10px;
2918
    color: #b2b2b2;
2919
    font-size: 12px;
2920
    font-weight: 600;
2921
    border: 0;
2922
    border: 1px solid #e5e5e5;
2923
}
2924
 
2925
.job-tp i {
2926
    color: #666666;
2927
    position: absolute;
2928
    top: 9px;
2929
    right: 15px;
2930
    font-size: 14px;
2931
}
2932
 
2933
.avail-checks {
2934
    width: 100%;
5390 stevensc 2935
    padding: 1rem;
5363 stevensc 2936
 
5390 stevensc 2937
    input[type="radio"] {
2938
        display: none;
2939
    }
5363 stevensc 2940
 
5390 stevensc 2941
    input[type="radio"]+label span {
2942
        display: inline-block;
2943
        width: 15px;
2944
        height: 15px;
2945
        position: relative;
2946
        margin-top: 3px;
2947
        border: 1px solid #d2d2d2;
2948
        border-radius: 100px;
2949
    }
5363 stevensc 2950
 
5390 stevensc 2951
    input[type="radio"]+label span:before {
2952
        content: "";
2953
        opacity: 0;
2954
        visibility: hidden;
2955
        position: absolute;
2956
        width: 7px;
2957
        height: 7px;
2958
        border-radius: 100px;
2959
        background-color: #e44d3a;
2960
        top: 3px;
2961
        left: 3px;
2962
    }
5363 stevensc 2963
 
5390 stevensc 2964
    input[type="radio"]:checked+label span:before {
2965
        opacity: 1;
2966
        visibility: visible;
2967
    }
5363 stevensc 2968
 
5390 stevensc 2969
    small {
2970
        color: #909090;
2971
        font-size: 14px;
2972
        padding-left: 10px;
2973
        font-weight: 500;
2974
    }
5363 stevensc 2975
 
5390 stevensc 2976
    ul {
2977
        display: flex;
2978
        flex-direction: column;
2979
        gap: .5rem;
2980
    }
5363 stevensc 2981
}
2982
 
2983
 
2984
 
2985
/* =========== Range Slider ========== */
2986
 
2987
.rg-slider {
2988
    float: left;
2989
    width: 100%;
2990
}
2991
 
2992
.slider-container {
2993
    width: 100% !important;
2994
    padding-top: 50px;
2995
    position: relative;
2996
}
2997
 
2998
.theme-green .back-bar {
2999
    height: 5px;
3000
    border: 1px solid #e5e5e5;
3001
    -webkit-border-radius: 30px;
3002
    -moz-border-radius: 30px;
3003
    -ms-border-radius: 30px;
3004
    -o-border-radius: 30px;
3005
    border-radius: 30px;
3006
}
3007
 
3008
.theme-green .back-bar .pointer {
3009
    width: 17px;
3010
    height: 17px;
3011
    -webkit-border-radius: 100px;
3012
    -moz-border-radius: 100px;
3013
    -ms-border-radius: 100px;
3014
    -o-border-radius: 100px;
3015
    border-radius: 100px;
3016
    background-color: #e44d3a;
3017
    border: 2px solid #e3e3e3;
3018
    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3019
    -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3020
    -ms-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3021
    -o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3022
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3023
}
3024
 
3025
.theme-green .back-bar .pointer {
3026
    top: -7px;
3027
}
3028
 
3029
.slider-container .back-bar .pointer-label {
3030
    top: -50px;
3031
    height: 26px;
3032
    background-color: #e5e5e5;
3033
    -webkit-border-radius: 30px;
3034
    -moz-border-radius: 30px;
3035
    -ms-border-radius: 30px;
3036
    -o-border-radius: 30px;
3037
    border-radius: 30px;
3038
    line-height: 26px;
3039
    width: 50px;
3040
}
3041
 
3042
.pointer-label.low {
3043
    left: 0 !important;
3044
}
3045
 
3046
.pointer-label.high {
3047
    left: 70px !important;
3048
}
3049
 
3050
.pointer-label.low:before {
3051
    content: "";
3052
    position: absolute;
3053
    top: 13px;
3054
    right: -14px;
3055
    width: 8px;
3056
    height: 1px;
3057
    background-color: #e5e5e5;
3058
}
3059
 
3060
.rg-limit {
3061
    float: left;
3062
    width: 100%;
3063
    margin-top: 16px;
3064
}
3065
 
3066
.rg-limit h4 {
3067
    color: #686868;
3068
    font-size: 15px;
3069
    font-weight: 600;
3070
    float: left;
3071
}
3072
 
3073
.rg-limit h4:last-child {
3074
    float: right;
3075
}
3076
 
3077
/* ============== chatbox-list ============== */
3078
 
3079
.ext_share {
3080
    display: flex;
3081
    position: absolute;
3082
    align-items: center;
3083
    padding: 5px 1rem;
3084
    bottom: calc(100% + 0.5rem);
3085
    gap: 0.5rem;
3086
    left: 50%;
3087
    width: 16.5rem;
3088
    flex-wrap: wrap;
3089
    overflow-x: scroll;
3090
    transform: translateX(-90%);
3091
    border-radius: 20px;
3092
    background-color: #fff;
3093
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
3094
 
3095
    &.post {
3096
        transform: none;
3097
        bottom: 100%;
3098
        right: 1.5rem;
3099
        z-index: 200;
3100
    }
3101
 
3102
    @media (min-width: 768px) {
3103
        transform: translateX(-43%);
3104
    }
3105
}
3106
 
3107
.highlighted {
3108
    backdrop-filter: blur(35px);
3109
    animation: droping 1s ease infinite;
3110
}
3111
 
3112
@keyframes droping {
3113
    0% {
3114
        box-shadow: 0 0 5px #96bde9;
3115
    }
3116
 
3117
    50% {
3118
        box-shadow: 0 0 12px #96bde9;
3119
    }
3120
 
3121
    100% {
3122
        box-shadow: 0 0 5px #96bde9;
3123
    }
3124
}
3125
 
3126
.chat-mg {
3127
    display: inline-block;
3128
    position: relative;
3129
}
3130
 
3131
.chat-mg img {
3132
    width: 70px;
3133
    height: 70px;
3134
    -webkit-border-radius: 100px;
3135
    -moz-border-radius: 100px;
3136
    -ms-border-radius: 100px;
3137
    -o-border-radius: 100px;
3138
    border-radius: 100px;
3139
}
3140
 
3141
.chat-mg span {
3142
    position: absolute;
3143
    top: -5px;
3144
    right: 10px;
3145
    width: 20px;
3146
    height: 20px;
3147
    background-color: #e44d3a;
3148
    text-align: center;
3149
    font-size: 12px;
3150
    color: #fff;
3151
    line-height: 20px;
3152
    -webkit-border-radius: 100px;
3153
    -moz-border-radius: 100px;
3154
    -ms-border-radius: 100px;
3155
    -o-border-radius: 100px;
3156
    border-radius: 100px;
3157
}
3158
 
3159
.chat-mg.bx img {
3160
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3161
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3162
    -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3163
    -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3164
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3165
}
3166
 
3167
.conversation-box {
3168
    position: absolute;
3169
    bottom: 132%;
3170
    right: 100%;
3171
    width: 350px;
3172
    background-color: #fff;
3173
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3174
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3175
    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3176
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3177
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3178
    opacity: 0;
3179
    visibility: hidden;
3180
    z-index: 0;
3181
}
3182
 
3183
.conversation-box.active {
3184
    opacity: 1;
3185
    visibility: visible;
3186
    z-index: 9999;
3187
}
3188
 
3189
.conversation-box:before {
3190
    content: "";
3191
    position: absolute;
3192
    bottom: -7px;
3193
    right: 26px;
3194
    border-top: 15px solid #fff;
3195
    border-right: 15px solid transparent;
3196
    -webkit-transform: rotate(225deg);
3197
    -moz-transform: rotate(225deg);
3198
    -ms-transform: rotate(225deg);
3199
    -o-transform: rotate(225deg);
3200
    transform: rotate(225deg);
3201
}
3202
 
3203
.con-title {
3204
    float: left;
3205
    width: 100%;
3206
    background-color: #e44d3a;
3207
    padding: 15px 25px;
3208
    -webkit-border-radius: 10px 10px 0 0;
3209
    -moz-border-radius: 10px 10px 0 0;
3210
    -ms-border-radius: 10px 10px 0 0;
3211
    -o-border-radius: 10px 10px 0 0;
3212
    border-radius: 10px 10px 0 0;
3213
}
3214
 
3215
.con-title h3 {
3216
    float: left;
3217
    color: #ffffff;
3218
    font-size: 16px;
3219
    font-weight: 600;
3220
}
3221
 
3222
.con-title>a {
3223
    float: right;
3224
    color: #fff;
3225
    font-size: 20px;
3226
}
3227
 
3228
.chat-list {
3229
    float: left;
3230
    width: 100%;
3231
    min-height: 390px;
3232
}
3233
 
3234
.conv-list {
3235
    float: left;
3236
    width: 100%;
3237
    display: table;
3238
    padding: 20px 25px;
3239
    position: relative;
3240
}
3241
 
3242
.conv-list:hover,
3243
.conv-list.active {
3244
    background-color: #efefef;
3245
}
3246
 
3247
.msg-numbers {
3248
    position: absolute;
3249
    bottom: 18px;
3250
    right: 25px;
3251
    width: 25px;
3252
    height: 25px;
3253
    background-color: #e77667;
3254
    text-align: center;
3255
    line-height: 25px;
3256
    color: #fff;
3257
    font-size: 13px;
3258
    -webkit-border-radius: 100px;
3259
    -moz-border-radius: 100px;
3260
    -ms-border-radius: 100px;
3261
    -o-border-radius: 100px;
3262
    border-radius: 100px;
3263
}
3264
 
3265
.usrr-pic {
3266
    display: table-cell;
3267
    position: relative;
3268
}
3269
 
3270
.active-status {
3271
    width: 9px;
3272
    height: 9px;
3273
    border: 2px solid #ecf5fb;
3274
    -webkit-border-radius: 100px;
3275
    -moz-border-radius: 100px;
3276
    -ms-border-radius: 100px;
3277
    -o-border-radius: 100px;
3278
    border-radius: 100px;
3279
    position: absolute;
3280
    top: -3px;
3281
    right: 0;
3282
}
3283
 
3284
.activee {
3285
    background-color: #e44d3a;
3286
}
3287
 
3288
.usy-info {
3289
    display: table-cell;
3290
    vertical-align: top;
3291
    width: 100%;
3292
    padding-left: 15px;
3293
}
3294
 
3295
.usy-info h3 {
3296
    color: #000000;
3297
    font-size: 18px;
3298
    font-weight: 600;
3299
    margin-bottom: 5px;
3300
}
3301
 
3302
.usy-info span {
3303
    color: #686868;
3304
    font-size: 16px;
3305
    float: left;
3306
}
3307
 
3308
.usy-info span img {
3309
    padding-left: 5px;
3310
    float: right;
3311
}
3312
 
3313
.ct-time {
3314
    position: absolute;
3315
    top: 20px;
3316
    right: 25px;
3317
}
3318
 
3319
.ct-time span {
3320
    color: #b2b2b2;
3321
    font-size: 14px;
3322
}
3323
 
3324
.st-icons {
3325
    float: right;
3326
    margin-top: 7px;
3327
}
3328
 
3329
.st-icons a {
3330
    color: #fff;
3331
    font-size: 20px;
3332
    margin-right: 5px;
3333
}
3334
 
3335
.chat-hist {
3336
    float: left;
3337
    width: 100%;
3338
    background-color: #fff;
3339
    height: 280px;
3340
}
3341
 
3342
.chat-msg {
3343
    float: left;
3344
    width: 100%;
3345
    padding-right: 25px;
3346
    margin-bottom: 15px;
3347
}
3348
 
3349
.chat-msg p {
3350
    color: #ffffff;
3351
    font-size: 14px;
3352
    background-color: #e44d3a;
3353
    line-height: 18px;
3354
    -webkit-border-radius: 15px;
3355
    -moz-border-radius: 15px;
3356
    -ms-border-radius: 15px;
3357
    -o-border-radius: 15px;
3358
    border-radius: 15px;
3359
    padding: 10px 15px;
3360
    width: 80%;
3361
    float: right;
3362
    margin-bottom: 10px;
3363
}
3364
 
3365
.mg-3 {
3366
    margin-bottom: 3px;
3367
}
3368
 
3369
.chat-msg span {
3370
    float: right;
3371
    color: #b1b1b1;
3372
    width: 100%;
3373
    font-size: 9px;
3374
    text-align: right;
3375
}
3376
 
3377
.status-info {
3378
    width: 8px;
3379
    height: 8px;
3380
    background-color: #fff;
3381
    -webkit-border-radius: 100px;
3382
    -moz-border-radius: 100px;
3383
    -ms-border-radius: 100px;
3384
    -o-border-radius: 100px;
3385
    border-radius: 100px;
3386
    display: inline-block;
3387
    margin-left: 7px;
3388
}
3389
 
3390
.chat-user-info h3 {
3391
    margin-top: 7px;
3392
    margin-left: 10px;
3393
}
3394
 
3395
.date-nd {
3396
    float: left;
3397
    width: 100%;
3398
    text-align: center;
3399
    margin-bottom: 20px;
3400
    position: relative;
3401
}
3402
 
3403
.date-nd:before,
3404
.date-nd:after {
3405
    content: "";
3406
    position: absolute;
3407
    top: 10px;
3408
    left: 15px;
3409
    width: 92px;
3410
    height: 1px;
3411
    background-color: #e5e5e5;
3412
}
3413
 
3414
.date-nd:after {
3415
    left: auto;
3416
    right: 15px;
3417
}
3418
 
3419
.date-nd span {
3420
    color: #b1b1b1;
3421
    font-size: 12px;
3422
    text-align: center;
3423
}
3424
 
3425
.chat-msg.st2 p {
3426
    background-color: #efefef;
3427
    color: #686868;
3428
    float: left;
3429
    width: 55%;
3430
}
3431
 
3432
.chat-msg.st2 {
3433
    padding-left: 25px;
3434
}
3435
 
3436
.chat-msg.st2 span {
3437
    float: left;
3438
    text-align: left;
3439
}
3440
 
3441
/* =========== typing-msg =========== */
3442
 
3443
.typing-msg {
3444
    float: left;
3445
    width: 100%;
3446
    border-top: 1px solid #e6e6e6;
3447
    padding-top: 15px;
3448
}
3449
 
3450
.typing-msg form {
3451
    float: left;
3452
    width: 100%;
3453
    position: relative;
3454
}
3455
 
3456
.typing-msg form textarea {
3457
    width: 100%;
3458
    height: 30px;
3459
    background-color: #fff;
3460
    padding: 0 20px;
3461
    color: #b2b2b2;
3462
    font-size: 16px;
3463
    border: 0;
3464
    resize: none;
3465
}
3466
 
3467
.typing-msg form button {
3468
    color: #e44d3a;
3469
    font-size: 18px;
3470
    font-weight: 600;
3471
    position: absolute;
3472
    top: 2px;
3473
    right: 20px;
3474
    background: none;
3475
    border: 0;
3476
    cursor: pointer;
3477
}
3478
 
3479
.ft-options {
3480
    float: left;
3481
    width: 100%;
3482
    padding: 0 20px 8px 20px;
3483
}
3484
 
3485
.ft-options li {
3486
    display: inline-block;
3487
    margin-right: 15px;
3488
}
3489
 
3490
.ft-options li a {
3491
    color: #b2b2b2;
3492
    font-size: 24px;
3493
    display: inline-block;
3494
}
3495
 
3496
.mCSB_scrollTools {
3497
    right: -5px;
3498
}
3499
 
3500
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
3501
    background-color: #cccccc;
3502
    width: 5px;
3503
}
3504
 
3505
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
3506
    opacity: 0;
3507
}
3508
 
3509
/* ============ Menu Btn =============*/
3510
 
3511
.menu-btn {
3512
    float: right;
3513
    display: none;
3514
}
3515
 
3516
.menu-btn a {
3517
    font-size: 24px;
3518
    color: #fff;
3519
    display: inline-block;
3520
    padding-top: 16px;
3521
    padding-left: 20px;
3522
}
3523
 
3524
/* ============= account-tabs-setting ============ */
3525
 
3526
/* .profile-account-setting {} */
3527
 
3528
.account-tabs-setting {
3529
    width: 100%;
3530
}
3531
 
3532
.account-tabs-setting h1 {
3533
    font-size: 1rem;
3534
    font-weight: 700;
3535
    margin: 2rem auto;
3536
    text-align: center;
3537
    color: $title-color;
3538
}
3539
 
3540
.acc-leftbar {
3541
    width: 100%;
3542
    background-color: $bg-color;
3543
    border: 1px solid $border-primary;
3544
    border-radius: 10px;
3545
    overflow: hidden;
3546
}
3547
 
3548
.acc-leftbar .nav-tabs>a {
3549
    border-bottom: 1px solid $border-primary;
3550
    color: $subtitle-color;
3551
    font-size: 16px;
3552
    font-weight: 700;
3553
    margin: 0 auto;
3554
    padding: 1rem 0;
3555
    width: 90%;
3556
}
3557
 
3558
.nav-tabs {
3559
    border-bottom: 0;
3560
}
3561
 
3562
.acc-leftbar .nav-tabs>a:last-child {
3563
    border-bottom: 0;
3564
}
3565
 
3566
.acc-leftbar .nav-tabs>a i {
3567
    font-size: 1.5rem;
3568
    position: relative;
3569
    width: 50px;
3570
    height: 50px;
3571
    display: inline-flex;
3572
    align-items: center;
3573
    background-color: $bg-color-secondary;
3574
    border-radius: 100px;
3575
    justify-content: center;
3576
    margin-right: 5px;
3577
}
3578
 
3579
.nav-tabs .nav-item.show .nav-link,
3580
.nav-tabs .nav-link.active {
3581
    background-color: inherit;
3582
    color: #e44d3a;
3583
    border-color: inherit;
3584
}
3585
 
3586
/* ============= acc-setting ============ */
3587
 
3588
.settings-container {
3589
    font-weight: normal;
3590
}
3591
 
3592
.settings-container h2 {
3593
    font-size: 18px;
3594
    font-weight: 600;
3595
    margin: 0.5rem auto;
3596
    color: $subtitle-color;
3597
}
3598
 
3599
.acc-setting_content {
3600
    padding: 2rem 1rem;
3601
    width: 100%;
3602
    overflow: hidden;
3603
    border-radius: 10px;
3604
    background-color: $bg-color;
3605
    border: 1px solid $border-primary;
3606
    box-shadow: 1px 0 4px var(--background-gray);
3607
}
3608
 
3609
.acc-setting {
3610
    display: flex;
3611
    flex-direction: column;
3612
    gap: 1rem;
3613
    border-radius: $border-radius;
3614
    border: 1px solid $border-primary;
3615
    padding: 1rem;
3616
    background-color: #fff;
3617
 
3618
    form {
3619
        align-items: flex-start;
3620
        display: flex;
3621
        flex-direction: column;
3622
        gap: 0.5rem;
3623
    }
3624
 
3625
    &>h3 {
3626
        color: $subtitle-color;
3627
        font-weight: 600;
3628
        font-size: 18px;
3629
    }
3630
 
3631
    .notbat {
3632
        display: flex;
3633
        justify-content: space-between;
3634
        border-top: 1px solid $border-primary;
3635
        padding: 0.5rem 1rem;
3636
        width: 100%;
3637
 
3638
        &>span {
3639
            max-width: 70%;
3640
        }
3641
    }
3642
 
3643
    .inputs__container {
3644
        display: flex;
3645
        width: 100%;
3646
        gap: 1rem;
3647
        align-items: center;
3648
        flex-wrap: wrap;
3649
    }
3650
 
3651
    .cp-field {
3652
        width: 100%;
3653
        display: flex;
3654
        flex-direction: column;
3655
        gap: 0.5rem;
3656
        align-items: flex-start;
3657
    }
3658
 
3659
    @media (min-width: 768px) {
3660
        .cp-field {
3661
            flex: 1;
3662
        }
3663
    }
3664
}
3665
 
3666
.toggle-btn {
3667
    position: absolute;
3668
    top: 35px;
3669
    right: 20px;
3670
}
3671
 
3672
/* =============== Password Update ============ */
3673
 
3674
.cp-field {
3675
    h5 {
3676
        color: $title-color;
3677
        font-size: 16px;
3678
        font-weight: 600;
3679
    }
3680
 
3681
    input,
3682
    select,
3683
    .custom-input {
3684
        height: 40px;
3685
        padding: 0 40px;
3686
    }
3687
 
3688
    input,
3689
    textarea,
3690
    select,
3691
    .custom-input {
3692
        width: 100% !important;
3693
        background-color: $bg-color !important;
3694
        color: $font-color !important;
3695
        box-shadow: 0 0 2px $border-primary !important;
3696
        border-radius: 10px !important;
3697
        border: none !important;
3698
        margin-top: 4px;
3699
    }
3700
 
3701
    textarea {
3702
        padding: 20px;
3703
        height: 115px;
3704
    }
3705
}
3706
 
3707
.cpp-fiel {
3708
    width: 100%;
3709
    position: relative;
3710
}
3711
 
3712
.cpp-fiel i {
3713
    position: absolute;
3714
    top: 12px;
3715
    left: 15px;
3716
    color: #b2b2b2;
3717
    font-size: 16px;
3718
}
3719
 
3720
/* =============== notifications-list ============= */
3721
 
3722
.notfication-details {
3723
    float: left;
3724
    width: 100%;
3725
    padding: 20px;
3726
    border-bottom: 1px solid #e5e5e5;
3727
}
3728
 
3729
.notfication-details:last-child {
3730
    border-bottom: 0;
3731
}
3732
 
3733
.noty-user-img {
3734
    float: left;
3735
    width: 35px;
3736
}
3737
 
3738
.noty-user-img img {
3739
    width: 100%;
3740
}
3741
 
3742
.notification-info {
3743
    float: left;
3744
    width: auto;
3745
    padding-left: 10px;
3746
}
3747
 
3748
.notification-info h3 {
3749
    color: #686868;
3750
    font-size: 14px;
3751
    font-weight: 500;
3752
    border: 0;
3753
    padding: 0;
3754
    margin-bottom: 6px;
3755
}
3756
 
3757
.notification-info h3 a {
3758
    color: #000000;
3759
    font-size: 16px;
3760
    font-weight: 600;
3761
    display: inline-block;
3762
}
3763
 
3764
.notification-info>span {
3765
    display: inline-block;
3766
    color: #b2b2b2;
3767
    font-size: 12px;
3768
    font-weight: 600;
3769
}
3770
 
3771
/* ============== requests-list ============== */
3772
 
3773
.requests-list {
3774
    float: left;
3775
    width: 100%;
3776
    padding-bottom: 0;
3777
}
3778
 
3779
.request-details {
3780
    float: left;
3781
    width: 100%;
3782
    padding: 20px;
3783
    border-bottom: 1px solid #e5e5e5;
3784
}
3785
 
3786
.request-details:last-child {
3787
    border-bottom: 0;
3788
}
3789
 
3790
.request-info {
3791
    float: left;
3792
    padding-left: 10px;
3793
}
3794
 
3795
.request-info h3 {
3796
    color: #000000;
3797
    font-size: 14px;
3798
    font-weight: 600;
3799
    padding: 0;
3800
    border: 0;
3801
    margin-bottom: 3px;
3802
}
3803
 
3804
.request-info span {
3805
    color: #686868;
3806
    font-size: 12px;
3807
    display: inline-block;
3808
}
3809
 
3810
.accept-feat {
3811
    float: right;
3812
}
3813
 
3814
.accept-feat ul li {
3815
    display: inline-block;
3816
}
3817
 
3818
.accept-feat ul li button {
3819
    cursor: pointer;
3820
}
3821
 
3822
.accept-req {
3823
    color: #ffffff;
3824
    font-size: 16px;
3825
    background-color: #51a5fb;
3826
    height: 30px;
3827
    padding: 0 20px;
3828
    font-weight: 600;
3829
    border: 0;
3830
    border: 1px solid #51a5fb;
3831
}
3832
 
3833
.close-req {
3834
    height: 30px;
3835
    width: 30px;
3836
    text-align: center;
3837
    line-height: 30px;
3838
    border: 1px solid #e5e5e5;
3839
    background: inherit;
3840
    color: #b2b2b2;
3841
    margin-left: 7px;
3842
}
3843
 
3844
.close-req i {
3845
    font-weight: 600;
3846
}
3847
 
3848
/* ============= Profile Sattus =========== */
3849
 
3850
.profile-bx-details {
3851
    float: left;
3852
    width: 100%;
3853
    padding: 30px 7px 30px 7px;
3854
}
3855
 
3856
.profile-bx-details .row .col-lg-3 {
3857
    padding: 0 7px;
3858
}
3859
 
3860
.profile-bx-info {
3861
    float: left;
3862
    width: 100%;
3863
    background-color: #f2f2f2;
3864
    padding: 20px;
3865
    border: 1px solid #e5e5e5;
3866
}
3867
 
3868
.pro-bx {
3869
    float: left;
3870
    width: 100%;
3871
    border-bottom: 1px solid #e5e5e5;
3872
    padding-bottom: 10px;
3873
}
3874
 
3875
.bx-info {
3876
    float: left;
3877
    margin-top: 7px;
3878
    padding-left: 10px;
3879
}
3880
 
3881
.bx-info h3 {
3882
    color: #e44d3a;
3883
    font-size: 20px;
3884
    font-weight: 600;
3885
    margin-bottom: 5px;
3886
}
3887
 
3888
.bx-info h5 {
3889
    color: #000000;
3890
    font-size: 14px;
3891
    font-weight: 600;
3892
    margin: 0;
3893
    padding: 0;
3894
    border: 0;
3895
}
3896
 
3897
.pd-left-20 {
3898
    padding-left: 20px;
3899
    padding-right: 0;
3900
}
3901
 
3902
.pd-left-15 {
3903
    padding-left: 15px;
3904
    padding-right: 0;
3905
}
3906
 
3907
.pd-left-right {
3908
    padding-left: 15px;
3909
    padding-right: 20px;
3910
}
3911
 
3912
.profile-bx-info>p {
3913
    float: left;
3914
    width: 100%;
3915
    font-size: 14px;
3916
    line-height: 20px;
3917
    padding-top: 5px;
3918
}
3919
 
3920
/* =========== pro-work-status ========= */
3921
 
3922
.pro-work-status {
3923
    float: left;
3924
    width: 100%;
3925
    padding: 0 15px;
3926
}
3927
 
3928
.pro-work-status h4 {
3929
    color: #000000;
3930
    font-size: 18px;
3931
    font-weight: 600;
3932
    margin-bottom: 50px;
3933
}
3934
 
3935
/* ============== messages-page ============== */
3936
 
3937
.messages-page {
3938
    padding: 20px 0;
3939
}
3940
 
3941
.messages-sec {
3942
    width: 100%;
3943
    border-radius: 10px;
3944
    overflow: hidden;
3945
    background-color: transparent;
3946
}
3947
 
3948
.msgs-list {
3949
    width: 100%;
3950
}
3951
 
3952
.inmail_conversations-list {
3953
    border-right: 1px solid #3333;
3954
    padding-left: 0;
3955
    padding-right: 0;
3956
}
3957
 
3958
.active-tab {
3959
    border-bottom: solid 2px #e4e4e4;
3960
}
3961
 
3962
.msg-title {
3963
    color: #000000;
3964
    font-size: 18px;
3965
    font-weight: 600;
3966
}
3967
 
3968
.date-chat {
3969
    font-size: 0.6rem;
3970
    color: var(--gray);
3971
    padding-top: 5%;
3972
}
3973
 
3974
.messages-list {
3975
    overflow-y: scroll;
3976
 
3977
    li {
3978
        cursor: pointer;
3979
 
3980
        &.active {
3981
            background-color: #efefef;
3982
        }
3983
    }
3984
}
3985
 
3986
.text-chat-title {
3987
    color: var(--gray) !important;
3988
    font-size: 1rem;
3989
}
3990
 
3991
.usr-msg-details {
3992
    display: flex;
3993
    align-items: center;
3994
    gap: 0.5rem;
3995
    padding: 0.5rem 1rem;
3996
    border-radius: $border-radius;
3997
 
3998
    &:hover,
3999
    &.is_selected {
4000
        background: $light-gray;
4001
    }
4002
 
4003
    .usr-ms-img {
4004
        width: 40px;
4005
        height: 40px;
4006
        border-radius: 50%;
4007
        overflow: hidden;
4008
 
4009
        img {
4010
            object-fit: cover;
4011
        }
4012
    }
4013
 
4014
    .usr-mg-info {
4015
        h3 {
4016
            color: $subtitle-color;
4017
            font-size: 18px;
4018
            font-weight: 600;
4019
        }
4020
 
4021
        p {
4022
            color: $font-color;
4023
            font-size: 16px;
4024
        }
4025
    }
4026
}
4027
 
4028
.msg-status {
4029
    border-radius: 100px;
4030
    background-color: #e44d3a;
4031
    position: absolute;
4032
    top: -3px;
4033
    right: 0;
4034
    width: 6px;
4035
    height: 6px;
4036
}
4037
 
4038
.messages-list ul li.active .msg-status {
4039
    border: 2px solid #ecf5fb;
4040
    height: 10px;
4041
    width: 10px;
4042
}
4043
 
4044
.msg-notifc {
4045
    position: absolute;
4046
    /* bottom: 0;
4047
    right: 0; */
4048
    width: 25px;
4049
    height: 25px;
4050
    -webkit-border-radius: 100px;
4051
    -moz-border-radius: 100px;
4052
    -ms-border-radius: 100px;
4053
    -o-border-radius: 100px;
4054
    border-radius: 100px;
4055
    background-color: #e77667;
4056
    text-align: center;
4057
    line-height: 25px;
4058
    font-size: 13px;
4059
    color: #fff;
4060
}
4061
 
4062
.posted_time {
4063
    position: absolute;
4064
    top: 2px;
4065
    right: 0;
4066
    color: #b2b2b2;
4067
    font-size: 14px;
4068
}
4069
 
4070
/* =============== main-message-box ============= */
4071
 
4072
.main-conversation-box {
4073
    width: 100%;
4074
    background-color: $bg-color;
4075
    position: relative;
4076
    height: 80vh;
4077
    display: grid;
4078
    grid-template-rows: auto 65% auto;
4079
}
4080
 
4081
.inmail-conversation-container {
4082
    width: 100%;
4083
    background-color: $bg-color;
4084
    position: relative;
4085
    height: 80vh;
4086
    gap: 0.5rem;
4087
    display: grid;
4088
    grid-template-rows: 5% 80% 15%;
4089
}
4090
 
4091
@media (min-width: 992px) {
4092
    .inmail-conversation-container {
4093
        grid-template-rows: 85% 15%;
4094
    }
4095
}
4096
 
4097
.inmail-conversation-box {
4098
    width: 100%;
4099
    position: relative;
4100
    display: grid;
4101
    grid-template-rows: auto 85%;
4102
    overflow: hidden;
4103
}
4104
 
4105
.message-bar-head {
4106
    height: 13vh;
4107
    width: 100%;
4108
    padding: 20px;
4109
    border-bottom: 1px solid $border-primary;
4110
}
4111
 
4112
.message-bar-head .usr-msg-details {
4113
    width: auto;
4114
}
4115
 
4116
.message-bar-head>a {
4117
    float: right;
4118
    color: #b2b2b2;
4119
    font-size: 20px;
4120
    padding-top: 15px;
4121
}
4122
 
4123
.main-message-box {
4124
    display: flex;
4125
    width: 100%;
4126
    position: relative;
4127
    margin-bottom: 15.5px;
4128
 
4129
    .message-inner-dt {
4130
        width: 100%;
4131
 
4132
        &>img {
4133
            display: inline-block;
4134
            width: auto;
4135
            max-height: 180px;
4136
        }
4137
 
4138
        &>p {
4139
            font-size: 14px;
4140
        }
4141
    }
4142
 
4143
    .message-dt {
4144
        border-radius: $border-radius;
4145
        border-top-left-radius: 0;
4146
        width: auto;
4147
        padding: 0.5rem;
4148
        margin-left: 15px;
4149
        background-color: $chat-send;
4150
        color: $chat-color;
4151
        box-shadow: $white-backdrop;
4152
    }
4153
 
4154
    .messg-usr-img {
4155
        margin-left: 20px;
4156
        width: 50px;
4157
    }
4158
 
4159
    .message-dt>span {
4160
        color: #b2b2b2;
4161
        font-size: 14px;
4162
        float: left;
4163
        width: 100%;
4164
        margin-top: 7px;
4165
    }
4166
 
4167
    &.ta-right {
4168
        flex-direction: row-reverse;
4169
    }
4170
 
4171
    &.ta-right .messg-usr-img {
4172
        margin-left: 0;
4173
        margin-right: 20px;
4174
    }
4175
 
4176
    &.ta-right .message-dt {
4177
        border-top-left-radius: $border-radius;
4178
        border-top-right-radius: 0;
4179
        margin-right: 15px;
4180
        background-color: $chat-received;
4181
    }
4182
 
4183
    &.ta-right .message-dt>span {
4184
        float: right;
4185
        width: auto;
4186
    }
4187
}
4188
 
4189
.messg-usr-img img {
4190
    width: 100%;
4191
    background: #fff;
4192
    border-radius: 100px;
4193
}
4194
 
4195
.img-bx {
4196
    background-color: #efefef;
4197
    padding: 20px;
4198
}
4199
 
4200
.message-dt.st3 .message-inner-dt {
4201
    &>p {
4202
        background-color: #efefef;
4203
        color: #686868;
4204
        width: auto;
4205
        padding: 10px 15px;
4206
        float: left;
4207
    }
4208
 
4209
    &>img {
4210
        float: right;
4211
        position: relative;
4212
        top: 3px;
4213
        padding-left: 5px;
4214
    }
4215
}
4216
 
4217
.main-message-box.st3 .messg-usr-img {
4218
    bottom: 13px;
4219
}
4220
 
4221
/* ============== Calendar ============ */
4222
 
4223
.calendar-event {
4224
    display: flex;
4225
    flex-direction: column;
4226
    border-radius: $border-radius;
4227
    padding: 0.5rem;
4228
}
4229
 
4230
/* ============== message-send-area ============ */
4231
 
4232
.inmail-submit-btn {
4233
    width: 6%;
4234
}
4235
 
4236
.chat-header a {
4237
    text-decoration: none;
4238
    color: var(--dark);
4239
}
4240
 
4241
.chat-header h2 {
4242
    font-weight: 700;
4243
    text-align: center;
4244
}
4245
 
4246
.chat_contacts {
4247
    background-color: $bg-color;
4248
    border-radius: $border-radius;
4249
    border: 1px solid $border-primary;
4250
    display: flex;
4251
    flex-direction: column;
4252
    height: 100%;
4253
    gap: 0.5rem;
4254
    padding: 1rem 0.5rem;
4255
    max-height: 80vh;
4256
}
4257
 
4258
.contact__search,
4259
.group__search {
4260
    display: flex;
4261
    align-items: center;
4262
    border-radius: 30px;
4263
    height: 1.5rem;
4264
    color: gray;
4265
    cursor: pointer;
4266
    transition: all 0.2s;
4267
 
4268
    &:hover {
4269
        color: #000;
4270
    }
4271
 
4272
    &>input {
4273
        display: none;
4274
        border: none;
4275
        outline: none;
4276
        background: none;
4277
    }
4278
 
4279
    &.show {
4280
        padding: 0.5rem;
4281
        background-color: #eef3f0;
4282
        width: -webkit-fill-available;
4283
 
4284
        &>input {
4285
            display: initial;
4286
        }
4287
    }
4288
}
4289
 
4290
.group__search {
4291
    flex: initial;
4292
    margin: 0 1rem;
4293
 
4294
    input {
4295
        display: initial;
4296
    }
4297
}
4298
 
4299
/* ============== forum-links ============= */
4300
 
4301
.forum-sec {
4302
    background-color: #fff;
4303
}
4304
 
4305
.forum-links {
4306
    float: left;
4307
    width: 100%;
4308
}
4309
 
4310
.forum-links.active {
4311
    opacity: 1;
4312
    visibility: visible;
4313
    z-index: 9999;
4314
}
4315
 
4316
.forum-links ul li {
4317
    display: inline-block;
4318
    padding: 20px 0;
4319
    margin-right: 45px;
4320
    border-bottom: 2px solid transparent;
4321
}
4322
 
4323
.forum-links ul li.active {
4324
    border-color: #e44d3a;
4325
}
4326
 
4327
.forum-links ul li.active a {
4328
    color: #e44d3a;
4329
}
4330
 
4331
.forum-links ul li a {
4332
    display: inline-block;
4333
    color: #b2b2b2;
4334
    font-size: 14px;
4335
    font-weight: 600;
4336
}
4337
 
4338
.forum-links-btn {
4339
    float: left;
4340
    width: 100%;
4341
    text-align: center;
4342
    display: none;
4343
    padding: 20px 0;
4344
}
4345
 
4346
.forum-links-btn a {
4347
    color: #000;
4348
    font-size: 30px;
4349
    display: inline-block;
4350
}
4351
 
4352
/* ================ forum-page =============== */
4353
 
4354
.forum-page {
4355
    padding: 50px 0;
4356
}
4357
 
4358
.forum-questions-sec {
4359
    float: left;
4360
    width: 100%;
4361
}
4362
 
4363
.forum-questions {
4364
    float: left;
4365
    width: 100%;
4366
    background-color: #fff;
4367
}
4368
 
4369
.usr-question {
4370
    float: left;
4371
    width: 100%;
4372
    position: relative;
4373
    padding: 25px;
4374
    border-bottom: 1px solid #e5e5e5;
4375
}
4376
 
4377
.usr_img {
4378
    float: left;
4379
    width: 60px;
4380
}
4381
 
4382
.usr_img img {
4383
    width: 100%;
4384
    -webkit-border-radius: 100px;
4385
    -moz-border-radius: 100px;
4386
    -ms-border-radius: 100px;
4387
    -o-border-radius: 100px;
4388
    border-radius: 100px;
4389
}
4390
 
4391
/* ============= quest-tags ============ */
4392
 
4393
.quest-tags {
4394
    float: left;
4395
    width: 100%;
4396
    margin-top: 20px;
4397
}
4398
 
4399
.quest-tags li {
4400
    display: inline-block;
4401
    margin-right: 10px;
4402
}
4403
 
4404
.quest-tags li a {
4405
    display: inline-block;
4406
    color: #ffffff;
4407
    background-color: #53d690;
4408
    -webkit-border-radius: 3px;
4409
    -moz-border-radius: 3px;
4410
    -ms-border-radius: 3px;
4411
    -o-border-radius: 3px;
4412
    border-radius: 3px;
4413
    padding: 7px 25px;
4414
}
4415
 
4416
.quest-posted-time {
4417
    position: absolute;
4418
    bottom: 30px;
4419
    right: 20px;
4420
    color: #b2b2b2;
4421
    font-size: 14px;
4422
}
4423
 
4424
.quest-posted-time i {
4425
    padding-right: 5px;
4426
}
4427
 
4428
.pd-right-none {
4429
    padding-right: 0;
4430
}
4431
 
4432
/* =========== navigation ============ */
4433
 
4434
.pagination {
4435
    float: left;
4436
    width: 100%;
4437
    /* background-color: #fff; */
4438
    padding: 13px 25px;
4439
}
4440
 
4441
.full-pagi {
4442
    float: left;
4443
    width: 100%;
4444
    padding-right: 0;
4445
    text-align: inherit;
4446
    margin-top: 20px;
4447
}
4448
 
4449
.pagination li {
4450
    padding: 0;
4451
    margin-right: 10px;
4452
}
4453
 
4454
.pagination li .page-link {
4455
    /* background-color: #e5e5e5; */
4456
    color: #b2b2b2;
4457
}
4458
 
4459
.pagination li .page-link.active {
4460
    background-color: #e44d3a;
4461
    color: #fff;
4462
    border-color: transparent;
4463
}
4464
 
4465
.pvr {
4466
    padding: 0.5rem 30px;
4467
}
4468
 
4469
/* ======== next-prev ========*/
4470
 
4471
.next-prev {
4472
    float: left;
4473
    width: 100%;
4474
    background-color: #fff;
4475
    margin-top: 20px;
4476
    padding: 12px 25px;
4477
}
4478
 
4479
.next-prev>a {
4480
    width: 90px;
4481
    height: 35px;
4482
    text-align: center;
4483
    line-height: 35px;
4484
    color: #b2b2b2;
4485
    font-size: 14px;
4486
    background-color: #e5e5e5;
4487
}
4488
 
4489
.next-prev>a:hover {
4490
    color: #fff;
4491
    background-color: #e44d3a;
4492
}
4493
 
4494
.fl-left {
4495
    float: left;
4496
}
4497
 
4498
.fl-right {
4499
    float: right;
4500
}
4501
 
4502
/* ========== widget-feat ========= */
4503
 
4504
.widget-feat {
4505
    padding: 25px 20px;
4506
}
4507
 
4508
.widget-feat ul {
4509
    float: left;
4510
    width: 100%;
4511
}
4512
 
4513
.widget-feat ul li {
4514
    float: left;
4515
    width: 25%;
4516
    text-align: center;
4517
}
4518
 
4519
.widget-feat ul li i {
4520
    display: block;
4521
    font-size: 18px;
4522
    margin-bottom: 9px;
4523
}
4524
 
4525
.widget-feat ul li span {
4526
    display: block;
4527
    color: #686868;
4528
    font-size: 16px;
4529
    font-weight: 500;
4530
}
4531
 
4532
.widget-feat ul li i.fa-heart {
4533
    color: #53d690;
4534
}
4535
 
4536
.widget-feat ul li i.fa-comment {
4537
    color: #e44d3a;
4538
}
4539
 
4540
.widget-feat ul li i.fa-share-alt {
4541
    color: #51a5fb;
4542
}
4543
 
4544
.widget-feat ul li i.fa-eye {
4545
    color: #00b540;
4546
}
4547
 
4548
/* =============== ANIMATION LOADER =============== */
4549
 
4550
.spinner {
4551
    margin: 0 auto 0;
4552
    width: 80px;
4553
    text-align: center;
4554
    height: 80px;
4555
    border-radius: 100px;
4556
    background-color: #fff;
4557
    line-height: 80px;
4558
    border: 1px solid #e1e1e1;
4559
    cursor: pointer;
4560
 
4561
    &>div {
4562
        width: 15px;
4563
        height: 15px;
4564
        background-color: #b9b9b9;
4565
        border-radius: 100%;
4566
        display: inline-block;
4567
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
4568
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
4569
    }
4570
 
4571
    .bounce1 {
4572
        -webkit-animation-delay: -0.32s;
4573
        animation-delay: -0.32s;
4574
    }
4575
 
4576
    .bounce2 {
4577
        -webkit-animation-delay: -0.16s;
4578
        animation-delay: -0.16s;
4579
    }
4580
 
4581
    @keyframes sk-bouncedelay {
4582
 
4583
        0%,
4584
        80%,
4585
        100% {
4586
            -webkit-transform: scale(0);
4587
            transform: scale(0);
4588
        }
4589
 
4590
        40% {
4591
            -webkit-transform: scale(1);
4592
            transform: scale(1);
4593
        }
4594
    }
4595
}
4596
 
4597
 
4598
.wordpressdevlp {
4599
    background-color: #fff;
4600
}
4601
 
4602
.bgclr {
4603
    background-color: #fff;
4604
    margin-bottom: 15px;
4605
}
4606
 
4607
.cadidatesbtn {
4608
    position: absolute;
4609
    left: 0;
4610
    padding-top: 5px;
4611
}
4612
 
4613
.cadidatesbtn button {
4614
    background-color: #e44d3a;
4615
    border: none;
4616
    margin-top: -3px;
4617
}
4618
 
4619
.cadidatesbtn button:hover {
4620
    background-color: #e44d3a;
4621
}
4622
 
4623
.cadidatesbtn span {
4624
    background-color: #bd2e1c;
4625
    color: #fff;
4626
    margin-right: 10px;
4627
    padding: 0.25em 0.5em;
4628
    font-weight: 600;
4629
    font-size: 12px;
4630
}
4631
 
4632
.wordpressdevlp i {
4633
    color: #e86554;
4634
    font-size: 18px;
4635
    font-weight: bold;
4636
    padding-right: 5px;
4637
}
4638
 
4639
.wordpressdevlp h2 {
4640
    font-size: 18px;
4641
    font-weight: 600;
4642
}
4643
 
4644
.cadidatesbtn i {
4645
    color: #b2b2b2;
4646
    border: 1px solid #b2b2b2;
4647
    font-size: 14px;
4648
    text-align: center;
4649
    margin-left: 7px;
4650
    border-radius: 3px;
4651
    padding: 10px;
4652
}
4653
 
4654
.cadidatesbtn i:hover {
4655
    background-color: #e44d3a;
4656
    color: #fff;
4657
    border: 1px solid #e44d3a;
4658
}
4659
 
4660
.inner {
4661
    border-bottom: 2px solid #e5e5e5;
4662
    padding-bottom: 10px;
4663
}
4664
 
4665
.inner li a:hover {
4666
    color: #e44d3a;
4667
    border-bottom: 2px solid #e44d3a;
4668
    padding-bottom: 9px;
4669
}
4670
 
4671
.inner li a {
4672
    color: #000000;
4673
}
4674
 
4675
.posttext {
4676
    position: absolute;
4677
    left: 0;
4678
}
4679
 
4680
.deatile h3 {
4681
    font-size: 14px;
4682
    font-weight: bold;
4683
    padding-bottom: 5px;
4684
}
4685
 
4686
.clrbtn a {
4687
    background-color: #e44d3a;
4688
    color: #fff;
4689
    padding: 5px 10px 5px 10px;
4690
    margin-right: 15px;
4691
}
4692
 
4693
.transpairentbtn a {
4694
    color: #222;
4695
    border: 2px solid #f1f1f1;
4696
    padding: 5px 10px 5px 10px;
4697
}
4698
 
4699
.savetext h3 {
4700
    font-size: 14px;
4701
    font-weight: bold;
4702
    padding-bottom: 5px;
4703
}
4704
 
4705
.devepbtn .clrbtn {
4706
    padding: 7px 20px;
4707
}
4708
 
4709
.devepbtn a {
4710
    color: #666666;
4711
    border: 1px solid #b2b2b2;
4712
    padding: 7px 10px 7px 10px;
4713
    border-radius: 3px;
4714
    margin-right: 5px;
4715
}
4716
 
4717
.devepbtn a:hover i {
4718
    color: #fff;
4719
}
4720
 
4721
.devepbtn a:hover {
4722
    background-color: #e44d3a;
4723
    color: #fff;
4724
}
4725
 
4726
.rew-reply hr {
4727
    margin-left: -20px;
4728
    margin-right: -20px;
4729
}
4730
 
4731
.rew-reply p {
4732
    padding-left: 20px;
4733
}
4734
 
4735
.rew-reply ul {
4736
    padding-left: 20px;
4737
}
4738
 
4739
.devepbtn {
4740
    margin-top: 30px;
4741
    padding-left: 20px;
4742
}
4743
 
4744
.rep-thanks hr {
4745
    margin-right: -20px;
4746
    margin-left: -20px;
4747
}
4748
 
4749
.profilecnd {
4750
    margin-bottom: 0px;
4751
}
4752
 
4753
.devepbtn i {
4754
    color: #b2b2b2;
4755
    font-size: 14px;
4756
}
4757
 
4758
.appliedinfo {
4759
    padding-left: 0;
4760
    padding-top: 20px !important;
4761
    padding-bottom: 10px;
4762
}
4763
 
4764
.epi2 {
4765
    padding: 0;
4766
}
4767
 
4768
.review a {
4769
    line-height: 16px;
4770
    font-size: 14px;
4771
    text-decoration: none;
4772
    font-weight: 500;
4773
    margin-left: 15px;
4774
}
4775
 
4776
.add-pic-box {
4777
    display: inline-block;
4778
    color: #e44d3a;
4779
    font-size: 16px;
4780
    position: absolute;
4781
    top: 30px;
4782
    right: 0;
4783
    font-weight: 600;
4784
    margin-right: 0;
4785
    width: 100%;
4786
}
4787
 
4788
.add-pic-box [type="file"] {
4789
    height: 0;
4790
    overflow: hidden;
4791
    width: 0;
4792
    float: left;
4793
}
4794
 
4795
.add-pic-box [type="file"]+label {
4796
    background: #fff;
4797
    border: 2px solid #e44d3a;
4798
    border-radius: 3px;
4799
    color: #e44d3a;
4800
    cursor: pointer;
4801
    /* display: inline-block; */
4802
    font-size: 15px;
4803
    font-weight: 600;
4804
    outline: none;
4805
    padding: 12px 20px;
4806
    position: relative;
4807
    transition: all 0.3s;
4808
    vertical-align: middle;
4809
    margin: 0;
4810
    float: right;
4811
    text-transform: uppercase;
4812
}
4813
 
4814
.add-pic-box [type="file"]+label:hover {
4815
    background: #e44d3a;
4816
    color: #fff;
4817
}
4818
 
4819
.noreview li i {
4820
    color: #b2b2b2;
4821
}
4822
 
4823
.review-tb {
4824
    margin: 0 0 10px;
4825
    padding-left: 20px;
4826
}
4827
 
4828
.noreview ul li i {
4829
    color: #b2b2b2;
4830
}
4831
 
4832
.mngdetl {
4833
    border-bottom: none;
4834
}
4835
 
4836
.post-reply {
4837
    padding-top: 0;
4838
    padding-bottom: 0;
4839
}
4840
 
4841
.activebidbtn i:hover {
4842
    background-color: #e44d3a;
4843
    color: #fff;
4844
    border: none;
4845
}
4846
 
4847
.reviewtitle h2 {
4848
    font-size: 17px;
4849
    font-weight: 600;
4850
}
4851
 
4852
.horiline {
4853
    width: 118%;
4854
    position: relative;
4855
    left: -40px;
4856
}
4857
 
4858
.tahnks {
4859
    font-weight: 500;
4860
    margin-top: 5px;
4861
}
4862
 
4863
/*about-page*/
4864
 
4865
.banner span {
4866
    position: absolute;
4867
    display: flex;
4868
    background-color: #222;
4869
    width: 100%;
4870
    opacity: 0.9;
4871
    justify-content: center;
4872
    padding: 10px;
4873
    margin-top: 0;
4874
    color: #fff;
4875
}
4876
 
4877
.innertitle {
4878
    margin-top: 130px;
4879
}
4880
 
4881
.Company-overview {
4882
    padding-bottom: 50px;
4883
}
4884
 
4885
.bennertext {
4886
    position: absolute;
4887
    left: 20%;
4888
    right: 20%;
4889
    text-align: center;
4890
}
4891
 
4892
.bannerimage img {
4893
    height: 100%;
4894
}
4895
 
4896
.innertitle h2 {
4897
    color: #fff;
4898
    font-size: 30px;
4899
    line-height: 32px;
4900
    font-weight: 600;
4901
    margin-bottom: 20px;
4902
}
4903
 
4904
.innertitle p {
4905
    color: #fff;
4906
    font-size: 16px;
4907
}
4908
 
4909
.Company-overview h2 {
4910
    padding-top: 100px;
4911
    font-size: 24px;
4912
    font-weight: 600;
4913
    padding-bottom: 12px;
4914
}
4915
 
4916
.Company-overview p {
4917
    font-size: 15px;
4918
    font-weight: 500;
4919
}
4920
 
4921
.Company-overview img {
4922
    float: right;
4923
    padding-top: 25px;
4924
}
4925
 
4926
.blog {
4927
    text-align: center;
4928
    display: inline-block;
4929
    margin-bottom: 50px;
4930
}
4931
 
4932
.blog img {
4933
    padding-bottom: 30px;
4934
}
4935
 
4936
.blog h2 {
4937
    font-size: 18px;
4938
    font-weight: 600;
4939
    padding-bottom: 30px;
4940
}
4941
 
4942
.blog a {
4943
    background-color: #ff4500;
4944
    color: #fff;
4945
    padding: 7px 25px 7px 25px;
4946
    border-radius: 3px;
4947
    font-size: 16px;
4948
    font-weight: 500;
4949
}
4950
 
4951
.services {
4952
    padding-top: 80px;
4953
    padding-bottom: 80px;
4954
}
4955
 
4956
.video {
4957
    padding-bottom: 40px;
4958
}
4959
 
4960
.search-container {
4961
    text-align: center;
4962
}
4963
 
4964
.search-container input[type="text"] {
4965
    padding: 6px 15px;
4966
    margin-top: 8px;
4967
    font-size: 17px;
4968
    border: none;
4969
    height: 50px;
4970
    width: 50%;
4971
    margin-bottom: 25px;
4972
    border-top-left-radius: 3px;
4973
    border-top-right-radius: 0px;
4974
    border-bottom-left-radius: 3px;
4975
    border-bottom-right-radius: 0px;
4976
}
4977
 
4978
.searchtitle {
4979
    text-align: center;
4980
}
4981
 
4982
.searchtitle h2 {
4983
    color: #fff;
4984
    font-size: 30px;
4985
    font-weight: 400;
4986
    padding-bottom: 10px;
4987
}
4988
 
4989
.search-container button {
4990
    padding: 8px 10px;
4991
    text-align: center;
4992
    margin-top: 8px;
4993
    margin-left: -3px;
4994
    margin-right: 18px;
4995
    background: #efefef;
4996
    font-size: 17px;
4997
    border: none;
4998
    cursor: pointer;
4999
    height: 50px;
5000
    width: 6%;
5001
    border-bottom-right-radius: 3px;
5002
    border-top-right-radius: 3px;
5003
}
5004
 
5005
.topsearch i {
5006
    color: #e44d3a;
5007
}
5008
 
5009
.dropdown-toggle::after {
5010
    position: absolute;
5011
    right: 15px;
5012
    color: #b2b2b2;
5013
    top: 7px;
5014
}
5015
 
5016
.help-paddy {
5017
    padding: 0 !important;
5018
}
5019
 
5020
.paddy {
5021
    padding: 20px;
5022
    float: left;
5023
}
5024
 
5025
.dropdown-menu {
5026
    position: absolute;
5027
    top: 100%;
5028
    left: 0;
5029
    z-index: 1000;
5030
    display: none;
5031
    float: left;
5032
    min-width: 10rem;
5033
    padding: 0.5rem 0;
5034
    margin: 0.125rem 0 0;
5035
    font-size: 1rem;
5036
    color: #212529;
5037
    text-align: left;
5038
    list-style: none;
5039
    background-color: #fff;
5040
    width: 100%;
5041
    background-clip: padding-box;
5042
    border: none;
5043
    border-radius: 0.25rem;
5044
}
5045
 
5046
.radio-form p {
5047
    display: -webkit-inline-box;
5048
}
5049
 
5050
.dropdown a {
5051
    color: #000000;
5052
    font-size: 16px;
5053
    font-weight: 400;
5054
    padding: 0 20px;
5055
}
5056
 
5057
.accountnone {
5058
    border: none;
5059
}
5060
 
5061
.helpforum {
5062
    background-color: #fff;
5063
    padding: 15px 0;
5064
    box-shadow: 0px 2px #c6c6c6;
5065
}
5066
 
5067
.helpforum h3 {
5068
    font-size: 18px;
5069
    font-weight: 600;
5070
}
5071
 
5072
.helpforum a {
5073
    background-color: #e44d3a;
5074
    color: #fff;
5075
    padding: 10px 15px 10px 15px;
5076
    line-height: 4;
5077
    border-radius: 3px;
5078
}
5079
 
5080
.helpforum p {
5081
    line-height: 3;
5082
}
5083
 
5084
.actionstitle h3 {
5085
    font-size: 18px;
5086
    font-weight: 400;
5087
    color: #000;
5088
    padding-top: 30px;
5089
}
5090
 
5091
.actionstitle img {
5092
    padding-right: 10px;
5093
}
5094
 
5095
.actionstext a {
5096
    font-size: 16px;
5097
    font-weight: 500;
5098
    color: #e44d3a;
5099
    line-height: 2;
5100
    display: block;
5101
}
5102
 
5103
.helpform {
5104
    text-align: center;
5105
    padding-top: 70px;
5106
}
5107
 
5108
.helpform h3 {
5109
    font-size: 18px;
5110
    font-weight: 400;
5111
    color: #e44d3a;
5112
    margin-bottom: 10px;
5113
}
5114
 
5115
.helpform a {
5116
    background-color: #e44d3a;
5117
    color: #fff;
5118
    padding: 10px 15px 10px 15px;
5119
    border-radius: 3px;
5120
}
5121
 
5122
.helpform p {
5123
    margin-bottom: 30px;
5124
}
5125
 
5126
.helpform img {
5127
    float: unset;
5128
    padding-bottom: 10px;
5129
}
5130
 
5131
.bookingsideber h3 {
5132
    color: #000;
5133
}
5134
 
5135
.bookingsideber h3:active {
5136
    color: #e44d3a;
5137
}
5138
 
5139
.helpforum h4 {
5140
    font-size: 16px;
5141
    font-weight: 600;
5142
}
5143
 
5144
.bloktext {
5145
    padding-left: 25px;
5146
}
5147
 
5148
.privacy {
5149
    background-color: #fff;
5150
    height: 850px;
5151
}
5152
 
5153
.privacydropd .dropdown-toggle::after {
5154
    float: right;
5155
    vertical-align: 0.255em;
5156
}
5157
 
5158
/* .checkbox {} */
5159
 
5160
.form-check {
5161
    padding-left: 0;
5162
}
5163
 
5164
.btns a {
5165
    color: #000;
5166
    border: 1px solid #e5e5e5;
5167
    padding: 10px 25px 10px 25px;
5168
    margin-left: 15px;
5169
    border-radius: 5px;
5170
    font-weight: 600;
5171
}
5172
 
5173
.btns {
5174
    padding-top: 20px;
5175
}
5176
 
5177
.btns a:hover {
5178
    background-color: #e44d3a;
5179
    color: #fff;
5180
}
5181
 
5182
.privacy h3 {
5183
    font-size: 18px;
5184
    font-weight: 600;
5185
    padding-top: 18px;
5186
    margin-bottom: 10px;
5187
}
5188
 
5189
.privacy p {
5190
    padding-top: 0px;
5191
    display: inline-block;
5192
}
5193
 
5194
.form-group {
5195
    margin-bottom: 1rem;
5196
    padding-top: 0px;
5197
}
5198
 
5199
.privacy i {
5200
    float: right;
5201
    color: #e44d3a;
5202
    font-size: 20px;
5203
    font-weight: 600;
5204
}
5205
 
5206
.dropdown-menu input {
5207
    margin-right: 10px;
5208
    margin-top: 15px;
5209
}
5210
 
5211
.dropdown-menu a {
5212
    padding: 10px 0 10px 40px;
5213
    margin-bottom: 10px;
5214
}
5215
 
5216
.dropdown-menu form {
5217
    margin-bottom: 10px;
5218
    margin-top: 10px;
5219
}
5220
 
5221
.privacydropd p {
5222
    margin-left: 20px;
5223
    margin-top: 5px;
5224
}
5225
 
5226
.privabtns {
5227
    margin-top: 20px;
5228
}
5229
 
5230
.privabtns {
5231
    padding-bottom: 15px;
5232
}
5233
 
5234
.privabtns a {
5235
    margin-right: 15px;
5236
    padding: 8px 25px;
5237
    color: #000000;
5238
    border: 1px solid #e5e5e5;
5239
}
5240
 
5241
.privabtns a:hover {
5242
    color: #fff;
5243
    background-color: #e44d3a;
5244
}
5245
 
5246
.privac {
5247
    background-color: #fff;
5248
    height: 560px;
5249
    padding-top: 20px;
5250
}
5251
 
5252
.privac h3 {
5253
    font-size: 18px;
5254
    font-weight: 600;
5255
}
5256
 
5257
.bids-detail ul {
5258
    display: -webkit-inline-box;
5259
}
5260
 
5261
.bids-detail ul li {
5262
    margin-right: 30px;
5263
}
5264
 
5265
.bids-detail h3 {
5266
    font-size: 16px;
5267
    font-weight: 400;
5268
}
5269
 
5270
.bids-detail {
5271
    background-color: #fff;
5272
    padding: 20px;
5273
    margin-bottom: 25px;
5274
    box-shadow: 0px 2px #e4e4e4;
5275
}
5276
 
5277
.dropdown-menu.show {
5278
    display: contents;
5279
}
5280
 
5281
.postpaid:checked:after {
5282
    content: "\f17b";
5283
    font: normal normal normal 16px/1 "LineAwesome";
5284
    font-weight: 600;
5285
    border: 1px solid #fff;
5286
    color: #ffffff;
5287
    text-align: center;
5288
    font-size: 12px;
5289
    width: 100%;
5290
    height: 100%;
5291
    background: #e44d3a;
5292
    display: block;
5293
    border-radius: 50%;
5294
    padding-top: 3px;
5295
}
5296
 
5297
.postpaid:focus {
5298
    border: 1px solid #fff;
5299
    width: 25px;
5300
    height: 25px;
5301
}
5302
 
5303
.postpaid {
5304
    -webkit-appearance: none;
5305
    content: "";
5306
    width: 20px;
5307
    height: 20px;
5308
    border-radius: 50%;
5309
    border: 1px solid #5e5e5e;
5310
    outline: 0;
5311
    margin-right: 5px;
5312
}
5313
 
5314
/* .main-ws-sec .job-status-bar {} */
5315
 
5316
.main-ws-sec .btm-line {
5317
    padding-bottom: 20px !important;
5318
    border-bottom: 1px solid #e5e5e5 !important;
5319
    margin-bottom: 20px;
5320
}
5321
 
5322
.job-status-bar hr {
5323
    margin: 0 -40px;
5324
}
5325
 
5326
.reply-area {
5327
    padding-left: 55px;
5328
}
5329
 
5330
.reply-rply1 {
5331
    margin: 24px 0;
5332
}
5333
 
5334
.reply-area p {
5335
    padding-bottom: 10px;
5336
}
5337
 
5338
.reply-area span {
5339
    cursor: pointer;
5340
}
5341
 
5342
.reply-area span:hover {
5343
    color: #e44d3a;
5344
}
5345
 
5346
.reply-area i {
5347
    font-size: 16px;
5348
    font-weight: 600;
5349
    padding-right: 8px;
5350
}
5351
 
5352
.comment-area .la-plus-circle {
5353
    display: block;
5354
    text-align: center;
5355
    font-size: 40px;
5356
    color: #b2b2b2;
5357
}
5358
 
5359
.reply-area span {
5360
    padding-top: 5px;
5361
    color: #b2b2b2;
5362
}
5363
 
5364
.comt span {
5365
    font-size: 16px;
5366
    color: #666666;
5367
}
5368
 
5369
.comt i {
5370
    padding-right: 8px;
5371
}
5372
 
5373
.postcomment .form-control {
5374
    width: 112%;
5375
    margin-left: -50px;
5376
    background-color: #efefef;
5377
    border-radius: 3px;
5378
}
5379
 
5380
.postcomment a {
5381
    background-color: #e44d3a;
5382
    color: #fff;
5383
    padding: 9px 25px 8px 25px;
5384
    line-height: 37px;
5385
    border-radius: 3px;
5386
}
5387
 
5388
.postcomment {
5389
    padding-top: 30px;
5390
}
5391
 
5392
.widget-projectid {
5393
    padding: 15px;
5394
}
5395
 
5396
.widget-projectid h3 {
5397
    padding-bottom: 7px;
5398
    font-size: 14px;
5399
    font-weight: 600;
5400
}
5401
 
5402
.paymethd p {
5403
    color: #e44d3a;
5404
}
5405
 
5406
.copylink p {
5407
    background-color: #efefef;
5408
    padding: 7px 0 8px 10px;
5409
}
5410
 
5411
.copylink a {
5412
    background-color: #e44d3a;
5413
    color: #fff;
5414
    padding: 10px 15px 10px 15px;
5415
    border-radius: 4px;
5416
}
5417
 
5418
.copylink span {
5419
    padding: 30px 0 20px;
5420
}
5421
 
5422
.copylink i {
5423
    float: unset;
5424
    position: unset;
5425
}
5426
 
5427
.copylink .la-facebook {
5428
    background-color: #3b5998;
5429
    color: #fff;
5430
}
5431
 
5432
.copylink .la-twitter {
5433
    color: #1da1f2;
5434
}
5435
 
5436
.copylink .la-pinterest-p {
5437
    background-color: #fff;
5438
    color: #c11628;
5439
    border-radius: 50%;
5440
}
5441
 
5442
.copylink img {
5443
    padding-right: 10px;
5444
}
5445
 
5446
.freelancerbiding {
5447
    background-color: #fff;
5448
    padding-top: 20px;
5449
}
5450
 
5451
.freelancerbiding h3 {
5452
    font-size: 18px;
5453
    font-weight: 400;
5454
}
5455
 
5456
.repcent {
5457
    text-align: left;
5458
}
5459
 
5460
.bidrit {
5461
    float: right;
5462
}
5463
 
5464
.repcent i {
5465
    padding-left: 5px;
5466
}
5467
 
5468
.star {
5469
    display: inline-flex;
5470
    padding: 5px 0;
5471
}
5472
 
5473
.star li i {
5474
    color: #bfd337;
5475
}
5476
 
5477
.repcent span {
5478
    color: #51a5fb;
5479
}
5480
 
5481
.repcent p {
5482
    padding-left: 7px;
5483
}
5484
 
5485
.noreview ul li i {
5486
    color: #b2b2b2;
5487
}
5488
 
5489
.paymethd .star li i {
5490
    position: unset;
5491
    font-size: 14px;
5492
}
5493
 
5494
.paymethd .star a {
5495
    color: #51a5fb;
5496
    padding-left: 12px;
5497
}
5498
 
5499
.notice {
5500
    background-color: #ddf3ff;
5501
    padding: 15px;
5502
}
5503
 
5504
.notice span {
5505
    font-weight: 500;
5506
    padding-right: 5px;
5507
}
5508
 
5509
.delivery .input-group select {
5510
    width: 150px;
5511
    height: 50px !important;
5512
    font-size: 19px;
5513
    border: 1px solid #e5e5e5;
5514
    border-radius: 3px;
5515
}
5516
 
5517
.place-bid-btn {
5518
    font-size: 15px;
5519
    font-weight: 500;
5520
    color: #fff !important;
5521
    background-color: #e44d3a !important;
5522
    border: none;
5523
    padding: 10px;
5524
    border: 1px solid #e44d3a;
5525
    border-radius: 3px;
5526
}
5527
 
5528
.usy-dt .reply {
5529
    margin: 3px 0 0 10px;
5530
    width: 360px;
5531
    height: 40px;
5532
    background-color: #efefef;
5533
    border: 1px solid #e5e5e5;
5534
    padding-left: 10px;
5535
    border-radius: 3px;
5536
}
5537
 
5538
.replybtn {
5539
    background-color: #e44d3a;
5540
    color: #fff;
5541
    padding: 10px;
5542
    margin-left: 15px;
5543
    border-radius: 3px;
5544
}
5545
 
5546
.replybtn:hover {
5547
    color: #fff;
5548
}
5549
 
5550
.rewivew ul li {
5551
    margin-right: 5px !important;
5552
}
5553
 
5554
.security hr {
5555
    margin-right: -15px;
5556
    margin-left: -15px;
5557
}
5558
 
5559
.privacy .la-check {
5560
    float: left;
5561
    font-size: 12px;
5562
    margin: 5px 5px 0 0;
5563
    padding: 3px;
5564
    background-color: #e44d3a;
5565
    color: #fff;
5566
    border-radius: 50%;
5567
}
5568
 
5569
ul#myTab {
5570
    border-bottom: 1px solid #e5e5e5;
5571
}
5572
 
5573
.nav-tabs .nav-link {
5574
    border: none;
5575
}
5576
 
5577
.noborder {
5578
    border-bottom: none;
5579
}
5580
 
5581
.manbids {
5582
    margin-bottom: 0 !important;
5583
}
5584
 
5585
.noreply {
5586
    padding-top: 30px;
5587
}
5588
 
5589
#my-bids .nav-tabs {
5590
    margin-bottom: 20px;
5591
    margin-top: 7px;
5592
    padding-bottom: 0;
5593
}
5594
 
5595
#my-bids ul {
5596
    margin-bottom: 15px;
5597
    margin-top: 7px;
5598
    padding-bottom: 0;
5599
}
5600
 
5601
.savedjob-info p {
5602
    color: #666666;
5603
    margin-top: 5px;
5604
}
5605
 
5606
#my-bids ul li a {
5607
    color: #000000;
5608
    font-size: 16px;
5609
    font-weight: 500;
5610
}
5611
 
5612
#my-bids li a:hover {
5613
    color: #e44d3a;
5614
}
5615
 
5616
#saved-jobs ul {
5617
    margin-bottom: 20px;
5618
}
5619
 
5620
#saved-jobs ul li a {
5621
    color: #000000;
5622
    font-size: 16px;
5623
    font-weight: 500;
5624
}
5625
 
5626
#saved-jobs li a:hover {
5627
    color: #e44d3a;
5628
}
5629
 
5630
.wordpressdevlp h2 {
5631
    font-size: 18px;
5632
    font-weight: 600;
5633
    margin-bottom: 15px;
5634
}
5635
 
5636
#saved-jobs .nav-tabs .nav-item.show .nav-link,
5637
#saved-jobs .nav-tabs .nav-link.active {
5638
    background-color: inherit;
5639
    color: #e44d3a !important;
5640
    padding-bottom: 9px;
5641
    border-bottom: 2px solid #e44d3a !important;
5642
}
5643
 
5644
#my-bids .nav-tabs .nav-item.show .nav-link,
5645
#my-bids .nav-tabs .nav-link.active {
5646
    background-color: inherit;
5647
    color: #e44d3a !important;
5648
    padding-bottom: 9px;
5649
    border-bottom: 2px solid #e44d3a !important;
5650
}
5651
 
5652
.descptab li img {
5653
    float: left !important;
5654
    filter: inherit !important;
5655
}
5656
 
5657
.bklink {
5658
    border-bottom: none !important;
5659
    width: unset !important;
5660
    float: right !important;
5661
}
5662
 
5663
.bklik {
5664
    border-bottom: none !important;
5665
}
5666
 
5667
/*////////////////////////////////////////My css//////////////////////////////// //////////////////////////////////////////////////////////////////////////////*/
5668
 
5669
.savedjob-info li {
5670
    display: inline-block;
5671
    padding-left: 25px;
5672
}
5673
 
5674
.savedjob-info h3 {
5675
    font-size: 14px;
5676
    font-weight: 500;
5677
}
5678
 
5679
.settingjb ul li {
5680
    margin-right: 25px !important;
5681
}
5682
 
5683
.mangebid li {
5684
    padding-left: 0;
5685
    padding-right: 20px;
5686
    padding-top: 10px;
5687
}
5688
 
5689
.bk-links.bklink li {
5690
    padding-right: 0;
5691
}
5692
 
5693
.bidsbtn {
5694
    position: relative;
5695
}
5696
 
5697
.biddersinfo li {
5698
    padding-left: 0;
5699
    padding-right: 20px;
5700
}
5701
 
5702
#review {
5703
    background-color: #fff;
5704
    margin-bottom: 40px;
5705
}
5706
 
5707
.starreview {
5708
    padding-left: 20px;
5709
}
5710
 
5711
.replytext {
5712
    padding-bottom: 20px;
5713
}
5714
 
5715
.starrevi {
5716
    padding-left: 20px;
5717
}
5718
 
5719
.apply-jobbox {
5720
    text-align: center;
5721
}
5722
 
5723
.apply-jobbox form input {
5724
    width: 100%;
5725
    margin-top: 20px;
5726
    padding: 10px;
5727
    color: #222;
5728
    border: 1px solid #e5e5e5;
5729
    border-radius: 3px;
5730
    font-size: 14px;
5731
}
5732
 
5733
.apply-jobbox h3 {
5734
    margin: 20px 0;
5735
}
5736
 
5737
.select-files {
5738
    border: 1px solid #e5e5e5;
5739
    margin-top: 20px;
5740
    padding: 30px;
5741
    background: #efefef;
5742
}
5743
 
5744
.select-files button {
5745
    margin-bottom: 20px;
5746
    background-color: transparent;
5747
    border: 1px solid #e5e5e5;
5748
    padding: 10px 15px 10px 15px;
5749
    border-radius: 5px;
5750
    font-weight: 600;
5751
}
5752
 
5753
.select-files button:hover {
5754
    background-color: #e44d3a;
5755
    color: #fff;
5756
}
5757
 
5758
.close {
5759
    position: absolute;
5760
    right: 0px;
5761
    top: 0px;
5762
    color: #929292;
5763
    border: 1px solid;
5764
    border-radius: 50%;
5765
    height: 30px;
5766
    width: 30px;
5767
}
5768
 
5769
.mapouter iframe {
5770
    width: 100%;
5771
    height: 400px;
5772
}
5773
 
5774
.mapouter {
5775
    position: relative;
5776
    text-align: right;
5777
    height: 500px;
5778
    width: 100%;
5779
}
5780
 
5781
.gmap_canvas {
5782
    overflow: hidden;
5783
    background: none !important;
5784
}
5785
 
5786
.video-iframe {
5787
    width: 100%;
5788
    height: 400px;
5789
}
5790
 
5791
.custom-file-input {
5792
    color: transparent;
5793
    opacity: 1;
5794
    /* margin-left: 140px; */
5795
    margin-bottom: 10px;
5796
}
5797
 
5798
.custom-file-input::-webkit-file-upload-button {
5799
    visibility: hidden;
5800
}
5801
 
5802
.custom-file-input::before {
5803
    content: "Select Files";
5804
    color: #fff;
5805
    display: inline-block;
5806
    border: 1px solid #e5e5e5;
5807
    border-radius: 3px;
5808
    background: #e44d3a;
5809
    font-weight: 500;
5810
    padding: 10px 15px;
5811
    outline: none;
5812
    white-space: nowrap;
5813
    -webkit-user-select: none;
5814
    cursor: pointer;
5815
}
5816
 
5817
.custom-file-input:hover::before {
5818
    background-color: #e44d3a;
5819
    color: #fff;
5820
}
5821
 
5822
.custom-file-input:active {
5823
    outline: 0;
5824
}
5825
 
5826
.custom-file-input:active::before {
5827
    background: #e44d3a;
5828
    color: #fff;
5829
}
5830
 
5831
.bids-time {
5832
    float: right;
5833
}
5834
 
5835
.saved-post {
5836
    padding: 0;
5837
}
5838
 
5839
.saved-post p {
5840
    padding-bottom: 20px;
5841
}
5842
 
5843
.saved-info li {
5844
    padding-right: 25px;
5845
    padding-left: 0;
5846
}
5847
 
5848
.saved-btn {
5849
    padding: 0;
5850
    margin-bottom: -12px;
5851
}
5852
 
5853
.applied-post {
5854
    padding: 0;
5855
}
5856
 
5857
.post-bid {
5858
    padding: 0 !important;
5859
}
5860
 
5861
.bidsbtn {
5862
    padding-top: 0 !important;
5863
}
5864
 
5865
.active-bids {
5866
    padding: 0;
5867
}
5868
 
5869
.activ-bidinfo li {
5870
    padding-top: 10px;
5871
    padding-left: 0;
5872
    padding-right: 25px;
5873
}
5874
 
5875
.activebtn {
5876
    padding-left: 0;
5877
}
5878
 
5879
.p-all {
5880
    padding: 0px;
5881
    float: left;
5882
    width: 100%;
5883
    position: relative;
5884
}
5885
 
5886
.toggle-btn .custom-switch .custom-control-label::before {
5887
    left: -2.25rem;
5888
    width: 70px;
5889
    pointer-events: all;
5890
    border-radius: 100px;
5891
    height: 30px;
5892
    top: -1px;
5893
    box-shadow: none;
5894
}
5895
 
5896
.toggle-btn .custom-control-label::before {
5897
    position: absolute;
5898
    top: 0.25rem;
5899
    left: -1.5rem;
5900
    display: block;
5901
    width: 1rem;
5902
    height: 1rem;
5903
    pointer-events: none;
5904
    content: "";
5905
    background-color: #fff;
5906
    border: #e1e1e1 solid 2px;
5907
}
5908
 
5909
.custom-control-input:checked~.custom-control-label::before {
5910
    color: #fff;
5911
    border-color: #e44d3a;
5912
    background-color: #e44d3a;
5913
    box-shadow: none;
5914
    outline: none;
5915
}
5916
 
5917
.toggle-btn .custom-switch .custom-control-label::after {
5918
    top: calc(-1px + 2px);
5919
    left: calc(-36px + 2px);
5920
    width: calc(30px - 4px);
5921
    height: calc(30px - 4px);
5922
    background-color: #e1e1e1;
5923
    border-radius: 100%;
5924
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
5925
        -webkit-transform 0.15s ease-in-out;
5926
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
5927
        box-shadow 0.15s ease-in-out;
5928
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
5929
        box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
5930
}
5931
 
5932
.toggle-btn .custom-control-label::after {
5933
    position: absolute;
5934
    top: 0.25rem;
5935
    left: -1.5rem;
5936
    display: block;
5937
    width: 0;
5938
    height: 0;
5939
    content: "";
5940
    background: no-repeat 50%/50% 50%;
5941
}
5942
 
5943
.toggle-btn .custom-control-label {
5944
    position: initial;
5945
    margin-bottom: 0;
5946
    vertical-align: top;
5947
}
5948
 
5949
.toggle-btn .custom-switch .custom-control-input:checked~.custom-control-label::after {
5950
    background-color: #fff;
5951
    -webkit-transform: translateX(2.5rem);
5952
    transform: translateX(2.5rem);
5953
}
5954
 
5955
.custom-control-label {
5956
    position: relative;
5957
    margin-bottom: 0;
5958
    vertical-align: top;
5959
    line-height: 24px;
5960
    font-size: 14px;
5961
    color: #666666;
5962
}
5963
 
5964
.small-text-children p,
5965
.small-text-children span {
5966
    font-size: 0.8rem;
5967
}
5968
 
5969
.search-item-selected {
5970
    padding: 1px 10px;
5971
    background: var(--background-gray);
5972
    line-height: 1;
5973
    border-radius: 10px;
5974
    font-weight: bold;
5975
}
5976
 
5977
.row .sc-dkzDqf {
5978
    margin: 0 auto;
5979
}
5980
 
5981
.test-section .title,
5982
.test-section .description {
5983
    margin-bottom: 10px;
5984
}
5985
 
5986
.test-section .btn-danger {
5987
    margin-right: 10px;
5988
}
5989
 
5990
.test-section .panel-body {
5991
    padding: 20px 0px;
5992
}
5993
 
5994
.test-section .panel {
5995
    margin-top: 20px;
5996
    padding-bottom: 10px;
5997
}
5998
 
5999
.test-section .np-padding {
6000
    padding: 0px;
6001
}
6002
 
6003
.test-section .checkbox {
6004
    display: flex;
6005
    margin: 20px 0px;
6006
}
6007
 
6008
.test-section .option {
6009
    margin-left: 10px;
6010
}
6011
 
6012
.checkbox input[type="checkbox"],
6013
input[type="radio"] {
6014
    margin-top: 5px !important;
6015
}
6016
 
6017
.test-section h6 {
6018
    margin-bottom: 10px;
6019
    color: #0860bf;
6020
}
6021
 
6022
.wizard {
6023
    display: flex;
6024
    margin-top: 10px;
6025
}
6026
 
6027
.wizard li {
6028
    width: 50%;
6029
    display: inline-block;
6030
}
6031
 
6032
.btn-secondary:disabled,
6033
.btn-primary:disabled {
6034
    cursor: no-drop;
6035
}
6036
 
6037
.test-section .btn-primary {
6038
    margin-left: 10px;
6039
}
6040
 
6041
.previous {
6042
    text-align: left;
6043
}
6044
 
6045
.next {
6046
    text-align: right;
6047
}
6048
 
6049
.test-section .close {
6050
    border: none !important;
6051
    border-radius: 0px !important;
6052
}
6053
 
6054
.ratin-range {
6055
    display: block;
6056
}
6057
 
6058
.ratin-range li {
6059
    display: inline-block;
6060
    width: 6%;
6061
}
6062
 
6063
.ratin-range li .option {
6064
    margin-top: 2px !important;
6065
}
6066
 
6067
#react-self-evaluation .company-up-info ul {
6068
    width: 100%;
6069
    position: absolute;
6070
    float: left;
6071
    left: 0px;
6072
    bottom: 4vw;
6073
}
6074
 
6075
#react-self-evaluation .company-up-info {
6076
    padding: 30px 10px;
6077
    min-height: 20vw;
6078
    border: 1px solid #e5e5e5;
6079
}
6080
 
6081
#react-self-evaluation .company-up-info h3 {
6082
    width: 90%;
6083
    margin: 5px auto;
6084
}
6085
 
6086
.mb10 {
6087
    margin-bottom: 3vw;
6088
}
6089
 
6090
.opt-h6 {
6091
    font-weight: 600 !important;
6092
    color: #000 !important;
6093
}
6094
 
6095
// Alert notification
6096
 
6097
.alert-danger {
6098
    background-color: $danger !important;
6099
 
6100
    &:hover {
6101
        background-color: $danger-hover !important;
6102
    }
6103
}