Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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