Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5462 | Rev 5667 | 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
.usr_quest {
4392
    float: left;
4393
    width: 90%;
4394
    padding-left: 15px;
4395
}
4396
 
4397
.usr_quest>h3 {
4398
    color: #000000;
4399
    font-size: 17px;
4400
    font-weight: 600;
4401
    margin-bottom: 20px;
4402
}
4403
 
4404
.forum-post-view .usr_quest>h3 {
4405
    margin-bottom: 10px;
4406
}
4407
 
4408
.react-links {
4409
    float: left;
4410
    width: 100%;
4411
}
4412
 
4413
.react-links li {
4414
    display: inline-block;
4415
    margin-right: 30px;
4416
}
4417
 
4418
.react-links li a {
4419
    display: inline-block;
4420
    color: #b2b2b2;
4421
    font-size: 14px;
4422
    font-weight: 600;
4423
}
4424
 
4425
.react-links li a:hover {
4426
    color: #e44d3a;
4427
}
4428
 
4429
.react-links li a i {
4430
    padding-right: 7px;
4431
}
4432
 
4433
.react-links li:last-child {
4434
    margin-right: 0;
4435
}
4436
 
4437
/* ============= quest-tags ============ */
4438
 
4439
.quest-tags {
4440
    float: left;
4441
    width: 100%;
4442
    margin-top: 20px;
4443
}
4444
 
4445
.quest-tags li {
4446
    display: inline-block;
4447
    margin-right: 10px;
4448
}
4449
 
4450
.quest-tags li a {
4451
    display: inline-block;
4452
    color: #ffffff;
4453
    background-color: #53d690;
4454
    -webkit-border-radius: 3px;
4455
    -moz-border-radius: 3px;
4456
    -ms-border-radius: 3px;
4457
    -o-border-radius: 3px;
4458
    border-radius: 3px;
4459
    padding: 7px 25px;
4460
}
4461
 
4462
.quest-posted-time {
4463
    position: absolute;
4464
    bottom: 30px;
4465
    right: 20px;
4466
    color: #b2b2b2;
4467
    font-size: 14px;
4468
}
4469
 
4470
.quest-posted-time i {
4471
    padding-right: 5px;
4472
}
4473
 
4474
.pd-right-none {
4475
    padding-right: 0;
4476
}
4477
 
4478
/* =========== navigation ============ */
4479
 
4480
.pagination {
4481
    float: left;
4482
    width: 100%;
4483
    /* background-color: #fff; */
4484
    padding: 13px 25px;
4485
}
4486
 
4487
.full-pagi {
4488
    float: left;
4489
    width: 100%;
4490
    padding-right: 0;
4491
    text-align: inherit;
4492
    margin-top: 20px;
4493
}
4494
 
4495
.pagination li {
4496
    padding: 0;
4497
    margin-right: 10px;
4498
}
4499
 
4500
.pagination li .page-link {
4501
    /* background-color: #e5e5e5; */
4502
    color: #b2b2b2;
4503
}
4504
 
4505
.pagination li .page-link.active {
4506
    background-color: #e44d3a;
4507
    color: #fff;
4508
    border-color: transparent;
4509
}
4510
 
4511
.pvr {
4512
    padding: 0.5rem 30px;
4513
}
4514
 
4515
/* ======== next-prev ========*/
4516
 
4517
.next-prev {
4518
    float: left;
4519
    width: 100%;
4520
    background-color: #fff;
4521
    margin-top: 20px;
4522
    padding: 12px 25px;
4523
}
4524
 
4525
.next-prev>a {
4526
    width: 90px;
4527
    height: 35px;
4528
    text-align: center;
4529
    line-height: 35px;
4530
    color: #b2b2b2;
4531
    font-size: 14px;
4532
    background-color: #e5e5e5;
4533
}
4534
 
4535
.next-prev>a:hover {
4536
    color: #fff;
4537
    background-color: #e44d3a;
4538
}
4539
 
4540
.fl-left {
4541
    float: left;
4542
}
4543
 
4544
.fl-right {
4545
    float: right;
4546
}
4547
 
4548
/* ========== widget-feat ========= */
4549
 
4550
.widget-feat {
4551
    padding: 25px 20px;
4552
}
4553
 
4554
.widget-feat ul {
4555
    float: left;
4556
    width: 100%;
4557
}
4558
 
4559
.widget-feat ul li {
4560
    float: left;
4561
    width: 25%;
4562
    text-align: center;
4563
}
4564
 
4565
.widget-feat ul li i {
4566
    display: block;
4567
    font-size: 18px;
4568
    margin-bottom: 9px;
4569
}
4570
 
4571
.widget-feat ul li span {
4572
    display: block;
4573
    color: #686868;
4574
    font-size: 16px;
4575
    font-weight: 500;
4576
}
4577
 
4578
.widget-feat ul li i.fa-heart {
4579
    color: #53d690;
4580
}
4581
 
4582
.widget-feat ul li i.fa-comment {
4583
    color: #e44d3a;
4584
}
4585
 
4586
.widget-feat ul li i.fa-share-alt {
4587
    color: #51a5fb;
4588
}
4589
 
4590
.widget-feat ul li i.fa-eye {
4591
    color: #00b540;
4592
}
4593
 
4594
/* =============== ANIMATION LOADER =============== */
4595
 
