Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5386 | Rev 5391 | 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;
3569
    }
5363 stevensc 3570
 
5390 stevensc 3571
    a {
3572
        font-size: 14px;
3573
        margin-top: 4px;
3574
    }
5363 stevensc 3575
}
3576
 
5390 stevensc 3577
 
5363 stevensc 3578
.filter-ttl {
3579
    width: 100%;
3580
    border-bottom: 1px solid #e5e5e5;
3581
    padding: 0 0 16px 0;
3582
    margin-bottom: 10px;
3583
 
5390 stevensc 3584
    h3 {
3585
        padding: 0;
3586
        font-size: 16px;
3587
        color: #000000;
3588
        font-weight: 400;
3589
    }
5363 stevensc 3590
 
5390 stevensc 3591
    a {
3592
        font-size: 14px;
3593
        color: #666666;
3594
    }
5363 stevensc 3595
 
5390 stevensc 3596
    .dropdown a {
3597
        color: #666666;
3598
    }
5363 stevensc 3599
}
3600
 
3601
 
3602
 
3603
.filter-dd {
3604
    float: left;
3605
    width: 100%;
3606
    margin-bottom: 15px;
3607
}
3608
 
3609
.filter-dd form {
3610
    float: left;
3611
    width: 100%;
3612
    position: relative;
3613
}
3614
 
3615
.filter-dd form input,
3616
.filter-dd form select {
3617
    width: 100%;
3618
    height: 30px;
3619
    background-color: #f2f2f2;
3620
    padding: 0 10px;
3621
    color: #b2b2b2;
3622
    font-size: 12px;
3623
    font-weight: 600;
3624
    border: 0;
3625
    border: 1px solid #e5e5e5;
3626
}
3627
 
3628
.job-tp i {
3629
    color: #666666;
3630
    position: absolute;
3631
    top: 9px;
3632
    right: 15px;
3633
    font-size: 14px;
3634
}
3635
 
3636
.avail-checks {
3637
    width: 100%;
5390 stevensc 3638
    padding: 1rem;
5363 stevensc 3639
 
5390 stevensc 3640
    input[type="radio"] {
3641
        display: none;
3642
    }
5363 stevensc 3643
 
5390 stevensc 3644
    input[type="radio"]+label span {
3645
        display: inline-block;
3646
        width: 15px;
3647
        height: 15px;
3648
        position: relative;
3649
        margin-top: 3px;
3650
        border: 1px solid #d2d2d2;
3651
        border-radius: 100px;
3652
    }
5363 stevensc 3653
 
5390 stevensc 3654
    input[type="radio"]+label span:before {
3655
        content: "";
3656
        opacity: 0;
3657
        visibility: hidden;
3658
        position: absolute;
3659
        width: 7px;
3660
        height: 7px;
3661
        border-radius: 100px;
3662
        background-color: #e44d3a;
3663
        top: 3px;
3664
        left: 3px;
3665
    }
5363 stevensc 3666
 
5390 stevensc 3667
    input[type="radio"]:checked+label span:before {
3668
        opacity: 1;
3669
        visibility: visible;
3670
    }
5363 stevensc 3671
 
5390 stevensc 3672
    small {
3673
        color: #909090;
3674
        font-size: 14px;
3675
        padding-left: 10px;
3676
        font-weight: 500;
3677
    }
5363 stevensc 3678
 
5390 stevensc 3679
    ul {
3680
        display: flex;
3681
        flex-direction: column;
3682
        gap: .5rem;
3683
    }
5363 stevensc 3684
}
3685
 
3686
 
3687
 
3688
/* =========== Range Slider ========== */
3689
 
3690
.rg-slider {
3691
    float: left;
3692
    width: 100%;
3693
}
3694
 
3695
.slider-container {
3696
    width: 100% !important;
3697
    padding-top: 50px;
3698
    position: relative;
3699
}
3700
 
3701
.theme-green .back-bar {
3702
    height: 5px;
3703
    border: 1px solid #e5e5e5;
3704
    -webkit-border-radius: 30px;
3705
    -moz-border-radius: 30px;
3706
    -ms-border-radius: 30px;
3707
    -o-border-radius: 30px;
3708
    border-radius: 30px;
3709
}
3710
 
3711
.theme-green .back-bar .pointer {
3712
    width: 17px;
3713
    height: 17px;
3714
    -webkit-border-radius: 100px;
3715
    -moz-border-radius: 100px;
3716
    -ms-border-radius: 100px;
3717
    -o-border-radius: 100px;
3718
    border-radius: 100px;
3719
    background-color: #e44d3a;
3720
    border: 2px solid #e3e3e3;
3721
    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3722
    -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3723
    -ms-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3724
    -o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3725
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3726
}
3727
 
3728
.theme-green .back-bar .pointer {
3729
    top: -7px;
3730
}
3731
 
3732
.slider-container .back-bar .pointer-label {
3733
    top: -50px;
3734
    height: 26px;
3735
    background-color: #e5e5e5;
3736
    -webkit-border-radius: 30px;
3737
    -moz-border-radius: 30px;
3738
    -ms-border-radius: 30px;
3739
    -o-border-radius: 30px;
3740
    border-radius: 30px;
3741
    line-height: 26px;
3742
    width: 50px;
3743
}
3744
 
3745
.pointer-label.low {
3746
    left: 0 !important;
3747
}
3748
 
3749
.pointer-label.high {
3750
    left: 70px !important;
3751
}
3752
 
3753
.pointer-label.low:before {
3754
    content: "";
3755
    position: absolute;
3756
    top: 13px;
3757
    right: -14px;
3758
    width: 8px;
3759
    height: 1px;
3760
    background-color: #e5e5e5;
3761
}
3762
 
3763
.rg-limit {
3764
    float: left;
3765
    width: 100%;
3766
    margin-top: 16px;
3767
}
3768
 
3769
.rg-limit h4 {
3770
    color: #686868;
3771
    font-size: 15px;
3772
    font-weight: 600;
3773
    float: left;
3774
}
3775
 
3776
.rg-limit h4:last-child {
3777
    float: right;
3778
}
3779
 
3780
/* ============== chatbox-list ============== */
3781
 
3782
.ext_share {
3783
    display: flex;
3784
    position: absolute;
3785
    align-items: center;
3786
    padding: 5px 1rem;
3787
    bottom: calc(100% + 0.5rem);
3788
    gap: 0.5rem;
3789
    left: 50%;
3790
    width: 16.5rem;
3791
    flex-wrap: wrap;
3792
    overflow-x: scroll;
3793
    transform: translateX(-90%);
3794
    border-radius: 20px;
3795
    background-color: #fff;
3796
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
3797
 
3798
    &.post {
3799
        transform: none;
3800
        bottom: 100%;
3801
        right: 1.5rem;
3802
        z-index: 200;
3803
    }
3804
 
3805
    @media (min-width: 768px) {
3806
        transform: translateX(-43%);
3807
    }
3808
}
3809
 
3810
.highlighted {
3811
    backdrop-filter: blur(35px);
3812
    animation: droping 1s ease infinite;
3813
}
3814
 
3815
@keyframes droping {
3816
    0% {
3817
        box-shadow: 0 0 5px #96bde9;
3818
    }
3819
 
3820
    50% {
3821
        box-shadow: 0 0 12px #96bde9;
3822
    }
3823
 
3824
    100% {
3825
        box-shadow: 0 0 5px #96bde9;
3826
    }
3827
}
3828
 
3829
.chat-mg {
3830
    display: inline-block;
3831
    position: relative;
3832
}
3833
 
3834
.chat-mg img {
3835
    width: 70px;
3836
    height: 70px;
3837
    -webkit-border-radius: 100px;
3838
    -moz-border-radius: 100px;
3839
    -ms-border-radius: 100px;
3840
    -o-border-radius: 100px;
3841
    border-radius: 100px;
3842
}
3843
 
3844
.chat-mg span {
3845
    position: absolute;
3846
    top: -5px;
3847
    right: 10px;
3848
    width: 20px;
3849
    height: 20px;
3850
    background-color: #e44d3a;
3851
    text-align: center;
3852
    font-size: 12px;
3853
    color: #fff;
3854
    line-height: 20px;
3855
    -webkit-border-radius: 100px;
3856
    -moz-border-radius: 100px;
3857
    -ms-border-radius: 100px;
3858
    -o-border-radius: 100px;
3859
    border-radius: 100px;
3860
}
3861
 
3862
.chat-mg.bx img {
3863
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3864
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3865
    -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3866
    -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3867
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3868
}
3869
 
3870
.conversation-box {
3871
    position: absolute;
3872
    bottom: 132%;
3873
    right: 100%;
3874
    width: 350px;
3875
    background-color: #fff;
3876
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3877
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3878
    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3879
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3880
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3881
    opacity: 0;
3882
    visibility: hidden;
3883
    z-index: 0;
3884
}
3885
 
3886
.conversation-box.active {
3887
    opacity: 1;
3888
    visibility: visible;
3889
    z-index: 9999;
3890
}
3891
 
3892
.conversation-box:before {
3893
    content: "";
3894
    position: absolute;
3895
    bottom: -7px;
3896
    right: 26px;
3897
    border-top: 15px solid #fff;
3898
    border-right: 15px solid transparent;
3899
    -webkit-transform: rotate(225deg);
3900
    -moz-transform: rotate(225deg);
3901
    -ms-transform: rotate(225deg);
3902
    -o-transform: rotate(225deg);
3903
    transform: rotate(225deg);
3904
}
3905
 
3906
.con-title {
3907
    float: left;
3908
    width: 100%;
3909
    background-color: #e44d3a;
3910
    padding: 15px 25px;
3911
    -webkit-border-radius: 10px 10px 0 0;
3912
    -moz-border-radius: 10px 10px 0 0;
3913
    -ms-border-radius: 10px 10px 0 0;
3914
    -o-border-radius: 10px 10px 0 0;
3915
    border-radius: 10px 10px 0 0;
3916
}
3917
 
3918
.con-title h3 {
3919
    float: left;
3920
    color: #ffffff;
3921
    font-size: 16px;
3922
    font-weight: 600;
3923
}
3924
 
3925
.con-title>a {
3926
    float: right;
3927
    color: #fff;
3928
    font-size: 20px;
3929
}
3930
 
3931
.chat-list {
3932
    float: left;
3933
    width: 100%;
3934
    min-height: 390px;
3935
}
3936
 
3937
.conv-list {
3938
    float: left;
3939
    width: 100%;
3940
    display: table;
3941
    padding: 20px 25px;
3942
    position: relative;
3943
}
3944
 
3945
.conv-list:hover,
3946
.conv-list.active {
3947
    background-color: #efefef;
3948
}
3949
 
