Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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