4596
.spinner {
4597
    margin: 0 auto 0;
4598
    width: 80px;
4599
    text-align: center;
4600
    height: 80px;
4601
    border-radius: 100px;
4602
    background-color: #fff;
4603
    line-height: 80px;
4604
    border: 1px solid #e1e1e1;
4605
    cursor: pointer;
4606
 
4607
    &>div {
4608
        width: 15px;
4609
        height: 15px;
4610
        background-color: #b9b9b9;
4611
        border-radius: 100%;
4612
        display: inline-block;
4613
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
4614
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
4615
    }
4616
 
4617
    .bounce1 {
4618
        -webkit-animation-delay: -0.32s;
4619
        animation-delay: -0.32s;
4620
    }
4621
 
4622
    .bounce2 {
4623
        -webkit-animation-delay: -0.16s;
4624
        animation-delay: -0.16s;
4625
    }
4626
 
4627
    @keyframes sk-bouncedelay {
4628
 
4629
        0%,
4630
        80%,
4631
        100% {
4632
            -webkit-transform: scale(0);
4633
            transform: scale(0);
4634
        }
4635
 
4636
        40% {
4637
            -webkit-transform: scale(1);
4638
            transform: scale(1);
4639
        }
4640
    }
4641
}
4642
 
4643
 
4644
.wordpressdevlp {
4645
    background-color: #fff;
4646
}
4647
 
4648
.bgclr {
4649
    background-color: #fff;
4650
    margin-bottom: 15px;
4651
}
4652
 
4653
.cadidatesbtn {
4654
    position: absolute;
4655
    left: 0;
4656
    padding-top: 5px;
4657
}
4658
 
4659
.cadidatesbtn button {
4660
    background-color: #e44d3a;
4661
    border: none;
4662
    margin-top: -3px;
4663
}
4664
 
4665
.cadidatesbtn button:hover {
4666
    background-color: #e44d3a;
4667
}
4668
 
4669
.cadidatesbtn span {
4670
    background-color: #bd2e1c;
4671
    color: #fff;
4672
    margin-right: 10px;
4673
    padding: 0.25em 0.5em;
4674
    font-weight: 600;
4675
    font-size: 12px;
4676
}
4677
 
4678
.wordpressdevlp i {
4679
    color: #e86554;
4680
    font-size: 18px;
4681
    font-weight: bold;
4682
    padding-right: 5px;
4683
}
4684
 
4685
.wordpressdevlp h2 {
4686
    font-size: 18px;
4687
    font-weight: 600;
4688
}
4689
 
4690
.cadidatesbtn i {
4691
    color: #b2b2b2;
4692
    border: 1px solid #b2b2b2;
4693
    font-size: 14px;
4694
    text-align: center;
4695
    margin-left: 7px;
4696
    border-radius: 3px;
4697
    padding: 10px;
4698
}
4699
 
4700
.cadidatesbtn i:hover {
4701
    background-color: #e44d3a;
4702
    color: #fff;
4703
    border: 1px solid #e44d3a;
4704
}
4705
 
4706
.inner {
4707
    border-bottom: 2px solid #e5e5e5;
4708
    padding-bottom: 10px;
4709
}
4710
 
4711
.inner li a:hover {
4712
    color: #e44d3a;
4713
    border-bottom: 2px solid #e44d3a;
4714
    padding-bottom: 9px;
4715
}
4716
 
4717
.inner li a {
4718
    color: #000000;
4719
}
4720
 
4721
.posttext {
4722
    position: absolute;
4723
    left: 0;
4724
}
4725
 
4726
.deatile h3 {
4727
    font-size: 14px;
4728
    font-weight: bold;
4729
    padding-bottom: 5px;
4730
}
4731
 
4732
.clrbtn a {
4733
    background-color: #e44d3a;
4734
    color: #fff;
4735
    padding: 5px 10px 5px 10px;
4736
    margin-right: 15px;
4737
}
4738
 
4739
.transpairentbtn a {
4740
    color: #222;
4741
    border: 2px solid #f1f1f1;
4742
    padding: 5px 10px 5px 10px;
4743
}
4744
 
4745
.savetext h3 {
4746
    font-size: 14px;
4747
    font-weight: bold;
4748
    padding-bottom: 5px;
4749
}
4750
 
4751
.devepbtn .clrbtn {
4752
    padding: 7px 20px;
4753
}
4754
 
4755
.devepbtn a {
4756
    color: #666666;
4757
    border: 1px solid #b2b2b2;
4758
    padding: 7px 10px 7px 10px;
4759
    border-radius: 3px;
4760
    margin-right: 5px;
4761
}
4762
 
4763
.devepbtn a:hover i {
4764
    color: #fff;
4765
}
4766
 
4767
.devepbtn a:hover {
4768
    background-color: #e44d3a;
4769
    color: #fff;
4770
}
4771
 
4772
.rew-reply hr {
4773
    margin-left: -20px;
4774
    margin-right: -20px;
4775
}
4776
 
4777
.rew-reply p {
4778
    padding-left: 20px;
4779
}
4780
 
4781
.rew-reply ul {
4782
    padding-left: 20px;
4783
}
4784
 
4785
.devepbtn {
4786
    margin-top: 30px;
4787
    padding-left: 20px;
4788
}
4789
 
4790
.rep-thanks hr {
4791
    margin-right: -20px;
4792
    margin-left: -20px;
4793
}
4794
 
4795
.profilecnd {
4796
    margin-bottom: 0px;
4797
}
4798
 
4799
.devepbtn i {
4800
    color: #b2b2b2;
4801
    font-size: 14px;
4802
}
4803
 
4804
.appliedinfo {
4805
    padding-left: 0;
4806
    padding-top: 20px !important;
4807
    padding-bottom: 10px;
4808
}
4809
 
4810
.epi2 {
4811
    padding: 0;
4812
}
4813
 
4814
.review a {
4815
    line-height: 16px;
4816
    font-size: 14px;
4817
    text-decoration: none;
4818
    font-weight: 500;
4819
    margin-left: 15px;
4820
}
4821
 
