Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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