Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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