4822
.add-pic-box {
4823
    display: inline-block;
4824
    color: #e44d3a;
4825
    font-size: 16px;
4826
    position: absolute;
4827
    top: 30px;
4828
    right: 0;
4829
    font-weight: 600;
4830
    margin-right: 0;
4831
    width: 100%;
4832
}
4833
 
4834
.add-pic-box [type="file"] {
4835
    height: 0;
4836
    overflow: hidden;
4837
    width: 0;
4838
    float: left;
4839
}
4840
 
4841
.add-pic-box [type="file"]+label {
4842
    background: #fff;
4843
    border: 2px solid #e44d3a;
4844
    border-radius: 3px;
4845
    color: #e44d3a;
4846
    cursor: pointer;
4847
    /* display: inline-block; */
4848
    font-size: 15px;
4849
    font-weight: 600;
4850
    outline: none;
4851
    padding: 12px 20px;
4852
    position: relative;
4853
    transition: all 0.3s;
4854
    vertical-align: middle;
4855
    margin: 0;
4856
    float: right;
4857
    text-transform: uppercase;
4858
}
4859
 
4860
.add-pic-box [type="file"]+label:hover {
4861
    background: #e44d3a;
4862
    color: #fff;
4863
}
4864
 
4865
.noreview li i {
4866
    color: #b2b2b2;
4867
}
4868
 
4869
.review-tb {
4870
    margin: 0 0 10px;
4871
    padding-left: 20px;
4872
}
4873
 
4874
.noreview ul li i {
4875
    color: #b2b2b2;
4876
}
4877
 
4878
.mngdetl {
4879
    border-bottom: none;
4880
}
4881
 
4882
.post-reply {
4883
    padding-top: 0;
4884
    padding-bottom: 0;
4885
}
4886
 
4887
.activebidbtn i:hover {
4888
    background-color: #e44d3a;
4889
    color: #fff;
4890
    border: none;
4891
}
4892
 
4893
.reviewtitle h2 {
4894
    font-size: 17px;
4895
    font-weight: 600;
4896
}
4897
 
4898
.horiline {
4899
    width: 118%;
4900
    position: relative;
4901
    left: -40px;
4902
}
4903
 
4904
.tahnks {
4905
    font-weight: 500;
4906
    margin-top: 5px;
4907
}
4908
 
4909
/*about-page*/
4910
 
4911
.banner span {
4912
    position: absolute;
4913
    display: flex;
4914
    background-color: #222;
4915
    width: 100%;
4916
    opacity: 0.9;
4917
    justify-content: center;
4918
    padding: 10px;
4919
    margin-top: 0;
4920
    color: #fff;
4921
}
4922
 
4923
.innertitle {
4924
    margin-top: 130px;
4925
}
4926
 
4927
.Company-overview {
4928
    padding-bottom: 50px;
4929
}
4930
 
4931
.bennertext {
4932
    position: absolute;
4933
    left: 20%;
4934
    right: 20%;
4935
    text-align: center;
4936
}
4937
 
4938
.bannerimage img {
4939
    height: 100%;
4940
}
4941
 
4942
.innertitle h2 {
4943
    color: #fff;
4944
    font-size: 30px;
4945
    line-height: 32px;
4946
    font-weight: 600;
4947
    margin-bottom: 20px;
4948
}
4949
 
4950
.innertitle p {
4951
    color: #fff;
4952
    font-size: 16px;
4953
}
4954
 
4955
.Company-overview h2 {
4956
    padding-top: 100px;
4957
    font-size: 24px;
4958
    font-weight: 600;
4959
    padding-bottom: 12px;
4960
}
4961
 
4962
.Company-overview p {
4963
    font-size: 15px;
4964
    font-weight: 500;
4965
}
4966
 
4967
.Company-overview img {
4968
    float: right;
4969
    padding-top: 25px;
4970
}
4971
 
4972
.blog {
4973
    text-align: center;
4974
    display: inline-block;
4975
    margin-bottom: 50px;
4976
}
4977
 
4978
.blog img {
4979
    padding-bottom: 30px;
4980
}
4981
 
4982
.blog h2 {
4983
    font-size: 18px;
4984
    font-weight: 600;
4985
    padding-bottom: 30px;
4986
}
4987
 
4988
.blog a {
4989
    background-color: #ff4500;
4990
    color: #fff;
4991
    padding: 7px 25px 7px 25px;
4992
    border-radius: 3px;
4993
    font-size: 16px;
4994
    font-weight: 500;
4995
}
4996
 
4997
.services {
4998
    padding-top: 80px;
4999
    padding-bottom: 80px;
5000
}
5001
 
5002
.video {
5003
    padding-bottom: 40px;
5004
}
5005
 
5006
.search-container {
5007
    text-align: center;
5008
}
5009
 
5010
.search-container input[type="text"] {
5011
    padding: 6px 15px;
5012
    margin-top: 8px;
5013
    font-size: 17px;
5014
    border: none;
5015
    height: 50px;
5016
    width: 50%;
5017
    margin-bottom: 25px;
5018
    border-top-left-radius: 3px;
5019
    border-top-right-radius: 0px;
5020
    border-bottom-left-radius: 3px;
5021
    border-bottom-right-radius: 0px;
5022
}
5023
 
5024
.searchtitle {
5025
    text-align: center;
5026
}
5027
 
5028
.searchtitle h2 {
5029
    color: #fff;
5030
    font-size: 30px;
5031
    font-weight: 400;
5032
    padding-bottom: 10px;
5033
}
5034
 
5035
.search-container button {
5036
    padding: 8px 10px;
5037
    text-align: center;
5038
    margin-top: 8px;
5039
    margin-left: -3px;
5040
    margin-right: 18px;
5041
    background: #efefef;
5042
    font-size: 17px;
5043
    border: none;
5044
    cursor: pointer;
5045
    height: 50px;
5046
    width: 6%;
5047
    border-bottom-right-radius: 3px;
5048
    border-top-right-radius: 3px;
5049
}
5050
 