3950
.msg-numbers {
3951
    position: absolute;
3952
    bottom: 18px;
3953
    right: 25px;
3954
    width: 25px;
3955
    height: 25px;
3956
    background-color: #e77667;
3957
    text-align: center;
3958
    line-height: 25px;
3959
    color: #fff;
3960
    font-size: 13px;
3961
    -webkit-border-radius: 100px;
3962
    -moz-border-radius: 100px;
3963
    -ms-border-radius: 100px;
3964
    -o-border-radius: 100px;
3965
    border-radius: 100px;
3966
}
3967
 
3968
.usrr-pic {
3969
    display: table-cell;
3970
    position: relative;
3971
}
3972
 
3973
.active-status {
3974
    width: 9px;
3975
    height: 9px;
3976
    border: 2px solid #ecf5fb;
3977
    -webkit-border-radius: 100px;
3978
    -moz-border-radius: 100px;
3979
    -ms-border-radius: 100px;
3980
    -o-border-radius: 100px;
3981
    border-radius: 100px;
3982
    position: absolute;
3983
    top: -3px;
3984
    right: 0;
3985
}
3986
 
3987
.activee {
3988
    background-color: #e44d3a;
3989
}
3990
 
3991
.usy-info {
3992
    display: table-cell;
3993
    vertical-align: top;
3994
    width: 100%;
3995
    padding-left: 15px;
3996
}
3997
 
3998
.usy-info h3 {
3999
    color: #000000;
4000
    font-size: 18px;
4001
    font-weight: 600;
4002
    margin-bottom: 5px;
4003
}
4004
 
4005
.usy-info span {
4006
    color: #686868;
4007
    font-size: 16px;
4008
    float: left;
4009
}
4010
 
4011
.usy-info span img {
4012
    padding-left: 5px;
4013
    float: right;
4014
}
4015
 
4016
.ct-time {
4017
    position: absolute;
4018
    top: 20px;
4019
    right: 25px;
4020
}
4021
 
4022
.ct-time span {
4023
    color: #b2b2b2;
4024
    font-size: 14px;
4025
}
4026
 
4027
.st-icons {
4028
    float: right;
4029
    margin-top: 7px;
4030
}
4031
 
4032
.st-icons a {
4033
    color: #fff;
4034
    font-size: 20px;
4035
    margin-right: 5px;
4036
}
4037
 
4038
.chat-hist {
4039
    float: left;
4040
    width: 100%;
4041
    background-color: #fff;
4042
    height: 280px;
4043
}
4044
 
4045
.chat-msg {
4046
    float: left;
4047
    width: 100%;
4048
    padding-right: 25px;
4049
    margin-bottom: 15px;
4050
}
4051
 
4052
.chat-msg p {
4053
    color: #ffffff;
4054
    font-size: 14px;
4055
    background-color: #e44d3a;
4056
    line-height: 18px;
4057
    -webkit-border-radius: 15px;
4058
    -moz-border-radius: 15px;
4059
    -ms-border-radius: 15px;
4060
    -o-border-radius: 15px;
4061
    border-radius: 15px;
4062
    padding: 10px 15px;
4063
    width: 80%;
4064
    float: right;
4065
    margin-bottom: 10px;
4066
}
4067
 
4068
.mg-3 {
4069
    margin-bottom: 3px;
4070
}
4071
 
4072
.chat-msg span {
4073
    float: right;
4074
    color: #b1b1b1;
4075
    width: 100%;
4076
    font-size: 9px;
4077
    text-align: right;
4078
}
4079
 
4080
.status-info {
4081
    width: 8px;
4082
    height: 8px;
4083
    background-color: #fff;
4084
    -webkit-border-radius: 100px;
4085
    -moz-border-radius: 100px;
4086
    -ms-border-radius: 100px;
4087
    -o-border-radius: 100px;
4088
    border-radius: 100px;
4089
    display: inline-block;
4090
    margin-left: 7px;
4091
}
4092
 
4093
.chat-user-info h3 {
4094
    margin-top: 7px;
4095
    margin-left: 10px;
4096
}
4097
 
4098
.date-nd {
4099
    float: left;
4100
    width: 100%;
4101
    text-align: center;
4102
    margin-bottom: 20px;
4103
    position: relative;
4104
}
4105
 
4106
.date-nd:before,
4107
.date-nd:after {
4108
    content: "";
4109
    position: absolute;
4110
    top: 10px;
4111
    left: 15px;
4112
    width: 92px;
4113
    height: 1px;
4114
    background-color: #e5e5e5;
4115
}
4116
 
4117
.date-nd:after {
4118
    left: auto;
4119
    right: 15px;
4120
}
4121
 
4122
.date-nd span {
4123
    color: #b1b1b1;
4124
    font-size: 12px;
4125
    text-align: center;
4126
}
4127
 
4128
.chat-msg.st2 p {
4129
    background-color: #efefef;
4130
    color: #686868;
4131
    float: left;
4132
    width: 55%;
4133
}
4134
 
4135
.chat-msg.st2 {
4136
    padding-left: 25px;
4137
}
4138
 
4139
.chat-msg.st2 span {
4140
    float: left;
4141
    text-align: left;
4142
}
4143
 
4144
/* =========== typing-msg =========== */
4145
 
4146
.typing-msg {
4147
    float: left;
4148
    width: 100%;
4149
    border-top: 1px solid #e6e6e6;
4150
    padding-top: 15px;
4151
}
4152
 
4153
.typing-msg form {
4154
    float: left;
4155
    width: 100%;
4156
    position: relative;
4157
}
4158
 
4159
.typing-msg form textarea {
4160
    width: 100%;
4161
    height: 30px;
4162
    background-color: #fff;
4163
    padding: 0 20px;
4164
    color: #b2b2b2;
4165
    font-size: 16px;
4166
    border: 0;
4167
    resize: none;
4168
}
4169
 
4170
.typing-msg form button {
4171
    color: #e44d3a;
4172
    font-size: 18px;
4173
    font-weight: 600;
4174
    position: absolute;
4175
    top: 2px;
4176
    right: 20px;
4177
    background: none;
4178
    border: 0;
4179
    cursor: pointer;
4180
}
4181
 
4182
.ft-options {
4183
    float: left;
4184
    width: 100%;
4185
    padding: 0 20px 8px 20px;
4186
}
4187
 
4188
.ft-options li {
4189
    display: inline-block;
4190
    margin-right: 15px;
4191
}
4192
 
4193
.ft-options li a {
4194
    color: #b2b2b2;
4195
    font-size: 24px;
4196
    display: inline-block;
4197
}
4198
 
4199
.mCSB_scrollTools {
4200
    right: -5px;
4201
}
4202
 
4203
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
4204
    background-color: #cccccc;
4205
    width: 5px;
4206
}
4207
 
4208
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
4209
    opacity: 0;
4210
}
4211
 
4212
/* ============ Menu Btn =============*/
4213
 
4214
.menu-btn {
4215
    float: right;
4216
    display: none;
4217
}
4218
 
4219
.menu-btn a {
4220
    font-size: 24px;
4221
    color: #fff;
4222
    display: inline-block;
4223
    padding-top: 16px;
4224
    padding-left: 20px;
4225
}
4226
 
4227
/* ============= account-tabs-setting ============ */
4228
 
4229
/* .profile-account-setting {} */
4230
 
4231
.account-tabs-setting {
4232
    width: 100%;
4233
}
4234
 
4235
.account-tabs-setting h1 {
4236
    font-size: 1rem;
4237
    font-weight: 700;
4238
    margin: 2rem auto;
4239
    text-align: center;
4240
    color: $title-color;
4241
}
4242
 
4243
.acc-leftbar {
4244
    width: 100%;
4245
    background-color: $bg-color;
4246
    border: 1px solid $border-primary;
4247
    border-radius: 10px;
4248
    overflow: hidden;
4249
}
4250
 
4251
.acc-leftbar .nav-tabs>a {
4252
    border-bottom: 1px solid $border-primary;
4253
    color: $subtitle-color;
4254
    font-size: 16px;
4255
    font-weight: 700;
4256
    margin: 0 auto;
4257
    padding: 1rem 0;
4258
    width: 90%;
4259
}
4260
 
4261
.nav-tabs {
4262
    border-bottom: 0;
4263
}
4264
 
4265
.acc-leftbar .nav-tabs>a:last-child {
4266
    border-bottom: 0;
4267
}
4268
 
4269
.acc-leftbar .nav-tabs>a i {
4270
    font-size: 1.5rem;
4271
    position: relative;
4272
    width: 50px;
4273
    height: 50px;
4274
    display: inline-flex;
4275
    align-items: center;
4276
    background-color: $bg-color-secondary;
4277
    border-radius: 100px;
4278
    justify-content: center;
4279
    margin-right: 5px;
4280
}
4281
 
4282
.nav-tabs .nav-item.show .nav-link,
4283
.nav-tabs .nav-link.active {
4284
    background-color: inherit;
4285
    color: #e44d3a;
4286
    border-color: inherit;
4287
}
4288
 
4289
/* ============= acc-setting ============ */
4290
 
4291
.settings-container {
4292
    font-weight: normal;
4293
}
4294
 
4295
.settings-container h2 {
4296
    font-size: 18px;
4297
    font-weight: 600;
4298
    margin: 0.5rem auto;
4299
    color: $subtitle-color;
4300
}
4301
 
4302
.acc-setting_content {
4303
    padding: 2rem 1rem;
4304
    width: 100%;
4305
    overflow: hidden;
4306
    border-radius: 10px;
4307
    background-color: $bg-color;
4308
    border: 1px solid $border-primary;
4309
    box-shadow: 1px 0 4px var(--background-gray);
4310
}
4311
 
4312
.acc-setting {
4313
    display: flex;
4314
    flex-direction: column;
4315
    gap: 1rem;
4316
    border-radius: $border-radius;
4317
    border: 1px solid $border-primary;
4318
    padding: 1rem;
4319
    background-color: #fff;
4320
 
4321
    form {
4322
        align-items: flex-start;
4323
        display: flex;
4324
        flex-direction: column;
4325
        gap: 0.5rem;
4326
    }
4327
 
4328
    &>h3 {
4329
        color: $subtitle-color;
4330
        font-weight: 600;
4331
        font-size: 18px;
4332
    }
4333
 
4334
    .notbat {
4335
        display: flex;
4336
        justify-content: space-between;
4337
        border-top: 1px solid $border-primary;
4338
        padding: 0.5rem 1rem;
4339
        width: 100%;
4340
 
4341
        &>span {
4342
            max-width: 70%;
4343
        }
4344
    }
4345
 
4346
    .inputs__container {
4347
        display: flex;
4348
        width: 100%;
4349
        gap: 1rem;
4350
        align-items: center;
4351
        flex-wrap: wrap;
4352
    }
4353
 
4354
    .cp-field {
4355
        width: 100%;
4356
        display: flex;
4357
        flex-direction: column;
4358
        gap: 0.5rem;
4359
        align-items: flex-start;
4360
    }
4361
 
4362
    @media (min-width: 768px) {
4363
        .cp-field {
4364
            flex: 1;
4365
        }
4366
    }
4367
}
4368
 
