Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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