5051
.topsearch i {
5052
    color: #e44d3a;
5053
}
5054
 
5055
.dropdown-toggle::after {
5056
    position: absolute;
5057
    right: 15px;
5058
    color: #b2b2b2;
5059
    top: 7px;
5060
}
5061
 
5062
.help-paddy {
5063
    padding: 0 !important;
5064
}
5065
 
5066
.paddy {
5067
    padding: 20px;
5068
    float: left;
5069
}
5070
 
5071
.dropdown-menu {
5072
    position: absolute;
5073
    top: 100%;
5074
    left: 0;
5075
    z-index: 1000;
5076
    display: none;
5077
    float: left;
5078
    min-width: 10rem;
5079
    padding: 0.5rem 0;
5080
    margin: 0.125rem 0 0;
5081
    font-size: 1rem;
5082
    color: #212529;
5083
    text-align: left;
5084
    list-style: none;
5085
    background-color: #fff;
5086
    width: 100%;
5087
    background-clip: padding-box;
5088
    border: none;
5089
    border-radius: 0.25rem;
5090
}
5091
 
5092
.radio-form p {
5093
    display: -webkit-inline-box;
5094
}
5095
 
5096
.dropdown a {
5097
    color: #000000;
5098
    font-size: 16px;
5099
    font-weight: 400;
5100
    padding: 0 20px;
5101
}
5102
 
5103
.accountnone {
5104
    border: none;
5105
}
5106
 
5107
.helpforum {
5108
    background-color: #fff;
5109
    padding: 15px 0;
5110
    box-shadow: 0px 2px #c6c6c6;
5111
}
5112
 
5113
.helpforum h3 {
5114
    font-size: 18px;
5115
    font-weight: 600;
5116
}
5117
 
5118
.helpforum a {
5119
    background-color: #e44d3a;
5120
    color: #fff;
5121
    padding: 10px 15px 10px 15px;
5122
    line-height: 4;
5123
    border-radius: 3px;
5124
}
5125
 
5126
.helpforum p {
5127
    line-height: 3;
5128
}
5129
 
5130
.actionstitle h3 {
5131
    font-size: 18px;
5132
    font-weight: 400;
5133
    color: #000;
5134
    padding-top: 30px;
5135
}
5136
 
5137
.actionstitle img {
5138
    padding-right: 10px;
5139
}
5140
 
5141
.actionstext a {
5142
    font-size: 16px;
5143
    font-weight: 500;
5144
    color: #e44d3a;
5145
    line-height: 2;
5146
    display: block;
5147
}
5148
 
5149
.helpform {
5150
    text-align: center;
5151
    padding-top: 70px;
5152
}
5153
 
5154
.helpform h3 {
5155
    font-size: 18px;
5156
    font-weight: 400;
5157
    color: #e44d3a;
5158
    margin-bottom: 10px;
5159
}
5160
 
5161
.helpform a {
5162
    background-color: #e44d3a;
5163
    color: #fff;
5164
    padding: 10px 15px 10px 15px;
5165
    border-radius: 3px;
5166
}
5167
 
5168
.helpform p {
5169
    margin-bottom: 30px;
5170
}
5171
 
5172
.helpform img {
5173
    float: unset;
5174
    padding-bottom: 10px;
5175
}
5176
 
5177
.bookingsideber h3 {
5178
    color: #000;
5179
}
5180
 
5181
.bookingsideber h3:active {
5182
    color: #e44d3a;
5183
}
5184
 
5185
.helpforum h4 {
5186
    font-size: 16px;
5187
    font-weight: 600;
5188
}
5189
 
5190
.bloktext {
5191
    padding-left: 25px;
5192
}
5193
 
5194
.privacy {
5195
    background-color: #fff;
5196
    height: 850px;
5197
}
5198
 
5199
.privacydropd .dropdown-toggle::after {
5200
    float: right;
5201
    vertical-align: 0.255em;
5202
}
5203
 
5204
/* .checkbox {} */
5205
 
5206
.form-check {
5207
    padding-left: 0;
5208
}
5209
 
5210
.btns a {
5211
    color: #000;
5212
    border: 1px solid #e5e5e5;
5213
    padding: 10px 25px 10px 25px;
5214
    margin-left: 15px;
5215
    border-radius: 5px;
5216
    font-weight: 600;
5217
}
5218
 
5219
.btns {
5220
    padding-top: 20px;
5221
}
5222
 
5223
.btns a:hover {
5224
    background-color: #e44d3a;
5225
    color: #fff;
5226
}
5227
 
5228
.privacy h3 {
5229
    font-size: 18px;
5230
    font-weight: 600;
5231
    padding-top: 18px;
5232
    margin-bottom: 10px;
5233
}
5234
 
5235
.privacy p {
5236
    padding-top: 0px;
5237
    display: inline-block;
5238
}
5239
 
5240
.form-group {
5241
    margin-bottom: 1rem;
5242
    padding-top: 0px;
5243
}
5244
 
5245
.privacy i {
5246
    float: right;
5247
    color: #e44d3a;
5248
    font-size: 20px;
5249
    font-weight: 600;
5250
}
5251
 
5252
.dropdown-menu input {
5253
    margin-right: 10px;
5254
    margin-top: 15px;
5255
}
5256
 
5257
.dropdown-menu a {
5258
    padding: 10px 0 10px 40px;
5259
    margin-bottom: 10px;
5260
}
5261
 
5262
.dropdown-menu form {
5263
    margin-bottom: 10px;
5264
    margin-top: 10px;
5265
}
5266
 
5267
.privacydropd p {
5268
    margin-left: 20px;
5269
    margin-top: 5px;
5270
}
5271
 
