Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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