Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5391 | Rev 5406 | 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
 
2106
 
2107
.cover-sec {
2108
    background-color: #fff;
2109
    margin-bottom: 1.5rem;
2110
    max-height: 280px;
2111
    overflow: hidden;
2112
 
2113
    img {
2114
        width: 100%;
2115
    }
2116
 
2117
    &>a {
2118
        display: inline-block;
2119
        color: #e44d3a;
2120
        font-size: 16px;
2121
        background-color: #fff;
2122
        border: 1px solid #e44d3a;
2123
        position: absolute;
2124
        top: 30px;
2125
        right: 0;
2126
        padding: 10px 15px;
2127
        font-weight: 600;
2128
        margin-right: 15px;
2129
 
2130
        i {
2131
            padding-right: 5px;
2132
        }
2133
    }
2134
}
2135
 
2136
.horizontal-list .row {
2137
    display: flex;
2138
    flex-wrap: wrap;
2139
    align-items: flex-end;
2140
    justify-content: center;
2141
    gap: 0.5rem;
2142
 
2143
    .btn {
2144
        padding: 0.2rem 0.6rem;
2145
    }
2146
}
2147
 
2148
/* ============= user_profile ============= */
2149
 
2150
.user_profile {
2151
    width: 100%;
2152
    background-color: $bg-color;
2153
    padding: 1rem 0.25rem;
2154
    border-radius: $border-radius;
2155
    border-top: 1px solid $border-primary;
2156
    border-bottom: 1px solid $border-primary;
2157
    text-align: center;
2158
    box-shadow: $shadow;
2159
    display: flex;
2160
    flex-direction: column;
2161
    justify-content: center;
2162
    align-items: center;
2163
    gap: 1rem;
2164
    position: relative;
2165
    padding-top: 120px;
2166
 
2167
    @media (min-width: 768px) {
2168
        padding-top: 1rem;
2169
    }
2170
}
2171
 
2172
.user-pro-img {
2173
    width: 100%;
2174
    text-align: center;
2175
    position: absolute;
2176
    bottom: 50%;
2177
 
2178
    @media (min-width: 768px) {
2179
        bottom: auto;
2180
        position: relative;
2181
    }
2182
 
2183
    .add-dp {
2184
        position: absolute;
2185
        top: 10px;
2186
        left: 60%;
2187
    }
2188
 
2189
    img {
2190
        width: 160px;
2191
        border-radius: 100px;
2192
        background: #fff;
2193
        box-shadow: $light-shadow;
2194
        border: 1px solid $border-primary;
2195
    }
2196
}
2197
 
2198
.add-dp {
2199
    margin: -16px;
2200
    padding: 0;
2201
 
2202
    i {
2203
        bottom: 0;
2204
        font-size: 14px;
2205
        box-shadow: none;
2206
        position: relative;
2207
        border-radius: 50px;
2208
        width: 40px;
2209
        height: 40px;
2210
        background: #0961bf;
2211
        padding: 12px;
2212
        color: #ffff;
2213
        left: 0;
2214
        top: -5px;
2215
 
2216
        &:hover {
2217
            font-size: 14px;
2218
            border: 2px solid #fff;
2219
            background: #1dac98;
2220
            padding: 11px;
2221
        }
2222
    }
2223
 
2224
    input[type="file"] {
2225
        opacity: 0;
2226
        padding: 10px 0px 9px;
2227
        display: none;
2228
    }
2229
}
2230
 
2231
.user_pro_status {
2232
    width: 100%;
2233
}
2234
 
2235
.flw-hr {
2236
    float: left;
2237
    width: 100%;
2238
    margin-bottom: 30px;
2239
}
2240
 
2241
.flw-hr li {
2242
    display: inline-block;
2243
    margin-right: 17px;
2244
}
2245
 
2246
.flw-hr li:last-child {
2247
    margin-right: 0;
2248
}
2249
 
2250
.flw-hr li a {
2251
    display: inline-block;
2252
    color: #ffffff;
2253
    font-size: 16px;
2254
    font-weight: 600;
2255
    padding: 11px 15px;
2256
}
2257
 
2258
.flw-hr li a i {
2259
    padding-right: 5px;
2260
}
2261
 
2262
.flww {
2263
    background-color: #53d690;
2264
}
2265
 
2266
.hre {
2267
    background-color: #51a5fb;
2268
}
2269
 
2270
/* =============== flw-status ============ */
2271
 
2272
.flw-status {
2273
    width: 100%;
2274
    display: flex;
2275
    justify-content: center;
2276
    gap: 1rem;
2277
 
2278
    li {
2279
        display: flex;
2280
        flex-direction: column;
2281
        gap: 0.5rem;
2282
 
2283
        span,
2284
        b {
2285
            color: $font-color;
2286
        }
2287
 
2288
        b {
2289
            font-weight: 600;
2290
        }
2291
    }
2292
}
2293
 
2294
/* ================== social_links ============= */
2295
 
2296
.social_links {
2297
    width: 100%;
2298
    text-align: left;
2299
 
2300
    li {
2301
        width: 100%;
2302
        padding: 15px 15px;
2303
        border-bottom: 1px solid #e5e5e5;
2304
 
2305
        a {
2306
            width: 100%;
2307
            color: #51a5fb;
2308
            font-size: 14px;
2309
            font-weight: 400;
2310
            text-overflow: ellipsis;
2311
            white-space: nowrap;
2312
            overflow: hidden;
2313
 
2314
            i {
2315
                padding-right: 5px;
2316
                font-size: 20px;
2317
                position: relative;
2318
                top: 3px;
2319
            }
2320
        }
2321
    }
2322
}
2323
 
2324
@media (min-width: 721px) {
2325
    .group-view-tab {
2326
        margin-left: 3.5rem;
2327
    }
2328
 
2329
    .group-view-tab span {
2330
        text-overflow: ellipsis;
2331
        white-space: nowrap;
2332
        overflow: hidden;
2333
    }
2334
}
2335
 
2336
@media (max-width: 720px) {
2337
    .group-view-tab {
2338
        margin-left: 3.5rem;
2339
    }
2340
}
2341
 
2342
.text-decoration-underline {
2343
    text-decoration: underline !important;
2344
}
2345
 
2346
.ellipsis {
2347
    text-overflow: ellipsis;
2348
    white-space: nowrap;
2349
    overflow: hidden;
2350
}
2351
 
2352
.la-globe {
2353
    color: #51a5fb;
2354
}
2355
 
2356
/* ================= user-tab-sec ============== */
2357
 
2358
.notifications-grid {
2359
    display: grid;
2360
    grid-template-columns: 1fr;
2361
    gap: 1rem;
2362
}
2363
 
2364
@media (min-width: 768px) {
2365
    .notifications-grid {
2366
        display: grid;
2367
        grid-template-columns: 30% 70%;
2368
        padding: 0 5%;
2369
    }
2370
}
2371
 
2372
.show_filters {
2373
    display: block;
2374
}
2375
 
2376
.hidden_filters {
2377
    display: none !important;
2378
}
2379
 
2380
@media (min-width: 768px) {
2381
    .show_filters {
2382
        display: none;
2383
    }
2384
 
2385
    .hidden_filters {
2386
        display: block !important;
2387
    }
2388
}
2389
 
2390
/* ================= user-tab-sec ============== */
2391
 
2392
.user-tab-sec {
2393
    width: 100%;
2394
 
2395
    h3 {
2396
        color: $title-color;
2397
        font-size: 1.5rem;
2398
        font-weight: 600;
2399
        text-transform: capitalize;
2400
    }
2401
}
2402
 
2403
.star-descp {
2404
    float: left;
2405
    width: 100%;
2406
    margin-bottom: 10px;
2407
}
2408
 
2409
.star-descp ul li {
2410
    margin-right: 5px !important;
2411
}
2412
 
2413
.star-descp>a {
2414
    float: left;
2415
    color: #51a5fb;
2416
    font-size: 18px;
2417
    font-weight: 600;
2418
    margin-left: 20px;
2419
    text-decoration: underline;
2420
}
2421
 
2422
.star-descp>a:hover {
2423
    color: #51a5fb;
2424
}
2425
 
2426
.star-descp span {
2427
    float: left;
2428
    color: #686868;
2429
    font-size: 18px;
2430
    font-weight: 600;
2431
    margin-right: 20px;
2432
}
2433
 
2434
.star-descp>ul {
2435
    float: left;
2436
}
2437
 
2438
.star-descp ul li {
2439
    display: inline-block;
2440
}
2441
 
2442
.star-descp ul li i {
2443
    color: #b7ce1f;
2444
    font-size: 16px;
2445
}
2446
 
2447
.tab-feed {
2448
    float: left;
2449
    width: 100%;
2450
    margin-bottom: 45px;
2451
    margin-top: 20px;
2452
}
2453
 
2454
.tab-feed ul {
2455
    float: left;
2456
    width: 100%;
2457
}
2458
 
2459
.tab-feed ul li {
2460
    display: inline-block;
2461
    margin-right: 35px;
2462
    text-align: center;
2463
}
2464
 
2465
.savetext ul {
2466
    border-bottom: none !important;
2467
}
2468
 
2469
.tab-feed.st2 ul li {
2470
    margin-right: 17px;
2471
}
2472
 
2473
.tab-feed ul li:last-child {
2474
    margin-right: 0;
2475
}
2476
 
2477
.tab-feed ul li.active img {
2478
    filter: grayscale(0);
2479
}
2480
 
2481
.tab-feed ul li.active span {
2482
    color: #e44d3a;
2483
}
2484
 
2485
.tab-feed ul li img {
2486
    float: none;
2487
    margin-bottom: 5px;
2488
    filter: grayscale(100%);
2489
}
2490
 
2491
.tab-feed ul li span {
2492
    display: block;
2493
    color: #b2b2b2;
2494
    font-weight: 400;
2495
    font-size: 16px;
2496
}
2497
 
2498
.tab-feed ul li:last-child {
2499
    margin-right: 0;
2500
}
2501
 
2502
/* ================ message-btn ============= */
2503
 
2504
.message-btn a {
2505
    display: inline-block;
2506
    font-size: 16px;
2507
    padding: 12px;
2508
    font-weight: 500;
2509
}
2510
 
2511
.message-btn a:hover {
2512
    color: #fff;
2513
}
2514
 
2515
.message-btn a i {
2516
    padding-right: 5px;
2517
}
2518
 
2519
/* ============== widget-portfolio ============== */
2520
 
2521
.wd-heady {
2522
    float: left;
2523
    width: 100%;
2524
    padding: 20px 20px;
2525
    border-bottom: 1px solid #e5e5e5;
2526
}
2527
 
2528
.wd-heady h3 {
2529
    color: #000000;
2530
    font-size: 18px;
2531
    font-weight: 600;
2532
    float: left;
2533
}
2534
 
2535
.wd-heady img {
2536
    float: right;
2537
}
2538
 
2539
.pf-gallery {
2540
    float: left;
2541
    width: 100%;
2542
    padding: 15px 15px;
2543
}
2544
 
2545
.pf-gallery ul {
2546
    float: left;
2547
    width: 100%;
2548
}
2549
 
2550
.pf-gallery ul li {
2551
    float: left;
2552
    width: 33.33%;
2553
    padding: 5px;
2554
    overflow: hidden;
2555
}
2556
 
2557
.pf-gallery ul li:hover {
2558
    -webkit-transform: scale(1.2);
2559
    -moz-transform: scale(1.2);
2560
    -ms-transform: scale(1.2);
2561
    -o-transform: scale(1.2);
2562
    transform: scale(1.2);
2563
}
2564
 
2565
.pf-gallery img {
2566
    width: 100%;
2567
}
2568
 
2569
.product-feed-tab {
2570
    display: flex;
2571
    flex-direction: column;
2572
    gap: 0.5rem;
2573
}
2574
 
2575
.product-feed-tab.current {
2576
    display: block;
2577
}
2578
 
2579
// Daily pulse
2580
 
2581
.daily_pulse-widget {
2582
    background: $bg-color;
2583
    box-shadow: $light-shadow;
2584
    border-radius: $border-radius;
2585
    border: 1px solid $border-primary;
2586
    flex-direction: column;
2587
    display: flex;
2588
    height: fit-content;
2589
    padding: 1rem 0.5rem;
2590
    gap: .5rem;
2591
 
2592
    h3 {
2593
        color: $title-color;
2594
        font-weight: 700;
2595
        font-size: 1.1rem;
2596
    }
2597
 
2598
    span {
2599
        color: $subtitle-color;
2600
        font-weight: 600;
2601
    }
2602
}
2603
 
2604
.daily_pulse-quest {
2605
    align-items: center;
2606
    display: flex;
2607
    flex-direction: column;
2608
    gap: .5rem;
2609
 
2610
    h4 {
2611
        font-weight: 600;
2612
        color: $title-color;
2613
    }
2614
 
2615
    ul {
2616
        display: flex;
2617
        gap: .5rem;
2618
 
2619
        li {
2620
            transition: all 300ms;
2621
 
2622
            &:hover {
2623
                transform: translateY(-10px);
2624
            }
2625
        }
2626
 
2627
        img {
2628
            width: 32px;
2629
            height: 32px;
2630
            border-radius: 50%;
2631
        }
2632
    }
2633
}
2634
 
2635
/* ==================== portfolio-gallery-sec ==================== */
2636
 
2637
.portfolio-gallery-sec {
2638
    float: left;
2639
    width: 100%;
2640
    background-color: #fff;
2641
    padding: 30px 20px;
2642
    border-left: 1px solid #e4e4e4;
2643
    border-right: 1px solid #e4e4e4;
2644
    border-bottom: 1px solid #e4e4e4;
2645
}
2646
 
2647
.portfolio-gallery-sec h3 {
2648
    font-weight: 600;
2649
    font-size: 18px;
2650
    margin-bottom: 32px;
2651
    padding-left: 5px;
2652
    float: left;
2653
}
2654
 
2655
.portfolio-btn {
2656
    float: right;
2657
}
2658
 
2659
.portfolio-btn a {
2660
    display: inline-block;
2661
    color: #e44d3a;
2662
    font-size: 16px;
2663
    font-weight: 600;
2664
}
2665
 
2666
.portfolio-btn a i {
2667
    margin-right: 5px;
2668
}
2669
 
2670
.gallery_pf {
2671
    float: left;
2672
    width: 100%;
2673
    margin-bottom: -5px;
2674
}
2675
 
2676
.gallery_pf .col-lg-4 {
2677
    padding: 5px;
2678
}
2679
 
2680
.gallery_pt {
2681
    float: left;
2682
    width: 100%;
2683
    position: relative;
2684
    overflow: hidden;
2685
}
2686
 
2687
.gallery_pt:hover:before {
2688
    opacity: 1;
2689
    visibility: visible;
2690
    height: 100%;
2691
}
2692
 
2693
.gallery_pt:before {
2694
    content: "";
2695
    position: absolute;
2696
    top: 0;
2697
    left: 0;
2698
    width: 100%;
2699
    height: 0;
2700
    background-color: rgba(0, 0, 0, 0.6);
2701
    opacity: 0;
2702
    visibility: hidden;
2703
}
2704
 
2705
.gallery_pt img {
2706
    width: 100%;
2707
    height: 134px;
2708
    object-fit: cover;
2709
}
2710
 
2711
.row {
2712
    margin: 0;
2713
}
2714
 