5272
.privabtns {
5273
    margin-top: 20px;
5274
}
5275
 
5276
.privabtns {
5277
    padding-bottom: 15px;
5278
}
5279
 
5280
.privabtns a {
5281
    margin-right: 15px;
5282
    padding: 8px 25px;
5283
    color: #000000;
5284
    border: 1px solid #e5e5e5;
5285
}
5286
 
5287
.privabtns a:hover {
5288
    color: #fff;
5289
    background-color: #e44d3a;
5290
}
5291
 
5292
.privac {
5293
    background-color: #fff;
5294
    height: 560px;
5295
    padding-top: 20px;
5296
}
5297
 
5298
.privac h3 {
5299
    font-size: 18px;
5300
    font-weight: 600;
5301
}
5302
 
5303
.bids-detail ul {
5304
    display: -webkit-inline-box;
5305
}
5306
 
5307
.bids-detail ul li {
5308
    margin-right: 30px;
5309
}
5310
 
5311
.bids-detail h3 {
5312
    font-size: 16px;
5313
    font-weight: 400;
5314
}
5315
 
5316
.bids-detail {
5317
    background-color: #fff;
5318
    padding: 20px;
5319
    margin-bottom: 25px;
5320
    box-shadow: 0px 2px #e4e4e4;
5321
}
5322
 
5323
.dropdown-menu.show {
5324
    display: contents;
5325
}
5326
 
5327
.postpaid:checked:after {
5328
    content: "\f17b";
5329
    font: normal normal normal 16px/1 "LineAwesome";
5330
    font-weight: 600;
5331
    border: 1px solid #fff;
5332
    color: #ffffff;
5333
    text-align: center;
5334
    font-size: 12px;
5335
    width: 100%;
5336
    height: 100%;
5337
    background: #e44d3a;
5338
    display: block;
5339
    border-radius: 50%;
5340
    padding-top: 3px;
5341
}
5342
 
5343
.postpaid:focus {
5344
    border: 1px solid #fff;
5345
    width: 25px;
5346
    height: 25px;
5347
}
5348
 
5349
.postpaid {
5350
    -webkit-appearance: none;
5351
    content: "";
5352
    width: 20px;
5353
    height: 20px;
5354
    border-radius: 50%;
5355
    border: 1px solid #5e5e5e;
5356
    outline: 0;
5357
    margin-right: 5px;
5358
}
5359
 
5360
/* .main-ws-sec .job-status-bar {} */
5361
 
5362
.main-ws-sec .btm-line {
5363
    padding-bottom: 20px !important;
5364
    border-bottom: 1px solid #e5e5e5 !important;
5365
    margin-bottom: 20px;
5366
}
5367
 
5368
.job-status-bar hr {
5369
    margin: 0 -40px;
5370
}
5371
 
5372
.reply-area {
5373
    padding-left: 55px;
5374
}
5375
 
5376
.reply-rply1 {
5377
    margin: 24px 0;
5378
}
5379
 
5380
.reply-area p {
5381
    padding-bottom: 10px;
5382
}
5383
 
5384
.reply-area span {
5385
    cursor: pointer;
5386
}
5387
 
5388
.reply-area span:hover {
5389
    color: #e44d3a;
5390
}
5391
 
5392
.reply-area i {
5393
    font-size: 16px;
5394
    font-weight: 600;
5395
    padding-right: 8px;
5396
}
5397
 
5398
.comment-area .la-plus-circle {
5399
    display: block;
5400
    text-align: center;
5401
    font-size: 40px;
5402
    color: #b2b2b2;
5403
}
5404
 
5405
.reply-area span {
5406
    padding-top: 5px;
5407
    color: #b2b2b2;
5408
}
5409
 
5410
.comt span {
5411
    font-size: 16px;
5412
    color: #666666;
5413
}
5414
 
5415
.comt i {
5416
    padding-right: 8px;
5417
}
5418
 
5419
.postcomment .form-control {
5420
    width: 112%;
5421
    margin-left: -50px;
5422
    background-color: #efefef;
5423
    border-radius: 3px;
5424
}
5425
 
5426
.postcomment a {
5427
    background-color: #e44d3a;
5428
    color: #fff;
5429
    padding: 9px 25px 8px 25px;
5430
    line-height: 37px;
5431
    border-radius: 3px;
5432
}
5433
 
5434
.postcomment {
5435
    padding-top: 30px;
5436
}
5437
 
5438
.widget-projectid {
5439
    padding: 15px;
5440
}
5441
 
5442
.widget-projectid h3 {
5443
    padding-bottom: 7px;
5444
    font-size: 14px;
5445
    font-weight: 600;
5446
}
5447
 
5448
.paymethd p {
5449
    color: #e44d3a;
5450
}
5451
 
5452
.copylink p {
5453
    background-color: #efefef;
5454
    padding: 7px 0 8px 10px;
5455
}
5456
 
5457
.copylink a {
5458
    background-color: #e44d3a;
5459
    color: #fff;
5460
    padding: 10px 15px 10px 15px;
5461
    border-radius: 4px;
5462
}
5463
 
5464
.copylink span {
5465
    padding: 30px 0 20px;
5466
}
5467
 
5468
.copylink i {
5469
    float: unset;
5470
    position: unset;
5471
}
5472
 
5473
.copylink .la-facebook {
5474
    background-color: #3b5998;
5475
    color: #fff;
5476
}
5477
 
5478
.copylink .la-twitter {
5479
    color: #1da1f2;
5480
}
5481
 
5482
.copylink .la-pinterest-p {
5483
    background-color: #fff;
5484
    color: #c11628;
5485
    border-radius: 50%;
5486
}
5487
 
5488
.copylink img {
5489
    padding-right: 10px;
5490
}
5491
 
