Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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