Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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