Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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