Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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