2715
.gallery_pt>a {
2716
    position: absolute;
2717
    top: 100%;
2718
    left: 0;
2719
    float: left;
2720
    width: 100%;
2721
    text-align: center;
2722
    -webkit-transform: translateY(-50%);
2723
    -moz-transform: translateY(-50%);
2724
    -ms-transform: translateY(-50%);
2725
    -o-transform: translateY(-50%);
2726
    transform: translateY(-50%);
2727
    opacity: 0;
2728
    visibility: hidden;
2729
}
2730
 
2731
.gallery_pt:hover>a {
2732
    opacity: 1;
2733
    visibility: visible;
2734
    top: 50%;
2735
}
2736
 
2737
.gallery_pt>a img {
2738
    float: none;
2739
    width: auto;
2740
    height: auto;
2741
}
2742
 
2743
/* ============== overview-box ============= */
2744
 
2745
.overview-box {
2746
    width: 570px;
2747
    position: fixed;
2748
    top: 50%;
2749
    left: 50%;
2750
    -webkit-transform: translateX(-50%) translateY(-50%);
2751
    -moz-transform: translateX(-50%) translateY(-50%);
2752
    -ms-transform: translateX(-50%) translateY(-50%);
2753
    -o-transform: translateX(-50%) translateY(-50%);
2754
    transform: translateX(-50%) translateY(-50%);
2755
    opacity: 0;
2756
    visibility: hidden;
2757
    z-index: 0;
2758
}
2759
 
2760
.close-box {
2761
    position: absolute;
2762
    top: -20px;
2763
    right: -20px;
2764
    color: #fff;
2765
    font-size: 14px;
2766
    text-align: center;
2767
    width: 22px;
2768
    height: 22px;
2769
    line-height: 22px;
2770
    border: 1px solid #fff;
2771
    -webkit-border-radius: 100px;
2772
    -moz-border-radius: 100px;
2773
    -ms-border-radius: 100px;
2774
    -o-border-radius: 100px;
2775
    border-radius: 100px;
2776
    font-weight: 600;
2777
}
2778
 
2779
.close-box:hover {
2780
    color: #fff;
2781
}
2782
 
2783
.overview-box.open {
2784
    opacity: 1;
2785
    visibility: visible;
2786
    z-index: 99999;
2787
}
2788
 
2789
.overview-edit {
2790
    float: left;
2791
    width: 100%;
2792
    background-color: #fff;
2793
    padding: 30px 20px;
2794
}
2795
 
2796
.overview-edit h3 {
2797
    color: #000000;
2798
    font-size: 18px;
2799
    font-weight: 600;
2800
    float: left;
2801
    width: 100%;
2802
    margin-bottom: 25px;
2803
}
2804
 
2805
.overview-edit span {
2806
    color: #b2b2b2;
2807
    font-size: 12px;
2808
    float: right;
2809
    margin-bottom: 5px;
2810
}
2811
 
2812
.overview-edit form {
2813
    float: left;
2814
    width: 100%;
2815
}
2816
 
2817
.overview-edit form input {
2818
    height: 40px;
2819
    padding-left: 15px;
2820
    margin-bottom: 20px;
2821
}
2822
 
2823
.overview-edit form textarea,
2824
.overview-edit form input,
2825
.overview-edit form select {
2826
    width: 100%;
2827
    border: 1px solid #e5e5e5;
2828
    resize: none;
2829
    color: #b2b2b2;
2830
    font-size: 14px;
2831
}
2832
 
2833
.overview-edit form select {
2834
    line-height: 40px;
2835
    padding-left: 40px;
2836
    margin-bottom: 20px;
2837
}
2838
 
2839
.overview-edit form textarea {
2840
    height: 160px;
2841
    margin-bottom: 30px;
2842
    padding: 15px;
2843
}
2844
 
2845
.save {
2846
    background-color: #e44d3a;
2847
    color: #fff;
2848
    border-color: transparent;
2849
}
2850
 
2851
.save-add {
2852
    background-color: #fff;
2853
    padding: 13px 13px !important;
2854
}
2855
 
2856
.overview-edit button {
2857
    float: left;
2858
    border: 1px solid #e5e5e5;
2859
    font-weight: 600;
2860
    font-size: 16px;
2861
    padding: 13px 34px;
2862
    margin-right: 20px;
2863
    outline: none;
2864
    cursor: pointer;
2865
}
2866
 
2867
.cancel {
2868
    background-color: #fff;
2869
    color: #000;
2870
}
2871
 
2872
.datepicky {
2873
    float: left;
2874
    width: 100%;
2875
}
2876
 
2877
.no-left-pd {
2878
    padding: 0;
2879
}
2880
 
2881
.no-righ-pd {
2882
    padding-right: 0;
2883
}
2884
 
2885
.datefm {
2886
    width: 100%;
2887
    position: relative;
2888
 
2889
    i {
2890
        position: absolute;
2891
        top: 11px;
2892
        right: 15px;
2893
        font-size: 18px;
2894
        color: #b2b2b2;
2895
    }
2896
}
2897
 
2898
#location-box .datefm i {
2899
    right: auto;
2900
    left: 15px;
2901
}
2902
 
2903
#location-box .datefm input {
2904
    padding-left: 40px;
2905
}
2906
 
2907
#skills-box ul {
2908
    float: left;
2909
    width: 100%;
2910
    margin-bottom: 20px;
2911
}
2912
 
2913
#skills-box ul li {
2914
    display: inline-block;
2915
    margin-right: 10px;
2916
    position: relative;
2917
}
2918
 
2919
.skl-name {
2920
    display: inline-block;
2921
    color: #b2b2b2;
2922
    font-size: 14px;
2923
    font-weight: 500;
2924
    background-color: #e5e5e5;
2925
    -webkit-border-radius: 30px;
2926
    -moz-border-radius: 30px;
2927
    -ms-border-radius: 30px;
2928
    -o-border-radius: 30px;
2929
    border-radius: 30px;
2930
    text-transform: uppercase;
2931
    padding: 10px 30px 10px 12px;
2932
    position: relative;
2933
}
2934
 
2935
.close-skl {
2936
    position: absolute;
2937
    top: 10px;
2938
    right: 10px;
2939
    color: #b2b2b2;
2940
    font-size: 14px;
2941
}
2942
 
2943
.file-submit {
2944
    border: 1px solid #e5e5e5;
2945
    position: relative;
2946
    padding: 0px;
2947
    height: 40px;
2948
    margin-bottom: 20px;
2949
    border-radius: 3px;
2950
}
2951
 
2952
.file-submit [type="file"] {
2953
    height: 40px;
2954
    overflow: hidden;
2955
    width: 100%;
2956
    float: left;
2957
    position: absolute;
2958
    padding: 10px 4px 0px 12px;
2959
    font-size: 14px;
2960
    opacity: 0;
2961
    display: none;
2962
}
2963
 
2964
.file-submit [type="file"]+label {
2965
    background: #e44d3a;
2966
    border: none;
2967
    float: left;
2968
    border-top-right-radius: 0px;
2969
    border-bottom-right-radius: 0px;
2970
    border-top-left-radius: 3px;
2971
    border-bottom-left-radius: 3px;
2972
    color: #fff;
2973
    cursor: pointer;
2974
    /* display: inline-block; */
2975
    font-size: 14px;
2976
    font-weight: 500;
2977
    outline: none;
2978
    padding: 12px 15px;
2979
    position: relative;
2980
    transition: all 0.3s;
2981
    vertical-align: middle;
2982
    margin: 0;
2983
}
2984
 
2985
.file-submit.nomg {
2986
    border: 0;
2987
    margin-bottom: 20px;
2988
}
2989
 
2990
.file-submit.nomg input {
2991
    margin-bottom: 0;
2992
    padding-top: 0;
2993
}
2994
 
2995
.daty {
2996
    float: left;
2997
    width: 100%;
2998
    position: relative;
2999
}
3000
 
3001
.daty>i {
3002
    position: absolute;
3003
    top: 10px;
3004
    right: 15px;
3005
    color: #b2b2b2;
3006
    font-size: 20px;
3007
}
3008
 
3009
a:hover {
3010
    color: initial;
3011
}
3012
 
3013
.pf-img {
3014
    float: left;
3015
    width: 100%;
3016
    background-color: #f2f2f2;
3017
    padding: 15px;
3018
    margin-bottom: 20px;
3019
}
3020
 
3021
/* ================= billing-method ============== */
3022
 
3023
.billing-method {
3024
    float: left;
3025
    width: 100%;
3026
    background-color: #fff;
3027
    border-left: 1px solid #e4e4e4;
3028
    border-right: 1px solid #e4e4e4;
3029
    border-bottom: 1px solid #e4e4e4;
3030
    margin-bottom: 20px;
3031
}
3032
 
3033
.billing-method ul {
3034
    float: left;
3035
    width: 100%;
3036
}
3037
 
3038
.billing-method ul li {
3039
    float: left;
3040
    width: 100%;
3041
    border-bottom: 1px solid #e5e5e5;
3042
    padding: 25px 20px;
3043
}
3044
 
3045
.billing-method ul li h3 {
3046
    color: #000000;
3047
    font-size: 18px;
3048
    font-weight: 600;
3049
    float: left;
3050
}
3051
 
3052
.billing-method ul li a,
3053
.billing-method ul li span {
3054
    float: right;
3055
    color: #000000;
3056
    font-size: 13px;
3057
    text-transform: capitalize;
3058
    font-weight: 600;
3059
    margin-top: 3px;
3060
}
3061
 
3062
.billing-method ul li i {
3063
    font-size: 13px;
3064
    color: #e44d3a;
3065
}
3066
 
3067
.lt-sec {
3068
    float: left;
3069
    width: 100%;
3070
    text-align: center;
3071
    padding: 30px 0;
3072
}
3073
 
3074
.lt-sec img {
3075
    float: none;
3076
    margin-bottom: 15px;
3077
}
3078
 
3079
.lt-sec h4 {
3080
    color: #686868;
3081
    font-size: 18px;
3082
    font-weight: 600;
3083
    margin-bottom: 25px;
3084
}
3085
 
3086
.lt-sec>a {
3087
    display: inline-block;
3088
    color: #ffffff;
3089
    font-size: 16px;
3090
    background-color: #e44d3a;
3091
    padding: 10px 25px;
3092
}
3093
 
3094
/* ============== add-billing-method ============== */
3095
 
3096
.add-billing-method {
3097
    float: left;
3098
    width: 100%;
3099
    background-color: #fff;
3100
    border-left: 1px solid #e4e4e4;
3101
    border-right: 1px solid #e4e4e4;
3102
    border-bottom: 1px solid #e4e4e4;
3103
}
3104
 
3105
.add-billing-method h3 {
3106
    color: #000000;
3107
    font-size: 18px;
3108
    font-weight: 600;
3109
    padding: 20px 20px;
3110
    border-bottom: 1px solid #e5e5e5;
3111
}
3112
 
3113
.add-billing-method>h4 {
3114
    color: #686868;
3115
    font-size: 13px;
3116
    font-weight: 500;
3117
    padding: 20px 20px;
3118
    border-bottom: 1px solid #e5e5e5;
3119
    float: left;
3120
    width: 100%;
3121
}
3122
 
3123
.add-billing-method img {
3124
    margin-right: 10px;
3125
}
3126
 
3127
.add-billing-method span {
3128
    margin-top: 4px;
3129
    float: left;
3130
}
3131
 
3132
/* ============= payment_methods ============ */
3133
 
3134
.payment_methods {
3135
    float: left;
3136
    width: 100%;
3137
}
3138
 
3139
.payment_methods>h4 {
3140
    color: #000000;
3141
    font-size: 16px;
3142
    font-weight: 600;
3143
    position: relative;
3144
    padding: 25px 20px 25px 45px;
3145
    float: left;
3146
    width: 100%;
3147
}
3148
 
3149
.rowwy {
3150
    float: left;
3151
    width: 100%;
3152
}
3153
 
3154
.pd-left-none {
3155
    padding-left: 0;
3156
}
3157
 
3158
.pd-right-none {
3159
    padding-right: 0;
3160
}
3161
 
3162
.payment_methods h4:before {
3163
    content: "";
3164
    position: absolute;
3165
    top: 50%;
3166
    -webkit-transform: translateY(-50%);
3167
    -moz-transform: translateY(-50%);
3168
    -ms-transform: translateY(-50%);
3169
    -o-transform: translateY(-50%);
3170
    transform: translateY(-50%);
3171
    left: 20px;
3172
    width: 15px;
3173
    height: 15px;
3174
    border: 1px solid #e6e6e6;
3175
    -webkit-border-radius: 100px;
3176
    -moz-border-radius: 100px;
3177
    -ms-border-radius: 100px;
3178
    -o-border-radius: 100px;
3179
    border-radius: 100px;
3180
}
3181
 
3182
.payment_methods h4:after {
3183
    content: "";
3184
    position: absolute;
3185
    top: 50%;
3186
    -webkit-transform: translateY(-50%);
3187
    -moz-transform: translateY(-50%);
3188
    -ms-transform: translateY(-50%);
3189
    -o-transform: translateY(-50%);
3190
    transform: translateY(-50%);
3191
    left: 24px;
3192
    width: 7px;
3193
    height: 7px;
3194
    background-color: #e44d3a;
3195
    -webkit-border-radius: 100px;
3196
    -moz-border-radius: 100px;
3197
    -ms-border-radius: 100px;
3198
    -o-border-radius: 100px;
3199
    border-radius: 100px;
3200
}
3201
 
3202
.payment_methods form {
3203
    float: left;
3204
    width: 100%;
3205
    padding-bottom: 30px;
3206
    border-bottom: 1px solid #e5e5e5;
3207
}
3208
 
3209
.payment_methods form button {
3210
    color: #ffffff;
3211
    font-size: 16px;
3212
    background-color: #e44d3a;
3213
    padding: 10px 15px;
3214
    border: 0;
3215
    cursor: pointer;
3216
}
3217
 
3218
.payment_methods form input {
3219
    width: 100%;
3220
    height: 40px;
3221
    border: 1px solid #e5e5e5;
3222
    padding: 0 12px;
3223
}
3224
 
3225
.cc-head {
3226
    float: left;
3227
    width: 100%;
3228
    margin-bottom: 10px;
3229
}
3230
 
3231
.cc-head h5 {
3232
    float: left;
3233
    color: #000000;
3234
    font-size: 16px;
3235
    font-weight: 600;
3236
    margin-top: 4px;
3237
}
3238
 
3239
.cc-head h5 i {
3240
    color: #b2b2b2;
3241
    font-size: 14px;
3242
}
3243
 
3244
.cc-head ul {
3245
    float: right;
3246
}
3247
 
3248
.cc-head ul li {
3249
    display: inline-block;
3250
}
3251
 
3252
.inpt-field {
3253
    float: left;
3254
    width: 100%;
3255
    position: relative;
3256
    margin-bottom: 20px;
3257
}
3258
 
3259
.no-pdd {
3260
    padding: 0;
3261
}
3262
 
3263
.inpt-field.pd-moree input {
3264
    padding-left: 40px !important;
3265
}
3266
 
3267
.inpt-field i {
3268
    color: #b2b2b2;
3269
    font-size: 18px;
3270
    position: absolute;
3271
    top: 50%;
3272
    left: 15px;
3273
    transform: translateY(-50%);
3274
}
3275
 
3276
/* ============== companies-info ============== */
3277
 
