Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5390 | Rev 5404 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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