Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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