3278
.companies-info {
3279
    display: flex;
3280
    flex-direction: column;
3281
    gap: 1rem;
3282
}
3283
 
3284
.title {
3285
    font-size: 1.1rem;
3286
    font-weight: 600;
3287
}
3288
 
3289
.company-title {
3290
    display: flex;
3291
    justify-content: space-between;
3292
 
3293
    h3 {
3294
        color: $title-color;
3295
        font-size: 20px;
3296
        font-weight: 600;
3297
    }
3298
}
3299
 
3300
.default-link {
3301
    color: #0860bf;
3302
}
3303
 
3304
.default-link:hover {
3305
    font-weight: bold;
3306
    color: #0860bf;
3307
    transition: all 0.5s;
3308
}
3309
 
3310
.companies-list {
3311
    width: 100%;
3312
    display: grid;
3313
    gap: 0.5rem;
3314
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
3315
    position: relative;
3316
}
3317
 
3318
.company_profile_info {
3319
    /* float: left; */
3320
    width: 100%;
3321
    background-color: #fff;
3322
    text-align: center;
3323
    border-left: 1px solid #e4e4e4;
3324
    border-right: 1px solid #e4e4e4;
3325
    border-bottom: 1px solid #e4e4e4;
3326
    margin-bottom: 30px;
3327
}
3328
 
3329
// INMAIL
3330
 
3331
.messages-line {
3332
    display: flex;
3333
    flex-direction: column-reverse;
3334
    flex: 1;
3335
    overflow: auto;
3336
}
3337
 
3338
// END INMAIL
3339
 
3340
.marketplace_card {
3341
    background: $bg-color;
3342
    border-radius: $border-radius;
3343
    display: flex;
3344
    flex-direction: column;
3345
    max-width: 250px;
3346
    overflow: hidden;
3347
    transition: all 200ms;
3348
    margin: auto;
3349
 
3350
    img {
3351
        object-fit: cover;
3352
        aspect-ratio: 4/2.5;
3353
    }
3354
 
3355
    &:hover {
3356
        transform: translateY(-1rem);
3357
        box-shadow: $light-shadow;
3358
    }
3359
 
3360
    .microlearning-up-info {
3361
        display: flex;
3362
        flex-direction: column;
3363
        gap: .5rem;
3364
        padding: 1rem .5rem;
3365
 
3366
        h3 {
3367
            color: $title-color;
3368
            font-size: 1.1rem;
3369
            font-weight: 600;
3370
        }
3371
 
3372
        h4 {
3373
            color: $subtitle-color;
3374
            font-size: .9rem;
3375
            font-weight: 500;
3376
        }
3377
 
3378
        ul {
3379
            display: flex;
3380
            gap: 1rem;
3381
 
3382
            a {
3383
                display: inline-block;
3384
                padding: 0 12px;
3385
                color: $font-color;
3386
                height: 35px;
3387
                line-height: 35px;
3388
 
3389
                i {
3390
                    font-size: 24px;
3391
                    position: relative;
3392
                    top: 3px;
3393
                }
3394
            }
3395
        }
3396
    }
3397
}
3398
 
3399
.company-up-info {
3400
    /* float: left; */
3401
    width: 100%;
3402
    padding: 20px 0;
3403
    border-bottom: 1px solid #e5e5e5;
3404
}
3405
 
3406
.company-up-info .description {
3407
    margin-bottom: 10px;
3408
}
3409
 
3410
.company-up-info img {
3411
    float: none;
3412
    margin-bottom: 10px;
3413
    -webkit-border-radius: 100px;
3414
    -moz-border-radius: 100px;
3415
    -ms-border-radius: 100px;
3416
    -o-border-radius: 100px;
3417
    border-radius: 100px;
3418
    height: 90px;
3419
    object-fit: cover;
3420
}
3421
 
3422
.company-up-info h3 {
3423
    color: #000000;
3424
    font-size: 18px;
3425
    font-weight: 600;
3426
    margin-bottom: 10px;
3427
}
3428
 
3429
.company-up-info h4 {
3430
    color: #686868;
3431
    font-size: 14px;
3432
    font-weight: 500;
3433
    margin-bottom: 21px;
3434
}
3435
 
3436
.company-up-info h6 {
3437
    color: #686868;
3438
    font-size: 15px;
3439
    font-weight: 500;
3440
    margin-bottom: 10px;
3441
}
3442
 
3443
.company-up-info ul {
3444
    /* float: left; */
3445
    width: 100%;
3446
}
3447
 
3448
.company-up-info ul li {
3449
    display: inline-block;
3450
    margin-right: 6px;
3451
}
3452
 
3453
.company-up-info ul li a i {
3454
    font-size: 24px;
3455
    position: relative;
3456
    top: 3px;
3457
}
3458
 
3459
.follow {
3460
    background-color: #53d690;
3461
}
3462
 
3463
.message-us {
3464
    background-color: #e44d3a;
3465
}
3466
 
3467
.hire-us {
3468
    background-color: #51a5fb;
3469
}
3470
 
3471
.company_profile_info .cancelButton {
3472
    display: inline-block;
3473
    color: #000000;
3474
    font-size: 16px;
3475
    font-weight: 500;
3476
    margin: 18px 0;
3477
}
3478
 
3479
/* ============= search-sec ============= */
3480
 
3481
.list-col {
3482
    display: flex;
3483
    gap: 20px;
3484
    flex-direction: column;
3485
}
3486
 
3487
.search-sec {
3488
    width: 100%;
3489
    margin-top: 15px;
3490
}
3491
 
3492
.search-box {
3493
    width: 100%;
3494
    position: relative;
5369 stevensc 3495
    background-color: $bg-color;
5363 stevensc 3496
 
3497
    input,
3498
    input:focus {
3499
        background: $bg-color;
3500
        color: $font-color;
3501
        width: 100%;
3502
        height: 40px;
3503
        padding: 0 15px;
3504
        background: var(--background-light-gray);
3505
        color: var(--gray);
3506
        font-size: 14px;
3507
        border: solid 1px $border-primary;
3508
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
3509
    }
3510
 
3511
    button {
3512
        position: absolute;
3513
        top: 0;
3514
        right: 0;
3515
        border: solid 1px $border-primary;
3516
        color: var(--gray);
3517
        font-size: 16px;
3518
        font-weight: 500;
3519
        height: 100%;
3520
        padding: 0 28px;
3521
        cursor: pointer;
3522
        border-radius: 0 4px 4px 0;
3523
    }
3524
}
3525
 
3526
 
3527
/* =============== filter-secs ============== */
3528
 
5390 stevensc 3529
.filter-form {
3530
    display: flex;
3531
    flex-direction: column;
3532
    gap: 1rem;
3533
}
3534
 
5363 stevensc 3535
.filter-secs {
3536
    width: 100%;
5390 stevensc 3537
    background-color: $bg-color;
3538
    border: 1px solid $border-primary;
3539
    border-radius: $border-radius;
3540
    box-shadow: $shadow;
5363 stevensc 3541
}
3542
 
3543
.filter-heading {
3544
    width: 100%;
5390 stevensc 3545
    padding: 1rem;
3546
    border-bottom: 1px solid $border-primary;
5363 stevensc 3547
 
5390 stevensc 3548
    h3 {
3549
        font-size: 18px;
3550
        font-weight: 600;
5391 stevensc 3551
        color: $subtitle-color;
5390 stevensc 3552
    }
5363 stevensc 3553
 
5390 stevensc 3554
    a {
3555
        font-size: 14px;
3556
        margin-top: 4px;
5391 stevensc 3557
        color: $title-color;
5390 stevensc 3558
    }
5363 stevensc 3559
}
3560
 
5390 stevensc 3561
 
5363 stevensc 3562
.filter-ttl {
3563
    width: 100%;
3564
    border-bottom: 1px solid #e5e5e5;
3565
    padding: 0 0 16px 0;
3566
    margin-bottom: 10px;
3567
 
5390 stevensc 3568
    h3 {
3569
        padding: 0;
3570
        font-size: 16px;
3571
        color: #000000;
3572
        font-weight: 400;
3573
    }
5363 stevensc 3574
 
5390 stevensc 3575
    a {
3576
        font-size: 14px;
3577
        color: #666666;
3578
    }
5363 stevensc 3579
 
5390 stevensc 3580
    .dropdown a {
3581
        color: #666666;
3582
    }
5363 stevensc 3583
}
3584
 
3585
 
3586
 
3587
.filter-dd {
3588
    float: left;
3589
    width: 100%;
3590
    margin-bottom: 15px;
3591
}
3592
 
3593
.filter-dd form {
3594
    float: left;
3595
    width: 100%;
3596
    position: relative;
3597
}
3598
 
3599
.filter-dd form input,
3600
.filter-dd form select {
3601
    width: 100%;
3602
    height: 30px;
3603
    background-color: #f2f2f2;
3604
    padding: 0 10px;
3605
    color: #b2b2b2;
3606
    font-size: 12px;
3607
    font-weight: 600;
3608
    border: 0;
3609
    border: 1px solid #e5e5e5;
3610
}
3611
 
3612
.job-tp i {
3613
    color: #666666;
3614
    position: absolute;
3615
    top: 9px;
3616
    right: 15px;
3617
    font-size: 14px;
3618
}
3619
 
3620
.avail-checks {
3621
    width: 100%;
5390 stevensc 3622
    padding: 1rem;
5363 stevensc 3623
 
5390 stevensc 3624
    input[type="radio"] {
3625
        display: none;
3626
    }
5363 stevensc 3627
 
5390 stevensc 3628
    input[type="radio"]+label span {
3629
        display: inline-block;
3630
        width: 15px;
3631
        height: 15px;
3632
        position: relative;
3633
        margin-top: 3px;
3634
        border: 1px solid #d2d2d2;
3635
        border-radius: 100px;
3636
    }
5363 stevensc 3637
 
5390 stevensc 3638
    input[type="radio"]+label span:before {
3639
        content: "";
3640
        opacity: 0;
3641
        visibility: hidden;
3642
        position: absolute;
3643
        width: 7px;
3644
        height: 7px;
3645
        border-radius: 100px;
3646
        background-color: #e44d3a;
3647
        top: 3px;
3648
        left: 3px;
3649
    }
5363 stevensc 3650
 
5390 stevensc 3651
    input[type="radio"]:checked+label span:before {
3652
        opacity: 1;
3653
        visibility: visible;
3654
    }
5363 stevensc 3655
 
5390 stevensc 3656
    small {
3657
        color: #909090;
3658
        font-size: 14px;
3659
        padding-left: 10px;
3660
        font-weight: 500;
3661
    }
5363 stevensc 3662
 
5390 stevensc 3663
    ul {
3664
        display: flex;
3665
        flex-direction: column;
3666
        gap: .5rem;
3667
    }
5363 stevensc 3668
}
3669
 
3670
 
3671
 
3672
/* =========== Range Slider ========== */
3673
 
3674
.rg-slider {
3675
    float: left;
3676
    width: 100%;
3677
}
3678
 
3679
.slider-container {
3680
    width: 100% !important;
3681
    padding-top: 50px;
3682
    position: relative;
3683
}
3684
 
3685
.theme-green .back-bar {
3686
    height: 5px;
3687
    border: 1px solid #e5e5e5;
3688
    -webkit-border-radius: 30px;
3689
    -moz-border-radius: 30px;
3690
    -ms-border-radius: 30px;
3691
    -o-border-radius: 30px;
3692
    border-radius: 30px;
3693
}
3694
 
3695
.theme-green .back-bar .pointer {
3696
    width: 17px;
3697
    height: 17px;
3698
    -webkit-border-radius: 100px;
3699
    -moz-border-radius: 100px;
3700
    -ms-border-radius: 100px;
3701
    -o-border-radius: 100px;
3702
    border-radius: 100px;
3703
    background-color: #e44d3a;
3704
    border: 2px solid #e3e3e3;
3705
    -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3706
    -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3707
    -ms-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3708
    -o-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3709
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.43);
3710
}
3711
 
3712
.theme-green .back-bar .pointer {
3713
    top: -7px;
3714
}
3715
 
3716
.slider-container .back-bar .pointer-label {
3717
    top: -50px;
3718
    height: 26px;
3719
    background-color: #e5e5e5;
3720
    -webkit-border-radius: 30px;
3721
    -moz-border-radius: 30px;
3722
    -ms-border-radius: 30px;
3723
    -o-border-radius: 30px;
3724
    border-radius: 30px;
3725
    line-height: 26px;
3726
    width: 50px;
3727
}
3728
 
3729
.pointer-label.low {
3730
    left: 0 !important;
3731
}
3732
 
3733
.pointer-label.high {
3734
    left: 70px !important;
3735
}
3736
 
3737
.pointer-label.low:before {
3738
    content: "";
3739
    position: absolute;
3740
    top: 13px;
3741
    right: -14px;
3742
    width: 8px;
3743
    height: 1px;
3744
    background-color: #e5e5e5;
3745
}
3746
 
3747
.rg-limit {
3748
    float: left;
3749
    width: 100%;
3750
    margin-top: 16px;
3751
}
3752
 
3753
.rg-limit h4 {
3754
    color: #686868;
3755
    font-size: 15px;
3756
    font-weight: 600;
3757
    float: left;
3758
}
3759
 
3760
.rg-limit h4:last-child {
3761
    float: right;
3762
}
3763
 
3764
/* ============== chatbox-list ============== */
3765
 
3766
.ext_share {
3767
    display: flex;
3768
    position: absolute;
3769
    align-items: center;
3770
    padding: 5px 1rem;
3771
    bottom: calc(100% + 0.5rem);
3772
    gap: 0.5rem;
3773
    left: 50%;
3774
    width: 16.5rem;
3775
    flex-wrap: wrap;
3776
    overflow-x: scroll;
3777
    transform: translateX(-90%);
3778
    border-radius: 20px;
3779
    background-color: #fff;
3780
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
3781
 
3782
    &.post {
3783
        transform: none;
3784
        bottom: 100%;
3785
        right: 1.5rem;
3786
        z-index: 200;
3787
    }
3788
 
3789
    @media (min-width: 768px) {
3790
        transform: translateX(-43%);
3791
    }
3792
}
3793
 
3794
.highlighted {
3795
    backdrop-filter: blur(35px);
3796
    animation: droping 1s ease infinite;
3797
}
3798
 
3799
@keyframes droping {
3800
    0% {
3801
        box-shadow: 0 0 5px #96bde9;
3802
    }
3803
 
3804
    50% {
3805
        box-shadow: 0 0 12px #96bde9;
3806
    }
3807
 
3808
    100% {
3809
        box-shadow: 0 0 5px #96bde9;
3810
    }
3811
}
3812
 
3813
.chat-mg {
3814
    display: inline-block;
3815
    position: relative;
3816
}
3817
 
3818
.chat-mg img {
3819
    width: 70px;
3820
    height: 70px;
3821
    -webkit-border-radius: 100px;
3822
    -moz-border-radius: 100px;
3823
    -ms-border-radius: 100px;
3824
    -o-border-radius: 100px;
3825
    border-radius: 100px;
3826
}
3827
 
3828
.chat-mg span {
3829
    position: absolute;
3830
    top: -5px;
3831
    right: 10px;
3832
    width: 20px;
3833
    height: 20px;
3834
    background-color: #e44d3a;
3835
    text-align: center;
3836
    font-size: 12px;
3837
    color: #fff;
3838
    line-height: 20px;
3839
    -webkit-border-radius: 100px;
3840
    -moz-border-radius: 100px;
3841
    -ms-border-radius: 100px;
3842
    -o-border-radius: 100px;
3843
    border-radius: 100px;
3844
}
3845
 