5492
.freelancerbiding {
5493
    background-color: #fff;
5494
    padding-top: 20px;
5495
}
5496
 
5497
.freelancerbiding h3 {
5498
    font-size: 18px;
5499
    font-weight: 400;
5500
}
5501
 
5502
.repcent {
5503
    text-align: left;
5504
}
5505
 
5506
.bidrit {
5507
    float: right;
5508
}
5509
 
5510
.repcent i {
5511
    padding-left: 5px;
5512
}
5513
 
5514
.star {
5515
    display: inline-flex;
5516
    padding: 5px 0;
5517
}
5518
 
5519
.star li i {
5520
    color: #bfd337;
5521
}
5522
 
5523
.repcent span {
5524
    color: #51a5fb;
5525
}
5526
 
5527
.repcent p {
5528
    padding-left: 7px;
5529
}
5530
 
5531
.noreview ul li i {
5532
    color: #b2b2b2;
5533
}
5534
 
5535
.paymethd .star li i {
5536
    position: unset;
5537
    font-size: 14px;
5538
}
5539
 
5540
.paymethd .star a {
5541
    color: #51a5fb;
5542
    padding-left: 12px;
5543
}
5544
 
5545
.notice {
5546
    background-color: #ddf3ff;
5547
    padding: 15px;
5548
}
5549
 
5550
.notice span {
5551
    font-weight: 500;
5552
    padding-right: 5px;
5553
}
5554
 
5555
.delivery .input-group select {
5556
    width: 150px;
5557
    height: 50px !important;
5558
    font-size: 19px;
5559
    border: 1px solid #e5e5e5;
5560
    border-radius: 3px;
5561
}
5562
 
5563
.place-bid-btn {
5564
    font-size: 15px;
5565
    font-weight: 500;
5566
    color: #fff !important;
5567
    background-color: #e44d3a !important;
5568
    border: none;
5569
    padding: 10px;
5570
    border: 1px solid #e44d3a;
5571
    border-radius: 3px;
5572
}
5573
 
5574
.usy-dt .reply {
5575
    margin: 3px 0 0 10px;
5576
    width: 360px;
5577
    height: 40px;
5578
    background-color: #efefef;
5579
    border: 1px solid #e5e5e5;
5580
    padding-left: 10px;
5581
    border-radius: 3px;
5582
}
5583
 
5584
.replybtn {
5585
    background-color: #e44d3a;
5586
    color: #fff;
5587
    padding: 10px;
5588
    margin-left: 15px;
5589
    border-radius: 3px;
5590
}
5591
 
5592
.replybtn:hover {
5593
    color: #fff;
5594
}
5595
 
5596
.rewivew ul li {
5597
    margin-right: 5px !important;
5598
}
5599
 
5600
.security hr {
5601
    margin-right: -15px;
5602
    margin-left: -15px;
5603
}
5604
 
5605
.privacy .la-check {
5606
    float: left;
5607
    font-size: 12px;
5608
    margin: 5px 5px 0 0;
5609
    padding: 3px;
5610
    background-color: #e44d3a;
5611
    color: #fff;
5612
    border-radius: 50%;
5613
}
5614
 
5615
ul#myTab {
5616
    border-bottom: 1px solid #e5e5e5;
5617
}
5618
 
5619
.nav-tabs .nav-link {
5620
    border: none;
5621
}
5622
 
5623
.noborder {
5624
    border-bottom: none;
5625
}
5626
 
5627
.manbids {
5628
    margin-bottom: 0 !important;
5629
}
5630
 
5631
.noreply {
5632
    padding-top: 30px;
5633
}
5634
 
5635
#my-bids .nav-tabs {
5636
    margin-bottom: 20px;
5637
    margin-top: 7px;
5638
    padding-bottom: 0;
5639
}
5640
 
5641
#my-bids ul {
5642
    margin-bottom: 15px;
5643
    margin-top: 7px;
5644
    padding-bottom: 0;
5645
}
5646
 
5647
.savedjob-info p {
5648
    color: #666666;
5649
    margin-top: 5px;
5650
}
5651
 
5652
#my-bids ul li a {
5653
    color: #000000;
5654
    font-size: 16px;
5655
    font-weight: 500;
5656
}
5657
 
5658
#my-bids li a:hover {
5659
    color: #e44d3a;
5660
}
5661
 
5662
#saved-jobs ul {
5663
    margin-bottom: 20px;
5664
}
5665
 
5666
#saved-jobs ul li a {
5667
    color: #000000;
5668
    font-size: 16px;
5669
    font-weight: 500;
5670
}
5671
 
5672
#saved-jobs li a:hover {
5673
    color: #e44d3a;
5674
}
5675
 
5676
.wordpressdevlp h2 {
5677
    font-size: 18px;
5678
    font-weight: 600;
5679
    margin-bottom: 15px;
5680
}
5681
 
5682
#saved-jobs .nav-tabs .nav-item.show .nav-link,
5683
#saved-jobs .nav-tabs .nav-link.active {
5684
    background-color: inherit;
5685
    color: #e44d3a !important;
5686
    padding-bottom: 9px;
5687
    border-bottom: 2px solid #e44d3a !important;
5688
}
5689
 
5690
#my-bids .nav-tabs .nav-item.show .nav-link,
5691
#my-bids .nav-tabs .nav-link.active {
5692
    background-color: inherit;
5693
    color: #e44d3a !important;
5694
    padding-bottom: 9px;
5695
    border-bottom: 2px solid #e44d3a !important;
5696
}
5697
 
5698
.descptab li img {
5699
    float: left !important;
5700
    filter: inherit !important;
5701
}
5702
 
5703
.bklink {
5704
    border-bottom: none !important;
5705
    width: unset !important;
5706
    float: right !important;
5707
}
5708
 
