Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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