Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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