Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7091 | | Comparar con el anterior | Ultima modificación | Ver Log |

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