5709
.bklik {
5710
    border-bottom: none !important;
5711
}
5712
 
5713
/*////////////////////////////////////////My css//////////////////////////////// //////////////////////////////////////////////////////////////////////////////*/
5714
 
5715
.savedjob-info li {
5716
    display: inline-block;
5717
    padding-left: 25px;
5718
}
5719
 
5720
.savedjob-info h3 {
5721
    font-size: 14px;
5722
    font-weight: 500;
5723
}
5724
 
5725
.settingjb ul li {
5726
    margin-right: 25px !important;
5727
}
5728
 
5729
.mangebid li {
5730
    padding-left: 0;
5731
    padding-right: 20px;
5732
    padding-top: 10px;
5733
}
5734
 
5735
.bk-links.bklink li {
5736
    padding-right: 0;
5737
}
5738
 
5739
.bidsbtn {
5740
    position: relative;
5741
}
5742
 
5743
.biddersinfo li {
5744
    padding-left: 0;
5745
    padding-right: 20px;
5746
}
5747
 
5748
#review {
5749
    background-color: #fff;
5750
    margin-bottom: 40px;
5751
}
5752
 
5753
.starreview {
5754
    padding-left: 20px;
5755
}
5756
 
5757
.replytext {
5758
    padding-bottom: 20px;
5759
}
5760
 
5761
.starrevi {
5762
    padding-left: 20px;
5763
}
5764
 
5765
.apply-jobbox {
5766
    text-align: center;
5767
}
5768
 
5769
.apply-jobbox form input {
5770
    width: 100%;
5771
    margin-top: 20px;
5772
    padding: 10px;
5773
    color: #222;
5774
    border: 1px solid #e5e5e5;
5775
    border-radius: 3px;
5776
    font-size: 14px;
5777
}
5778
 
5779
.apply-jobbox h3 {
5780
    margin: 20px 0;
5781
}
5782
 
5783
.select-files {
5784
    border: 1px solid #e5e5e5;
5785
    margin-top: 20px;
5786
    padding: 30px;
5787
    background: #efefef;
5788
}
5789
 
5790
.select-files button {
5791
    margin-bottom: 20px;
5792
    background-color: transparent;
5793
    border: 1px solid #e5e5e5;
5794
    padding: 10px 15px 10px 15px;
5795
    border-radius: 5px;
5796
    font-weight: 600;
5797
}
5798
 
5799
.select-files button:hover {
5800
    background-color: #e44d3a;
5801
    color: #fff;
5802
}
5803
 
5804
.close {
5805
    position: absolute;
5806
    right: 0px;
5807
    top: 0px;
5808
    color: #929292;
5809
    border: 1px solid;
5810
    border-radius: 50%;
5811
    height: 30px;
5812
    width: 30px;
5813
}
5814
 
5815
.mapouter iframe {
5816
    width: 100%;
5817
    height: 400px;
5818
}
5819
 
5820
.mapouter {
5821
    position: relative;
5822
    text-align: right;
5823
    height: 500px;
5824
    width: 100%;
5825
}
5826
 
5827
.gmap_canvas {
5828
    overflow: hidden;
5829
    background: none !important;
5830
}
5831
 
5832
.video-iframe {
5833
    width: 100%;
5834
    height: 400px;
5835
}
5836
 
5837
.custom-file-input {
5838
    color: transparent;
5839
    opacity: 1;
5840
    /* margin-left: 140px; */
5841
    margin-bottom: 10px;
5842
}
5843
 
5844
.custom-file-input::-webkit-file-upload-button {
5845
    visibility: hidden;
5846
}
5847
 
5848
.custom-file-input::before {
5849
    content: "Select Files";
5850
    color: #fff;
5851
    display: inline-block;
5852
    border: 1px solid #e5e5e5;
5853
    border-radius: 3px;
5854
    background: #e44d3a;
5855
    font-weight: 500;
5856
    padding: 10px 15px;
5857
    outline: none;
5858
    white-space: nowrap;
5859
    -webkit-user-select: none;
5860
    cursor: pointer;
5861
}
5862
 
5863
.custom-file-input:hover::before {
5864
    background-color: #e44d3a;
5865
    color: #fff;
5866
}
5867
 
5868
.custom-file-input:active {
5869
    outline: 0;
5870
}
5871
 
5872
.custom-file-input:active::before {
5873
    background: #e44d3a;
5874
    color: #fff;
5875
}
5876
 
5877
.bids-time {
5878
    float: right;
5879
}
5880
 
5881
.saved-post {
5882
    padding: 0;
5883
}
5884
 
5885
.saved-post p {
5886
    padding-bottom: 20px;
5887
}
5888
 
5889
.saved-info li {
5890
    padding-right: 25px;
5891
    padding-left: 0;
5892
}
5893
 
5894
.saved-btn {
5895
    padding: 0;
5896
    margin-bottom: -12px;
5897
}
5898
 
5899
.applied-post {
5900
    padding: 0;
5901
}
5902
 
5903
.post-bid {
5904
    padding: 0 !important;
5905
}
5906
 
5907
.bidsbtn {
5908
    padding-top: 0 !important;
5909
}
5910
 
5911
.active-bids {
5912
    padding: 0;
5913
}
5914
 
5915
.activ-bidinfo li {
5916
    padding-top: 10px;
5917
    padding-left: 0;
5918
    padding-right: 25px;
5919
}
5920
 
5921
.activebtn {
5922
    padding-left: 0;
5923
}
5924
 
5925
.p-all {
5926
    padding: 0px;
5927
    float: left;
5928
    width: 100%;
5929
    position: relative;
5930
}
5931
 
5932
.toggle-btn .custom-switch .custom-control-label::before {
5933
    left: -2.25rem;
5934
    width: 70px;
5935
    pointer-events: all;
5936
    border-radius: 100px;
5937
    height: 30px;
5938
    top: -1px;
5939
    box-shadow: none;
5940
}
5941
 