4369
.toggle-btn {
4370
    position: absolute;
4371
    top: 35px;
4372
    right: 20px;
4373
}
4374
 
4375
/* =============== Password Update ============ */
4376
 
4377
.cp-field {
4378
    h5 {
4379
        color: $title-color;
4380
        font-size: 16px;
4381
        font-weight: 600;
4382
    }
4383
 
4384
    input,
4385
    select,
4386
    .custom-input {
4387
        height: 40px;
4388
        padding: 0 40px;
4389
    }
4390
 
4391
    input,
4392
    textarea,
4393
    select,
4394
    .custom-input {
4395
        width: 100% !important;
4396
        background-color: $bg-color !important;
4397
        color: $font-color !important;
4398
        box-shadow: 0 0 2px $border-primary !important;
4399
        border-radius: 10px !important;
4400
        border: none !important;
4401
        margin-top: 4px;
4402
    }
4403
 
4404
    textarea {
4405
        padding: 20px;
4406
        height: 115px;
4407
    }
4408
}
4409
 
4410
.cpp-fiel {
4411
    width: 100%;
4412
    position: relative;
4413
}
4414
 
4415
.cpp-fiel i {
4416
    position: absolute;
4417
    top: 12px;
4418
    left: 15px;
4419
    color: #b2b2b2;
4420
    font-size: 16px;
4421
}
4422
 
4423
/* =============== notifications-list ============= */
4424
 
4425
.notfication-details {
4426
    float: left;
4427
    width: 100%;
4428
    padding: 20px;
4429
    border-bottom: 1px solid #e5e5e5;
4430
}
4431
 
4432
.notfication-details:last-child {
4433
    border-bottom: 0;
4434
}
4435
 
4436
.noty-user-img {
4437
    float: left;
4438
    width: 35px;
4439
}
4440
 
4441
.noty-user-img img {
4442
    width: 100%;
4443
}
4444
 
4445
.notification-info {
4446
    float: left;
4447
    width: auto;
4448
    padding-left: 10px;
4449
}
4450
 
4451
.notification-info h3 {
4452
    color: #686868;
4453
    font-size: 14px;
4454
    font-weight: 500;
4455
    border: 0;
4456
    padding: 0;
4457
    margin-bottom: 6px;
4458
}
4459
 
4460
.notification-info h3 a {
4461
    color: #000000;
4462
    font-size: 16px;
4463
    font-weight: 600;
4464
    display: inline-block;
4465
}
4466
 
4467
.notification-info>span {
4468
    display: inline-block;
4469
    color: #b2b2b2;
4470
    font-size: 12px;
4471
    font-weight: 600;
4472
}
4473
 
4474
/* ============== requests-list ============== */
4475
 
4476
.requests-list {
4477
    float: left;
4478
    width: 100%;
4479
    padding-bottom: 0;
4480
}
4481
 
4482
.request-details {
4483
    float: left;
4484
    width: 100%;
4485
    padding: 20px;
4486
    border-bottom: 1px solid #e5e5e5;
4487
}
4488
 
4489
.request-details:last-child {
4490
    border-bottom: 0;
4491
}
4492
 
4493
.request-info {
4494
    float: left;
4495
    padding-left: 10px;
4496
}
4497
 
4498
.request-info h3 {
4499
    color: #000000;
4500
    font-size: 14px;
4501
    font-weight: 600;
4502
    padding: 0;
4503
    border: 0;
4504
    margin-bottom: 3px;
4505
}
4506
 
4507
.request-info span {
4508
    color: #686868;
4509
    font-size: 12px;
4510
    display: inline-block;
4511
}
4512
 
4513
.accept-feat {
4514
    float: right;
4515
}
4516
 
4517
.accept-feat ul li {
4518
    display: inline-block;
4519
}
4520
 
4521
.accept-feat ul li button {
4522
    cursor: pointer;
4523
}
4524
 
4525
.accept-req {
4526
    color: #ffffff;
4527
    font-size: 16px;
4528
    background-color: #51a5fb;
4529
    height: 30px;
4530
    padding: 0 20px;
4531
    font-weight: 600;
4532
    border: 0;
4533
    border: 1px solid #51a5fb;
4534
}
4535
 
4536
.close-req {
4537
    height: 30px;
4538
    width: 30px;
4539
    text-align: center;
4540
    line-height: 30px;
4541
    border: 1px solid #e5e5e5;
4542
    background: inherit;
4543
    color: #b2b2b2;
4544
    margin-left: 7px;
4545
}
4546
 
4547
.close-req i {
4548
    font-weight: 600;
4549
}
4550
 
4551
/* ============= Profile Sattus =========== */
4552
 
4553
.profile-bx-details {
4554
    float: left;
4555
    width: 100%;
4556
    padding: 30px 7px 30px 7px;
4557
}
4558
 
4559
.profile-bx-details .row .col-lg-3 {
4560
    padding: 0 7px;
4561
}
4562
 
4563
.profile-bx-info {
4564
    float: left;
4565
    width: 100%;
4566
    background-color: #f2f2f2;
4567
    padding: 20px;
4568
    border: 1px solid #e5e5e5;
4569
}
4570
 
4571
.pro-bx {
4572
    float: left;
4573
    width: 100%;
4574
    border-bottom: 1px solid #e5e5e5;
4575
    padding-bottom: 10px;
4576
}
4577
 
4578
.bx-info {
4579
    float: left;
4580
    margin-top: 7px;
4581
    padding-left: 10px;
4582
}
4583
 
4584
.bx-info h3 {
4585
    color: #e44d3a;
4586
    font-size: 20px;
4587
    font-weight: 600;
4588
    margin-bottom: 5px;
4589
}
4590
 
4591
.bx-info h5 {
4592
    color: #000000;
4593
    font-size: 14px;
4594
    font-weight: 600;
4595
    margin: 0;
4596
    padding: 0;
4597
    border: 0;
4598
}
4599
 
4600
.pd-left-20 {
4601
    padding-left: 20px;
4602
    padding-right: 0;
4603
}
4604
 
4605
.pd-left-15 {
4606
    padding-left: 15px;
4607
    padding-right: 0;
4608
}
4609
 
4610
.pd-left-right {
4611
    padding-left: 15px;
4612
    padding-right: 20px;
4613
}
4614
 
4615
.profile-bx-info>p {
4616
    float: left;
4617
    width: 100%;
4618
    font-size: 14px;
4619
    line-height: 20px;
4620
    padding-top: 5px;
4621
}
4622
 
4623
/* =========== pro-work-status ========= */
4624
 
4625
.pro-work-status {
4626
    float: left;
4627
    width: 100%;
4628
    padding: 0 15px;
4629
}
4630
 
4631
.pro-work-status h4 {
4632
    color: #000000;
4633
    font-size: 18px;
4634
    font-weight: 600;
4635
    margin-bottom: 50px;
4636
}
4637
 
4638
/* ============== messages-page ============== */
4639
 
4640
.messages-page {
4641
    padding: 20px 0;
4642
}
4643
 
4644
.messages-sec {
4645
    width: 100%;
4646
    border-radius: 10px;
4647
    overflow: hidden;
4648
    background-color: transparent;
4649
}
4650
 
4651
.msgs-list {
4652
    width: 100%;
4653
}
4654
 
4655
.inmail_conversations-list {
4656
    border-right: 1px solid #3333;
4657
    padding-left: 0;
4658
    padding-right: 0;
4659
}
4660
 
4661
.active-tab {
4662
    border-bottom: solid 2px #e4e4e4;
4663
}
4664
 
4665
.msg-title {
4666
    color: #000000;
4667
    font-size: 18px;
4668
    font-weight: 600;
4669
}
4670
 
4671
.date-chat {
4672
    font-size: 0.6rem;
4673
    color: var(--gray);
4674
    padding-top: 5%;
4675
}
4676
 
4677
.messages-list {
4678
    overflow-y: scroll;
4679
 
4680
    li {
4681
        cursor: pointer;
4682
 
4683
        &.active {
4684
            background-color: #efefef;
4685
        }
4686
    }
4687
}
4688
 
4689
.text-chat-title {
4690
    color: var(--gray) !important;
4691
    font-size: 1rem;
4692
}
4693
 
4694
.usr-msg-details {
4695
    display: flex;
4696
    align-items: center;
4697
    gap: 0.5rem;
4698
    padding: 0.5rem 1rem;
4699
    border-radius: $border-radius;
4700
 
4701
    &:hover,
4702
    &.is_selected {
4703
        background: $light-gray;
4704
    }
4705
 
4706
    .usr-ms-img {
4707
        width: 40px;
4708
        height: 40px;
4709
        border-radius: 50%;
4710
        overflow: hidden;
4711
 
4712
        img {
4713
            object-fit: cover;
4714
        }
4715
    }
4716
 
4717
    .usr-mg-info {
4718
        h3 {
4719
            color: $subtitle-color;
4720
            font-size: 18px;
4721
            font-weight: 600;
4722
        }
4723
 
4724
        p {
4725
            color: $font-color;
4726
            font-size: 16px;
4727
        }
4728
    }
4729
}
4730
 
4731
.msg-status {
4732
    border-radius: 100px;
4733
    background-color: #e44d3a;
4734
    position: absolute;
4735
    top: -3px;
4736
    right: 0;
4737
    width: 6px;
4738
    height: 6px;
4739
}
4740
 
4741
.messages-list ul li.active .msg-status {
4742
    border: 2px solid #ecf5fb;
4743
    height: 10px;
4744
    width: 10px;
4745
}
4746
 
4747
.msg-notifc {
4748
    position: absolute;
4749
    /* bottom: 0;
4750
    right: 0; */
4751
    width: 25px;
4752
    height: 25px;
4753
    -webkit-border-radius: 100px;
4754
    -moz-border-radius: 100px;
4755
    -ms-border-radius: 100px;
4756
    -o-border-radius: 100px;
4757
    border-radius: 100px;
4758
    background-color: #e77667;
4759
    text-align: center;
4760
    line-height: 25px;
4761
    font-size: 13px;
4762
    color: #fff;
4763
}
4764
 
4765
.posted_time {
4766
    position: absolute;
4767
    top: 2px;
4768
    right: 0;
4769
    color: #b2b2b2;
4770
    font-size: 14px;
4771
}
4772
 
4773
/* =============== main-message-box ============= */
4774
 
