Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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