Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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