5942
.toggle-btn .custom-control-label::before {
5943
    position: absolute;
5944
    top: 0.25rem;
5945
    left: -1.5rem;
5946
    display: block;
5947
    width: 1rem;
5948
    height: 1rem;
5949
    pointer-events: none;
5950
    content: "";
5951
    background-color: #fff;
5952
    border: #e1e1e1 solid 2px;
5953
}
5954
 
5955
.custom-control-input:checked~.custom-control-label::before {
5956
    color: #fff;
5957
    border-color: #e44d3a;
5958
    background-color: #e44d3a;
5959
    box-shadow: none;
5960
    outline: none;
5961
}
5962
 
5963
.toggle-btn .custom-switch .custom-control-label::after {
5964
    top: calc(-1px + 2px);
5965
    left: calc(-36px + 2px);
5966
    width: calc(30px - 4px);
5967
    height: calc(30px - 4px);
5968
    background-color: #e1e1e1;
5969
    border-radius: 100%;
5970
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
5971
        -webkit-transform 0.15s ease-in-out;
5972
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
5973
        box-shadow 0.15s ease-in-out;
5974
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
5975
        box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
5976
}
5977
 
5978
.toggle-btn .custom-control-label::after {
5979
    position: absolute;
5980
    top: 0.25rem;
5981
    left: -1.5rem;
5982
    display: block;
5983
    width: 0;
5984
    height: 0;
5985
    content: "";
5986
    background: no-repeat 50%/50% 50%;
5987
}
5988
 
5989
.toggle-btn .custom-control-label {
5990
    position: initial;
5991
    margin-bottom: 0;
5992
    vertical-align: top;
5993
}
5994
 
5995
.toggle-btn .custom-switch .custom-control-input:checked~.custom-control-label::after {
5996
    background-color: #fff;
5997
    -webkit-transform: translateX(2.5rem);
5998
    transform: translateX(2.5rem);
5999
}
6000
 
6001
.custom-control-label {
6002
    position: relative;
6003
    margin-bottom: 0;
6004
    vertical-align: top;
6005
    line-height: 24px;
6006
    font-size: 14px;
6007
    color: #666666;
6008
}
6009
 
6010
.small-text-children p,
6011
.small-text-children span {
6012
    font-size: 0.8rem;
6013
}
6014
 
6015
.search-item-selected {
6016
    padding: 1px 10px;
6017
    background: var(--background-gray);
6018
    line-height: 1;
6019
    border-radius: 10px;
6020
    font-weight: bold;
6021
}
6022
 
6023
.row .sc-dkzDqf {
6024
    margin: 0 auto;
6025
}
6026
 
6027
.test-section .title,
6028
.test-section .description {
6029
    margin-bottom: 10px;
6030
}
6031
 
6032
.test-section .btn-danger {
6033
    margin-right: 10px;
6034
}
6035
 
6036
.test-section .panel-body {
6037
    padding: 20px 0px;
6038
}
6039
 
6040
.test-section .panel {
6041
    margin-top: 20px;
6042
    padding-bottom: 10px;
6043
}
6044
 
6045
.test-section .np-padding {
6046
    padding: 0px;
6047
}
6048
 
6049
.test-section .checkbox {
6050
    display: flex;
6051
    margin: 20px 0px;
6052
}
6053
 
6054
.test-section .option {
6055
    margin-left: 10px;
6056
}
6057
 
6058
.checkbox input[type="checkbox"],
6059
input[type="radio"] {
6060
    margin-top: 5px !important;
6061
}
6062
 
6063
.test-section h6 {
6064
    margin-bottom: 10px;
6065
    color: #0860bf;
6066
}
6067
 
6068
.wizard {
6069
    display: flex;
6070
    margin-top: 10px;
6071
}
6072
 
6073
.wizard li {
6074
    width: 50%;
6075
    display: inline-block;
6076
}
6077
 
6078
.btn-secondary:disabled,
6079
.btn-primary:disabled {
6080
    cursor: no-drop;
6081
}
6082
 
6083
.test-section .btn-primary {
6084
    margin-left: 10px;
6085
}
6086
 
6087
.previous {
6088
    text-align: left;
6089
}
6090
 
6091
.next {
6092
    text-align: right;
6093
}
6094
 
6095
.test-section .close {
6096
    border: none !important;
6097
    border-radius: 0px !important;
6098
}
6099
 
6100
.ratin-range {
6101
    display: block;
6102
}
6103
 
6104
.ratin-range li {
6105
    display: inline-block;
6106
    width: 6%;
6107
}
6108
 
6109
.ratin-range li .option {
6110
    margin-top: 2px !important;
6111
}
6112
 
6113
#react-self-evaluation .company-up-info ul {
6114
    width: 100%;
6115
    position: absolute;
6116
    float: left;
6117
    left: 0px;
6118
    bottom: 4vw;
6119
}
6120
 
6121
#react-self-evaluation .company-up-info {
6122
    padding: 30px 10px;
6123
    min-height: 20vw;
6124
    border: 1px solid #e5e5e5;
6125
}
6126
 
6127
#react-self-evaluation .company-up-info h3 {
6128
    width: 90%;
6129
    margin: 5px auto;
6130
}
6131
 
6132
.mb10 {
6133
    margin-bottom: 3vw;
6134
}
6135
 
6136
.opt-h6 {
6137
    font-weight: 600 !important;
6138
    color: #000 !important;
6139
}
6140
 
6141
// Alert notification
6142
 
6143
.alert-danger {
6144
    background-color: $danger !important;
6145
 
6146
    &:hover {
6147
        background-color: $danger-hover !important;
6148
    }
6149
}