4775
.main-conversation-box {
4776
    width: 100%;
4777
    background-color: $bg-color;
4778
    position: relative;
4779
    height: 80vh;
4780
    display: grid;
4781
    grid-template-rows: auto 65% auto;
4782
}
4783
 
4784
.inmail-conversation-container {
4785
    width: 100%;
4786
    background-color: $bg-color;
4787
    position: relative;
4788
    height: 80vh;
4789
    gap: 0.5rem;
4790
    display: grid;
4791
    grid-template-rows: 5% 80% 15%;
4792
}
4793
 
4794
@media (min-width: 992px) {
4795
    .inmail-conversation-container {
4796
        grid-template-rows: 85% 15%;
4797
    }
4798
}
4799
 
4800
.inmail-conversation-box {
4801
    width: 100%;
4802
    position: relative;
4803
    display: grid;
4804
    grid-template-rows: auto 85%;
4805
    overflow: hidden;
4806
}
4807
 
4808
.message-bar-head {
4809
    height: 13vh;
4810
    width: 100%;
4811
    padding: 20px;
4812
    border-bottom: 1px solid $border-primary;
4813
}
4814
 
4815
.message-bar-head .usr-msg-details {
4816
    width: auto;
4817
}
4818
 
4819
.message-bar-head>a {
4820
    float: right;
4821
    color: #b2b2b2;
4822
    font-size: 20px;
4823
    padding-top: 15px;
4824
}
4825
 
4826
.main-message-box {
4827
    display: flex;
4828
    width: 100%;
4829
    position: relative;
4830
    margin-bottom: 15.5px;
4831
 
4832
    .message-inner-dt {
4833
        width: 100%;
4834
 
4835
        &>img {
4836
            display: inline-block;
4837
            width: auto;
4838
            max-height: 180px;
4839
        }
4840
 
4841
        &>p {
4842
            font-size: 14px;
4843
        }
4844
    }
4845
 
4846
    .message-dt {
4847
        border-radius: $border-radius;
4848
        border-top-left-radius: 0;
4849
        width: auto;
4850
        padding: 0.5rem;
4851
        margin-left: 15px;
4852
        background-color: $chat-send;
4853
        color: $chat-color;
4854
        box-shadow: $white-backdrop;
4855
    }
4856
 
4857
    .messg-usr-img {
4858
        margin-left: 20px;
4859
        width: 50px;
4860
    }
4861
 
4862
    .message-dt>span {
4863
        color: #b2b2b2;
4864
        font-size: 14px;
4865
        float: left;
4866
        width: 100%;
4867
        margin-top: 7px;
4868
    }
4869
 
4870
    &.ta-right {
4871
        flex-direction: row-reverse;
4872
    }
4873
 
4874
    &.ta-right .messg-usr-img {
4875
        margin-left: 0;
4876
        margin-right: 20px;
4877
    }
4878
 
4879
    &.ta-right .message-dt {
4880
        border-top-left-radius: $border-radius;
4881
        border-top-right-radius: 0;
4882
        margin-right: 15px;
4883
        background-color: $chat-received;
4884
    }
4885
 
4886
    &.ta-right .message-dt>span {
4887
        float: right;
4888
        width: auto;
4889
    }
4890
}
4891
 
4892
.messg-usr-img img {
4893
    width: 100%;
4894
    background: #fff;
4895
    border-radius: 100px;
4896
}
4897
 
4898
.img-bx {
4899
    background-color: #efefef;
4900
    padding: 20px;
4901
}
4902
 
4903
.message-dt.st3 .message-inner-dt {
4904
    &>p {
4905
        background-color: #efefef;
4906
        color: #686868;
4907
        width: auto;
4908
        padding: 10px 15px;
4909
        float: left;
4910
    }
4911
 
4912
    &>img {
4913
        float: right;
4914
        position: relative;
4915
        top: 3px;
4916
        padding-left: 5px;
4917
    }
4918
}
4919
 
4920
.main-message-box.st3 .messg-usr-img {
4921
    bottom: 13px;
4922
}
4923
 
4924
/* ============== Calendar ============ */
4925
 
4926
.calendar-event {
4927
    display: flex;
4928
    flex-direction: column;
4929
    border-radius: $border-radius;
4930
    padding: 0.5rem;
4931
}
4932
 
4933
/* ============== message-send-area ============ */
4934
 
4935
.inmail-submit-btn {
4936
    width: 6%;
4937
}
4938
 
4939
.chat-header a {
4940
    text-decoration: none;
4941
    color: var(--dark);
4942
}
4943
 
4944
.chat-header h2 {
4945
    font-weight: 700;
4946
    text-align: center;
4947
}
4948
 
4949
.chat_contacts {
4950
    background-color: $bg-color;
4951
    border-radius: $border-radius;
4952
    border: 1px solid $border-primary;
4953
    display: flex;
4954
    flex-direction: column;
4955
    height: 100%;
4956
    gap: 0.5rem;
4957
    padding: 1rem 0.5rem;
4958
    max-height: 80vh;
4959
}
4960
 
4961
.contact__search,
4962
.group__search {
4963
    display: flex;
4964
    align-items: center;
4965
    border-radius: 30px;
4966
    height: 1.5rem;
4967
    color: gray;
4968
    cursor: pointer;
4969
    transition: all 0.2s;
4970
 
4971
    &:hover {
4972
        color: #000;
4973
    }
4974
 
4975
    &>input {
4976
        display: none;
4977
        border: none;
4978
        outline: none;
4979
        background: none;
4980
    }
4981
 
4982
    &.show {
4983
        padding: 0.5rem;
4984
        background-color: #eef3f0;
4985
        width: -webkit-fill-available;
4986
 
4987
        &>input {
4988
            display: initial;
4989
        }
4990
    }
4991
}
4992
 
4993
.group__search {
4994
    flex: initial;
4995
    margin: 0 1rem;
4996
 
4997
    input {
4998
        display: initial;
4999
    }
5000
}
5001
 
5002
/* ============== forum-links ============= */
5003
 
5004
.forum-sec {
5005
    background-color: #fff;
5006
}
5007
 
5008
.forum-links {
5009
    float: left;
5010
    width: 100%;
5011
}
5012
 
5013
.forum-links.active {
5014
    opacity: 1;
5015
    visibility: visible;
5016
    z-index: 9999;
5017
}
5018
 
5019
.forum-links ul li {
5020
    display: inline-block;
5021
    padding: 20px 0;
5022
    margin-right: 45px;
5023
    border-bottom: 2px solid transparent;
5024
}
5025
 
5026
.forum-links ul li.active {
5027
    border-color: #e44d3a;
5028
}
5029
 
5030
.forum-links ul li.active a {
5031
    color: #e44d3a;
5032
}
5033
 
5034
.forum-links ul li a {
5035
    display: inline-block;
5036
    color: #b2b2b2;
5037
    font-size: 14px;
5038
    font-weight: 600;
5039
}
5040
 
5041
.forum-links-btn {
5042
    float: left;
5043
    width: 100%;
5044
    text-align: center;
5045
    display: none;
5046
    padding: 20px 0;
5047
}
5048
 
5049
.forum-links-btn a {
5050
    color: #000;
5051
    font-size: 30px;
5052
    display: inline-block;
5053
}
5054
 
5055
/* ================ forum-page =============== */
5056
 
5057
.forum-page {
5058
    padding: 50px 0;
5059
}
5060
 
5061
.forum-questions-sec {
5062
    float: left;
5063
    width: 100%;
5064
}
5065
 
5066
.forum-questions {
5067
    float: left;
5068
    width: 100%;
5069
    background-color: #fff;
5070
}
5071
 
5072
.usr-question {
5073
    float: left;
5074
    width: 100%;
5075
    position: relative;
5076
    padding: 25px;
5077
    border-bottom: 1px solid #e5e5e5;
5078
}
5079
 
5080
.usr_img {
5081
    float: left;
5082
    width: 60px;
5083
}
5084
 
5085
.usr_img img {
5086
    width: 100%;
5087
    -webkit-border-radius: 100px;
5088
    -moz-border-radius: 100px;
5089
    -ms-border-radius: 100px;
5090
    -o-border-radius: 100px;
5091
    border-radius: 100px;
5092
}
5093
 
5094
.usr_quest {
5095
    float: left;
5096
    width: 90%;
5097
    padding-left: 15px;
5098
}
5099
 
5100
.usr_quest>h3 {
5101
    color: #000000;
5102
    font-size: 17px;
5103
    font-weight: 600;
5104
    margin-bottom: 20px;
5105
}
5106
 
5107
.forum-post-view .usr_quest>h3 {
5108
    margin-bottom: 10px;
5109
}
5110
 
5111
.react-links {
5112
    float: left;
5113
    width: 100%;
5114
}
5115
 
5116
.react-links li {
5117
    display: inline-block;
5118
    margin-right: 30px;
5119
}
5120
 
5121
.react-links li a {
5122
    display: inline-block;
5123
    color: #b2b2b2;
5124
    font-size: 14px;
5125
    font-weight: 600;
5126
}
5127
 
5128
.react-links li a:hover {
5129
    color: #e44d3a;
5130
}
5131
 
5132
.react-links li a i {
5133
    padding-right: 7px;
5134
}
5135
 
5136
.react-links li:last-child {
5137
    margin-right: 0;
5138
}
5139
 
5140
/* ============= quest-tags ============ */
5141
 
5142
.quest-tags {
5143
    float: left;
5144
    width: 100%;
5145
    margin-top: 20px;
5146
}
5147
 
5148
.quest-tags li {
5149
    display: inline-block;
5150
    margin-right: 10px;
5151
}
5152
 
5153
.quest-tags li a {
5154
    display: inline-block;
5155
    color: #ffffff;
5156
    background-color: #53d690;
5157
    -webkit-border-radius: 3px;
5158
    -moz-border-radius: 3px;
5159
    -ms-border-radius: 3px;
5160
    -o-border-radius: 3px;
5161
    border-radius: 3px;
5162
    padding: 7px 25px;
5163
}
5164
 
5165
.quest-posted-time {
5166
    position: absolute;
5167
    bottom: 30px;
5168
    right: 20px;
5169
    color: #b2b2b2;
5170
    font-size: 14px;
5171
}
5172
 
5173
.quest-posted-time i {
5174
    padding-right: 5px;
5175
}
5176
 
5177
.pd-right-none {
5178
    padding-right: 0;
5179
}
5180
 
5181
/* =========== navigation ============ */
5182
 
5183
.pagination {
5184
    float: left;
5185
    width: 100%;
5186
    /* background-color: #fff; */
5187
    padding: 13px 25px;
5188
}
5189
 