3846
.chat-mg.bx img {
3847
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3848
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3849
    -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3850
    -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3851
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
3852
}
3853
 
3854
.conversation-box {
3855
    position: absolute;
3856
    bottom: 132%;
3857
    right: 100%;
3858
    width: 350px;
3859
    background-color: #fff;
3860
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3861
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3862
    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3863
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3864
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
3865
    opacity: 0;
3866
    visibility: hidden;
3867
    z-index: 0;
3868
}
3869
 
3870
.conversation-box.active {
3871
    opacity: 1;
3872
    visibility: visible;
3873
    z-index: 9999;
3874
}
3875
 
3876
.conversation-box:before {
3877
    content: "";
3878
    position: absolute;
3879
    bottom: -7px;
3880
    right: 26px;
3881
    border-top: 15px solid #fff;
3882
    border-right: 15px solid transparent;
3883
    -webkit-transform: rotate(225deg);
3884
    -moz-transform: rotate(225deg);
3885
    -ms-transform: rotate(225deg);
3886
    -o-transform: rotate(225deg);
3887
    transform: rotate(225deg);
3888
}
3889
 
3890
.con-title {
3891
    float: left;
3892
    width: 100%;
3893
    background-color: #e44d3a;
3894
    padding: 15px 25px;
3895
    -webkit-border-radius: 10px 10px 0 0;
3896
    -moz-border-radius: 10px 10px 0 0;
3897
    -ms-border-radius: 10px 10px 0 0;
3898
    -o-border-radius: 10px 10px 0 0;
3899
    border-radius: 10px 10px 0 0;
3900
}
3901
 
3902
.con-title h3 {
3903
    float: left;
3904
    color: #ffffff;
3905
    font-size: 16px;
3906
    font-weight: 600;
3907
}
3908
 
3909
.con-title>a {
3910
    float: right;
3911
    color: #fff;
3912
    font-size: 20px;
3913
}
3914
 
3915
.chat-list {
3916
    float: left;
3917
    width: 100%;
3918
    min-height: 390px;
3919
}
3920
 
3921
.conv-list {
3922
    float: left;
3923
    width: 100%;
3924
    display: table;
3925
    padding: 20px 25px;
3926
    position: relative;
3927
}
3928
 
3929
.conv-list:hover,
3930
.conv-list.active {
3931
    background-color: #efefef;
3932
}
3933
 
3934
.msg-numbers {
3935
    position: absolute;
3936
    bottom: 18px;
3937
    right: 25px;
3938
    width: 25px;
3939
    height: 25px;
3940
    background-color: #e77667;
3941
    text-align: center;
3942
    line-height: 25px;
3943
    color: #fff;
3944
    font-size: 13px;
3945
    -webkit-border-radius: 100px;
3946
    -moz-border-radius: 100px;
3947
    -ms-border-radius: 100px;
3948
    -o-border-radius: 100px;
3949
    border-radius: 100px;
3950
}
3951
 
3952
.usrr-pic {
3953
    display: table-cell;
3954
    position: relative;
3955
}
3956
 
3957
.active-status {
3958
    width: 9px;
3959
    height: 9px;
3960
    border: 2px solid #ecf5fb;
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
    position: absolute;
3967
    top: -3px;
3968
    right: 0;
3969
}
3970
 
3971
.activee {
3972
    background-color: #e44d3a;
3973
}
3974
 
3975
.usy-info {
3976
    display: table-cell;
3977
    vertical-align: top;
3978
    width: 100%;
3979
    padding-left: 15px;
3980
}
3981
 
3982
.usy-info h3 {
3983
    color: #000000;
3984
    font-size: 18px;
3985
    font-weight: 600;
3986
    margin-bottom: 5px;
3987
}
3988
 
3989
.usy-info span {
3990
    color: #686868;
3991
    font-size: 16px;
3992
    float: left;
3993
}
3994
 
3995
.usy-info span img {
3996
    padding-left: 5px;
3997
    float: right;
3998
}
3999
 
4000
.ct-time {
4001
    position: absolute;
4002
    top: 20px;
4003
    right: 25px;
4004
}
4005
 
4006
.ct-time span {
4007
    color: #b2b2b2;
4008
    font-size: 14px;
4009
}
4010
 
4011
.st-icons {
4012
    float: right;
4013
    margin-top: 7px;
4014
}
4015
 
4016
.st-icons a {
4017
    color: #fff;
4018
    font-size: 20px;
4019
    margin-right: 5px;
4020
}
4021
 
4022
.chat-hist {
4023
    float: left;
4024
    width: 100%;
4025
    background-color: #fff;
4026
    height: 280px;
4027
}
4028
 
4029
.chat-msg {
4030
    float: left;
4031
    width: 100%;
4032
    padding-right: 25px;
4033
    margin-bottom: 15px;
4034
}
4035
 
4036
.chat-msg p {
4037
    color: #ffffff;
4038
    font-size: 14px;
4039
    background-color: #e44d3a;
4040
    line-height: 18px;
4041
    -webkit-border-radius: 15px;
4042
    -moz-border-radius: 15px;
4043
    -ms-border-radius: 15px;
4044
    -o-border-radius: 15px;
4045
    border-radius: 15px;
4046
    padding: 10px 15px;
4047
    width: 80%;
4048
    float: right;
4049
    margin-bottom: 10px;
4050
}
4051
 
4052
.mg-3 {
4053
    margin-bottom: 3px;
4054
}
4055
 
4056
.chat-msg span {
4057
    float: right;
4058
    color: #b1b1b1;
4059
    width: 100%;
4060
    font-size: 9px;
4061
    text-align: right;
4062
}
4063
 
4064
.status-info {
4065
    width: 8px;
4066
    height: 8px;
4067
    background-color: #fff;
4068
    -webkit-border-radius: 100px;
4069
    -moz-border-radius: 100px;
4070
    -ms-border-radius: 100px;
4071
    -o-border-radius: 100px;
4072
    border-radius: 100px;
4073
    display: inline-block;
4074
    margin-left: 7px;
4075
}
4076
 
4077
.chat-user-info h3 {
4078
    margin-top: 7px;
4079
    margin-left: 10px;
4080
}
4081
 
4082
.date-nd {
4083
    float: left;
4084
    width: 100%;
4085
    text-align: center;
4086
    margin-bottom: 20px;
4087
    position: relative;
4088
}
4089
 
4090
.date-nd:before,
4091
.date-nd:after {
4092
    content: "";
4093
    position: absolute;
4094
    top: 10px;
4095
    left: 15px;
4096
    width: 92px;
4097
    height: 1px;
4098
    background-color: #e5e5e5;
4099
}
4100
 
4101
.date-nd:after {
4102
    left: auto;
4103
    right: 15px;
4104
}
4105
 
4106
.date-nd span {
4107
    color: #b1b1b1;
4108
    font-size: 12px;
4109
    text-align: center;
4110
}
4111
 
4112
.chat-msg.st2 p {
4113
    background-color: #efefef;
4114
    color: #686868;
4115
    float: left;
4116
    width: 55%;
4117
}
4118
 
4119
.chat-msg.st2 {
4120
    padding-left: 25px;
4121
}
4122
 
4123
.chat-msg.st2 span {
4124
    float: left;
4125
    text-align: left;
4126
}
4127
 
4128
/* =========== typing-msg =========== */
4129
 
4130
.typing-msg {
4131
    float: left;
4132
    width: 100%;
4133
    border-top: 1px solid #e6e6e6;
4134
    padding-top: 15px;
4135
}
4136
 
4137
.typing-msg form {
4138
    float: left;
4139
    width: 100%;
4140
    position: relative;
4141
}
4142
 
4143
.typing-msg form textarea {
4144
    width: 100%;
4145
    height: 30px;
4146
    background-color: #fff;
4147
    padding: 0 20px;
4148
    color: #b2b2b2;
4149
    font-size: 16px;
4150
    border: 0;
4151
    resize: none;
4152
}
4153
 
4154
.typing-msg form button {
4155
    color: #e44d3a;
4156
    font-size: 18px;
4157
    font-weight: 600;
4158
    position: absolute;
4159
    top: 2px;
4160
    right: 20px;
4161
    background: none;
4162
    border: 0;
4163
    cursor: pointer;
4164
}
4165
 
4166
.ft-options {
4167
    float: left;
4168
    width: 100%;
4169
    padding: 0 20px 8px 20px;
4170
}
4171
 
4172
.ft-options li {
4173
    display: inline-block;
4174
    margin-right: 15px;
4175
}
4176
 
4177
.ft-options li a {
4178
    color: #b2b2b2;
4179
    font-size: 24px;
4180
    display: inline-block;
4181
}
4182
 
4183
.mCSB_scrollTools {
4184
    right: -5px;
4185
}
4186
 
4187
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
4188
    background-color: #cccccc;
4189
    width: 5px;
4190
}
4191
 
4192
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
4193
    opacity: 0;
4194
}
4195
 
4196
/* ============ Menu Btn =============*/
4197
 
4198
.menu-btn {
4199
    float: right;
4200
    display: none;
4201
}
4202
 
4203
.menu-btn a {
4204
    font-size: 24px;
4205
    color: #fff;
4206
    display: inline-block;
4207
    padding-top: 16px;
4208
    padding-left: 20px;
4209
}
4210
 
4211
/* ============= account-tabs-setting ============ */
4212
 
4213
/* .profile-account-setting {} */
4214
 
4215
.account-tabs-setting {
4216
    width: 100%;
4217
}
4218
 
4219
.account-tabs-setting h1 {
4220
    font-size: 1rem;
4221
    font-weight: 700;
4222
    margin: 2rem auto;
4223
    text-align: center;
4224
    color: $title-color;
4225
}
4226
 
4227
.acc-leftbar {
4228
    width: 100%;
4229
    background-color: $bg-color;
4230
    border: 1px solid $border-primary;
4231
    border-radius: 10px;
4232
    overflow: hidden;
4233
}
4234
 
4235
.acc-leftbar .nav-tabs>a {
4236
    border-bottom: 1px solid $border-primary;
4237
    color: $subtitle-color;
4238
    font-size: 16px;
4239
    font-weight: 700;
4240
    margin: 0 auto;
4241
    padding: 1rem 0;
4242
    width: 90%;
4243
}
4244
 
4245
.nav-tabs {
4246
    border-bottom: 0;
4247
}
4248
 
4249
.acc-leftbar .nav-tabs>a:last-child {
4250
    border-bottom: 0;
4251
}
4252
 
4253
.acc-leftbar .nav-tabs>a i {
4254
    font-size: 1.5rem;
4255
    position: relative;
4256
    width: 50px;
4257
    height: 50px;
4258
    display: inline-flex;
4259
    align-items: center;
4260
    background-color: $bg-color-secondary;
4261
    border-radius: 100px;
4262
    justify-content: center;
4263
    margin-right: 5px;
4264
}
4265
 
4266
.nav-tabs .nav-item.show .nav-link,
4267
.nav-tabs .nav-link.active {
4268
    background-color: inherit;
4269
    color: #e44d3a;
4270
    border-color: inherit;
4271
}
4272
 
4273
/* ============= acc-setting ============ */
4274
 
4275
.settings-container {
4276
    font-weight: normal;
4277
}
4278
 
4279
.settings-container h2 {
4280
    font-size: 18px;
4281
    font-weight: 600;
4282
    margin: 0.5rem auto;
4283
    color: $subtitle-color;
4284
}
4285
 
4286
.acc-setting_content {
4287
    padding: 2rem 1rem;
4288
    width: 100%;
4289
    overflow: hidden;
4290
    border-radius: 10px;
4291
    background-color: $bg-color;
4292
    border: 1px solid $border-primary;
4293
    box-shadow: 1px 0 4px var(--background-gray);
4294
}
4295
 
4296
.acc-setting {
4297
    display: flex;
4298
    flex-direction: column;
4299
    gap: 1rem;
4300
    border-radius: $border-radius;
4301
    border: 1px solid $border-primary;
4302
    padding: 1rem;
4303
    background-color: #fff;
4304
 
4305
    form {
4306
        align-items: flex-start;
4307
        display: flex;
4308
        flex-direction: column;
4309
        gap: 0.5rem;
4310
    }
4311
 
4312
    &>h3 {
4313
        color: $subtitle-color;
4314
        font-weight: 600;
4315
        font-size: 18px;
4316
    }
4317
 
4318
    .notbat {
4319
        display: flex;
4320
        justify-content: space-between;
4321
        border-top: 1px solid $border-primary;
4322
        padding: 0.5rem 1rem;
4323
        width: 100%;
4324
 
4325
        &>span {
4326
            max-width: 70%;
4327
        }
4328
    }
4329
 
4330
    .inputs__container {
4331
        display: flex;
4332
        width: 100%;
4333
        gap: 1rem;
4334
        align-items: center;
4335
        flex-wrap: wrap;
4336
    }
4337
 
4338
    .cp-field {
4339
        width: 100%;
4340
        display: flex;
4341
        flex-direction: column;
4342
        gap: 0.5rem;
4343
        align-items: flex-start;
4344
    }
4345
 
4346
    @media (min-width: 768px) {
4347
        .cp-field {
4348
            flex: 1;
4349
        }
4350
    }
4351
}
4352
 
4353
.toggle-btn {
4354
    position: absolute;
4355
    top: 35px;
4356
    right: 20px;
4357
}
4358
 
4359
/* =============== Password Update ============ */
4360
 
4361
.cp-field {
4362
    h5 {
4363
        color: $title-color;
4364
        font-size: 16px;
4365
        font-weight: 600;
4366
    }
4367
 
4368
    input,
4369
    select,
4370
    .custom-input {
4371
        height: 40px;
4372
        padding: 0 40px;
4373
    }
4374
 
4375
    input,
4376
    textarea,
4377
    select,
4378
    .custom-input {
4379
        width: 100% !important;
4380
        background-color: $bg-color !important;
4381
        color: $font-color !important;
4382
        box-shadow: 0 0 2px $border-primary !important;
4383
        border-radius: 10px !important;
4384
        border: none !important;
4385
        margin-top: 4px;
4386
    }
4387
 
4388
    textarea {
4389
        padding: 20px;
4390
        height: 115px;
4391
    }
4392
}
4393
 
4394
.cpp-fiel {
4395
    width: 100%;
4396
    position: relative;
4397
}
4398
 
4399
.cpp-fiel i {
4400
    position: absolute;
4401
    top: 12px;
4402
    left: 15px;
4403
    color: #b2b2b2;
4404
    font-size: 16px;
4405
}
4406
 
4407
/* =============== notifications-list ============= */
4408
 
4409
.notfication-details {
4410
    float: left;
4411
    width: 100%;
4412
    padding: 20px;
4413
    border-bottom: 1px solid #e5e5e5;
4414
}
4415
 
4416
.notfication-details:last-child {
4417
    border-bottom: 0;
4418
}
4419
 
4420
.noty-user-img {
4421
    float: left;
4422
    width: 35px;
4423
}
4424
 
4425
.noty-user-img img {
4426
    width: 100%;
4427
}
4428
 
4429
.notification-info {
4430
    float: left;
4431
    width: auto;
4432
    padding-left: 10px;
4433
}
4434
 
