Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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