5190
.full-pagi {
5191
    float: left;
5192
    width: 100%;
5193
    padding-right: 0;
5194
    text-align: inherit;
5195
    margin-top: 20px;
5196
}
5197
 
5198
.pagination li {
5199
    padding: 0;
5200
    margin-right: 10px;
5201
}
5202
 
5203
.pagination li .page-link {
5204
    /* background-color: #e5e5e5; */
5205
    color: #b2b2b2;
5206
}
5207
 
5208
.pagination li .page-link.active {
5209
    background-color: #e44d3a;
5210
    color: #fff;
5211
    border-color: transparent;
5212
}
5213
 
5214
.pvr {
5215
    padding: 0.5rem 30px;
5216
}
5217
 
5218
/* ======== next-prev ========*/
5219
 
5220
.next-prev {
5221
    float: left;
5222
    width: 100%;
5223
    background-color: #fff;
5224
    margin-top: 20px;
5225
    padding: 12px 25px;
5226
}
5227
 
5228
.next-prev>a {
5229
    width: 90px;
5230
    height: 35px;
5231
    text-align: center;
5232
    line-height: 35px;
5233
    color: #b2b2b2;
5234
    font-size: 14px;
5235
    background-color: #e5e5e5;
5236
}
5237
 
5238
.next-prev>a:hover {
5239
    color: #fff;
5240
    background-color: #e44d3a;
5241
}
5242
 
5243
.fl-left {
5244
    float: left;
5245
}
5246
 
5247
.fl-right {
5248
    float: right;
5249
}
5250
 
5251
/* ========== widget-feat ========= */
5252
 
5253
.widget-feat {
5254
    padding: 25px 20px;
5255
}
5256
 
5257
.widget-feat ul {
5258
    float: left;
5259
    width: 100%;
5260
}
5261
 
5262
.widget-feat ul li {
5263
    float: left;
5264
    width: 25%;
5265
    text-align: center;
5266
}
5267
 
5268
.widget-feat ul li i {
5269
    display: block;
5270
    font-size: 18px;
5271
    margin-bottom: 9px;
5272
}
5273
 
5274
.widget-feat ul li span {
5275
    display: block;
5276
    color: #686868;
5277
    font-size: 16px;
5278
    font-weight: 500;
5279
}
5280
 
5281
.widget-feat ul li i.fa-heart {
5282
    color: #53d690;
5283
}
5284
 
5285
.widget-feat ul li i.fa-comment {
5286
    color: #e44d3a;
5287
}
5288
 
5289
.widget-feat ul li i.fa-share-alt {
5290
    color: #51a5fb;
5291
}
5292
 
5293
.widget-feat ul li i.fa-eye {
5294
    color: #00b540;
5295
}
5296
 
5297
/* =============== ANIMATION LOADER =============== */
5298
 
5299
.spinner {
5300
    margin: 0 auto 0;
5301
    width: 80px;
5302
    text-align: center;
5303
    height: 80px;
5304
    border-radius: 100px;
5305
    background-color: #fff;
5306
    line-height: 80px;
5307
    border: 1px solid #e1e1e1;
5308
    cursor: pointer;
5309
 
5310
    &>div {
5311
        width: 15px;
5312
        height: 15px;
5313
        background-color: #b9b9b9;
5314
        border-radius: 100%;
5315
        display: inline-block;
5316
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
5317
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
5318
    }
5319
 
5320
    .bounce1 {
5321
        -webkit-animation-delay: -0.32s;
5322
        animation-delay: -0.32s;
5323
    }
5324
 
5325
    .bounce2 {
5326
        -webkit-animation-delay: -0.16s;
5327
        animation-delay: -0.16s;
5328
    }
5329
 
5330
    @keyframes sk-bouncedelay {
5331
 
5332
        0%,
5333
        80%,
5334
        100% {
5335
            -webkit-transform: scale(0);
5336
            transform: scale(0);
5337
        }
5338
 
5339
        40% {
5340
            -webkit-transform: scale(1);
5341
            transform: scale(1);
5342
        }
5343
    }
5344
}
5345
 
5346
 
5347
.wordpressdevlp {
5348
    background-color: #fff;
5349
}
5350
 
5351
.bgclr {
5352
    background-color: #fff;
5353
    margin-bottom: 15px;
5354
}
5355
 
5356
.cadidatesbtn {
5357
    position: absolute;
5358
    left: 0;
5359
    padding-top: 5px;
5360
}
5361
 
5362
.cadidatesbtn button {
5363
    background-color: #e44d3a;
5364
    border: none;
5365
    margin-top: -3px;
5366
}
5367
 
5368
.cadidatesbtn button:hover {
5369
    background-color: #e44d3a;
5370
}
5371
 
5372
.cadidatesbtn span {
5373
    background-color: #bd2e1c;
5374
    color: #fff;
5375
    margin-right: 10px;
5376
    padding: 0.25em 0.5em;
5377
    font-weight: 600;
5378
    font-size: 12px;
5379
}
5380
 
5381
.wordpressdevlp i {
5382
    color: #e86554;
5383
    font-size: 18px;
5384
    font-weight: bold;
5385
    padding-right: 5px;
5386
}
5387
 
5388
.wordpressdevlp h2 {
5389
    font-size: 18px;
5390
    font-weight: 600;
5391
}
5392
 
5393
.cadidatesbtn i {
5394
    color: #b2b2b2;
5395
    border: 1px solid #b2b2b2;
5396
    font-size: 14px;
5397
    text-align: center;
5398
    margin-left: 7px;
5399
    border-radius: 3px;
5400
    padding: 10px;
5401
}
5402
 
5403
.cadidatesbtn i:hover {
5404
    background-color: #e44d3a;
5405
    color: #fff;
5406
    border: 1px solid #e44d3a;
5407
}
5408
 
5409
.inner {
5410
    border-bottom: 2px solid #e5e5e5;
5411
    padding-bottom: 10px;
5412
}
5413
 
5414
.inner li a:hover {
5415
    color: #e44d3a;
5416
    border-bottom: 2px solid #e44d3a;
5417
    padding-bottom: 9px;
5418
}
5419
 
5420
.inner li a {
5421
    color: #000000;
5422
}
5423
 
5424
.posttext {
5425
    position: absolute;
5426
    left: 0;
5427
}
5428
 
5429
.deatile h3 {
5430
    font-size: 14px;
5431
    font-weight: bold;
5432
    padding-bottom: 5px;
5433
}
5434
 
5435
.clrbtn a {
5436
    background-color: #e44d3a;
5437
    color: #fff;
5438
    padding: 5px 10px 5px 10px;
5439
    margin-right: 15px;
5440
}
5441
 
5442
.transpairentbtn a {
5443
    color: #222;
5444
    border: 2px solid #f1f1f1;
5445
    padding: 5px 10px 5px 10px;
5446
}
5447
 
5448
.savetext h3 {
5449
    font-size: 14px;
5450
    font-weight: bold;
5451
    padding-bottom: 5px;
5452
}
5453
 
5454
.devepbtn .clrbtn {
5455
    padding: 7px 20px;
5456
}
5457
 
5458
.devepbtn a {
5459
    color: #666666;
5460
    border: 1px solid #b2b2b2;
5461
    padding: 7px 10px 7px 10px;
5462
    border-radius: 3px;
5463
    margin-right: 5px;
5464
}
5465
 
5466
.devepbtn a:hover i {
5467
    color: #fff;
5468
}
5469
 
5470
.devepbtn a:hover {
5471
    background-color: #e44d3a;
5472
    color: #fff;
5473
}
5474
 
5475
.rew-reply hr {
5476
    margin-left: -20px;
5477
    margin-right: -20px;
5478
}
5479
 
5480
.rew-reply p {
5481
    padding-left: 20px;
5482
}
5483
 
5484
.rew-reply ul {
5485
    padding-left: 20px;
5486
}
5487
 
5488
.devepbtn {
5489
    margin-top: 30px;
5490
    padding-left: 20px;
5491
}
5492
 
5493
.rep-thanks hr {
5494
    margin-right: -20px;
5495
    margin-left: -20px;
5496
}
5497
 
5498
.profilecnd {
5499
    margin-bottom: 0px;
5500
}
5501
 
5502
.devepbtn i {
5503
    color: #b2b2b2;
5504
    font-size: 14px;
5505
}
5506
 
5507
.appliedinfo {
5508
    padding-left: 0;
5509
    padding-top: 20px !important;
5510
    padding-bottom: 10px;
5511
}
5512
 
5513
.epi2 {
5514
    padding: 0;
5515
}
5516
 
5517
.review a {
5518
    line-height: 16px;
5519
    font-size: 14px;
5520
    text-decoration: none;
5521
    font-weight: 500;
5522
    margin-left: 15px;
5523
}
5524
 
5525
.add-pic-box {
5526
    display: inline-block;
5527
    color: #e44d3a;
5528
    font-size: 16px;
5529
    position: absolute;
5530
    top: 30px;
5531
    right: 0;
5532
    font-weight: 600;
5533
    margin-right: 0;
5534
    width: 100%;
5535
}
5536
 
5537
.add-pic-box [type="file"] {
5538
    height: 0;
5539
    overflow: hidden;
5540
    width: 0;
5541
    float: left;
5542
}
5543
 
5544
.add-pic-box [type="file"]+label {
5545
    background: #fff;
5546
    border: 2px solid #e44d3a;
5547
    border-radius: 3px;
5548
    color: #e44d3a;
5549
    cursor: pointer;
5550
    /* display: inline-block; */
5551
    font-size: 15px;
5552
    font-weight: 600;
5553
    outline: none;
5554
    padding: 12px 20px;
5555
    position: relative;
5556
    transition: all 0.3s;
5557
    vertical-align: middle;
5558
    margin: 0;
5559
    float: right;
5560
    text-transform: uppercase;
5561
}
5562
 
5563
.add-pic-box [type="file"]+label:hover {
5564
    background: #e44d3a;
5565
    color: #fff;
5566
}
5567
 
5568
.noreview li i {
5569
    color: #b2b2b2;
5570
}
5571
 
5572
.review-tb {
5573
    margin: 0 0 10px;
5574
    padding-left: 20px;
5575
}
5576
 
5577
.noreview ul li i {
5578
    color: #b2b2b2;
5579
}
5580
 
5581
.mngdetl {
5582
    border-bottom: none;
5583
}
5584
 
5585
.post-reply {
5586
    padding-top: 0;
5587
    padding-bottom: 0;
5588
}
5589
 
5590
.activebidbtn i:hover {
5591
    background-color: #e44d3a;
5592
    color: #fff;
5593
    border: none;
5594
}
5595
 
5596
.reviewtitle h2 {
5597
    font-size: 17px;
5598
    font-weight: 600;
5599
}
5600
 