4435
.notification-info h3 {
4436
    color: #686868;
4437
    font-size: 14px;
4438
    font-weight: 500;
4439
    border: 0;
4440
    padding: 0;
4441
    margin-bottom: 6px;
4442
}
4443
 
4444
.notification-info h3 a {
4445
    color: #000000;
4446
    font-size: 16px;
4447
    font-weight: 600;
4448
    display: inline-block;
4449
}
4450
 
4451
.notification-info>span {
4452
    display: inline-block;
4453
    color: #b2b2b2;
4454
    font-size: 12px;
4455
    font-weight: 600;
4456
}
4457
 
4458
/* ============== requests-list ============== */
4459
 
4460
.requests-list {
4461
    float: left;
4462
    width: 100%;
4463
    padding-bottom: 0;
4464
}
4465
 
4466
.request-details {
4467
    float: left;
4468
    width: 100%;
4469
    padding: 20px;
4470
    border-bottom: 1px solid #e5e5e5;
4471
}
4472
 
4473
.request-details:last-child {
4474
    border-bottom: 0;
4475
}
4476
 
4477
.request-info {
4478
    float: left;
4479
    padding-left: 10px;
4480
}
4481
 
4482
.request-info h3 {
4483
    color: #000000;
4484
    font-size: 14px;
4485
    font-weight: 600;
4486
    padding: 0;
4487
    border: 0;
4488
    margin-bottom: 3px;
4489
}
4490
 
4491
.request-info span {
4492
    color: #686868;
4493
    font-size: 12px;
4494
    display: inline-block;
4495
}
4496
 
4497
.accept-feat {
4498
    float: right;
4499
}
4500
 
4501
.accept-feat ul li {
4502
    display: inline-block;
4503
}
4504
 
4505
.accept-feat ul li button {
4506
    cursor: pointer;
4507
}
4508
 
4509
.accept-req {
4510
    color: #ffffff;
4511
    font-size: 16px;
4512
    background-color: #51a5fb;
4513
    height: 30px;
4514
    padding: 0 20px;
4515
    font-weight: 600;
4516
    border: 0;
4517
    border: 1px solid #51a5fb;
4518
}
4519
 
4520
.close-req {
4521
    height: 30px;
4522
    width: 30px;
4523
    text-align: center;
4524
    line-height: 30px;
4525
    border: 1px solid #e5e5e5;
4526
    background: inherit;
4527
    color: #b2b2b2;
4528
    margin-left: 7px;
4529
}
4530
 
4531
.close-req i {
4532
    font-weight: 600;
4533
}
4534
 
4535
/* ============= Profile Sattus =========== */
4536
 
4537
.profile-bx-details {
4538
    float: left;
4539
    width: 100%;
4540
    padding: 30px 7px 30px 7px;
4541
}
4542
 
4543
.profile-bx-details .row .col-lg-3 {
4544
    padding: 0 7px;
4545
}
4546
 
4547
.profile-bx-info {
4548
    float: left;
4549
    width: 100%;
4550
    background-color: #f2f2f2;
4551
    padding: 20px;
4552
    border: 1px solid #e5e5e5;
4553
}
4554
 
4555
.pro-bx {
4556
    float: left;
4557
    width: 100%;
4558
    border-bottom: 1px solid #e5e5e5;
4559
    padding-bottom: 10px;
4560
}
4561
 
4562
.bx-info {
4563
    float: left;
4564
    margin-top: 7px;
4565
    padding-left: 10px;
4566
}
4567
 
4568
.bx-info h3 {
4569
    color: #e44d3a;
4570
    font-size: 20px;
4571
    font-weight: 600;
4572
    margin-bottom: 5px;
4573
}
4574
 
4575
.bx-info h5 {
4576
    color: #000000;
4577
    font-size: 14px;
4578
    font-weight: 600;
4579
    margin: 0;
4580
    padding: 0;
4581
    border: 0;
4582
}
4583
 
4584
.pd-left-20 {
4585
    padding-left: 20px;
4586
    padding-right: 0;
4587
}
4588
 
4589
.pd-left-15 {
4590
    padding-left: 15px;
4591
    padding-right: 0;
4592
}
4593
 
4594
.pd-left-right {
4595
    padding-left: 15px;
4596
    padding-right: 20px;
4597
}
4598
 
4599
.profile-bx-info>p {
4600
    float: left;
4601
    width: 100%;
4602
    font-size: 14px;
4603
    line-height: 20px;
4604
    padding-top: 5px;
4605
}
4606
 
4607
/* =========== pro-work-status ========= */
4608
 
4609
.pro-work-status {
4610
    float: left;
4611
    width: 100%;
4612
    padding: 0 15px;
4613
}
4614
 
4615
.pro-work-status h4 {
4616
    color: #000000;
4617
    font-size: 18px;
4618
    font-weight: 600;
4619
    margin-bottom: 50px;
4620
}
4621
 
4622
/* ============== messages-page ============== */
4623
 
4624
.messages-page {
4625
    padding: 20px 0;
4626
}
4627
 
4628
.messages-sec {
4629
    width: 100%;
4630
    border-radius: 10px;
4631
    overflow: hidden;
4632
    background-color: transparent;
4633
}
4634
 
4635
.msgs-list {
4636
    width: 100%;
4637
}
4638
 
4639
.inmail_conversations-list {
4640
    border-right: 1px solid #3333;
4641
    padding-left: 0;
4642
    padding-right: 0;
4643
}
4644
 
4645
.active-tab {
4646
    border-bottom: solid 2px #e4e4e4;
4647
}
4648
 
4649
.msg-title {
4650
    color: #000000;
4651
    font-size: 18px;
4652
    font-weight: 600;
4653
}
4654
 
4655
.date-chat {
4656
    font-size: 0.6rem;
4657
    color: var(--gray);
4658
    padding-top: 5%;
4659
}
4660
 
4661
.messages-list {
4662
    overflow-y: scroll;
4663
 
4664
    li {
4665
        cursor: pointer;
4666
 
4667
        &.active {
4668
            background-color: #efefef;
4669
        }
4670
    }
4671
}
4672
 
4673
.text-chat-title {
4674
    color: var(--gray) !important;
4675
    font-size: 1rem;
4676
}
4677
 
4678
.usr-msg-details {
4679
    display: flex;
4680
    align-items: center;
4681
    gap: 0.5rem;
4682
    padding: 0.5rem 1rem;
4683
    border-radius: $border-radius;
4684
 
4685
    &:hover,
4686
    &.is_selected {
4687
        background: $light-gray;
4688
    }
4689
 
4690
    .usr-ms-img {
4691
        width: 40px;
4692
        height: 40px;
4693
        border-radius: 50%;
4694
        overflow: hidden;
4695
 
4696
        img {
4697
            object-fit: cover;
4698
        }
4699
    }
4700
 
4701
    .usr-mg-info {
4702
        h3 {
4703
            color: $subtitle-color;
4704
            font-size: 18px;
4705
            font-weight: 600;
4706
        }
4707
 
4708
        p {
4709
            color: $font-color;
4710
            font-size: 16px;
4711
        }
4712
    }
4713
}
4714
 
4715
.msg-status {
4716
    border-radius: 100px;
4717
    background-color: #e44d3a;
4718
    position: absolute;
4719
    top: -3px;
4720
    right: 0;
4721
    width: 6px;
4722
    height: 6px;
4723
}
4724
 
4725
.messages-list ul li.active .msg-status {
4726
    border: 2px solid #ecf5fb;
4727
    height: 10px;
4728
    width: 10px;
4729
}
4730
 
4731
.msg-notifc {
4732
    position: absolute;
4733
    /* bottom: 0;
4734
    right: 0; */
4735
    width: 25px;
4736
    height: 25px;
4737
    -webkit-border-radius: 100px;
4738
    -moz-border-radius: 100px;
4739
    -ms-border-radius: 100px;
4740
    -o-border-radius: 100px;
4741
    border-radius: 100px;
4742
    background-color: #e77667;
4743
    text-align: center;
4744
    line-height: 25px;
4745
    font-size: 13px;
4746
    color: #fff;
4747
}
4748
 
4749
.posted_time {
4750
    position: absolute;
4751
    top: 2px;
4752
    right: 0;
4753
    color: #b2b2b2;
4754
    font-size: 14px;
4755
}
4756
 
4757
/* =============== main-message-box ============= */
4758
 
4759
.main-conversation-box {
4760
    width: 100%;
4761
    background-color: $bg-color;
4762
    position: relative;
4763
    height: 80vh;
4764
    display: grid;
4765
    grid-template-rows: auto 65% auto;
4766
}
4767
 
4768
.inmail-conversation-container {
4769
    width: 100%;
4770
    background-color: $bg-color;
4771
    position: relative;
4772
    height: 80vh;
4773
    gap: 0.5rem;
4774
    display: grid;
4775
    grid-template-rows: 5% 80% 15%;
4776
}
4777
 
4778
@media (min-width: 992px) {
4779
    .inmail-conversation-container {
4780
        grid-template-rows: 85% 15%;
4781
    }
4782
}
4783
 
4784
.inmail-conversation-box {
4785
    width: 100%;
4786
    position: relative;
4787
    display: grid;
4788
    grid-template-rows: auto 85%;
4789
    overflow: hidden;
4790
}
4791
 
4792
.message-bar-head {
4793
    height: 13vh;
4794
    width: 100%;
4795
    padding: 20px;
4796
    border-bottom: 1px solid $border-primary;
4797
}
4798
 
4799
.message-bar-head .usr-msg-details {
4800
    width: auto;
4801
}
4802
 
4803
.message-bar-head>a {
4804
    float: right;
4805
    color: #b2b2b2;
4806
    font-size: 20px;
4807
    padding-top: 15px;
4808
}
4809
 
4810
.main-message-box {
4811
    display: flex;
4812
    width: 100%;
4813
    position: relative;
4814
    margin-bottom: 15.5px;
4815
 
4816
    .message-inner-dt {
4817
        width: 100%;
4818
 
4819
        &>img {
4820
            display: inline-block;
4821
            width: auto;
4822
            max-height: 180px;
4823
        }
4824
 
4825
        &>p {
4826
            font-size: 14px;
4827
        }
4828
    }
4829
 
4830
    .message-dt {
4831
        border-radius: $border-radius;
4832
        border-top-left-radius: 0;
4833
        width: auto;
4834
        padding: 0.5rem;
4835
        margin-left: 15px;
4836
        background-color: $chat-send;
4837
        color: $chat-color;
4838
        box-shadow: $white-backdrop;
4839
    }
4840
 
4841
    .messg-usr-img {
4842
        margin-left: 20px;
4843
        width: 50px;
4844
    }
4845
 
4846
    .message-dt>span {
4847
        color: #b2b2b2;
4848
        font-size: 14px;
4849
        float: left;
4850
        width: 100%;
4851
        margin-top: 7px;
4852
    }
4853
 
4854
    &.ta-right {
4855
        flex-direction: row-reverse;
4856
    }
4857
 
4858
    &.ta-right .messg-usr-img {
4859
        margin-left: 0;
4860
        margin-right: 20px;
4861
    }
4862
 
4863
    &.ta-right .message-dt {
4864
        border-top-left-radius: $border-radius;
4865
        border-top-right-radius: 0;
4866
        margin-right: 15px;
4867
        background-color: $chat-received;
4868
    }
4869
 
4870
    &.ta-right .message-dt>span {
4871
        float: right;
4872
        width: auto;
4873
    }
4874
}
4875
 
4876
.messg-usr-img img {
4877
    width: 100%;
4878
    background: #fff;
4879
    border-radius: 100px;
4880
}
4881
 
4882
.img-bx {
4883
    background-color: #efefef;
4884
    padding: 20px;
4885
}
4886
 
4887
.message-dt.st3 .message-inner-dt {
4888
    &>p {
4889
        background-color: #efefef;
4890
        color: #686868;
4891
        width: auto;
4892
        padding: 10px 15px;
4893
        float: left;
4894
    }
4895
 
4896
    &>img {
4897
        float: right;
4898
        position: relative;
4899
        top: 3px;
4900
        padding-left: 5px;
4901
    }
4902
}
4903
 
4904
.main-message-box.st3 .messg-usr-img {
4905
    bottom: 13px;
4906
}
4907
 
4908
/* ============== Calendar ============ */
4909
 
4910
.calendar-event {
4911
    display: flex;
4912
    flex-direction: column;
4913
    border-radius: $border-radius;
4914
    padding: 0.5rem;
4915
}
4916
 
4917
/* ============== message-send-area ============ */
4918
 
4919
.inmail-submit-btn {
4920
    width: 6%;
4921
}
4922
 
4923
.chat-header a {
4924
    text-decoration: none;
4925
    color: var(--dark);
4926
}
4927
 
4928
.chat-header h2 {
4929
    font-weight: 700;
4930
    text-align: center;
4931
}
4932
 
4933
.chat_contacts {
4934
    background-color: $bg-color;
4935
    border-radius: $border-radius;
4936
    border: 1px solid $border-primary;
4937
    display: flex;
4938
    flex-direction: column;
4939
    height: 100%;
4940
    gap: 0.5rem;
4941
    padding: 1rem 0.5rem;
4942
    max-height: 80vh;
4943
}
4944
 
4945
.contact__search,
4946
.group__search {
4947
    display: flex;
4948
    align-items: center;
4949
    border-radius: 30px;
4950
    height: 1.5rem;
4951
    color: gray;
4952
    cursor: pointer;
4953
    transition: all 0.2s;
4954
 
4955
    &:hover {
4956
        color: #000;
4957
    }
4958
 
4959
    &>input {
4960
        display: none;
4961
        border: none;
4962
        outline: none;
4963
        background: none;
4964
    }
4965
 
4966
    &.show {
4967
        padding: 0.5rem;
4968
        background-color: #eef3f0;
4969
        width: -webkit-fill-available;
4970
 
4971
        &>input {
4972
            display: initial;
4973
        }
4974
    }
4975
}
4976
 
4977
.group__search {
4978
    flex: initial;
4979
    margin: 0 1rem;
4980
 
4981
    input {
4982
        display: initial;
4983
    }
4984
}
4985
 
4986
/* ============== forum-links ============= */
4987
 
4988
.forum-sec {
4989
    background-color: #fff;
4990
}
4991
 
4992
.forum-links {
4993
    float: left;
4994
    width: 100%;
4995
}
4996
 
4997
.forum-links.active {
4998
    opacity: 1;
4999
    visibility: visible;
5000
    z-index: 9999;
5001
}
5002
 
5003
.forum-links ul li {
5004
    display: inline-block;
5005
    padding: 20px 0;
5006
    margin-right: 45px;
5007
    border-bottom: 2px solid transparent;
5008
}
5009
 
5010
.forum-links ul li.active {
5011
    border-color: #e44d3a;
5012
}
5013
 
5014
.forum-links ul li.active a {
5015
    color: #e44d3a;
5016
}
5017
 
5018
.forum-links ul li a {
5019
    display: inline-block;
5020
    color: #b2b2b2;
5021
    font-size: 14px;
5022
    font-weight: 600;
5023
}
5024
 
5025
.forum-links-btn {
5026
    float: left;
5027
    width: 100%;
5028
    text-align: center;
5029
    display: none;
5030
    padding: 20px 0;
5031
}
5032
 
5033
.forum-links-btn a {
5034
    color: #000;
5035
    font-size: 30px;
5036
    display: inline-block;
5037
}
5038
 
