Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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