5601
.horiline {
5602
    width: 118%;
5603
    position: relative;
5604
    left: -40px;
5605
}
5606
 
5607
.tahnks {
5608
    font-weight: 500;
5609
    margin-top: 5px;
5610
}
5611
 
5612
/*about-page*/
5613
 
5614
.banner span {
5615
    position: absolute;
5616
    display: flex;
5617
    background-color: #222;
5618
    width: 100%;
5619
    opacity: 0.9;
5620
    justify-content: center;
5621
    padding: 10px;
5622
    margin-top: 0;
5623
    color: #fff;
5624
}
5625
 
5626
.innertitle {
5627
    margin-top: 130px;
5628
}
5629
 
5630
.Company-overview {
5631
    padding-bottom: 50px;
5632
}
5633
 
5634
.bennertext {
5635
    position: absolute;
5636
    left: 20%;
5637
    right: 20%;
5638
    text-align: center;
5639
}
5640
 
5641
.bannerimage img {
5642
    height: 100%;
5643
}
5644
 
5645
.innertitle h2 {
5646
    color: #fff;
5647
    font-size: 30px;
5648
    line-height: 32px;
5649
    font-weight: 600;
5650
    margin-bottom: 20px;
5651
}
5652
 
5653
.innertitle p {
5654
    color: #fff;
5655
    font-size: 16px;
5656
}
5657
 
5658
.Company-overview h2 {
5659
    padding-top: 100px;
5660
    font-size: 24px;
5661
    font-weight: 600;
5662
    padding-bottom: 12px;
5663
}
5664
 
5665
.Company-overview p {
5666
    font-size: 15px;
5667
    font-weight: 500;
5668
}
5669
 
5670
.Company-overview img {
5671
    float: right;
5672
    padding-top: 25px;
5673
}
5674
 
5675
.blog {
5676
    text-align: center;
5677
    display: inline-block;
5678
    margin-bottom: 50px;
5679
}
5680
 
5681
.blog img {
5682
    padding-bottom: 30px;
5683
}
5684
 
5685
.blog h2 {
5686
    font-size: 18px;
5687
    font-weight: 600;
5688
    padding-bottom: 30px;
5689
}
5690
 
5691
.blog a {
5692
    background-color: #ff4500;
5693
    color: #fff;
5694
    padding: 7px 25px 7px 25px;
5695
    border-radius: 3px;
5696
    font-size: 16px;
5697
    font-weight: 500;
5698
}
5699
 
5700
.services {
5701
    padding-top: 80px;
5702
    padding-bottom: 80px;
5703
}
5704
 
5705
.video {
5706
    padding-bottom: 40px;
5707
}
5708
 
5709
.search-container {
5710
    text-align: center;
5711
}
5712
 
5713
.search-container input[type="text"] {
5714
    padding: 6px 15px;
5715
    margin-top: 8px;
5716
    font-size: 17px;
5717
    border: none;
5718
    height: 50px;
5719
    width: 50%;
5720
    margin-bottom: 25px;
5721
    border-top-left-radius: 3px;
5722
    border-top-right-radius: 0px;
5723
    border-bottom-left-radius: 3px;
5724
    border-bottom-right-radius: 0px;
5725
}
5726
 
5727
.searchtitle {
5728
    text-align: center;
5729
}
5730
 
5731
.searchtitle h2 {
5732
    color: #fff;
5733
    font-size: 30px;
5734
    font-weight: 400;
5735
    padding-bottom: 10px;
5736
}
5737
 
5738
.search-container button {
5739
    padding: 8px 10px;
5740
    text-align: center;
5741
    margin-top: 8px;
5742
    margin-left: -3px;
5743
    margin-right: 18px;
5744
    background: #efefef;
5745
    font-size: 17px;
5746
    border: none;
5747
    cursor: pointer;
5748
    height: 50px;
5749
    width: 6%;
5750
    border-bottom-right-radius: 3px;
5751
    border-top-right-radius: 3px;
5752
}
5753
 
5754
.topsearch i {
5755
    color: #e44d3a;
5756
}
5757
 
5758
.dropdown-toggle::after {
5759
    position: absolute;
5760
    right: 15px;
5761
    color: #b2b2b2;
5762
    top: 7px;
5763
}
5764
 
5765
.help-paddy {
5766
    padding: 0 !important;
5767
}
5768
 
5769
.paddy {
5770
    padding: 20px;
5771
    float: left;
5772
}
5773
 
5774
.dropdown-menu {
5775
    position: absolute;
5776
    top: 100%;
5777
    left: 0;
5778
    z-index: 1000;
5779
    display: none;
5780
    float: left;
5781
    min-width: 10rem;
5782
    padding: 0.5rem 0;
5783
    margin: 0.125rem 0 0;
5784
    font-size: 1rem;
5785
    color: #212529;
5786
    text-align: left;
5787
    list-style: none;
5788
    background-color: #fff;
5789
    width: 100%;
5790
    background-clip: padding-box;
5791
    border: none;
5792
    border-radius: 0.25rem;
5793
}
5794
 
5795
.radio-form p {
5796
    display: -webkit-inline-box;
5797
}
5798
 
5799
.dropdown a {
5800
    color: #000000;
5801
    font-size: 16px;
5802
    font-weight: 400;
5803
    padding: 0 20px;
5804
}
5805
 
5806
.accountnone {
5807
    border: none;
5808
}
5809
 
5810
.helpforum {
5811
    background-color: #fff;
5812
    padding: 15px 0;
5813
    box-shadow: 0px 2px #c6c6c6;
5814
}
5815
 
5816
.helpforum h3 {
5817
    font-size: 18px;
5818
    font-weight: 600;
5819
}
5820
 
5821
.helpforum a {
5822
    background-color: #e44d3a;
5823
    color: #fff;
5824
    padding: 10px 15px 10px 15px;
5825
    line-height: 4;
5826
    border-radius: 3px;
5827
}
5828
 
5829
.helpforum p {
5830
    line-height: 3;
5831
}
5832
 
5833
.actionstitle h3 {
5834
    font-size: 18px;
5835
    font-weight: 400;
5836
    color: #000;
5837
    padding-top: 30px;
5838
}
5839
 
5840
.actionstitle img {
5841
    padding-right: 10px;
5842
}
5843
 
5844
.actionstext a {
5845
    font-size: 16px;
5846
    font-weight: 500;
5847
    color: #e44d3a;
5848
    line-height: 2;
5849
    display: block;
5850
}
5851
 
5852
.helpform {
5853
    text-align: center;
5854
    padding-top: 70px;
5855
}
5856
 
5857
.helpform h3 {
5858
    font-size: 18px;
5859
    font-weight: 400;
5860
    color: #e44d3a;
5861
    margin-bottom: 10px;
5862
}
5863
 
5864
.helpform a {
5865
    background-color: #e44d3a;
5866
    color: #fff;
5867
    padding: 10px 15px 10px 15px;
5868
    border-radius: 3px;
5869
}
5870
 
5871
.helpform p {
5872
    margin-bottom: 30px;
5873
}
5874
 
5875
.helpform img {
5876
    float: unset;
5877
    padding-bottom: 10px;
5878
}
5879
 
5880
.bookingsideber h3 {
5881
    color: #000;
5882
}
5883
 
5884
.bookingsideber h3:active {
5885
    color: #e44d3a;
5886
}
5887
 
5888
.helpforum h4 {
5889
    font-size: 16px;
5890
    font-weight: 600;
5891
}
5892
 
5893
.bloktext {
5894
    padding-left: 25px;
5895
}
5896
 
5897
.privacy {
5898
    background-color: #fff;
5899
    height: 850px;
5900
}
5901
 
5902
.privacydropd .dropdown-toggle::after {
5903
    float: right;
5904
    vertical-align: 0.255em;
5905
}
5906
 
5907
/* .checkbox {} */
5908
 
5909
.form-check {
5910
    padding-left: 0;
5911
}
5912
 
5913
.btns a {
5914
    color: #000;
5915
    border: 1px solid #e5e5e5;
5916
    padding: 10px 25px 10px 25px;
5917
    margin-left: 15px;
5918
    border-radius: 5px;
5919
    font-weight: 600;
5920
}
5921
 
5922
.btns {
5923
    padding-top: 20px;
5924
}
5925
 
5926
.btns a:hover {
5927
    background-color: #e44d3a;
5928
    color: #fff;
5929
}
5930
 
5931
.privacy h3 {
5932
    font-size: 18px;
5933
    font-weight: 600;
5934
    padding-top: 18px;
5935
    margin-bottom: 10px;
5936
}
5937
 
5938
.privacy p {
5939
    padding-top: 0px;
5940
    display: inline-block;
5941
}
5942
 
5943
.form-group {
5944
    margin-bottom: 1rem;
5945
    padding-top: 0px;
5946
}
5947
 
5948
.privacy i {
5949
    float: right;
5950
    color: #e44d3a;
5951
    font-size: 20px;
5952
    font-weight: 600;
5953
}
5954
 
5955
.dropdown-menu input {
5956
    margin-right: 10px;
5957
    margin-top: 15px;
5958
}
5959
 
5960
.dropdown-menu a {
5961
    padding: 10px 0 10px 40px;
5962
    margin-bottom: 10px;
5963
}
5964
 
5965
.dropdown-menu form {
5966
    margin-bottom: 10px;
5967
    margin-top: 10px;
5968
}
5969
 
5970
.privacydropd p {
5971
    margin-left: 20px;
5972
    margin-top: 5px;
5973
}
5974
 
5975
.privabtns {
5976
    margin-top: 20px;
5977
}
5978
 
5979
.privabtns {
5980
    padding-bottom: 15px;
5981
}
5982
 
5983
.privabtns a {
5984
    margin-right: 15px;
5985
    padding: 8px 25px;
5986
    color: #000000;
5987
    border: 1px solid #e5e5e5;
5988
}
5989
 
5990
.privabtns a:hover {
5991
    color: #fff;
5992
    background-color: #e44d3a;
5993
}
5994
 
5995
.privac {
5996
    background-color: #fff;
5997
    height: 560px;
5998
    padding-top: 20px;
5999
}
6000
 
6001
.privac h3 {
6002
    font-size: 18px;
6003
    font-weight: 600;
6004
}
6005
 
6006
.bids-detail ul {
6007
    display: -webkit-inline-box;
6008
}
6009
 
6010
.bids-detail ul li {
6011
    margin-right: 30px;
6012
}
6013
 
6014
.bids-detail h3 {
6015
    font-size: 16px;
6016
    font-weight: 400;
6017
}
6018
 
6019
.bids-detail {
6020
    background-color: #fff;
6021
    padding: 20px;
6022
    margin-bottom: 25px;
6023
    box-shadow: 0px 2px #e4e4e4;
6024
}
6025
 