5039
/* ================ forum-page =============== */
5040
 
5041
.forum-page {
5042
    padding: 50px 0;
5043
}
5044
 
5045
.forum-questions-sec {
5046
    float: left;
5047
    width: 100%;
5048
}
5049
 
5050
.forum-questions {
5051
    float: left;
5052
    width: 100%;
5053
    background-color: #fff;
5054
}
5055
 
5056
.usr-question {
5057
    float: left;
5058
    width: 100%;
5059
    position: relative;
5060
    padding: 25px;
5061
    border-bottom: 1px solid #e5e5e5;
5062
}
5063
 
5064
.usr_img {
5065
    float: left;
5066
    width: 60px;
5067
}
5068
 
5069
.usr_img img {
5070
    width: 100%;
5071
    -webkit-border-radius: 100px;
5072
    -moz-border-radius: 100px;
5073
    -ms-border-radius: 100px;
5074
    -o-border-radius: 100px;
5075
    border-radius: 100px;
5076
}
5077
 
5078
.usr_quest {
5079
    float: left;
5080
    width: 90%;
5081
    padding-left: 15px;
5082
}
5083
 
5084
.usr_quest>h3 {
5085
    color: #000000;
5086
    font-size: 17px;
5087
    font-weight: 600;
5088
    margin-bottom: 20px;
5089
}
5090
 
5091
.forum-post-view .usr_quest>h3 {
5092
    margin-bottom: 10px;
5093
}
5094
 
5095
.react-links {
5096
    float: left;
5097
    width: 100%;
5098
}
5099
 
5100
.react-links li {
5101
    display: inline-block;
5102
    margin-right: 30px;
5103
}
5104
 
5105
.react-links li a {
5106
    display: inline-block;
5107
    color: #b2b2b2;
5108
    font-size: 14px;
5109
    font-weight: 600;
5110
}
5111
 
5112
.react-links li a:hover {
5113
    color: #e44d3a;
5114
}
5115
 
5116
.react-links li a i {
5117
    padding-right: 7px;
5118
}
5119
 
5120
.react-links li:last-child {
5121
    margin-right: 0;
5122
}
5123
 
5124
/* ============= quest-tags ============ */
5125
 
5126
.quest-tags {
5127
    float: left;
5128
    width: 100%;
5129
    margin-top: 20px;
5130
}
5131
 
5132
.quest-tags li {
5133
    display: inline-block;
5134
    margin-right: 10px;
5135
}
5136
 
5137
.quest-tags li a {
5138
    display: inline-block;
5139
    color: #ffffff;
5140
    background-color: #53d690;
5141
    -webkit-border-radius: 3px;
5142
    -moz-border-radius: 3px;
5143
    -ms-border-radius: 3px;
5144
    -o-border-radius: 3px;
5145
    border-radius: 3px;
5146
    padding: 7px 25px;
5147
}
5148
 
5149
.quest-posted-time {
5150
    position: absolute;
5151
    bottom: 30px;
5152
    right: 20px;
5153
    color: #b2b2b2;
5154
    font-size: 14px;
5155
}
5156
 
5157
.quest-posted-time i {
5158
    padding-right: 5px;
5159
}
5160
 
5161
.pd-right-none {
5162
    padding-right: 0;
5163
}
5164
 
5165
/* =========== navigation ============ */
5166
 
5167
.pagination {
5168
    float: left;
5169
    width: 100%;
5170
    /* background-color: #fff; */
5171
    padding: 13px 25px;
5172
}
5173
 
5174
.full-pagi {
5175
    float: left;
5176
    width: 100%;
5177
    padding-right: 0;
5178
    text-align: inherit;
5179
    margin-top: 20px;
5180
}
5181
 
5182
.pagination li {
5183
    padding: 0;
5184
    margin-right: 10px;
5185
}
5186
 
5187
.pagination li .page-link {
5188
    /* background-color: #e5e5e5; */
5189
    color: #b2b2b2;
5190
}
5191
 
5192
.pagination li .page-link.active {
5193
    background-color: #e44d3a;
5194
    color: #fff;
5195
    border-color: transparent;
5196
}
5197
 
5198
.pvr {
5199
    padding: 0.5rem 30px;
5200
}
5201
 
5202
/* ======== next-prev ========*/
5203
 
5204
.next-prev {
5205
    float: left;
5206
    width: 100%;
5207
    background-color: #fff;
5208
    margin-top: 20px;
5209
    padding: 12px 25px;
5210
}
5211
 
5212
.next-prev>a {
5213
    width: 90px;
5214
    height: 35px;
5215
    text-align: center;
5216
    line-height: 35px;
5217
    color: #b2b2b2;
5218
    font-size: 14px;
5219
    background-color: #e5e5e5;
5220
}
5221
 
5222
.next-prev>a:hover {
5223
    color: #fff;
5224
    background-color: #e44d3a;
5225
}
5226
 
5227
.fl-left {
5228
    float: left;
5229
}
5230
 
5231
.fl-right {
5232
    float: right;
5233
}
5234
 
5235
/* ========== widget-feat ========= */
5236
 
5237
.widget-feat {
5238
    padding: 25px 20px;
5239
}
5240
 
5241
.widget-feat ul {
5242
    float: left;
5243
    width: 100%;
5244
}
5245
 
5246
.widget-feat ul li {
5247
    float: left;
5248
    width: 25%;
5249
    text-align: center;
5250
}
5251
 
5252
.widget-feat ul li i {
5253
    display: block;
5254
    font-size: 18px;
5255
    margin-bottom: 9px;
5256
}
5257
 
5258
.widget-feat ul li span {
5259
    display: block;
5260
    color: #686868;
5261
    font-size: 16px;
5262
    font-weight: 500;
5263
}
5264
 
5265
.widget-feat ul li i.fa-heart {
5266
    color: #53d690;
5267
}
5268
 
5269
.widget-feat ul li i.fa-comment {
5270
    color: #e44d3a;
5271
}
5272
 
5273
.widget-feat ul li i.fa-share-alt {
5274
    color: #51a5fb;
5275
}
5276
 
5277
.widget-feat ul li i.fa-eye {
5278
    color: #00b540;
5279
}
5280
 
5281
/* =============== ANIMATION LOADER =============== */
5282
 
5283
.spinner {
5284
    margin: 0 auto 0;
5285
    width: 80px;
5286
    text-align: center;
5287
    height: 80px;
5288
    border-radius: 100px;
5289
    background-color: #fff;
5290
    line-height: 80px;
5291
    border: 1px solid #e1e1e1;
5292
    cursor: pointer;
5293
 
5294
    &>div {
5295
        width: 15px;
5296
        height: 15px;
5297
        background-color: #b9b9b9;
5298
        border-radius: 100%;
5299
        display: inline-block;
5300
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
5301
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
5302
    }
5303
 
5304
    .bounce1 {
5305
        -webkit-animation-delay: -0.32s;
5306
        animation-delay: -0.32s;
5307
    }
5308
 
5309
    .bounce2 {
5310
        -webkit-animation-delay: -0.16s;
5311
        animation-delay: -0.16s;
5312
    }
5313
 
5314
    @keyframes sk-bouncedelay {
5315
 
5316
        0%,
5317
        80%,
5318
        100% {
5319
            -webkit-transform: scale(0);
5320
            transform: scale(0);
5321
        }
5322
 
5323
        40% {
5324
            -webkit-transform: scale(1);
5325
            transform: scale(1);
5326
        }
5327
    }
5328
}
5329
 
5330
 
5331
.wordpressdevlp {
5332
    background-color: #fff;
5333
}
5334
 
5335
.bgclr {
5336
    background-color: #fff;
5337
    margin-bottom: 15px;
5338
}
5339
 
5340
.cadidatesbtn {
5341
    position: absolute;
5342
    left: 0;
5343
    padding-top: 5px;
5344
}
5345
 
5346
.cadidatesbtn button {
5347
    background-color: #e44d3a;
5348
    border: none;
5349
    margin-top: -3px;
5350
}
5351
 
5352
.cadidatesbtn button:hover {
5353
    background-color: #e44d3a;
5354
}
5355
 
5356
.cadidatesbtn span {
5357
    background-color: #bd2e1c;
5358
    color: #fff;
5359
    margin-right: 10px;
5360
    padding: 0.25em 0.5em;
5361
    font-weight: 600;
5362
    font-size: 12px;
5363
}
5364
 
5365
.wordpressdevlp i {
5366
    color: #e86554;
5367
    font-size: 18px;
5368
    font-weight: bold;
5369
    padding-right: 5px;
5370
}
5371
 
5372
.wordpressdevlp h2 {
5373
    font-size: 18px;
5374
    font-weight: 600;
5375
}
5376
 
5377
.cadidatesbtn i {
5378
    color: #b2b2b2;
5379
    border: 1px solid #b2b2b2;
5380
    font-size: 14px;
5381
    text-align: center;
5382
    margin-left: 7px;
5383
    border-radius: 3px;
5384
    padding: 10px;
5385
}
5386
 
5387
.cadidatesbtn i:hover {
5388
    background-color: #e44d3a;
5389
    color: #fff;
5390
    border: 1px solid #e44d3a;
5391
}
5392
 
5393
.inner {
5394
    border-bottom: 2px solid #e5e5e5;
5395
    padding-bottom: 10px;
5396
}
5397
 
5398
.inner li a:hover {
5399
    color: #e44d3a;
5400
    border-bottom: 2px solid #e44d3a;
5401
    padding-bottom: 9px;
5402
}
5403
 
5404
.inner li a {
5405
    color: #000000;
5406
}
5407
 
5408
.posttext {
5409
    position: absolute;
5410
    left: 0;
5411
}
5412
 
5413
.deatile h3 {
5414
    font-size: 14px;
5415
    font-weight: bold;
5416
    padding-bottom: 5px;
5417
}
5418
 
5419
.clrbtn a {
5420
    background-color: #e44d3a;
5421
    color: #fff;
5422
    padding: 5px 10px 5px 10px;
5423
    margin-right: 15px;
5424
}
5425
 
5426
.transpairentbtn a {
5427
    color: #222;
5428
    border: 2px solid #f1f1f1;
5429
    padding: 5px 10px 5px 10px;
5430
}
5431
 
5432
.savetext h3 {
5433
    font-size: 14px;
5434
    font-weight: bold;
5435
    padding-bottom: 5px;
5436
}
5437
 
5438
.devepbtn .clrbtn {
5439
    padding: 7px 20px;
5440
}
5441
 
5442
.devepbtn a {
5443
    color: #666666;
5444
    border: 1px solid #b2b2b2;
5445
    padding: 7px 10px 7px 10px;
5446
    border-radius: 3px;
5447
    margin-right: 5px;
5448
}
5449
 
5450
.devepbtn a:hover i {
5451
    color: #fff;
5452
}
5453
 
5454
.devepbtn a:hover {
5455
    background-color: #e44d3a;
5456
    color: #fff;
5457
}
5458
 
5459
.rew-reply hr {
5460
    margin-left: -20px;
5461
    margin-right: -20px;
5462
}
5463
 
5464
.rew-reply p {
5465
    padding-left: 20px;
5466
}
5467
 
5468
.rew-reply ul {
5469
    padding-left: 20px;
5470
}
5471
 
5472
.devepbtn {
5473
    margin-top: 30px;
5474
    padding-left: 20px;
5475
}
5476
 
5477
.rep-thanks hr {
5478
    margin-right: -20px;
5479
    margin-left: -20px;
5480
}
5481
 
5482
.profilecnd {
5483
    margin-bottom: 0px;
5484
}
5485
 
5486
.devepbtn i {
5487
    color: #b2b2b2;
5488
    font-size: 14px;
5489
}
5490
 
5491
.appliedinfo {
5492
    padding-left: 0;
5493
    padding-top: 20px !important;
5494
    padding-bottom: 10px;
5495
}
5496
 
5497
.epi2 {
5498
    padding: 0;
5499
}
5500
 
5501
.review a {
5502
    line-height: 16px;
5503
    font-size: 14px;
5504
    text-decoration: none;
5505
    font-weight: 500;
5506
    margin-left: 15px;
5507
}
5508
 
5509
.add-pic-box {
5510
    display: inline-block;
5511
    color: #e44d3a;
5512
    font-size: 16px;
5513
    position: absolute;
5514
    top: 30px;
5515
    right: 0;
5516
    font-weight: 600;
5517
    margin-right: 0;
5518
    width: 100%;
5519
}
5520
 
5521
.add-pic-box [type="file"] {
5522
    height: 0;
5523
    overflow: hidden;
5524
    width: 0;
5525
    float: left;
5526
}
5527
 
5528
.add-pic-box [type="file"]+label {
5529
    background: #fff;
5530
    border: 2px solid #e44d3a;
5531
    border-radius: 3px;
5532
    color: #e44d3a;
5533
    cursor: pointer;
5534
    /* display: inline-block; */
5535
    font-size: 15px;
5536
    font-weight: 600;
5537
    outline: none;
5538
    padding: 12px 20px;
5539
    position: relative;
5540
    transition: all 0.3s;
5541
    vertical-align: middle;
5542
    margin: 0;
5543
    float: right;
5544
    text-transform: uppercase;
5545
}
5546
 
5547
.add-pic-box [type="file"]+label:hover {
5548
    background: #e44d3a;
5549
    color: #fff;
5550
}
5551
 
5552
.noreview li i {
5553
    color: #b2b2b2;
5554
}
5555
 
5556
.review-tb {
5557
    margin: 0 0 10px;
5558
    padding-left: 20px;
5559
}
5560
 
5561
.noreview ul li i {
5562
    color: #b2b2b2;
5563
}
5564
 
5565
.mngdetl {
5566
    border-bottom: none;
5567
}
5568
 
5569
.post-reply {
5570
    padding-top: 0;
5571
    padding-bottom: 0;
5572
}
5573
 
5574
.activebidbtn i:hover {
5575
    background-color: #e44d3a;
5576
    color: #fff;
5577
    border: none;
5578
}
5579
 
5580
.reviewtitle h2 {
5581
    font-size: 17px;
5582
    font-weight: 600;
5583
}
5584
 
5585
.horiline {
5586
    width: 118%;
5587
    position: relative;
5588
    left: -40px;
5589
}
5590
 
5591
.tahnks {
5592
    font-weight: 500;
5593
    margin-top: 5px;
5594
}
5595
 
5596
/*about-page*/
5597
 
5598
.banner span {
5599
    position: absolute;
5600
    display: flex;
5601
    background-color: #222;
5602
    width: 100%;
5603
    opacity: 0.9;
5604
    justify-content: center;
5605
    padding: 10px;
5606
    margin-top: 0;
5607
    color: #fff;
5608
}
5609
 
5610
.innertitle {
5611
    margin-top: 130px;
5612
}
5613
 
5614
.Company-overview {
5615
    padding-bottom: 50px;
5616
}
5617
 
5618
.bennertext {
5619
    position: absolute;
5620
    left: 20%;
5621
    right: 20%;
5622
    text-align: center;
5623
}
5624
 
5625
.bannerimage img {
5626
    height: 100%;
5627
}
5628
 
5629
.innertitle h2 {
5630
    color: #fff;
5631
    font-size: 30px;
5632
    line-height: 32px;
5633
    font-weight: 600;
5634
    margin-bottom: 20px;
5635
}
5636
 
