PluginProbe
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses / 4.4.10
LearnPress – WordPress LMS Plugin for Create and Sell Online Courses v4.4.10
4.4.10 4.4.9.1 4.4.9 4.4.8 4.4.7 4.4.6 4.4.5 4.4.4 4.4.3 4.4.2 4.4.1 4.4.0 4.3.9.1 4.3.9 4.3.8 4.3.7 4.1.6.9 4.1.6.9.1 4.1.6.9.2 4.1.6.9.3 4.1.6.9.4 4.1.7 4.1.7.1 4.1.7.2 4.1.7.3 All 142 releases
learnpress / assets / css / learnpress-block.css

learnpress-block.css in LearnPress – WordPress LMS Plugin for Create and Sell Online Courses 4.4.10, at assets/css/learnpress-block.css

2,264 lines 56.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Mixin
3 */
4 @keyframes rotating4 {
5 from {
6 transform: rotate(0deg);
7 }
8 to {
9 transform: rotate(360deg);
10 }
11 }
12 @keyframes animation4 {
13 from {
14 left: -40%;
15 width: 40%;
16 }
17 to {
18 left: 100%;
19 width: 10%;
20 }
21 }
22 :root {
23 --lp-cotainer-max-with: var(--lp-container-max-width);
24 }
25
26 .wp-block-group {
27 --lp-container-max-width: var(--wp--style--global--wide-size);
28 }
29
30 /**
31 * Style for the buttons
32 */
33 .lp-btn-edit-primary {
34 border: none;
35 background: #135e96;
36 color: #fff;
37 }
38 .lp-btn-edit-primary:not(.active) {
39 opacity: 0.5;
40 }
41 .lp-btn-edit-primary:hover, .lp-btn-edit-primary.active, .lp-btn-edit-primary.active:hover {
42 background: #135E96;
43 color: #fff;
44 opacity: 1;
45 }
46
47 /* 5. Minimal Bottom Line */
48 .btn-line::after {
49 content: "";
50 position: absolute;
51 bottom: 0;
52 left: 0;
53 height: 4px;
54 width: 0%;
55 background-color: #38bdf8;
56 animation: lineLoad 2s ease-in-out infinite;
57 }
58
59 @keyframes lineLoad {
60 0% {
61 width: 0%;
62 left: 0;
63 }
64 50% {
65 width: 100%;
66 left: 0;
67 }
68 100% {
69 width: 0%;
70 left: 100%;
71 }
72 }
73 .lp-button {
74 padding: 8px 16px;
75 border: 1px solid var(--lp-border-color, #E2E0DB);
76 border-radius: var(--lp-border-radius, 5px);
77 color: #374151;
78 font-weight: 500;
79 text-decoration: none;
80 cursor: pointer;
81 }
82 .lp-button.loading {
83 position: relative;
84 display: inline-flex;
85 align-items: center;
86 justify-content: center;
87 pointer-events: none;
88 color: rgba(0, 0, 0, 0) !important;
89 }
90 .lp-button.loading:before {
91 position: absolute;
92 inset: 0;
93 display: flex;
94 align-items: center;
95 justify-content: center;
96 font-family: "lp-icon";
97 content: "\f110";
98 animation: lp-rotating 1s linear infinite;
99 font-variant: normal;
100 text-transform: none;
101 -webkit-font-smoothing: antialiased;
102 -moz-osx-font-smoothing: grayscale;
103 color: black;
104 }
105
106 .learn-press-message {
107 position: relative;
108 display: flex;
109 align-items: center;
110 margin: 0 !important;
111 padding: 10px;
112 border-radius: var(--lp-border-radius, 5px);
113 background-color: #E5F7FF;
114 color: #007AFF;
115 max-width: 100%;
116 }
117 .learn-press-message::before {
118 display: inline-block;
119 margin-right: 8px;
120 font-family: "lp-icon";
121 font-size: 20px;
122 font-style: normal;
123 font-weight: normal;
124 line-height: 1;
125 }
126 .learn-press-message.error {
127 background-color: #FEE5E5;
128 color: #FF3B30;
129 border: 1px solid #E31A1A;
130 padding: 10px 20px;
131 }
132 .learn-press-message.error::before {
133 content: "\f071";
134 color: #E31A1A;
135 }
136 .learn-press-message.warning {
137 background-color: #FEF7E6;
138 color: #FF9500;
139 border: 1px solid #F8A100;
140 }
141 .learn-press-message.warning::before {
142 content: "\f06a";
143 color: #F8A100;
144 }
145 .learn-press-message.success {
146 background-color: #EBF8E5;
147 color: #3AB500;
148 border: 1px solid #28A746;
149 }
150 .learn-press-message.success::before {
151 content: "\f058";
152 color: #28A746;
153 }
154 .learn-press-message.info {
155 background-color: rgba(0, 122, 255, 0.1019607843);
156 color: #007AFF;
157 border: 1px solid #2E91FA;
158 }
159 .learn-press-message.info::before {
160 content: "\e931";
161 color: #2E91FA;
162 }
163 .learn-press-message a {
164 text-decoration: underline;
165 }
166
167 .lp-toast.toastify {
168 background: #EBF8E5;
169 color: #3AB500;
170 border-radius: var(--lp-border-radius, 5px);
171 box-shadow: 0 0 0;
172 display: flex;
173 align-items: center;
174 }
175 .lp-toast.toastify .toast-close {
176 background: transparent !important;
177 font-size: 0;
178 padding-left: 12px;
179 }
180 .lp-toast.toastify .toast-close:before {
181 content: "\f00d";
182 font-family: "lp-icon";
183 font-size: 16px;
184 color: #000;
185 line-height: 17px;
186 }
187 .lp-toast.toastify .toast-close:hover {
188 opacity: 1;
189 }
190 .lp-toast.toastify.error {
191 background-color: #FEE5E5;
192 color: #FF3B30;
193 padding: 12px 20px;
194 border: none;
195 margin: 0 auto;
196 }
197 .lp-toast.toastify.warning {
198 background-color: #FEF7E6;
199 color: #fb9422;
200 padding: 12px 20px;
201 border: none;
202 margin: 0 auto;
203 }
204 .lp-toast.toastify.info {
205 background-color: rgba(0, 122, 255, 0.1019607843);
206 color: #277afc;
207 padding: 12px 20px;
208 border: none;
209 margin: 0 auto;
210 }
211
212 @keyframes lp-rotating {
213 from {
214 -webkit-transform: rotate(0deg);
215 transform: rotate(0deg);
216 }
217 to {
218 -webkit-transform: rotate(360deg);
219 transform: rotate(360deg);
220 }
221 }
222 @-webkit-keyframes lp-rotating {
223 from {
224 -webkit-transform: rotate(0deg);
225 transform: rotate(0deg);
226 }
227 to {
228 -webkit-transform: rotate(360deg);
229 transform: rotate(360deg);
230 }
231 }
232 .lp-loading-change {
233 position: absolute;
234 width: 100%;
235 height: 100%;
236 background: rgba(255, 255, 255, 0.38);
237 top: 0;
238 }
239
240 .lp-load-ajax-element {
241 position: relative;
242 }
243
244 *,
245 :after,
246 :before {
247 box-sizing: border-box;
248 }
249
250 .learnpress-block-pagination,
251 .learn-press-pagination {
252 margin: 20px 0;
253 text-align: center;
254 }
255 .learnpress-block-pagination .page-numbers,
256 .learn-press-pagination .page-numbers {
257 display: inline-flex;
258 gap: 5px;
259 flex-wrap: wrap;
260 margin: 0;
261 padding: 0;
262 border: 0;
263 outline: 0;
264 background: transparent;
265 list-style: none;
266 }
267 .learnpress-block-pagination .page-numbers > li,
268 .learn-press-pagination .page-numbers > li {
269 display: inline-block;
270 margin: 0;
271 }
272 .learnpress-block-pagination .page-numbers > li .page-numbers,
273 .learn-press-pagination .page-numbers > li .page-numbers {
274 float: unset;
275 padding: 0 12px;
276 color: #666;
277 text-decoration: none;
278 }
279 .learnpress-block-pagination .page-numbers > li .page-numbers.current,
280 .learn-press-pagination .page-numbers > li .page-numbers.current {
281 color: var(--lp-primary-color);
282 font-weight: 400;
283 }
284 .learnpress-block-pagination .page-numbers > li .page-numbers:hover,
285 .learn-press-pagination .page-numbers > li .page-numbers:hover {
286 color: var(--lp-primary-color);
287 }
288
289 .social-share-toggle {
290 position: relative;
291 display: flex;
292 gap: 20px;
293 }
294 .social-share-toggle .share-toggle-icon {
295 cursor: pointer;
296 display: flex;
297 align-items: center;
298 gap: 8px;
299 }
300 .social-share-toggle .share-toggle-icon .share-label {
301 margin: 0;
302 cursor: pointer;
303 }
304 .social-share-toggle .share-toggle-icon:hover {
305 color: var(--lp-primary-color, #ffb606);
306 }
307 .social-share-toggle .content-widget-social-share {
308 padding: 20px;
309 background: #fff;
310 box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.12);
311 }
312 .social-share-toggle .lp-social-media {
313 display: inline-flex;
314 padding: 0;
315 gap: 12px;
316 margin: 0;
317 }
318 .social-share-toggle .lp-social-media > li {
319 text-align: center;
320 list-style: none;
321 }
322 .social-share-toggle .lp-social-media > li span {
323 display: none;
324 }
325 .social-share-toggle .lp-social-media > li i {
326 width: 40px;
327 height: 40px;
328 display: inline-flex;
329 align-items: center;
330 justify-content: center;
331 border: 1px solid var(--lp-border-color, #E2E0DB);
332 border-radius: 50%;
333 }
334 .social-share-toggle .lp-social-media > li i:hover {
335 background-color: var(--lp-primary-color, #ffb606);
336 border-color: var(--lp-primary-color, #ffb606);
337 color: var(--lp-color-white, #fff);
338 }
339 .social-share-toggle .clipboard-post {
340 display: flex;
341 justify-content: space-between;
342 margin-bottom: 20px;
343 gap: 12px;
344 }
345 .social-share-toggle .btn-clipboard {
346 position: relative;
347 padding: 12px 20px;
348 white-space: nowrap;
349 }
350 .social-share-toggle .btn-clipboard .tooltip {
351 display: none;
352 position: absolute;
353 z-index: 2;
354 left: 50%;
355 right: auto;
356 bottom: 100%;
357 transform: translateX(-50%);
358 width: max-content;
359 color: #fff;
360 font-size: 0.825em;
361 padding: 5px 10px;
362 background: rgba(0, 0, 0, 0.72);
363 border-radius: 3px;
364 margin-bottom: 10px;
365 }
366 .social-share-toggle .btn-clipboard .tooltip:before {
367 content: "";
368 position: absolute;
369 z-index: 2;
370 left: 50%;
371 bottom: -5px;
372 margin-left: -3px;
373 border-left: 5px solid transparent;
374 border-right: 5px solid transparent;
375 border-top: 5px solid rgba(0, 0, 0, 0.72);
376 }
377 .social-share-toggle .btn-clipboard:hover {
378 background-color: #eee;
379 }
380 .social-share-toggle .btn-clipboard:hover .tooltip {
381 display: block;
382 }
383 .social-share-toggle .clipboard-value {
384 border: 1px solid var(--lp-border-color, #E2E0DB);
385 padding: 12px 20px;
386 flex: 1;
387 }
388 @media (max-width: 600px) {
389 .social-share-toggle .clipboard-value {
390 width: 100%;
391 }
392 }
393 .social-share-toggle .wrapper-content-widget {
394 visibility: hidden;
395 text-align: left;
396 opacity: 0;
397 transition: all 0.27s ease;
398 position: absolute;
399 right: 0;
400 top: auto;
401 z-index: 9;
402 margin-top: 20px;
403 }
404 .social-share-toggle.social-share-toggle__open .wrapper-content-widget {
405 margin-top: 0;
406 visibility: visible;
407 opacity: 1;
408 }
409 @media (max-width: 768px) {
410 .social-share-toggle .wrapper-content-widget {
411 position: fixed;
412 top: 0;
413 left: 0;
414 right: 0;
415 bottom: 0;
416 background-color: rgba(0, 0, 0, 0.7);
417 }
418 .social-share-toggle .wrapper-content-widget .content-widget-social-share {
419 position: relative;
420 z-index: 1;
421 max-width: fit-content;
422 top: 50%;
423 min-width: 320px;
424 transform: translateY(-50%);
425 margin: 0 auto;
426 }
427 }
428
429 .lp-instructor-info {
430 display: flex;
431 gap: 30px;
432 margin-top: 30px;
433 margin-bottom: 30px;
434 }
435 @media (max-width: 600px) {
436 .lp-instructor-info {
437 flex-wrap: wrap;
438 }
439 }
440 .lp-instructor-info .lp-section-instructor {
441 flex: 1;
442 }
443 .lp-instructor-info .instructor-display-name {
444 font-size: 1.4rem;
445 }
446 .lp-instructor-info .instructor-avatar {
447 max-width: 200px;
448 }
449 .lp-instructor-info .lp-instructor-meta {
450 margin-top: 16px;
451 display: flex;
452 column-gap: 20px;
453 row-gap: 8px;
454 }
455 .lp-instructor-info .instructor-description {
456 margin-top: 16px;
457 }
458 .lp-instructor-info img {
459 max-width: 100%;
460 border-radius: var(--lp-border-radius, 5px);
461 }
462 .lp-instructor-info .instructor-social {
463 display: inline-flex;
464 padding: 0;
465 gap: 12px;
466 margin: 16px 0 0 0;
467 }
468 .lp-instructor-info .instructor-social > a {
469 text-align: center;
470 list-style: none;
471 }
472 .lp-instructor-info .instructor-social > a span {
473 display: none;
474 }
475 .lp-instructor-info .instructor-social > a i {
476 width: 40px;
477 height: 40px;
478 display: inline-flex;
479 align-items: center;
480 justify-content: center;
481 border: 1px solid var(--lp-border-color, #E2E0DB);
482 border-radius: 50%;
483 }
484 .lp-instructor-info .instructor-social > a i:hover {
485 background-color: var(--lp-primary-color, #ffb606);
486 border-color: var(--lp-primary-color, #ffb606);
487 color: var(--lp-color-white, #fff);
488 }
489
490 .instructor-display-name {
491 font-weight: var(--lp-font-weight-link, 600);
492 }
493
494 .instructor-item-meta {
495 display: inline-flex;
496 border-left: 1px solid var(--lp-border-color, #E2E0DB);
497 padding-left: 20px;
498 }
499
500 .lp-instructor-meta .instructor-item-meta:first-child {
501 border: none;
502 padding-left: 0;
503 }
504
505 .wrapper-instructor-total-students, .wrapper-instructor-total-courses {
506 display: flex;
507 gap: 4px;
508 align-items: center;
509 }
510
511 .course-extra-box {
512 margin-bottom: 16px;
513 border: 1px solid var(--lp-border-color, #E2E0DB);
514 border-radius: var(--lp-border-radius, 5px);
515 width: 100%;
516 }
517 .course-extra-box.active .course-extra-box__content {
518 height: auto;
519 }
520 .course-extra-box__title {
521 --extra-height: 50px;
522 display: flex;
523 align-items: center;
524 position: relative;
525 height: var(--extra-height);
526 margin: 0 !important;
527 padding: 0 45px 0 20px;
528 background: rgba(181, 187, 211, 0.15);
529 font-size: 1em;
530 font-weight: 700;
531 cursor: pointer;
532 }
533 @media (max-width: 767px) {
534 .course-extra-box__title {
535 padding-left: 16px;
536 }
537 }
538 .course-extra-box__title::after {
539 position: absolute;
540 top: 0;
541 right: 20px;
542 font-family: "lp-icon";
543 line-height: var(--extra-height);
544 content: "\f107";
545 }
546 .course-extra-box__content {
547 overflow: hidden;
548 transition: height 0.3s ease;
549 }
550 .course-extra-box__content-inner {
551 animation-name: course-extra-box__content-inner-transform;
552 animation-duration: 0.3s;
553 animation-timing-function: ease-in-out;
554 animation-iteration-count: 1;
555 animation-direction: normal;
556 }
557 .course-extra-box__content-inner > ul {
558 padding-left: 0 !important;
559 padding-bottom: 0 !important;
560 }
561 .course-extra-box__content ul,
562 .course-extra-box__content li {
563 list-style: none;
564 }
565 .course-extra-box__content ul {
566 margin: 0;
567 padding: 0;
568 }
569 .course-extra-box__content li {
570 margin: 0;
571 padding: 12px 20px;
572 border-bottom: 1px solid var(--lp-border-color, #E2E0DB);
573 }
574 @media (max-width: 767px) {
575 .course-extra-box__content li {
576 padding-left: 16px;
577 padding-right: 16px;
578 }
579 }
580 .course-extra-box__content li::before {
581 margin-right: 8px;
582 color: var(--lp-primary-color);
583 font-family: "lp-icon";
584 content: "\f00c";
585 }
586 .course-extra-box__content li:last-child {
587 border-bottom: 0;
588 }
589 .course-extra-box:last-child {
590 margin-bottom: 60px;
591 }
592 .course-extra-box.active .course-extra-box__title::after {
593 content: "\f106";
594 }
595 .course-extra-box + .comment-respond, .course-extra-box + .comments-area {
596 margin-top: 30px;
597 margin-bottom: 30px;
598 }
599 .course-extra-box + .course-tabs {
600 margin-top: 30px;
601 }
602
603 input[name=course-extra-box-ratio] {
604 display: none;
605 }
606 input[name=course-extra-box-ratio]:checked + .course-extra-box .course-extra-box__content {
607 display: block;
608 }
609 input[name=course-extra-box-ratio]:checked + .course-extra-box .course-extra-box__content .course-extra-box__content-inner {
610 transform: scale(1);
611 }
612
613 @-webkit-keyframes course-extra-box__content-inner-transform {
614 from {
615 opacity: 0;
616 -webkit-transform: translateX(5%);
617 transform: translateX(5%);
618 }
619 to {
620 opacity: 1;
621 -webkit-transform: translateX(0%);
622 transform: translateX(0%);
623 }
624 }
625 @keyframes course-extra-box__content-inner-transform {
626 from {
627 opacity: 0;
628 transform: translateX(5%);
629 }
630 to {
631 opacity: 1;
632 transform: translateX(0%);
633 }
634 }
635 .course-tab-panel-faqs .course-faqs-box {
636 margin-bottom: 20px;
637 border: 1px solid rgba(204, 204, 204, 0.6);
638 border-radius: 5px;
639 }
640 .course-tab-panel-faqs .course-faqs-box__title {
641 display: block;
642 position: relative;
643 margin: 0;
644 padding: 12px 45px 12px 20px;
645 font-size: 1em;
646 line-height: 1.5;
647 font-weight: var(--lp-font-weight-link, 600);
648 cursor: pointer;
649 }
650 .course-tab-panel-faqs .course-faqs-box__title::after {
651 position: absolute;
652 top: 12px;
653 right: 20px;
654 font-family: "lp-icon";
655 content: "\f067";
656 }
657 .course-tab-panel-faqs .course-faqs-box:last-child {
658 margin-bottom: 40px;
659 }
660 .course-tab-panel-faqs .course-faqs-box:hover .course-faqs-box__title {
661 color: var(--lp-primary-color);
662 }
663 .course-tab-panel-faqs .course-faqs-box__content {
664 display: none;
665 }
666 .course-tab-panel-faqs .course-faqs-box__content-inner {
667 padding: 20px;
668 -webkit-animation-name: course-faqs-box__content-inner-transform;
669 animation-name: course-faqs-box__content-inner-transform;
670 -webkit-animation-duration: 0.3s;
671 animation-duration: 0.3s;
672 -webkit-animation-timing-function: ease-in-out;
673 animation-timing-function: ease-in-out;
674 -webkit-animation-iteration-count: 1;
675 animation-iteration-count: 1;
676 -webkit-animation-direction: normal;
677 animation-direction: normal;
678 }
679
680 input[name=course-faqs-box-ratio] {
681 display: none;
682 }
683 input[name=course-faqs-box-ratio]:checked + .course-faqs-box .course-faqs-box__content {
684 display: block;
685 }
686 input[name=course-faqs-box-ratio]:checked + .course-faqs-box .course-faqs-box__title {
687 color: var(--lp-primary-color);
688 background: rgba(241, 242, 248, 0.4);
689 }
690 input[name=course-faqs-box-ratio]:checked + .course-faqs-box .course-faqs-box__title::after {
691 content: "\f068";
692 }
693
694 @-webkit-keyframes course-faqs-box__content-inner-transform {
695 from {
696 opacity: 0;
697 -webkit-transform: translateY(-5%);
698 transform: translateY(-5%);
699 }
700 to {
701 opacity: 1;
702 -webkit-transform: translateY(0%);
703 transform: translateY(0%);
704 }
705 }
706 @keyframes course-faqs-box__content-inner-transform {
707 from {
708 opacity: 0;
709 -webkit-transform: translateY(-5%);
710 transform: translateY(-5%);
711 }
712 to {
713 opacity: 1;
714 -webkit-transform: translateY(0%);
715 transform: translateY(0%);
716 }
717 }
718 .extra-box__title, .course-faqs__title, .course-material__title {
719 margin-top: 0;
720 margin-bottom: 12px;
721 }
722
723 .edit-content {
724 margin-left: 5px;
725 }
726
727 .course-curriculum ul.curriculum-sections {
728 position: relative;
729 margin: 0;
730 padding: 0;
731 list-style: none;
732 }
733 .course-curriculum ul.curriculum-sections .closed .section-item__loadmore {
734 display: none;
735 }
736 .course-curriculum ul.curriculum-sections .section {
737 margin: 0;
738 padding: 0;
739 flex-wrap: wrap;
740 }
741 .course-curriculum ul.curriculum-sections .section:last-child {
742 padding: 0;
743 }
744 .course-curriculum ul.curriculum-sections .section.section-empty .section-header {
745 margin-bottom: 20px;
746 }
747 .course-curriculum ul.curriculum-sections .section.section-empty .learn-press-message {
748 margin-right: 15px;
749 margin-left: 15px;
750 }
751 .course-curriculum ul.curriculum-sections .section-title.c + .section-desc {
752 display: block;
753 }
754 .course-curriculum ul.curriculum-sections .section-title.c span.show-desc::before {
755 -webkit-transform: rotate(180deg);
756 transform: rotate(180deg);
757 top: 0;
758 }
759 .course-curriculum ul.curriculum-sections .item-meta.duration {
760 background: #d9e0f1;
761 }
762 .course-curriculum .section-item__loadmore {
763 display: flex;
764 justify-content: center;
765 align-items: center;
766 }
767 .course-curriculum .section-item__loadmore button {
768 margin-top: 10px;
769 border: 1px solid var(--lp-border-color, #E2E0DB);
770 border-radius: var(--lp-border-radius, 5px);
771 padding: 8px 16px;
772 box-shadow: none;
773 outline: none;
774 }
775 .course-curriculum .section-item__loadmore.loading button:before {
776 position: absolute;
777 inset: 0;
778 display: flex;
779 align-items: center;
780 justify-content: center;
781 font-family: "lp-icon";
782 content: "\f110";
783 animation: lp-rotating 1s linear infinite;
784 font-variant: normal;
785 text-transform: none;
786 -webkit-font-smoothing: antialiased;
787 -moz-osx-font-smoothing: grayscale;
788 color: black;
789 }
790 .course-curriculum .section-header {
791 display: table;
792 width: 100%;
793 padding: 20px 0;
794 border-bottom: 0;
795 border-bottom: 1px solid #d9e0f1;
796 cursor: pointer;
797 -webkit-box-sizing: border-box;
798 box-sizing: border-box;
799 }
800 .course-curriculum .section-header .section-title, .course-curriculum .section-header .section-desc {
801 margin: 0;
802 }
803 .course-curriculum .section-header span.show-desc {
804 display: inline-block;
805 position: absolute;
806 top: 50%;
807 right: 30px;
808 width: 20px;
809 height: 20px;
810 transform: translate(0, -50%);
811 }
812 .course-curriculum .section-header span.show-desc::before {
813 font-family: "lp-icon";
814 font-size: 1.125em;
815 content: "\f107";
816 }
817 .course-curriculum .section-header span.show-desc:hover::before {
818 border-top-color: #ccc;
819 }
820 .course-curriculum .section-header .section-desc {
821 margin-top: 10px;
822 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
823 color: var(--lp-color-accent);
824 font-style: italic;
825 line-height: 1.3;
826 }
827 .course-curriculum .section-header .section-meta {
828 display: block;
829 padding-top: 17px;
830 padding-bottom: 15px;
831 font-size: 0.8em;
832 text-align: right;
833 vertical-align: middle;
834 white-space: nowrap;
835 }
836 .course-curriculum .section-item {
837 width: 100%;
838 }
839 .course-curriculum .section-content {
840 margin: 0;
841 padding: 0;
842 list-style: none;
843 }
844 .course-curriculum .section-content .course-item-meta {
845 display: table-cell;
846 text-align: right;
847 vertical-align: middle;
848 white-space: nowrap;
849 }
850 .course-curriculum .section-content .course-item-meta .item-meta {
851 display: inline-block;
852 color: #fff;
853 }
854 .course-curriculum .section-content .course-item-meta .item-meta.final-quiz {
855 background: #14c4ff;
856 }
857 .course-curriculum .section-content .course-item-meta .item-meta.trans {
858 padding: 0;
859 }
860 .course-curriculum .section-content .course-item-meta .count-questions {
861 background: #9672cf;
862 }
863 .course-curriculum .section-content .course-item-meta .duration {
864 background: #c0c0c0;
865 }
866 .course-curriculum .section-content .course-item-meta .course-item-status {
867 padding: 0;
868 color: #999;
869 }
870 .course-curriculum .section-content .course-item-meta .course-item-status::before {
871 font-family: "lp-icon";
872 content: "\f00c";
873 }
874 .course-curriculum .section-content .course-item-preview {
875 font-style: normal;
876 padding: 0;
877 }
878 .course-curriculum .section-content .course-item-preview::before {
879 font-family: "lp-icon";
880 content: "\f06e";
881 color: #999;
882 }
883 .course-curriculum .course-item {
884 display: flex;
885 position: relative;
886 margin: 0 0 2px 0;
887 padding: 0 16px;
888 background: rgba(241, 242, 248, 0.4);
889 transition: padding-left linear 0.15s;
890 }
891 .course-curriculum .course-item > span {
892 display: flex;
893 width: 28px;
894 color: #666;
895 font-weight: 300;
896 align-items: center;
897 }
898 .course-curriculum .course-item .section-item-link {
899 display: flex;
900 align-items: flex-start;
901 justify-content: space-between;
902 width: 100%;
903 padding: 12px 0;
904 color: inherit;
905 outline: none;
906 gap: 12px;
907 }
908 .course-curriculum .course-item .section-item-link:hover .item-name {
909 color: var(--lp-primary-color);
910 }
911 .course-curriculum .course-item .section-item-link::before {
912 color: var(--lp-primary-color);
913 font-family: "lp-icon";
914 }
915 .course-curriculum .course-item .section-item-link .course-item-info {
916 width: 100%;
917 }
918 .course-curriculum .course-item .section-item-link .course-item-info .course-item-info-pre {
919 display: flex;
920 flex-flow: row-reverse;
921 justify-content: flex-end;
922 gap: 16px;
923 align-items: center;
924 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
925 }
926 .course-curriculum .course-item .section-item-link .course-item-info .course-item-info-pre .item-meta.duration {
927 background: transparent;
928 }
929 .course-curriculum .course-item .item-name {
930 font-weight: 600;
931 }
932 .course-curriculum .course-item.course-item-lp_quiz .section-item-link::before {
933 content: "\f059";
934 }
935 .course-curriculum .course-item.course-item-lp_assignment .section-item-link::before {
936 content: "\e929" !important;
937 }
938 .course-curriculum .course-item.course-item.course-item-lp_h5p .section-item-link::before {
939 content: "\e92a" !important;
940 }
941 .course-curriculum .course-item.course-item-lp_lesson .section-item-link::before {
942 content: "\f15b";
943 }
944 .course-curriculum .course-item.course-item-lp_lesson.course-item-type-video .section-item-link::before {
945 content: "\f03d";
946 }
947 .course-curriculum .course-item.course-item-lp_lesson.course-item-type-audio .section-item-link::before {
948 content: "\f028";
949 }
950 .course-curriculum .course-item.item-locked .course-item-status::before {
951 color: var(--lp-secondary-color);
952 content: "\f023";
953 }
954 .course-curriculum .course-item.has-status {
955 padding-top: 1px;
956 }
957 .course-curriculum .course-item.has-status.status-completed .course-item-status::before, .course-curriculum .course-item.has-status.status-evaluated .course-item-status::before {
958 color: #3bb54a;
959 }
960 .course-curriculum .course-item.has-status.item-failed .course-item-status::before, .course-curriculum .course-item.has-status.failed .course-item-status::before {
961 border-color: #f02425;
962 color: #f02425;
963 content: "\f00d";
964 }
965 .course-curriculum .course-item::before {
966 position: absolute;
967 top: 50%;
968 left: 0;
969 width: 3px;
970 height: 0;
971 background: #00adff;
972 content: "";
973 transition: height linear 0.15s, top linear 0.15s;
974 }
975 .course-curriculum .course-item.current {
976 background: #f9f9f9;
977 }
978 .course-curriculum .course-item.current a::before {
979 left: 10px;
980 }
981 .course-curriculum .course-item.current::before {
982 top: 0;
983 height: 100%;
984 }
985 .course-curriculum .section-left {
986 vertical-align: top;
987 }
988 .course-curriculum .section-left .section-title {
989 font-weight: 700;
990 font-size: calc(var(--lp-font-size-base, 1em) * 1.25);
991 text-transform: capitalize;
992 display: block;
993 }
994 .course-curriculum .curriculum-more__button {
995 border: 1px solid var(--lp-border-color, #E2E0DB);
996 border-radius: var(--lp-border-radius, 5px);
997 padding: 8px 16px;
998 box-shadow: none;
999 outline: none;
1000 width: 100%;
1001 margin-top: 20px;
1002 margin-bottom: 20px;
1003 }
1004 .course-curriculum .curriculum-more__button.loading:before {
1005 position: absolute;
1006 inset: 0;
1007 display: flex;
1008 align-items: center;
1009 justify-content: center;
1010 font-family: "lp-icon";
1011 content: "\f110";
1012 animation: lp-rotating 1s linear infinite;
1013 font-variant: normal;
1014 text-transform: none;
1015 -webkit-font-smoothing: antialiased;
1016 -moz-osx-font-smoothing: grayscale;
1017 color: black;
1018 }
1019
1020 body .content-item-summary .form-button-finish-course, body .lp-quiz-buttons .form-button-finish-course {
1021 float: right;
1022 }
1023
1024 #wpadminbar #wp-admin-bar-edit-lp_quiz .ab-item::before, #wpadminbar #wp-admin-bar-edit-lp_lesson .ab-item::before, #wpadminbar #wp-admin-bar-edit-lp_question .ab-item::before {
1025 top: 2px;
1026 font-family: "lp-icon";
1027 }
1028 #wpadminbar #wp-admin-bar-edit-lp_quiz .ab-item::before {
1029 content: "\f017";
1030 }
1031 #wpadminbar #wp-admin-bar-edit-lp_lesson .ab-item::before {
1032 content: "\f15c";
1033 }
1034 #wpadminbar #wp-admin-bar-edit-lp_question .ab-item::before {
1035 content: "\f29c";
1036 }
1037
1038 .course-remaining-time .label-enrolled {
1039 font-size: inherit;
1040 }
1041
1042 .lp-course-progress {
1043 position: relative;
1044 }
1045 .lp-course-progress .lp-passing-conditional {
1046 position: absolute;
1047 top: 0;
1048 width: 3px;
1049 height: 6px;
1050 margin-left: -1px;
1051 background: var(--lp-secondary-color);
1052 }
1053
1054 .viewing-course-item .section-header .section-desc {
1055 display: none;
1056 }
1057
1058 .lp-course-curriculum ul, .lp-course-curriculum li {
1059 list-style: none;
1060 margin: 0;
1061 padding: 0;
1062 }
1063 .lp-course-curriculum .course-curriculum-info {
1064 display: flex;
1065 justify-content: space-between;
1066 gap: 20px;
1067 margin-bottom: 20px;
1068 }
1069 .lp-course-curriculum .course-curriculum-info__left {
1070 display: flex;
1071 align-items: center;
1072 flex-wrap: wrap;
1073 gap: 8px;
1074 }
1075 .lp-course-curriculum .course-curriculum-info__left li {
1076 display: inline-flex;
1077 align-items: center;
1078 gap: 8px;
1079 }
1080 .lp-course-curriculum .course-curriculum-info__left li::after {
1081 content: "";
1082 width: 4px;
1083 height: 4px;
1084 background-color: var(--lp-border-color, #E2E0DB);
1085 display: inline-block;
1086 }
1087 .lp-course-curriculum .course-curriculum-info__left li:last-child::after {
1088 content: none;
1089 }
1090 .lp-course-curriculum .course-curriculum-info__right {
1091 font-weight: var(--lp-font-weight-link, 600);
1092 text-align: right;
1093 text-transform: capitalize;
1094 }
1095 .lp-course-curriculum .course-toggle-all-sections {
1096 cursor: pointer;
1097 }
1098 .lp-course-curriculum .course-section {
1099 margin-bottom: 8px;
1100 border: 1px solid var(--lp-border-color, #E2E0DB);
1101 border-radius: var(--lp-border-radius, 5px);
1102 cursor: pointer;
1103 overflow: hidden;
1104 }
1105 .lp-course-curriculum .course-section.lp-collapse .course-section__items {
1106 display: none;
1107 animation: ease-in-out;
1108 }
1109 .lp-course-curriculum .course-section.lp-collapse .lp-icon-angle-up {
1110 display: none;
1111 }
1112 .lp-course-curriculum .course-section.lp-collapse .lp-icon-angle-down {
1113 display: block;
1114 }
1115 .lp-course-curriculum .course-section .lp-icon-angle-down {
1116 display: none;
1117 }
1118 .lp-course-curriculum .course-section:last-child {
1119 margin-bottom: 0;
1120 }
1121 .lp-course-curriculum .course-section .course-section-header {
1122 background-color: var(--lp-white-grey, #F7F7FB);
1123 padding: 20px;
1124 column-gap: 12px;
1125 display: flex;
1126 justify-content: space-between;
1127 }
1128 .lp-course-curriculum .course-section__title {
1129 font-weight: 600;
1130 font-size: 1.1em;
1131 line-height: 1.3em;
1132 }
1133 .lp-course-curriculum .course-section__description {
1134 margin: 4px 0 0 0;
1135 }
1136 .lp-course-curriculum .course-section .section-toggle {
1137 line-height: 1;
1138 }
1139 .lp-course-curriculum .course-section .section-toggle i {
1140 font-size: 24px;
1141 }
1142 .lp-course-curriculum .course-section .course-section-info {
1143 margin-left: 0;
1144 margin-right: auto;
1145 }
1146 .lp-course-curriculum .course-section .section-count-items {
1147 min-width: 24px;
1148 font-weight: 600;
1149 text-align: center;
1150 line-height: 1.3;
1151 white-space: nowrap;
1152 }
1153 .lp-course-curriculum .course-section .course-item {
1154 background-color: transparent;
1155 border-top: 1px solid var(--lp-border-color, #E2E0DB);
1156 padding: 12px 20px;
1157 margin: 0;
1158 }
1159 .lp-course-curriculum .course-section .course-item__link {
1160 display: flex;
1161 justify-content: space-between;
1162 width: 100%;
1163 column-gap: 12px;
1164 row-gap: 8px;
1165 position: relative;
1166 align-items: flex-start;
1167 color: inherit;
1168 }
1169 .lp-course-curriculum .course-section .course-item__info {
1170 display: flex;
1171 column-gap: 12px;
1172 row-gap: 8px;
1173 }
1174 .lp-course-curriculum .course-section .course-item__info .course-item-ico {
1175 min-width: 16px;
1176 }
1177 .lp-course-curriculum .course-section .course-item__content {
1178 display: flex;
1179 justify-content: space-between;
1180 column-gap: 12px;
1181 row-gap: 8px;
1182 align-items: baseline;
1183 flex: 1;
1184 }
1185 @media (max-width: 1024px) {
1186 .lp-course-curriculum .course-section .course-item__content {
1187 flex-wrap: wrap;
1188 }
1189 }
1190 .lp-course-curriculum .course-section .course-item__left:hover {
1191 color: var(--lp-primary-color, #ffb606);
1192 }
1193 .lp-course-curriculum .course-section .course-item__right {
1194 display: flex;
1195 column-gap: 12px;
1196 row-gap: 8px;
1197 align-items: center;
1198 flex: none;
1199 color: var(--lp-color-meta, #8a8a8a);
1200 flex-wrap: wrap;
1201 flex-direction: row-reverse;
1202 justify-content: flex-end;
1203 }
1204 @media (max-width: 1024px) {
1205 .lp-course-curriculum .course-section .course-item__right {
1206 width: 100%;
1207 order: 3;
1208 }
1209 }
1210 .lp-course-curriculum .course-section .course-item__status .course-item-ico {
1211 width: 24px;
1212 display: flex;
1213 justify-content: center;
1214 }
1215 .lp-course-curriculum .course-section .course-item-ico::before {
1216 content: "";
1217 display: inline-block;
1218 font-family: "lp-icon";
1219 font-weight: normal;
1220 }
1221 .lp-course-curriculum .course-section .course-item-ico.lp_lesson::before {
1222 content: "\f15b";
1223 }
1224 .lp-course-curriculum .course-section .course-item-ico.lp_quiz::before {
1225 content: "\f12e";
1226 }
1227 .lp-course-curriculum .course-section .course-item-ico.lp_assignment::before {
1228 content: "\e929";
1229 }
1230 .lp-course-curriculum .course-section .course-item-ico.lp_h5p::before {
1231 content: "\e92a";
1232 }
1233 .lp-course-curriculum .course-section .course-item-ico.preview::before {
1234 content: "\f06e";
1235 color: #999;
1236 }
1237 .lp-course-curriculum .course-section .course-item-ico.locked::before {
1238 content: "\f023";
1239 color: #999;
1240 }
1241 .lp-course-curriculum .course-section .course-item-ico.passed.completed::before {
1242 content: "\f00c";
1243 color: #3bb54a;
1244 }
1245 .lp-course-curriculum .course-section .course-item-ico.in-progress::before, .lp-course-curriculum .course-section .course-item-ico.completed::before {
1246 content: "\f00c";
1247 color: #999;
1248 }
1249 .lp-course-curriculum .course-section .course-item-ico.failed.completed::before {
1250 content: "\f00d";
1251 color: #f02425;
1252 }
1253 .lp-course-curriculum .course-section .course-item-ico.started::before {
1254 content: "\f00c";
1255 color: #999;
1256 }
1257 .lp-course-curriculum .course-section .course-item-ico.doing::before {
1258 content: "\e921";
1259 color: #999;
1260 }
1261
1262 .info-learning .course-progress > div {
1263 margin-bottom: 8px;
1264 }
1265 .info-learning .course-progress__line {
1266 width: 100%;
1267 background: #ccc;
1268 height: 5px;
1269 border-radius: 5px;
1270 position: relative;
1271 }
1272 .info-learning .course-progress__line__active {
1273 background: var(--lp-primary-color);
1274 height: 100%;
1275 border-radius: 5px;
1276 position: absolute;
1277 top: 0;
1278 left: 0;
1279 }
1280 .info-learning .course-progress__line__active {
1281 background: var(--lp-primary-color);
1282 height: 100%;
1283 border-radius: 5px;
1284 position: absolute;
1285 top: 0;
1286 left: 0;
1287 }
1288 .info-learning .course-progress__line__point {
1289 position: absolute;
1290 top: 0;
1291 width: 2px;
1292 height: 100%;
1293 background: var(--lp-secondary-color);
1294 }
1295 .info-learning .start-date, .info-learning .end-date {
1296 margin-bottom: 8px;
1297 }
1298
1299 .lp-single-course .comment-form .comment-form-url,
1300 .lp-single-course .comment-form .comment-form-email,
1301 .lp-single-course .comment-form .comment-form-author,
1302 .lp-single-course .comment-form .comment-form-comment, .wp-block-learnpress-course-comment .comment-form .comment-form-url,
1303 .wp-block-learnpress-course-comment .comment-form .comment-form-email,
1304 .wp-block-learnpress-course-comment .comment-form .comment-form-author,
1305 .wp-block-learnpress-course-comment .comment-form .comment-form-comment {
1306 display: flex;
1307 flex-direction: column;
1308 gap: 1rem;
1309 }
1310 .lp-single-course .comment-form input[type=url],
1311 .lp-single-course .comment-form input[type=text],
1312 .lp-single-course .comment-form input[type=email],
1313 .lp-single-course .comment-form textarea, .wp-block-learnpress-course-comment .comment-form input[type=url],
1314 .wp-block-learnpress-course-comment .comment-form input[type=text],
1315 .wp-block-learnpress-course-comment .comment-form input[type=email],
1316 .wp-block-learnpress-course-comment .comment-form textarea {
1317 padding: 12px 20px;
1318 outline: none;
1319 border: 1px solid var(--lp-border-color, #E2E0DB);
1320 border-radius: var(--lp-border-radius, 5px);
1321 }
1322 .lp-single-course .comment-form input[type=submit], .wp-block-learnpress-course-comment .comment-form input[type=submit] {
1323 border-radius: var(--lp-border-radius, 5px);
1324 }
1325
1326 /*
1327 Css for Block of Gutenberg
1328 */
1329 /**
1330 * Styles for all page of Block LP
1331 *
1332 * @since 4.2.3
1333 * @version 1.0.0
1334 */
1335 .lp-ico svg {
1336 width: 20px;
1337 height: 20px;
1338 }
1339
1340 .lp-hidden {
1341 display: none !important;
1342 }
1343
1344 .course-price .origin-price {
1345 text-decoration: line-through;
1346 margin-right: 4px;
1347 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
1348 opacity: 0.6;
1349 }
1350
1351 [class*=wp-block-learnpress] img,
1352 .block-editor-block-list__block img {
1353 max-width: 100%;
1354 height: auto;
1355 }
1356 [class*=wp-block-learnpress] .info-meta-item,
1357 .block-editor-block-list__block .info-meta-item {
1358 display: flex;
1359 gap: 4px;
1360 flex-wrap: wrap;
1361 }
1362 [class*=wp-block-learnpress] .info-meta-item i,
1363 .block-editor-block-list__block .info-meta-item i {
1364 color: var(--lp-primary-color, #ffb606);
1365 }
1366 [class*=wp-block-learnpress] .info-meta-left,
1367 .block-editor-block-list__block .info-meta-left {
1368 display: flex;
1369 gap: 8px;
1370 align-items: center;
1371 letter-spacing: 0;
1372 }
1373 [class*=wp-block-learnpress] a,
1374 .block-editor-block-list__block a {
1375 text-decoration: none;
1376 }
1377
1378 .wp-block-learnpress-course-image {
1379 overflow: hidden;
1380 }
1381
1382 .wp-block-learnpress-course-instructor > div > *,
1383 .wp-block-learnpress-course-categories > div > * {
1384 display: inline;
1385 vertical-align: middle;
1386 }
1387
1388 /*
1389 Breadcrumb
1390 */
1391 .wp-block-learnpress-breadcrumb ul {
1392 margin: 0 auto;
1393 list-style: none;
1394 padding: 0;
1395 }
1396 .wp-block-learnpress-breadcrumb li {
1397 display: inline-block;
1398 margin: 0;
1399 }
1400 .wp-block-learnpress-breadcrumb i {
1401 margin: 0 8px;
1402 }
1403 .wp-block-learnpress-breadcrumb a {
1404 color: inherit;
1405 }
1406
1407 .courses-btn-load-more {
1408 padding: 8px 24px;
1409 border-radius: var(--lp-border-radius, 5px);
1410 color: var(--lp-color-base, #333);
1411 border: 1px solid var(--lp-color-base, #333);
1412 font-size: var(--lp-font-size-base, 1em);
1413 transition: all 0.3s;
1414 display: block;
1415 background: transparent;
1416 text-decoration: none;
1417 text-align: center;
1418 cursor: pointer;
1419 margin: 20px auto;
1420 }
1421 .courses-btn-load-more:hover {
1422 background: var(--lp-primary-color, #ffb606);
1423 color: var(--lp-color-white, #fff);
1424 border-color: var(--lp-primary-color, #ffb606);
1425 }
1426
1427 .lp-overlay {
1428 display: none;
1429 position: fixed;
1430 z-index: 99999;
1431 top: 0;
1432 right: 0;
1433 bottom: 0;
1434 left: 0;
1435 width: 100%;
1436 height: 100%;
1437 background-color: rgba(209, 213, 219, 0.8);
1438 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1439 transition-duration: 150ms;
1440 transition-property: opacity;
1441 }
1442
1443 .lp-modal-dialog {
1444 display: flex;
1445 position: fixed;
1446 z-index: 9999;
1447 top: 0;
1448 right: 0;
1449 left: 0;
1450 width: 100%;
1451 min-height: 100vh;
1452 text-align: center;
1453 align-items: center;
1454 justify-content: center;
1455 /*.lp-button {
1456 cursor: pointer;
1457 border: 1px solid $border-color;
1458 border-radius: $border-radius-global;
1459 padding: $spacing-base-2x $spacing-base-4x;
1460
1461 &.loading {
1462 pointer-events: none;
1463 opacity: 0.8;
1464 @include loading();
1465 }
1466
1467 &:hover {
1468 border-color: $color-primary;
1469 color: #fff;
1470 background: $color-primary;
1471 }
1472 }*/
1473 }
1474 .lp-modal-dialog .learn-press-message {
1475 width: auto;
1476 margin: 0 !important;
1477 }
1478 .lp-modal-dialog .lp-modal-content {
1479 display: inline-block;
1480 overflow: hidden;
1481 z-index: 2;
1482 width: auto;
1483 max-width: 600px;
1484 border-radius: 8px;
1485 text-align: left;
1486 vertical-align: middle;
1487 background: white;
1488 color: black;
1489 }
1490 .lp-modal-dialog .lp-modal-content h2,
1491 .lp-modal-dialog .lp-modal-content h3 {
1492 margin: 0;
1493 }
1494 .lp-modal-dialog .lp-modal-content .lp-group-step h3 {
1495 border-bottom: 1px solid #eee;
1496 }
1497 .lp-modal-dialog .lp-modal-content .main-content .terms-upgrade .pd-2em {
1498 padding: 0 1em;
1499 }
1500 .lp-modal-dialog .lp-modal-header {
1501 background: #7c60d9;
1502 border-bottom: 1px solid #eee;
1503 padding: 1em;
1504 }
1505 .lp-modal-dialog .lp-modal-header h3 {
1506 margin: 0;
1507 color: white;
1508 font-weight: 400;
1509 }
1510 .lp-modal-dialog .lp-modal-body .main-content {
1511 max-height: 500px;
1512 overflow: auto;
1513 overscroll-behavior: contain;
1514 }
1515 .lp-modal-dialog .lp-modal-body .main-content h3,
1516 .lp-modal-dialog .lp-modal-body .main-content h2,
1517 .lp-modal-dialog .lp-modal-body .main-content .pd-2em {
1518 padding: 1em;
1519 }
1520 .lp-modal-dialog .lp-modal-footer {
1521 padding: 20px;
1522 background-color: #f9fafb;
1523 text-align: right;
1524 }
1525 .lp-modal-dialog .btn-yes {
1526 color: #fff;
1527 background-color: #7c60d9;
1528 }
1529 .lp-modal-dialog .lp_allow_repurchase_select {
1530 padding: 20px;
1531 background: #f7f7f7;
1532 }
1533 .lp-modal-dialog .lp_allow_repurchase_select > ul {
1534 margin: 0;
1535 padding: 0;
1536 list-style: none;
1537 }
1538 .lp-modal-dialog .lp_allow_repurchase_select > ul li label {
1539 display: flex;
1540 align-items: center;
1541 gap: 10px;
1542 }
1543
1544 .lp-button.btn-finish-course {
1545 cursor: pointer;
1546 width: 100%;
1547 padding: 12px 24px;
1548 background-color: var(--lp-primary-color, #ffb606);
1549 border-width: 0;
1550 border-radius: var(--lp-border-radius, 5px);
1551 border-color: var(--lp-primary-color, #ffb606);
1552 color: var(--lp-color-white, #fff);
1553 font-size: var(--lp-font-size-base, 1em);
1554 text-align: center;
1555 text-decoration: none;
1556 -webkit-transition: all 0.25s;
1557 transition: all 0.25s;
1558 }
1559 .lp-button.btn-finish-course:hover {
1560 background-color: var(--lp-secondary-color, #442e66);
1561 border-color: var(--lp-secondary-color, #442e66);
1562 }
1563
1564 /**
1565 * Mixin
1566 */
1567 @keyframes rotating4 {
1568 from {
1569 transform: rotate(0deg);
1570 }
1571 to {
1572 transform: rotate(360deg);
1573 }
1574 }
1575 @keyframes animation4 {
1576 from {
1577 left: -40%;
1578 width: 40%;
1579 }
1580 to {
1581 left: 100%;
1582 width: 10%;
1583 }
1584 }
1585 :root {
1586 --lp-cotainer-max-with: var(--lp-container-max-width);
1587 }
1588
1589 .wp-block-group {
1590 --lp-container-max-width: var(--wp--style--global--wide-size);
1591 }
1592
1593 .c-gap-4 {
1594 column-gap: 4px;
1595 }
1596
1597 .wp-block-learnpress-course-feature-review .featured-review__title {
1598 font-weight: var(--lp-font-weight-link, 600);
1599 font-size: calc(var(--lp-font-size-base, 1em) * 1.25);
1600 }
1601
1602 [class^=wp-block-learnpress] .extra-box ul {
1603 margin: 0 0 0 20px;
1604 padding: 0;
1605 }
1606
1607 .wp-block-learnpress-course-button-read-more,
1608 .wp-block-learnpress-course-button {
1609 cursor: pointer;
1610 padding: 12px 24px;
1611 background-color: var(--lp-primary-color, #ffb606);
1612 border-width: 0;
1613 border-radius: var(--lp-border-radius, 5px);
1614 border-color: var(--lp-primary-color, #ffb606);
1615 color: var(--lp-color-white, #fff);
1616 font-size: var(--lp-font-size-base, 1em);
1617 text-align: center;
1618 text-decoration: none;
1619 -webkit-transition: all 0.25s;
1620 transition: all 0.25s;
1621 }
1622 .wp-block-learnpress-course-button-read-more:hover,
1623 .wp-block-learnpress-course-button:hover {
1624 background-color: var(--lp-secondary-color, #442e66);
1625 border-color: var(--lp-secondary-color, #442e66);
1626 }
1627 .wp-block-learnpress-course-button-read-more.loading,
1628 .wp-block-learnpress-course-button.loading {
1629 pointer-events: none;
1630 opacity: 0.8;
1631 }
1632 .wp-block-learnpress-course-button-read-more.loading:before,
1633 .wp-block-learnpress-course-button.loading:before {
1634 position: absolute;
1635 inset: 0;
1636 display: flex;
1637 align-items: center;
1638 justify-content: center;
1639 font-family: "lp-icon";
1640 content: "\f110";
1641 animation: lp-rotating 1s linear infinite;
1642 font-variant: normal;
1643 text-transform: none;
1644 -webkit-font-smoothing: antialiased;
1645 -moz-osx-font-smoothing: grayscale;
1646 color: black;
1647 }
1648
1649 @media (min-width: 992px) {
1650 .lp-block-course-sidebar {
1651 margin-top: -260px;
1652 margin-block-start: -260px !important;
1653 }
1654 }
1655 .wp-block-learnpress-item-search .search-course {
1656 display: flex;
1657 position: relative;
1658 height: 70px;
1659 background: var(--lp-white-grey, #F7F7FB);
1660 }
1661 .wp-block-learnpress-item-search .search-course input[name=s] {
1662 display: block;
1663 width: 100%;
1664 margin-left: 30px;
1665 border: none;
1666 color: var(--lp-color-base, #333);
1667 background: transparent;
1668 box-shadow: none;
1669 height: auto;
1670 -webkit-box-sizing: border-box;
1671 box-sizing: border-box;
1672 }
1673 .wp-block-learnpress-item-search .search-course input[name=s]::placeholder {
1674 color: #999;
1675 }
1676 .wp-block-learnpress-item-search .search-course input[name=s]::placeholder {
1677 font-style: italic;
1678 }
1679 .wp-block-learnpress-item-search .search-course input[name=s]:focus {
1680 outline: 0;
1681 }
1682 .wp-block-learnpress-item-search .search-course button {
1683 position: absolute;
1684 top: 0;
1685 right: 10px;
1686 height: 70px;
1687 padding: 0 16px;
1688 border: 0;
1689 background: transparent;
1690 line-height: 1px;
1691 box-shadow: none;
1692 }
1693 .wp-block-learnpress-item-search .search-course button:focus {
1694 outline: none;
1695 }
1696 .wp-block-learnpress-item-search .search-course button i {
1697 color: var(--lp-color-accent, #666);
1698 }
1699 .wp-block-learnpress-item-search .search-course button.clear {
1700 display: none;
1701 }
1702 .wp-block-learnpress-item-search .search-course button.clear::before {
1703 content: "\f00d";
1704 }
1705
1706 .wp-block-learnpress-course-material .lp-button {
1707 padding: 12px 24px;
1708 border: 1px solid var(--lp-border-color, #E2E0DB);
1709 color: var(--lp-color-base, #333);
1710 background: transparent;
1711 box-shadow: unset;
1712 font-family: inherit;
1713 font-weight: 400;
1714 text-align: center;
1715 text-transform: capitalize;
1716 border-radius: var(--lp-border-radius, 5px);
1717 margin-top: 20px;
1718 -webkit-transition: all 0.25s;
1719 transition: all 0.25s;
1720 }
1721 .wp-block-learnpress-course-material .course-material-table {
1722 width: 100%;
1723 display: table;
1724 border-spacing: 0;
1725 border-collapse: collapse;
1726 }
1727 .wp-block-learnpress-course-material .course-material-table tbody tr:nth-child(even) td,
1728 .wp-block-learnpress-course-material .course-material-table .learnpress table tfoot tr:nth-child(even) td {
1729 background: var(--tb-even-color, #fafafa);
1730 }
1731 .wp-block-learnpress-course-material .course-material-table thead {
1732 box-sizing: border-box;
1733 border: 1px solid var(--lp-border-color, #e2e0db);
1734 }
1735 .wp-block-learnpress-course-material .course-material-table th,
1736 .wp-block-learnpress-course-material .course-material-table td {
1737 padding: 0.7em 1em;
1738 border: 1px solid var(--lp-border-color, #e2e0db);
1739 background: #fff;
1740 }
1741 .wp-block-learnpress-course-material .course-material-table th {
1742 border-bottom: none;
1743 background: var(--lp-white-grey, #f7f7fb);
1744 font-weight: 600;
1745 text-align: center;
1746 }
1747 .wp-block-learnpress-course-material .course-material-table th:first-child {
1748 text-align: left;
1749 }
1750 .wp-block-learnpress-course-material .course-material-table tr td {
1751 border: 1px solid var(--lp-border-color, #e2e0db);
1752 line-height: 1.4;
1753 }
1754 .wp-block-learnpress-course-material .course-material-table tr td:not(:first-child) {
1755 text-align: center;
1756 }
1757 .wp-block-learnpress-course-material .course-material-table tfoot td {
1758 text-align: left;
1759 font-weight: bold;
1760 }
1761 .wp-block-learnpress-course-material .course-material-table.searching button:before {
1762 display: inline-block;
1763 content: "\f110";
1764 animation: lp-rotating 1s linear infinite;
1765 }
1766
1767 .wp-block-learnpress-item-hidden-sidebar .section-toggle {
1768 justify-content: flex-end;
1769 flex: 0;
1770 }
1771 .wp-block-learnpress-item-hidden-sidebar .section-toggle i {
1772 color: var(--lp-color-accent, #666);
1773 }
1774
1775 .wp-block-learnpress-item-close .back-course {
1776 padding: 24px;
1777 line-height: 70px;
1778 background: rgba(255, 255, 255, 0.1);
1779 color: #fff;
1780 }
1781 .wp-block-learnpress-item-close .back-course:hover {
1782 background: rgba(255, 255, 255, 0.15);
1783 }
1784 @media (max-width: 768px) {
1785 .wp-block-learnpress-item-close .back-course {
1786 background: transparent;
1787 opacity: 0.6;
1788 padding-left: 15px;
1789 padding-right: 15px;
1790 }
1791 .wp-block-learnpress-item-close .back-course:hover {
1792 background: transparent;
1793 opacity: 1;
1794 }
1795 }
1796
1797 .wp-block-learnpress-item-hidden-sidebar #sidebar-toggle {
1798 display: inline-block;
1799 width: 32px;
1800 min-width: 32px;
1801 line-height: 70px;
1802 height: unset;
1803 margin: 0;
1804 background: rgba(255, 255, 255, 0.1);
1805 color: var(--lp-color-white, #fff);
1806 font-size: 1.4em;
1807 cursor: pointer;
1808 transition: 0.25s;
1809 -webkit-appearance: none;
1810 border: none;
1811 text-align: center;
1812 }
1813 .wp-block-learnpress-item-hidden-sidebar #sidebar-toggle:after {
1814 display: none;
1815 }
1816 .wp-block-learnpress-item-hidden-sidebar #sidebar-toggle::before {
1817 display: inline-block;
1818 position: static;
1819 margin: 0;
1820 width: auto;
1821 height: auto;
1822 font-family: "lp-icon";
1823 content: "\f0d9";
1824 }
1825 .wp-block-learnpress-item-hidden-sidebar #sidebar-toggle:focus {
1826 border: 0;
1827 outline: 0;
1828 }
1829
1830 .wp-block-learnpress-item-progress .items-progress {
1831 display: flex;
1832 justify-content: center;
1833 align-items: center;
1834 column-gap: 10px;
1835 white-space: nowrap;
1836 }
1837 .wp-block-learnpress-item-progress .number {
1838 padding-right: 10px;
1839 font-size: calc(var(--lp-font-size-base, 1em) * 0.86);
1840 }
1841 .wp-block-learnpress-item-progress .learn-press-progress {
1842 overflow: hidden;
1843 position: relative;
1844 width: 80px;
1845 height: 6px;
1846 border-radius: 3px;
1847 }
1848 .wp-block-learnpress-item-progress .learn-press-progress .progress-bg {
1849 overflow: hidden;
1850 position: relative;
1851 height: 6px;
1852 background: #ccc;
1853 border-radius: 5px;
1854 }
1855 .wp-block-learnpress-item-progress .learn-press-progress .progress-bg .progress-active {
1856 position: absolute;
1857 left: 50%;
1858 width: 100%;
1859 height: 100%;
1860 margin-left: -100%;
1861 background: var(--lp-primary-color, #ffb606);
1862 border-radius: 5px;
1863 }
1864 .wp-block-learnpress-item-progress .learn-press-progress .learn-press-progress__active {
1865 position: absolute;
1866 z-index: 1;
1867 left: -100%;
1868 width: 100%;
1869 height: 100%;
1870 border-radius: 3px;
1871 background: var(--lp-primary-color, #ffb606);
1872 -webkit-transition: 0.5s;
1873 transition: 0.5s;
1874 }
1875 .wp-block-learnpress-item-progress .learn-press-progress::before {
1876 display: block;
1877 position: absolute;
1878 z-index: 0;
1879 top: 0;
1880 width: 100%;
1881 height: 100%;
1882 background: #ccc;
1883 content: "";
1884 }
1885
1886 .wp-block-learnpress-item-navigation .course-item-nav {
1887 display: flex;
1888 justify-content: space-between;
1889 }
1890 .wp-block-learnpress-item-navigation .course-item-nav .prev,
1891 .wp-block-learnpress-item-navigation .course-item-nav .next {
1892 display: flex;
1893 line-height: 3.125em;
1894 flex: 1;
1895 position: relative;
1896 }
1897 .wp-block-learnpress-item-navigation .course-item-nav .prev span,
1898 .wp-block-learnpress-item-navigation .course-item-nav .next span {
1899 display: block;
1900 font-weight: bold;
1901 }
1902 .wp-block-learnpress-item-navigation .course-item-nav .prev a,
1903 .wp-block-learnpress-item-navigation .course-item-nav .next a {
1904 display: block;
1905 color: var(--lp-color-accent, #666);
1906 color: #999;
1907 }
1908 .wp-block-learnpress-item-navigation .course-item-nav .prev::before,
1909 .wp-block-learnpress-item-navigation .course-item-nav .next::before {
1910 color: #999;
1911 font-family: "lp-icon";
1912 }
1913 .wp-block-learnpress-item-navigation .course-item-nav .prev:hover a, .wp-block-learnpress-item-navigation .course-item-nav .prev:hover::before,
1914 .wp-block-learnpress-item-navigation .course-item-nav .next:hover a,
1915 .wp-block-learnpress-item-navigation .course-item-nav .next:hover::before {
1916 color: var(--lp-primary-color, #ffb606);
1917 }
1918 .wp-block-learnpress-item-navigation .course-item-nav .prev:hover .course-item-nav__name,
1919 .wp-block-learnpress-item-navigation .course-item-nav .next:hover .course-item-nav__name {
1920 display: block;
1921 }
1922 .wp-block-learnpress-item-navigation .course-item-nav .next {
1923 text-align: right;
1924 flex-direction: row-reverse;
1925 }
1926 .wp-block-learnpress-item-navigation .course-item-nav .next::before {
1927 margin-left: 10px;
1928 content: "\f0da";
1929 }
1930 .wp-block-learnpress-item-navigation .course-item-nav .next[data-nav=next] {
1931 justify-content: flex-end;
1932 }
1933 .wp-block-learnpress-item-navigation .prev::before {
1934 margin-right: 10px;
1935 content: "\f0d9";
1936 }
1937 .wp-block-learnpress-item-navigation .prev .course-item-nav__name {
1938 right: auto;
1939 left: -30px;
1940 }
1941 .wp-block-learnpress-item-navigation .prev .course-item-nav__name::before {
1942 right: auto;
1943 left: 5px;
1944 }
1945 @media (max-width: 1024px) {
1946 .wp-block-learnpress-item-navigation .prev .course-item-nav__name {
1947 left: 15px;
1948 }
1949 }
1950 .wp-block-learnpress-item-navigation .course-item-nav__name {
1951 display: none;
1952 position: absolute;
1953 top: -20px;
1954 right: -30px;
1955 width: auto;
1956 padding: 10px 15px;
1957 color: var(--lp-color-accent, #666);
1958 background: #ccc;
1959 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
1960 line-height: 1;
1961 }
1962 @media (max-width: 1024px) {
1963 .wp-block-learnpress-item-navigation .course-item-nav__name {
1964 top: -25px;
1965 right: 15px;
1966 left: auto;
1967 }
1968 }
1969
1970 .wp-block-learnpress-item-curriculum .lp-course-curriculum__title,
1971 .wp-block-learnpress-item-curriculum .course-curriculum-info,
1972 .wp-block-learnpress-item-curriculum .course-section__description {
1973 display: none;
1974 }
1975
1976 .wp-block-learnpress-item-content .content-item-wrap {
1977 padding: 0;
1978 }
1979
1980 .wp-block-learnpress-item-curriculum .lp-course-curriculum .course-section .course-item__content {
1981 display: flex;
1982 justify-content: space-between;
1983 column-gap: 12px;
1984 row-gap: 8px;
1985 align-items: baseline;
1986 flex: 1;
1987 flex-direction: row;
1988 }
1989
1990 .wp-block-learnpress-list-courses .learn-press-courses .course {
1991 width: unset;
1992 padding: 0;
1993 }
1994
1995 .wp-block-learnpress-course-featured .course-featured {
1996 margin-bottom: 0;
1997 background-color: inherit;
1998 color: inherit;
1999 padding: 0;
2000 }
2001
2002 .courses-order-by,
2003 .block-courses-order-by {
2004 border: 1px solid var(--lp-border-color, #E2E0DB);
2005 border-radius: var(--lp-border-radius, 5px);
2006 padding: 8px 16px;
2007 height: inherit;
2008 font-size: inherit;
2009 line-height: 1.1;
2010 box-shadow: none;
2011 padding-right: 30px;
2012 background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE4cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDE4IDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8ZyBpZD0iVmVjdG9yLSgxKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4wMDAwMDAsIDEuMDAwMDAwKSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhdGgiIHBvaW50cz0iMCAwIDggOCAxNiAwIj48L3BvbHlsaW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
2013 background-size: 0.8em;
2014 background-position: calc(100% - 0.5em) center;
2015 background-repeat: no-repeat;
2016 -webkit-appearance: none;
2017 appearance: none;
2018 line-height: 1.1;
2019 }
2020 .woocommerce-js .courses-order-by,
2021 .woocommerce-js .block-courses-order-by {
2022 background-position-x: calc(100% - 10px);
2023 }
2024 .courses-order-by:focus,
2025 .block-courses-order-by:focus {
2026 border-color: var(--lp-primary-color);
2027 outline: 0;
2028 }
2029
2030 .course-img img {
2031 display: block;
2032 }
2033
2034 .block-search-courses {
2035 display: flex;
2036 flex: 1;
2037 margin-bottom: 0;
2038 }
2039 .block-search-courses input {
2040 width: 100%;
2041 max-width: 240px;
2042 margin: 0 4px 0 0;
2043 border: 1px solid var(--lp-border-color, #E2E0DB);
2044 border-radius: var(--lp-border-radius, 5px);
2045 padding: 8px 16px;
2046 height: inherit;
2047 font-size: inherit;
2048 line-height: 1.1;
2049 box-shadow: none;
2050 }
2051 .block-search-courses input::placeholder {
2052 color: #999;
2053 }
2054 .block-search-courses input:focus {
2055 border-color: var(--lp-primary-color);
2056 outline: 0;
2057 }
2058 .block-search-courses button {
2059 border: 1px solid var(--lp-border-color, #E2E0DB);
2060 border-radius: var(--lp-border-radius, 5px);
2061 padding: 8px 16px;
2062 height: inherit;
2063 font-size: inherit;
2064 line-height: 1.1;
2065 box-shadow: none;
2066 box-shadow: 0 0 0;
2067 margin-bottom: 0;
2068 }
2069 .block-search-courses button i {
2070 font-size: 1.2em;
2071 line-height: 1.2;
2072 }
2073 .block-search-courses button:focus {
2074 outline: 0;
2075 }
2076 .block-search-courses button.loading > i:before {
2077 display: inline-block;
2078 content: "\f110";
2079 animation: lp-rotating 1s linear infinite;
2080 }
2081
2082 @media (max-width: 767px) {
2083 .wp-block-learnpress-course-search {
2084 width: 100%;
2085 }
2086 .wp-block-learnpress-course-search input {
2087 min-width: 240px;
2088 max-width: unset;
2089 }
2090 }
2091 .course-filter-btn-mobile {
2092 display: inline-flex;
2093 align-items: center;
2094 }
2095 @media (min-width: 769px) {
2096 .course-filter-btn-mobile {
2097 display: none;
2098 }
2099 }
2100
2101 ul.wp-block-learn-press-courses {
2102 list-style: none;
2103 margin: 0;
2104 max-width: 100%;
2105 padding: 0;
2106 }
2107 ul.wp-block-learn-press-courses[data-layout=grid] {
2108 --columns: 3;
2109 --gap: 1.25em;
2110 --min-width: 200px;
2111 grid-gap: var(--gap);
2112 display: grid;
2113 grid-template-columns: repeat(auto-fill, minmax(max(var(--min-width), 100% / var(--columns) - var(--gap) * (var(--columns) - 1) / var(--columns)), 1fr));
2114 margin-bottom: 2.25em;
2115 }
2116 @media (max-width: 768px) {
2117 ul.wp-block-learn-press-courses .wp-block-learn-press-courses[data-layout=grid] {
2118 --columns: min(var(--columns), 2);
2119 }
2120 }
2121 @media (max-width: 480px) {
2122 ul.wp-block-learn-press-courses .wp-block-learn-press-courses[data-layout=grid] {
2123 --columns: 1;
2124 }
2125 }
2126
2127 .wp-block-learnpress-course-price .course-price .free,
2128 .wp-block-learnpress-course-price .course-price .price {
2129 font-size: calc(var(--lp-font-size-base, 1em) * 1.25);
2130 font-weight: var(--lp-font-weight-link, 600);
2131 }
2132 .wp-block-learnpress-course-price .course-price .origin-price {
2133 margin-right: 8px;
2134 opacity: 0.8;
2135 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
2136 text-decoration: line-through;
2137 }
2138
2139 .wp-block-learnpress-course-button-read-more button {
2140 padding: 8px 24px;
2141 border-radius: var(--lp-border-radius, 5px);
2142 color: var(--lp-color-base, #333);
2143 border: 1px solid var(--lp-color-base, #333);
2144 transition: all 0.3s;
2145 display: block;
2146 background: transparent;
2147 text-decoration: none;
2148 text-align: center;
2149 }
2150 .wp-block-learnpress-course-button-read-more button:hover {
2151 background: var(--lp-primary-color, #ffb606);
2152 color: var(--lp-color-white, #fff);
2153 border-color: var(--lp-primary-color, #ffb606);
2154 }
2155
2156 .wp-block-learnpress-course-button .course-readmore a {
2157 padding: 8px 24px;
2158 border-radius: var(--lp-border-radius, 5px);
2159 color: var(--lp-color-base, #333);
2160 border: 1px solid var(--lp-color-base, #333);
2161 transition: all 0.3s;
2162 display: block;
2163 background: transparent;
2164 text-decoration: none;
2165 text-align: center;
2166 }
2167 .wp-block-learnpress-course-button .course-readmore a:hover {
2168 background: var(--lp-primary-color, #ffb606);
2169 color: var(--lp-color-white, #fff);
2170 border-color: var(--lp-primary-color, #ffb606);
2171 }
2172
2173 .courses-order-by-wrapper .courses-order-by {
2174 border: 1px solid var(--lp-border-color, #E2E0DB);
2175 border-radius: var(--lp-border-radius, 5px);
2176 padding: 8px 16px;
2177 height: inherit;
2178 font-size: inherit;
2179 line-height: 1.1;
2180 box-shadow: none;
2181 padding-right: 30px;
2182 background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjE4cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDE4IDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8ZyBpZD0iVmVjdG9yLSgxKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4wMDAwMDAsIDEuMDAwMDAwKSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlBhdGgiIHBvaW50cz0iMCAwIDggOCAxNiAwIj48L3BvbHlsaW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
2183 background-size: 0.8em;
2184 background-position: calc(100% - 0.5em) center;
2185 background-repeat: no-repeat;
2186 -webkit-appearance: none;
2187 appearance: none;
2188 line-height: 1.1;
2189 }
2190 .woocommerce-js .courses-order-by-wrapper .courses-order-by {
2191 background-position-x: calc(100% - 10px);
2192 }
2193 .courses-order-by-wrapper .courses-order-by:focus {
2194 border-color: var(--lp-primary-color, #ffb606);
2195 outline: 0;
2196 }
2197
2198 .wp-block-learnpress-instructor-social .instructor-social {
2199 display: flex;
2200 gap: 12px;
2201 font-size: calc(var(--lp-font-size-base, 1em) * 0.925);
2202 }
2203 .wp-block-learnpress-instructor-social .instructor-social i {
2204 width: 40px;
2205 height: 40px;
2206 display: inline-flex;
2207 align-items: center;
2208 justify-content: center;
2209 border: 1px solid var(--lp-border-color, #e2e0db);
2210 border-radius: 50%;
2211 }
2212
2213 .wp-block-learnpress-instructor-background img {
2214 opacity: 0;
2215 visibility: hidden;
2216 }
2217
2218 .wp-block-learnpress-instructor-avatar {
2219 overflow: hidden;
2220 aspect-ratio: 1;
2221 }
2222
2223 .wp-block-learnpress-instructor-background {
2224 position: relative;
2225 }
2226 .wp-block-learnpress-instructor-background:hover .lp-btn-to-edit-cover-image {
2227 opacity: 1;
2228 visibility: visible;
2229 }
2230 .wp-block-learnpress-instructor-background .lp-btn-to-edit-cover-image {
2231 position: absolute;
2232 bottom: 0;
2233 right: 0;
2234 background: var(--lp-white-grey, #F7F7FB);
2235 padding: 12px 20px;
2236 border-radius: var(--lp-border-radius, 5px) 0 var(--lp-border-radius, 5px) 0;
2237 text-transform: capitalize;
2238 cursor: pointer;
2239 color: var(--lp-primary-color, #ffb606);
2240 text-decoration: none;
2241 opacity: 0;
2242 visibility: hidden;
2243 }
2244 @media (max-width: 767px) {
2245 .wp-block-learnpress-instructor-background .lp-btn-to-edit-cover-image {
2246 font-size: 0;
2247 padding: 4px 12px;
2248 opacity: 1;
2249 visibility: visible;
2250 }
2251 .wp-block-learnpress-instructor-background .lp-btn-to-edit-cover-image:before {
2252 font-family: "lp-icon";
2253 content: "\f044";
2254 font-size: 16px;
2255 }
2256 }
2257
2258 .lp-sidebar-toggle__close .js-block-sidebar {
2259 display: none;
2260 }
2261
2262 .lp-sidebar-toggle__open .js-block-sidebar {
2263 display: block;
2264 }