6026
.dropdown-menu.show {
6027
    display: contents;
6028
}
6029
 
6030
.postpaid:checked:after {
6031
    content: "\f17b";
6032
    font: normal normal normal 16px/1 "LineAwesome";
6033
    font-weight: 600;
6034
    border: 1px solid #fff;
6035
    color: #ffffff;
6036
    text-align: center;
6037
    font-size: 12px;
6038
    width: 100%;
6039
    height: 100%;
6040
    background: #e44d3a;
6041
    display: block;
6042
    border-radius: 50%;
6043
    padding-top: 3px;
6044
}
6045
 
6046
.postpaid:focus {
6047
    border: 1px solid #fff;
6048
    width: 25px;
6049
    height: 25px;
6050
}
6051
 
6052
.postpaid {
6053
    -webkit-appearance: none;
6054
    content: "";
6055
    width: 20px;
6056
    height: 20px;
6057
    border-radius: 50%;
6058
    border: 1px solid #5e5e5e;
6059
    outline: 0;
6060
    margin-right: 5px;
6061
}
6062
 
6063
/* .main-ws-sec .job-status-bar {} */
6064
 
6065
.main-ws-sec .btm-line {
6066
    padding-bottom: 20px !important;
6067
    border-bottom: 1px solid #e5e5e5 !important;
6068
    margin-bottom: 20px;
6069
}
6070
 
6071
.job-status-bar hr {
6072
    margin: 0 -40px;
6073
}
6074
 
6075
.reply-area {
6076
    padding-left: 55px;
6077
}
6078
 
6079
.reply-rply1 {
6080
    margin: 24px 0;
6081
}
6082
 
6083
.reply-area p {
6084
    padding-bottom: 10px;
6085
}
6086
 
6087
.reply-area span {
6088
    cursor: pointer;
6089
}
6090
 
6091
.reply-area span:hover {
6092
    color: #e44d3a;
6093
}
6094
 
6095
.reply-area i {
6096
    font-size: 16px;
6097
    font-weight: 600;
6098
    padding-right: 8px;
6099
}
6100
 
6101
.comment-area .la-plus-circle {
6102
    display: block;
6103
    text-align: center;
6104
    font-size: 40px;
6105
    color: #b2b2b2;
6106
}
6107
 
6108
.reply-area span {
6109
    padding-top: 5px;
6110
    color: #b2b2b2;
6111
}
6112
 
6113
.comt span {
6114
    font-size: 16px;
6115
    color: #666666;
6116
}
6117
 
6118
.comt i {
6119
    padding-right: 8px;
6120
}
6121
 
6122
.postcomment .form-control {
6123
    width: 112%;
6124
    margin-left: -50px;
6125
    background-color: #efefef;
6126
    border-radius: 3px;
6127
}
6128
 
6129
.postcomment a {
6130
    background-color: #e44d3a;
6131
    color: #fff;
6132
    padding: 9px 25px 8px 25px;
6133
    line-height: 37px;
6134
    border-radius: 3px;
6135
}
6136
 
6137
.postcomment {
6138
    padding-top: 30px;
6139
}
6140
 
6141
.widget-projectid {
6142
    padding: 15px;
6143
}
6144
 
6145
.widget-projectid h3 {
6146
    padding-bottom: 7px;
6147
    font-size: 14px;
6148
    font-weight: 600;
6149
}
6150
 
6151
.paymethd p {
6152
    color: #e44d3a;
6153
}
6154
 
6155
.copylink p {
6156
    background-color: #efefef;
6157
    padding: 7px 0 8px 10px;
6158
}
6159
 
6160
.copylink a {
6161
    background-color: #e44d3a;
6162
    color: #fff;
6163
    padding: 10px 15px 10px 15px;
6164
    border-radius: 4px;
6165
}
6166
 
6167
.copylink span {
6168
    padding: 30px 0 20px;
6169
}
6170
 
6171
.copylink i {
6172
    float: unset;
6173
    position: unset;
6174
}
6175
 
6176
.copylink .la-facebook {
6177
    background-color: #3b5998;
6178
    color: #fff;
6179
}
6180
 
6181
.copylink .la-twitter {
6182
    color: #1da1f2;
6183
}
6184
 
6185
.copylink .la-pinterest-p {
6186
    background-color: #fff;
6187
    color: #c11628;
6188
    border-radius: 50%;
6189
}
6190
 
6191
.copylink img {
6192
    padding-right: 10px;
6193
}
6194
 
6195
.freelancerbiding {
6196
    background-color: #fff;
6197
    padding-top: 20px;
6198
}
6199
 
6200
.freelancerbiding h3 {
6201
    font-size: 18px;
6202
    font-weight: 400;
6203
}
6204
 
6205
.repcent {
6206
    text-align: left;
6207
}
6208
 
6209
.bidrit {
6210
    float: right;
6211
}
6212
 
6213
.repcent i {
6214
    padding-left: 5px;
6215
}
6216
 
6217
.star {
6218
    display: inline-flex;
6219
    padding: 5px 0;
6220
}
6221
 
6222
.star li i {
6223
    color: #bfd337;
6224
}
6225
 
6226
.repcent span {
6227
    color: #51a5fb;
6228
}
6229
 
6230
.repcent p {
6231
    padding-left: 7px;
6232
}
6233
 
6234
.noreview ul li i {
6235
    color: #b2b2b2;
6236
}
6237
 
6238
.paymethd .star li i {
6239
    position: unset;
6240
    font-size: 14px;
6241
}
6242
 
6243
.paymethd .star a {
6244
    color: #51a5fb;
6245
    padding-left: 12px;
6246
}
6247
 
6248
.notice {
6249
    background-color: #ddf3ff;
6250
    padding: 15px;
6251
}
6252
 
6253
.notice span {
6254
    font-weight: 500;
6255
    padding-right: 5px;
6256
}
6257
 
6258
.delivery .input-group select {
6259
    width: 150px;
6260
    height: 50px !important;
6261
    font-size: 19px;
6262
    border: 1px solid #e5e5e5;
6263
    border-radius: 3px;
6264
}
6265
 
6266
.place-bid-btn {
6267
    font-size: 15px;
6268
    font-weight: 500;
6269
    color: #fff !important;
6270
    background-color: #e44d3a !important;
6271
    border: none;
6272
    padding: 10px;
6273
    border: 1px solid #e44d3a;
6274
    border-radius: 3px;
6275
}
6276
 
6277
.usy-dt .reply {
6278
    margin: 3px 0 0 10px;
6279
    width: 360px;
6280
    height: 40px;
6281
    background-color: #efefef;
6282
    border: 1px solid #e5e5e5;
6283
    padding-left: 10px;
6284
    border-radius: 3px;
6285
}
6286
 
6287
.replybtn {
6288
    background-color: #e44d3a;
6289
    color: #fff;
6290
    padding: 10px;
6291
    margin-left: 15px;
6292
    border-radius: 3px;
6293
}
6294
 
6295
.replybtn:hover {
6296
    color: #fff;
6297
}
6298
 
6299
.rewivew ul li {
6300
    margin-right: 5px !important;
6301
}
6302
 
6303
.security hr {
6304
    margin-right: -15px;
6305
    margin-left: -15px;
6306
}
6307
 
6308
.privacy .la-check {
6309
    float: left;
6310
    font-size: 12px;
6311
    margin: 5px 5px 0 0;
6312
    padding: 3px;
6313
    background-color: #e44d3a;
6314
    color: #fff;
6315
    border-radius: 50%;
6316
}
6317
 
6318
ul#myTab {
6319
    border-bottom: 1px solid #e5e5e5;
6320
}
6321
 
6322
.nav-tabs .nav-link {
6323
    border: none;
6324
}
6325
 
6326
.noborder {
6327
    border-bottom: none;
6328
}
6329
 
6330
.manbids {
6331
    margin-bottom: 0 !important;
6332
}
6333
 
6334
.noreply {
6335
    padding-top: 30px;
6336
}
6337
 
6338
#my-bids .nav-tabs {
6339
    margin-bottom: 20px;
6340
    margin-top: 7px;
6341
    padding-bottom: 0;
6342
}
6343
 
6344
#my-bids ul {
6345
    margin-bottom: 15px;
6346
    margin-top: 7px;
6347
    padding-bottom: 0;
6348
}
6349
 
6350
.savedjob-info p {
6351
    color: #666666;
6352
    margin-top: 5px;
6353
}
6354
 
6355
#my-bids ul li a {
6356
    color: #000000;
6357
    font-size: 16px;
6358
    font-weight: 500;
6359
}
6360
 
6361
#my-bids li a:hover {
6362
    color: #e44d3a;
6363
}
6364
 
6365
#saved-jobs ul {
6366
    margin-bottom: 20px;
6367
}
6368
 
6369
#saved-jobs ul li a {
6370
    color: #000000;
6371
    font-size: 16px;
6372
    font-weight: 500;
6373
}
6374
 
6375
#saved-jobs li a:hover {
6376
    color: #e44d3a;
6377
}
6378
 
6379
.wordpressdevlp h2 {
6380
    font-size: 18px;
6381
    font-weight: 600;
6382
    margin-bottom: 15px;
6383
}
6384
 
6385
#saved-jobs .nav-tabs .nav-item.show .nav-link,
6386
#saved-jobs .nav-tabs .nav-link.active {
6387
    background-color: inherit;
6388
    color: #e44d3a !important;
6389
    padding-bottom: 9px;
6390
    border-bottom: 2px solid #e44d3a !important;
6391
}
6392
 
6393
#my-bids .nav-tabs .nav-item.show .nav-link,
6394
#my-bids .nav-tabs .nav-link.active {
6395
    background-color: inherit;
6396
    color: #e44d3a !important;
6397
    padding-bottom: 9px;
6398
    border-bottom: 2px solid #e44d3a !important;
6399
}
6400
 
6401
.descptab li img {
6402
    float: left !important;
6403
    filter: inherit !important;
6404
}
6405
 
6406
.bklink {
6407
    border-bottom: none !important;
6408
    width: unset !important;
6409
    float: right !important;
6410
}
6411
 
6412
.bklik {
6413
    border-bottom: none !important;
6414
}
6415
 
6416
/*////////////////////////////////////////My css//////////////////////////////// //////////////////////////////////////////////////////////////////////////////*/
6417
 
6418
.savedjob-info li {
6419
    display: inline-block;
6420
    padding-left: 25px;
6421
}
6422
 
6423
.savedjob-info h3 {
6424
    font-size: 14px;
6425
    font-weight: 500;
6426
}
6427
 
6428
.settingjb ul li {
6429
    margin-right: 25px !important;
6430
}
6431
 
6432
.mangebid li {
6433
    padding-left: 0;
6434
    padding-right: 20px;
6435
    padding-top: 10px;
6436
}
6437
 