5637
.innertitle p {
5638
    color: #fff;
5639
    font-size: 16px;
5640
}
5641
 
5642
.Company-overview h2 {
5643
    padding-top: 100px;
5644
    font-size: 24px;
5645
    font-weight: 600;
5646
    padding-bottom: 12px;
5647
}
5648
 
5649
.Company-overview p {
5650
    font-size: 15px;
5651
    font-weight: 500;
5652
}
5653
 
5654
.Company-overview img {
5655
    float: right;
5656
    padding-top: 25px;
5657
}
5658
 
5659
.blog {
5660
    text-align: center;
5661
    display: inline-block;
5662
    margin-bottom: 50px;
5663
}
5664
 
5665
.blog img {
5666
    padding-bottom: 30px;
5667
}
5668
 
5669
.blog h2 {
5670
    font-size: 18px;
5671
    font-weight: 600;
5672
    padding-bottom: 30px;
5673
}
5674
 
5675
.blog a {
5676
    background-color: #ff4500;
5677
    color: #fff;
5678
    padding: 7px 25px 7px 25px;
5679
    border-radius: 3px;
5680
    font-size: 16px;
5681
    font-weight: 500;
5682
}
5683
 
5684
.services {
5685
    padding-top: 80px;
5686
    padding-bottom: 80px;
5687
}
5688
 
5689
.video {
5690
    padding-bottom: 40px;
5691
}
5692
 
5693
.search-container {
5694
    text-align: center;
5695
}
5696
 
5697
.search-container input[type="text"] {
5698
    padding: 6px 15px;
5699
    margin-top: 8px;
5700
    font-size: 17px;
5701
    border: none;
5702
    height: 50px;
5703
    width: 50%;
5704
    margin-bottom: 25px;
5705
    border-top-left-radius: 3px;
5706
    border-top-right-radius: 0px;
5707
    border-bottom-left-radius: 3px;
5708
    border-bottom-right-radius: 0px;
5709
}
5710
 
5711
.searchtitle {
5712
    text-align: center;
5713
}
5714
 
5715
.searchtitle h2 {
5716
    color: #fff;
5717
    font-size: 30px;
5718
    font-weight: 400;
5719
    padding-bottom: 10px;
5720
}
5721
 
5722
.search-container button {
5723
    padding: 8px 10px;
5724
    text-align: center;
5725
    margin-top: 8px;
5726
    margin-left: -3px;
5727
    margin-right: 18px;
5728
    background: #efefef;
5729
    font-size: 17px;
5730
    border: none;
5731
    cursor: pointer;
5732
    height: 50px;
5733
    width: 6%;
5734
    border-bottom-right-radius: 3px;
5735
    border-top-right-radius: 3px;
5736
}
5737
 
5738
.topsearch i {
5739
    color: #e44d3a;
5740
}
5741
 
5742
.dropdown-toggle::after {
5743
    position: absolute;
5744
    right: 15px;
5745
    color: #b2b2b2;
5746
    top: 7px;
5747
}
5748
 
5749
.help-paddy {
5750
    padding: 0 !important;
5751
}
5752
 
5753
.paddy {
5754
    padding: 20px;
5755
    float: left;
5756
}
5757
 
5758
.dropdown-menu {
5759
    position: absolute;
5760
    top: 100%;
5761
    left: 0;
5762
    z-index: 1000;
5763
    display: none;
5764
    float: left;
5765
    min-width: 10rem;
5766
    padding: 0.5rem 0;
5767
    margin: 0.125rem 0 0;
5768
    font-size: 1rem;
5769
    color: #212529;
5770
    text-align: left;
5771
    list-style: none;
5772
    background-color: #fff;
5773
    width: 100%;
5774
    background-clip: padding-box;
5775
    border: none;
5776
    border-radius: 0.25rem;
5777
}
5778
 
5779
.radio-form p {
5780
    display: -webkit-inline-box;
5781
}
5782
 
5783
.dropdown a {
5784
    color: #000000;
5785
    font-size: 16px;
5786
    font-weight: 400;
5787
    padding: 0 20px;
5788
}
5789
 
5790
.accountnone {
5791
    border: none;
5792
}
5793
 
5794
.helpforum {
5795
    background-color: #fff;
5796
    padding: 15px 0;
5797
    box-shadow: 0px 2px #c6c6c6;
5798
}
5799
 
5800
.helpforum h3 {
5801
    font-size: 18px;
5802
    font-weight: 600;
5803
}
5804
 
5805
.helpforum a {
5806
    background-color: #e44d3a;
5807
    color: #fff;
5808
    padding: 10px 15px 10px 15px;
5809
    line-height: 4;
5810
    border-radius: 3px;
5811
}
5812
 
5813
.helpforum p {
5814
    line-height: 3;
5815
}
5816
 
5817
.actionstitle h3 {
5818
    font-size: 18px;
5819
    font-weight: 400;
5820
    color: #000;
5821
    padding-top: 30px;
5822
}
5823
 
5824
.actionstitle img {
5825
    padding-right: 10px;
5826
}
5827
 
5828
.actionstext a {
5829
    font-size: 16px;
5830
    font-weight: 500;
5831
    color: #e44d3a;
5832
    line-height: 2;
5833
    display: block;
5834
}
5835
 
5836
.helpform {
5837
    text-align: center;
5838
    padding-top: 70px;
5839
}
5840
 
5841
.helpform h3 {
5842
    font-size: 18px;
5843
    font-weight: 400;
5844
    color: #e44d3a;
5845
    margin-bottom: 10px;
5846
}
5847
 
5848
.helpform a {
5849
    background-color: #e44d3a;
5850
    color: #fff;
5851
    padding: 10px 15px 10px 15px;
5852
    border-radius: 3px;
5853
}
5854
 
5855
.helpform p {
5856
    margin-bottom: 30px;
5857
}
5858
 
5859
.helpform img {
5860
    float: unset;
5861
    padding-bottom: 10px;
5862
}
5863
 
5864
.bookingsideber h3 {
5865
    color: #000;
5866
}
5867
 
5868
.bookingsideber h3:active {
5869
    color: #e44d3a;
5870
}
5871
 
5872
.helpforum h4 {
5873
    font-size: 16px;
5874
    font-weight: 600;
5875
}
5876
 
5877
.bloktext {
5878
    padding-left: 25px;
5879
}
5880
 
5881
.privacy {
5882
    background-color: #fff;
5883
    height: 850px;
5884
}
5885
 
5886
.privacydropd .dropdown-toggle::after {
5887
    float: right;
5888
    vertical-align: 0.255em;
5889
}
5890
 
5891
/* .checkbox {} */
5892
 
5893
.form-check {
5894
    padding-left: 0;
5895
}
5896
 
5897
.btns a {
5898
    color: #000;
5899
    border: 1px solid #e5e5e5;
5900
    padding: 10px 25px 10px 25px;
5901
    margin-left: 15px;
5902
    border-radius: 5px;
5903
    font-weight: 600;
5904
}
5905
 
5906
.btns {
5907
    padding-top: 20px;
5908
}
5909
 
5910
.btns a:hover {
5911
    background-color: #e44d3a;
5912
    color: #fff;
5913
}
5914
 
5915
.privacy h3 {
5916
    font-size: 18px;
5917
    font-weight: 600;
5918
    padding-top: 18px;
5919
    margin-bottom: 10px;
5920
}
5921
 
5922
.privacy p {
5923
    padding-top: 0px;
5924
    display: inline-block;
5925
}
5926
 
5927
.form-group {
5928
    margin-bottom: 1rem;
5929
    padding-top: 0px;
5930
}
5931
 
5932
.privacy i {
5933
    float: right;
5934
    color: #e44d3a;
5935
    font-size: 20px;
5936
    font-weight: 600;
5937
}
5938
 
5939
.dropdown-menu input {
5940
    margin-right: 10px;
5941
    margin-top: 15px;
5942
}
5943
 
5944
.dropdown-menu a {
5945
    padding: 10px 0 10px 40px;
5946
    margin-bottom: 10px;
5947
}
5948
 
5949
.dropdown-menu form {
5950
    margin-bottom: 10px;
5951
    margin-top: 10px;
5952
}
5953
 
5954
.privacydropd p {
5955
    margin-left: 20px;
5956
    margin-top: 5px;
5957
}
5958
 
5959
.privabtns {
5960
    margin-top: 20px;
5961
}
5962
 
5963
.privabtns {
5964
    padding-bottom: 15px;
5965
}
5966
 
5967
.privabtns a {
5968
    margin-right: 15px;
5969
    padding: 8px 25px;
5970
    color: #000000;
5971
    border: 1px solid #e5e5e5;
5972
}
5973
 
5974
.privabtns a:hover {
5975
    color: #fff;
5976
    background-color: #e44d3a;
5977
}
5978
 
5979
.privac {
5980
    background-color: #fff;
5981
    height: 560px;
5982
    padding-top: 20px;
5983
}
5984
 
5985
.privac h3 {
5986
    font-size: 18px;
5987
    font-weight: 600;
5988
}
5989
 
5990
.bids-detail ul {
5991
    display: -webkit-inline-box;
5992
}
5993
 
5994
.bids-detail ul li {
5995
    margin-right: 30px;
5996
}
5997
 
5998
.bids-detail h3 {
5999
    font-size: 16px;
6000
    font-weight: 400;
6001
}
6002
 
6003
.bids-detail {
6004
    background-color: #fff;
6005
    padding: 20px;
6006
    margin-bottom: 25px;
6007
    box-shadow: 0px 2px #e4e4e4;
6008
}
6009
 
6010
.dropdown-menu.show {
6011
    display: contents;
6012
}
6013
 
6014
.postpaid:checked:after {
6015
    content: "\f17b";
6016
    font: normal normal normal 16px/1 "LineAwesome";
6017
    font-weight: 600;
6018
    border: 1px solid #fff;
6019
    color: #ffffff;
6020
    text-align: center;
6021
    font-size: 12px;
6022
    width: 100%;
6023
    height: 100%;
6024
    background: #e44d3a;
6025
    display: block;
6026
    border-radius: 50%;
6027
    padding-top: 3px;
6028
}
6029
 
6030
.postpaid:focus {
6031
    border: 1px solid #fff;
6032
    width: 25px;
6033
    height: 25px;
6034
}
6035
 
6036
.postpaid {
6037
    -webkit-appearance: none;
6038
    content: "";
6039
    width: 20px;
6040
    height: 20px;
6041
    border-radius: 50%;
6042
    border: 1px solid #5e5e5e;
6043
    outline: 0;
6044
    margin-right: 5px;
6045
}
6046
 
6047
/* .main-ws-sec .job-status-bar {} */
6048
 
6049
.main-ws-sec .btm-line {
6050
    padding-bottom: 20px !important;
6051
    border-bottom: 1px solid #e5e5e5 !important;
6052
    margin-bottom: 20px;
6053
}
6054
 
6055
.job-status-bar hr {
6056
    margin: 0 -40px;
6057
}
6058
 
6059
.reply-area {
6060
    padding-left: 55px;
6061
}
6062
 
6063
.reply-rply1 {
6064
    margin: 24px 0;
6065
}
6066
 
6067
.reply-area p {
6068
    padding-bottom: 10px;
6069
}
6070
 
6071
.reply-area span {
6072
    cursor: pointer;
6073
}
6074
 
6075
.reply-area span:hover {
6076
    color: #e44d3a;
6077
}
6078
 
6079
.reply-area i {
6080
    font-size: 16px;
6081
    font-weight: 600;
6082
    padding-right: 8px;
6083
}
6084
 
6085
.comment-area .la-plus-circle {
6086
    display: block;
6087
    text-align: center;
6088
    font-size: 40px;
6089
    color: #b2b2b2;
6090
}
6091
 
6092
.reply-area span {
6093
    padding-top: 5px;
6094
    color: #b2b2b2;
6095
}
6096
 
6097
.comt span {
6098
    font-size: 16px;
6099
    color: #666666;
6100
}
6101
 
6102
.comt i {
6103
    padding-right: 8px;
6104
}
6105
 
6106
.postcomment .form-control {
6107
    width: 112%;
6108
    margin-left: -50px;
6109
    background-color: #efefef;
6110
    border-radius: 3px;
6111
}
6112
 
6113
.postcomment a {
6114
    background-color: #e44d3a;
6115
    color: #fff;
6116
    padding: 9px 25px 8px 25px;
6117
    line-height: 37px;
6118
    border-radius: 3px;
6119
}
6120
 
6121
.postcomment {
6122
    padding-top: 30px;
6123
}
6124
 
6125
.widget-projectid {
6126
    padding: 15px;
6127
}
6128
 
6129
.widget-projectid h3 {
6130
    padding-bottom: 7px;
6131
    font-size: 14px;
6132
    font-weight: 600;
6133
}
6134
 
6135
.paymethd p {
6136
    color: #e44d3a;
6137
}
6138
 
6139
.copylink p {
6140
    background-color: #efefef;
6141
    padding: 7px 0 8px 10px;
6142
}
6143
 
6144
.copylink a {
6145
    background-color: #e44d3a;
6146
    color: #fff;
6147
    padding: 10px 15px 10px 15px;
6148
    border-radius: 4px;
6149
}
6150
 
6151
.copylink span {
6152
    padding: 30px 0 20px;
6153
}
6154
 
6155
.copylink i {
6156
    float: unset;
6157
    position: unset;
6158
}
6159
 
6160
.copylink .la-facebook {
6161
    background-color: #3b5998;
6162
    color: #fff;
6163
}
6164
 
6165
.copylink .la-twitter {
6166
    color: #1da1f2;
6167
}
6168
 
6169
.copylink .la-pinterest-p {
6170
    background-color: #fff;
6171
    color: #c11628;
6172
    border-radius: 50%;
6173
}
6174
 
6175
.copylink img {
6176
    padding-right: 10px;
6177
}
6178
 
6179
.freelancerbiding {
6180
    background-color: #fff;
6181
    padding-top: 20px;
6182
}
6183
 
6184
.freelancerbiding h3 {
6185
    font-size: 18px;
6186
    font-weight: 400;
6187
}
6188
 
6189
.repcent {
6190
    text-align: left;
6191
}
6192
 
6193
.bidrit {
6194
    float: right;
6195
}
6196
 
6197
.repcent i {
6198
    padding-left: 5px;
6199
}
6200
 
6201
.star {
6202
    display: inline-flex;
6203
    padding: 5px 0;
6204
}
6205
 
6206
.star li i {
6207
    color: #bfd337;
6208
}
6209
 
6210
.repcent span {
6211
    color: #51a5fb;
6212
}
6213
 
6214
.repcent p {
6215
    padding-left: 7px;
6216
}
6217
 
6218
.noreview ul li i {
6219
    color: #b2b2b2;
6220
}
6221
 
6222
.paymethd .star li i {
6223
    position: unset;
6224
    font-size: 14px;
6225
}
6226
 
6227
.paymethd .star a {
6228
    color: #51a5fb;
6229
    padding-left: 12px;
6230
}
6231
 
6232
.notice {
6233
    background-color: #ddf3ff;
6234
    padding: 15px;
6235
}
6236
 
6237
.notice span {
6238
    font-weight: 500;
6239
    padding-right: 5px;
6240
}
6241
 
6242
.delivery .input-group select {
6243
    width: 150px;
6244
    height: 50px !important;
6245
    font-size: 19px;
6246
    border: 1px solid #e5e5e5;
6247
    border-radius: 3px;
6248
}
6249
 