6438
.bk-links.bklink li {
6439
    padding-right: 0;
6440
}
6441
 
6442
.bidsbtn {
6443
    position: relative;
6444
}
6445
 
6446
.biddersinfo li {
6447
    padding-left: 0;
6448
    padding-right: 20px;
6449
}
6450
 
6451
#review {
6452
    background-color: #fff;
6453
    margin-bottom: 40px;
6454
}
6455
 
6456
.starreview {
6457
    padding-left: 20px;
6458
}
6459
 
6460
.replytext {
6461
    padding-bottom: 20px;
6462
}
6463
 
6464
.starrevi {
6465
    padding-left: 20px;
6466
}
6467
 
6468
.apply-jobbox {
6469
    text-align: center;
6470
}
6471
 
6472
.apply-jobbox form input {
6473
    width: 100%;
6474
    margin-top: 20px;
6475
    padding: 10px;
6476
    color: #222;
6477
    border: 1px solid #e5e5e5;
6478
    border-radius: 3px;
6479
    font-size: 14px;
6480
}
6481
 
6482
.apply-jobbox h3 {
6483
    margin: 20px 0;
6484
}
6485
 
6486
.select-files {
6487
    border: 1px solid #e5e5e5;
6488
    margin-top: 20px;
6489
    padding: 30px;
6490
    background: #efefef;
6491
}
6492
 
6493
.select-files button {
6494
    margin-bottom: 20px;
6495
    background-color: transparent;
6496
    border: 1px solid #e5e5e5;
6497
    padding: 10px 15px 10px 15px;
6498
    border-radius: 5px;
6499
    font-weight: 600;
6500
}
6501
 
6502
.select-files button:hover {
6503
    background-color: #e44d3a;
6504
    color: #fff;
6505
}
6506
 
6507
.close {
6508
    position: absolute;
6509
    right: 0px;
6510
    top: 0px;
6511
    color: #929292;
6512
    border: 1px solid;
6513
    border-radius: 50%;
6514
    height: 30px;
6515
    width: 30px;
6516
}
6517
 
6518
.mapouter iframe {
6519
    width: 100%;
6520
    height: 400px;
6521
}
6522
 
6523
.mapouter {
6524
    position: relative;
6525
    text-align: right;
6526
    height: 500px;
6527
    width: 100%;
6528
}
6529
 
6530
.gmap_canvas {
6531
    overflow: hidden;
6532
    background: none !important;
6533
}
6534
 
6535
.video-iframe {
6536
    width: 100%;
6537
    height: 400px;
6538
}
6539
 
6540
.custom-file-input {
6541
    color: transparent;
6542
    opacity: 1;
6543
    /* margin-left: 140px; */
6544
    margin-bottom: 10px;
6545
}
6546
 
6547
.custom-file-input::-webkit-file-upload-button {
6548
    visibility: hidden;
6549
}
6550
 
6551
.custom-file-input::before {
6552
    content: "Select Files";
6553
    color: #fff;
6554
    display: inline-block;
6555
    border: 1px solid #e5e5e5;
6556
    border-radius: 3px;
6557
    background: #e44d3a;
6558
    font-weight: 500;
6559
    padding: 10px 15px;
6560
    outline: none;
6561
    white-space: nowrap;
6562
    -webkit-user-select: none;
6563
    cursor: pointer;
6564
}
6565
 
6566
.custom-file-input:hover::before {
6567
    background-color: #e44d3a;
6568
    color: #fff;
6569
}
6570
 
6571
.custom-file-input:active {
6572
    outline: 0;
6573
}
6574
 
6575
.custom-file-input:active::before {
6576
    background: #e44d3a;
6577
    color: #fff;
6578
}
6579
 
6580
.bids-time {
6581
    float: right;
6582
}
6583
 
6584
.saved-post {
6585
    padding: 0;
6586
}
6587
 
6588
.saved-post p {
6589
    padding-bottom: 20px;
6590
}
6591
 
6592
.saved-info li {
6593
    padding-right: 25px;
6594
    padding-left: 0;
6595
}
6596
 
6597
.saved-btn {
6598
    padding: 0;
6599
    margin-bottom: -12px;
6600
}
6601
 
6602
.applied-post {
6603
    padding: 0;
6604
}
6605
 
6606
.post-bid {
6607
    padding: 0 !important;
6608
}
6609
 
6610
.bidsbtn {
6611
    padding-top: 0 !important;
6612
}
6613
 
6614
.active-bids {
6615
    padding: 0;
6616
}
6617
 
6618
.activ-bidinfo li {
6619
    padding-top: 10px;
6620
    padding-left: 0;
6621
    padding-right: 25px;
6622
}
6623
 
6624
.activebtn {
6625
    padding-left: 0;
6626
}
6627
 
6628
.p-all {
6629
    padding: 0px;
6630
    float: left;
6631
    width: 100%;
6632
    position: relative;
6633
}
6634
 
6635
.toggle-btn .custom-switch .custom-control-label::before {
6636
    left: -2.25rem;
6637
    width: 70px;
6638
    pointer-events: all;
6639
    border-radius: 100px;
6640
    height: 30px;
6641
    top: -1px;
6642
    box-shadow: none;
6643
}
6644
 
6645
.toggle-btn .custom-control-label::before {
6646
    position: absolute;
6647
    top: 0.25rem;
6648
    left: -1.5rem;
6649
    display: block;
6650
    width: 1rem;
6651
    height: 1rem;
6652
    pointer-events: none;
6653
    content: "";
6654
    background-color: #fff;
6655
    border: #e1e1e1 solid 2px;
6656
}
6657
 
6658
.custom-control-input:checked~.custom-control-label::before {
6659
    color: #fff;
6660
    border-color: #e44d3a;
6661
    background-color: #e44d3a;
6662
    box-shadow: none;
6663
    outline: none;
6664
}
6665
 
6666
.toggle-btn .custom-switch .custom-control-label::after {
6667
    top: calc(-1px + 2px);
6668
    left: calc(-36px + 2px);
6669
    width: calc(30px - 4px);
6670
    height: calc(30px - 4px);
6671
    background-color: #e1e1e1;
6672
    border-radius: 100%;
6673
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
6674
        -webkit-transform 0.15s ease-in-out;
6675
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
6676
        box-shadow 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, -webkit-transform 0.15s ease-in-out;
6679
}
6680
 
6681
.toggle-btn .custom-control-label::after {
6682
    position: absolute;
6683
    top: 0.25rem;
6684
    left: -1.5rem;
6685
    display: block;
6686
    width: 0;
6687
    height: 0;
6688
    content: "";
6689
    background: no-repeat 50%/50% 50%;
6690
}
6691
 
6692
.toggle-btn .custom-control-label {
6693
    position: initial;
6694
    margin-bottom: 0;
6695
    vertical-align: top;
6696
}
6697
 
6698
.toggle-btn .custom-switch .custom-control-input:checked~.custom-control-label::after {
6699
    background-color: #fff;
6700
    -webkit-transform: translateX(2.5rem);
6701
    transform: translateX(2.5rem);
6702
}
6703
 
6704
.custom-control-label {
6705
    position: relative;
6706
    margin-bottom: 0;
6707
    vertical-align: top;
6708
    line-height: 24px;
6709
    font-size: 14px;
6710
    color: #666666;
6711
}
6712
 
6713
.small-text-children p,
6714
.small-text-children span {
6715
    font-size: 0.8rem;
6716
}
6717
 
6718
.search-item-selected {
6719
    padding: 1px 10px;
6720
    background: var(--background-gray);
6721
    line-height: 1;
6722
    border-radius: 10px;
6723
    font-weight: bold;
6724
}
6725
 
6726
.row .sc-dkzDqf {
6727
    margin: 0 auto;
6728
}
6729
 
6730
.test-section .title,
6731
.test-section .description {
6732
    margin-bottom: 10px;
6733
}
6734
 
6735
.test-section .btn-danger {
6736
    margin-right: 10px;
6737
}
6738
 
6739
.test-section .panel-body {
6740
    padding: 20px 0px;
6741
}
6742
 
6743
.test-section .panel {
6744
    margin-top: 20px;
6745
    padding-bottom: 10px;
6746
}
6747
 
6748
.test-section .np-padding {
6749
    padding: 0px;
6750
}
6751
 
6752
.test-section .checkbox {
6753
    display: flex;
6754
    margin: 20px 0px;
6755
}
6756
 
6757
.test-section .option {
6758
    margin-left: 10px;
6759
}
6760
 
6761
.checkbox input[type="checkbox"],
6762
input[type="radio"] {
6763
    margin-top: 5px !important;
6764
}
6765
 
6766
.test-section h6 {
6767
    margin-bottom: 10px;
6768
    color: #0860bf;
6769
}
6770
 
6771
.wizard {
6772
    display: flex;
6773
    margin-top: 10px;
6774
}
6775
 
6776
.wizard li {
6777
    width: 50%;
6778
    display: inline-block;
6779
}
6780
 
6781
.btn-secondary:disabled,
6782
.btn-primary:disabled {
6783
    cursor: no-drop;
6784
}
6785
 
6786
.test-section .btn-primary {
6787
    margin-left: 10px;
6788
}
6789
 
6790
.previous {
6791
    text-align: left;
6792
}
6793
 
6794
.next {
6795
    text-align: right;
6796
}
6797
 
6798
.test-section .close {
6799
    border: none !important;
6800
    border-radius: 0px !important;
6801
}
6802
 
6803
.ratin-range {
6804
    display: block;
6805
}
6806
 
6807
.ratin-range li {
6808
    display: inline-block;
6809
    width: 6%;
6810
}
6811
 
6812
.ratin-range li .option {
6813
    margin-top: 2px !important;
6814
}
6815
 
6816
#react-self-evaluation .company-up-info ul {
6817
    width: 100%;
6818
    position: absolute;
6819
    float: left;
6820
    left: 0px;
6821
    bottom: 4vw;
6822
}
6823
 
6824
#react-self-evaluation .company-up-info {
6825
    padding: 30px 10px;
6826
    min-height: 20vw;
6827
    border: 1px solid #e5e5e5;
6828
}
6829
 
6830
#react-self-evaluation .company-up-info h3 {
6831
    width: 90%;
6832
    margin: 5px auto;
6833
}
6834
 
6835
.mb10 {
6836
    margin-bottom: 3vw;
6837
}
6838
 
6839
.opt-h6 {
6840
    font-weight: 600 !important;
6841
    color: #000 !important;
6842
}
6843
 
6844
// Alert notification
6845
 
6846
.alert-danger {
6847
    background-color: $danger !important;
6848
 
6849
    &:hover {
6850
        background-color: $danger-hover !important;
6851
    }
6852
}