6250
.place-bid-btn {
6251
    font-size: 15px;
6252
    font-weight: 500;
6253
    color: #fff !important;
6254
    background-color: #e44d3a !important;
6255
    border: none;
6256
    padding: 10px;
6257
    border: 1px solid #e44d3a;
6258
    border-radius: 3px;
6259
}
6260
 
6261
.usy-dt .reply {
6262
    margin: 3px 0 0 10px;
6263
    width: 360px;
6264
    height: 40px;
6265
    background-color: #efefef;
6266
    border: 1px solid #e5e5e5;
6267
    padding-left: 10px;
6268
    border-radius: 3px;
6269
}
6270
 
6271
.replybtn {
6272
    background-color: #e44d3a;
6273
    color: #fff;
6274
    padding: 10px;
6275
    margin-left: 15px;
6276
    border-radius: 3px;
6277
}
6278
 
6279
.replybtn:hover {
6280
    color: #fff;
6281
}
6282
 
6283
.rewivew ul li {
6284
    margin-right: 5px !important;
6285
}
6286
 
6287
.security hr {
6288
    margin-right: -15px;
6289
    margin-left: -15px;
6290
}
6291
 
6292
.privacy .la-check {
6293
    float: left;
6294
    font-size: 12px;
6295
    margin: 5px 5px 0 0;
6296
    padding: 3px;
6297
    background-color: #e44d3a;
6298
    color: #fff;
6299
    border-radius: 50%;
6300
}
6301
 
6302
ul#myTab {
6303
    border-bottom: 1px solid #e5e5e5;
6304
}
6305
 
6306
.nav-tabs .nav-link {
6307
    border: none;
6308
}
6309
 
6310
.noborder {
6311
    border-bottom: none;
6312
}
6313
 
6314
.manbids {
6315
    margin-bottom: 0 !important;
6316
}
6317
 
6318
.noreply {
6319
    padding-top: 30px;
6320
}
6321
 
6322
#my-bids .nav-tabs {
6323
    margin-bottom: 20px;
6324
    margin-top: 7px;
6325
    padding-bottom: 0;
6326
}
6327
 
6328
#my-bids ul {
6329
    margin-bottom: 15px;
6330
    margin-top: 7px;
6331
    padding-bottom: 0;
6332
}
6333
 
6334
.savedjob-info p {
6335
    color: #666666;
6336
    margin-top: 5px;
6337
}
6338
 
6339
#my-bids ul li a {
6340
    color: #000000;
6341
    font-size: 16px;
6342
    font-weight: 500;
6343
}
6344
 
6345
#my-bids li a:hover {
6346
    color: #e44d3a;
6347
}
6348
 
6349
#saved-jobs ul {
6350
    margin-bottom: 20px;
6351
}
6352
 
6353
#saved-jobs ul li a {
6354
    color: #000000;
6355
    font-size: 16px;
6356
    font-weight: 500;
6357
}
6358
 
6359
#saved-jobs li a:hover {
6360
    color: #e44d3a;
6361
}
6362
 
6363
.wordpressdevlp h2 {
6364
    font-size: 18px;
6365
    font-weight: 600;
6366
    margin-bottom: 15px;
6367
}
6368
 
6369
#saved-jobs .nav-tabs .nav-item.show .nav-link,
6370
#saved-jobs .nav-tabs .nav-link.active {
6371
    background-color: inherit;
6372
    color: #e44d3a !important;
6373
    padding-bottom: 9px;
6374
    border-bottom: 2px solid #e44d3a !important;
6375
}
6376
 
6377
#my-bids .nav-tabs .nav-item.show .nav-link,
6378
#my-bids .nav-tabs .nav-link.active {
6379
    background-color: inherit;
6380
    color: #e44d3a !important;
6381
    padding-bottom: 9px;
6382
    border-bottom: 2px solid #e44d3a !important;
6383
}
6384
 
6385
.descptab li img {
6386
    float: left !important;
6387
    filter: inherit !important;
6388
}
6389
 
6390
.bklink {
6391
    border-bottom: none !important;
6392
    width: unset !important;
6393
    float: right !important;
6394
}
6395
 
6396
.bklik {
6397
    border-bottom: none !important;
6398
}
6399
 
6400
/*////////////////////////////////////////My css//////////////////////////////// //////////////////////////////////////////////////////////////////////////////*/
6401
 
6402
.savedjob-info li {
6403
    display: inline-block;
6404
    padding-left: 25px;
6405
}
6406
 
6407
.savedjob-info h3 {
6408
    font-size: 14px;
6409
    font-weight: 500;
6410
}
6411
 
6412
.settingjb ul li {
6413
    margin-right: 25px !important;
6414
}
6415
 
6416
.mangebid li {
6417
    padding-left: 0;
6418
    padding-right: 20px;
6419
    padding-top: 10px;
6420
}
6421
 
6422
.bk-links.bklink li {
6423
    padding-right: 0;
6424
}
6425
 
6426
.bidsbtn {
6427
    position: relative;
6428
}
6429
 
6430
.biddersinfo li {
6431
    padding-left: 0;
6432
    padding-right: 20px;
6433
}
6434
 
6435
#review {
6436
    background-color: #fff;
6437
    margin-bottom: 40px;
6438
}
6439
 
6440
.starreview {
6441
    padding-left: 20px;
6442
}
6443
 
6444
.replytext {
6445
    padding-bottom: 20px;
6446
}
6447
 
6448
.starrevi {
6449
    padding-left: 20px;
6450
}
6451
 
6452
.apply-jobbox {
6453
    text-align: center;
6454
}
6455
 
6456
.apply-jobbox form input {
6457
    width: 100%;
6458
    margin-top: 20px;
6459
    padding: 10px;
6460
    color: #222;
6461
    border: 1px solid #e5e5e5;
6462
    border-radius: 3px;
6463
    font-size: 14px;
6464
}
6465
 
6466
.apply-jobbox h3 {
6467
    margin: 20px 0;
6468
}
6469
 
6470
.select-files {
6471
    border: 1px solid #e5e5e5;
6472
    margin-top: 20px;
6473
    padding: 30px;
6474
    background: #efefef;
6475
}
6476
 
6477
.select-files button {
6478
    margin-bottom: 20px;
6479
    background-color: transparent;
6480
    border: 1px solid #e5e5e5;
6481
    padding: 10px 15px 10px 15px;
6482
    border-radius: 5px;
6483
    font-weight: 600;
6484
}
6485
 
6486
.select-files button:hover {
6487
    background-color: #e44d3a;
6488
    color: #fff;
6489
}
6490
 
6491
.close {
6492
    position: absolute;
6493
    right: 0px;
6494
    top: 0px;
6495
    color: #929292;
6496
    border: 1px solid;
6497
    border-radius: 50%;
6498
    height: 30px;
6499
    width: 30px;
6500
}
6501
 
6502
.mapouter iframe {
6503
    width: 100%;
6504
    height: 400px;
6505
}
6506
 
6507
.mapouter {
6508
    position: relative;
6509
    text-align: right;
6510
    height: 500px;
6511
    width: 100%;
6512
}
6513
 
6514
.gmap_canvas {
6515
    overflow: hidden;
6516
    background: none !important;
6517
}
6518
 
6519
.video-iframe {
6520
    width: 100%;
6521
    height: 400px;
6522
}
6523
 
6524
.custom-file-input {
6525
    color: transparent;
6526
    opacity: 1;
6527
    /* margin-left: 140px; */
6528
    margin-bottom: 10px;
6529
}
6530
 
6531
.custom-file-input::-webkit-file-upload-button {
6532
    visibility: hidden;
6533
}
6534
 
6535
.custom-file-input::before {
6536
    content: "Select Files";
6537
    color: #fff;
6538
    display: inline-block;
6539
    border: 1px solid #e5e5e5;
6540
    border-radius: 3px;
6541
    background: #e44d3a;
6542
    font-weight: 500;
6543
    padding: 10px 15px;
6544
    outline: none;
6545
    white-space: nowrap;
6546
    -webkit-user-select: none;
6547
    cursor: pointer;
6548
}
6549
 
6550
.custom-file-input:hover::before {
6551
    background-color: #e44d3a;
6552
    color: #fff;
6553
}
6554
 
6555
.custom-file-input:active {
6556
    outline: 0;
6557
}
6558
 
6559
.custom-file-input:active::before {
6560
    background: #e44d3a;
6561
    color: #fff;
6562
}
6563
 
6564
.bids-time {
6565
    float: right;
6566
}
6567
 
6568
.saved-post {
6569
    padding: 0;
6570
}
6571
 
6572
.saved-post p {
6573
    padding-bottom: 20px;
6574
}
6575
 
6576
.saved-info li {
6577
    padding-right: 25px;
6578
    padding-left: 0;
6579
}
6580
 
6581
.saved-btn {
6582
    padding: 0;
6583
    margin-bottom: -12px;
6584
}
6585
 
6586
.applied-post {
6587
    padding: 0;
6588
}
6589
 
6590
.post-bid {
6591
    padding: 0 !important;
6592
}
6593
 
6594
.bidsbtn {
6595
    padding-top: 0 !important;
6596
}
6597
 
6598
.active-bids {
6599
    padding: 0;
6600
}
6601
 
6602
.activ-bidinfo li {
6603
    padding-top: 10px;
6604
    padding-left: 0;
6605
    padding-right: 25px;
6606
}
6607
 
6608
.activebtn {
6609
    padding-left: 0;
6610
}
6611
 
6612
.p-all {
6613
    padding: 0px;
6614
    float: left;
6615
    width: 100%;
6616
    position: relative;
6617
}
6618
 
6619
.toggle-btn .custom-switch .custom-control-label::before {
6620
    left: -2.25rem;
6621
    width: 70px;
6622
    pointer-events: all;
6623
    border-radius: 100px;
6624
    height: 30px;
6625
    top: -1px;
6626
    box-shadow: none;
6627
}
6628
 
6629
.toggle-btn .custom-control-label::before {
6630
    position: absolute;
6631
    top: 0.25rem;
6632
    left: -1.5rem;
6633
    display: block;
6634
    width: 1rem;
6635
    height: 1rem;
6636
    pointer-events: none;
6637
    content: "";
6638
    background-color: #fff;
6639
    border: #e1e1e1 solid 2px;
6640
}
6641
 
6642
.custom-control-input:checked~.custom-control-label::before {
6643
    color: #fff;
6644
    border-color: #e44d3a;
6645
    background-color: #e44d3a;
6646
    box-shadow: none;
6647
    outline: none;
6648
}
6649
 
6650
.toggle-btn .custom-switch .custom-control-label::after {
6651
    top: calc(-1px + 2px);
6652
    left: calc(-36px + 2px);
6653
    width: calc(30px - 4px);
6654
    height: calc(30px - 4px);
6655
    background-color: #e1e1e1;
6656
    border-radius: 100%;
6657
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
6658
        -webkit-transform 0.15s ease-in-out;
6659
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
6660
        box-shadow 0.15s ease-in-out;
6661
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
6662
        box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
6663
}
6664
 
6665
.toggle-btn .custom-control-label::after {
6666
    position: absolute;
6667
    top: 0.25rem;
6668
    left: -1.5rem;
6669
    display: block;
6670
    width: 0;
6671
    height: 0;
6672
    content: "";
6673
    background: no-repeat 50%/50% 50%;
6674
}
6675
 
6676
.toggle-btn .custom-control-label {
6677
    position: initial;
6678
    margin-bottom: 0;
6679
    vertical-align: top;
6680
}
6681
 
6682
.toggle-btn .custom-switch .custom-control-input:checked~.custom-control-label::after {
6683
    background-color: #fff;
6684
    -webkit-transform: translateX(2.5rem);
6685
    transform: translateX(2.5rem);
6686
}
6687
 
6688
.custom-control-label {
6689
    position: relative;
6690
    margin-bottom: 0;
6691
    vertical-align: top;
6692
    line-height: 24px;
6693
    font-size: 14px;
6694
    color: #666666;
6695
}
6696
 
6697
.small-text-children p,
6698
.small-text-children span {
6699
    font-size: 0.8rem;
6700
}
6701
 
6702
.search-item-selected {
6703
    padding: 1px 10px;
6704
    background: var(--background-gray);
6705
    line-height: 1;
6706
    border-radius: 10px;
6707
    font-weight: bold;
6708
}
6709
 
6710
.row .sc-dkzDqf {
6711
    margin: 0 auto;
6712
}
6713
 
6714
.test-section .title,
6715
.test-section .description {
6716
    margin-bottom: 10px;
6717
}
6718
 
6719
.test-section .btn-danger {
6720
    margin-right: 10px;
6721
}
6722
 
6723
.test-section .panel-body {
6724
    padding: 20px 0px;
6725
}
6726
 
6727
.test-section .panel {
6728
    margin-top: 20px;
6729
    padding-bottom: 10px;
6730
}
6731
 
6732
.test-section .np-padding {
6733
    padding: 0px;
6734
}
6735
 
6736
.test-section .checkbox {
6737
    display: flex;
6738
    margin: 20px 0px;
6739
}
6740
 
6741
.test-section .option {
6742
    margin-left: 10px;
6743
}
6744
 
6745
.checkbox input[type="checkbox"],
6746
input[type="radio"] {
6747
    margin-top: 5px !important;
6748
}
6749
 
6750
.test-section h6 {
6751
    margin-bottom: 10px;
6752
    color: #0860bf;
6753
}
6754
 
6755
.wizard {
6756
    display: flex;
6757
    margin-top: 10px;
6758
}
6759
 
6760
.wizard li {
6761
    width: 50%;
6762
    display: inline-block;
6763
}
6764
 
6765
.btn-secondary:disabled,
6766
.btn-primary:disabled {
6767
    cursor: no-drop;
6768
}
6769
 
6770
.test-section .btn-primary {
6771
    margin-left: 10px;
6772
}
6773
 
6774
.previous {
6775
    text-align: left;
6776
}
6777
 
6778
.next {
6779
    text-align: right;
6780
}
6781
 
6782
.test-section .close {
6783
    border: none !important;
6784
    border-radius: 0px !important;
6785
}
6786
 
6787
.ratin-range {
6788
    display: block;
6789
}
6790
 
6791
.ratin-range li {
6792
    display: inline-block;
6793
    width: 6%;
6794
}
6795
 
6796
.ratin-range li .option {
6797
    margin-top: 2px !important;
6798
}
6799
 
6800
#react-self-evaluation .company-up-info ul {
6801
    width: 100%;
6802
    position: absolute;
6803
    float: left;
6804
    left: 0px;
6805
    bottom: 4vw;
6806
}
6807
 
6808
#react-self-evaluation .company-up-info {
6809
    padding: 30px 10px;
6810
    min-height: 20vw;
6811
    border: 1px solid #e5e5e5;
6812
}
6813
 
6814
#react-self-evaluation .company-up-info h3 {
6815
    width: 90%;
6816
    margin: 5px auto;
6817
}
6818
 
6819
.mb10 {
6820
    margin-bottom: 3vw;
6821
}
6822
 
6823
.opt-h6 {
6824
    font-weight: 600 !important;
6825
    color: #000 !important;
6826
}
6827
 
6828
// Alert notification
6829
 
6830
.alert-danger {
6831
    background-color: $danger !important;
6832
 
6833
    &:hover {
6834
        background-color: $danger-hover !important;
6835
    }
6836
}