PluginProbe
User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor / 3.9.6
User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor v3.9.6
4.0.3 4.0.2 4.0.1 4.0.0 3.16.6 3.16.5 3.16.4 3.16.3 3.16.2 3.16.1 3.16.0 3.15.9 3.9.9 3.9.5 3.9.6 3.9.7 3.9.8 1.1.7 1.1.8 1.1.9 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 All 341 releases
profile-builder / assets / css / style-front-end.css

style-front-end.css in User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor 3.9.6, at assets/css/style-front-end.css

1,042 lines 22.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Register & Edit Profile Forms*/
2
3 /*--------------------------------------------------------------
4 >>> TABLE OF CONTENTS:
5 ----------------------------------------------------------------
6 1.0 - Reset
7 2.0 - Forms
8 3.0 - Alignments
9 4.0 - Errors & Notices
10 5.0 - User Listing
11 6.0 - Media Queries
12 --------------------------------------------------------------*/
13
14 /*--------------------------------------------------------------
15 1.0 Reset
16 --------------------------------------------------------------*/
17 .wppb-user-forms,
18 .wppb-user-forms *{
19 -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
20 -moz-box-sizing: border-box !important; /* Firefox, other Gecko */
21 box-sizing: border-box !important; /* Opera/IE 8+ */
22 }
23
24 /*--------------------------------------------------------------
25 2.0 Forms
26 --------------------------------------------------------------*/
27 .wppb-user-forms input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([value="agree"]),
28 .wppb-user-forms select,
29 .wppb-user-forms textarea{
30 font-size: 100%; /* Corrects font size not being inherited in all browsers */
31 margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
32 vertical-align: baseline; /* Improves appearance and consistency in all browsers */
33 }
34 .wppb-user-forms input[type="checkbox"],
35 .wppb-user-forms input[type="radio"] {
36 padding: 0; /* Addresses excess padding in IE8/9 */
37 }
38 .wppb-user-forms input[type="search"] {
39 -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
40 -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
41 -moz-box-sizing: content-box;
42 box-sizing: content-box;
43 }
44 .wppb-user-forms input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
45 -webkit-appearance: none;
46 }
47 .wppb-user-forms button::-moz-focus-inner,
48 .wppb-user-forms input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
49 border: 0;
50 padding: 0;
51 }
52 .wppb-user-forms input[type="text"],
53 .wppb-user-forms input[type="number"],
54 .wppb-user-forms input[type="email"],
55 .wppb-user-forms input[type="url"],
56 .wppb-user-forms input[type="password"],
57 .wppb-user-forms input[type="search"],
58 .wppb-user-forms textarea{
59 color: #666;
60 border: 1px solid #ccc;
61 border-radius: 3px;
62 }
63 .wppb-user-forms input[type="text"]:focus,
64 .wppb-user-forms input[type="number"]:focus,
65 .wppb-user-forms input[type="email"]:focus,
66 .wppb-user-forms input[type="url"]:focus,
67 .wppb-user-forms input[type="password"]:focus,
68 .wppb-user-forms input[type="search"]:focus,
69 .wppb-user-forms textarea:focus {
70 color: #111;
71 }
72 .wppb-user-forms input[type="text"],
73 .wppb-user-forms input[type="number"],
74 .wppb-user-forms input[type="email"],
75 .wppb-user-forms input[type="url"],
76 .wppb-user-forms input[type="password"],
77 .wppb-user-forms input[type="search"] {
78 padding: 3px;
79 }
80 .wppb-user-forms textarea {
81 overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
82 padding-left: 3px;
83 vertical-align: top; /* Improves readability and alignment in all browsers */
84 width: 100%;
85 }
86 .wppb-user-forms .wppb-wysiwyg .wp-editor-wrap { /* properly align wysiwyg editor among form fields */
87 float:left;
88 width:69.9%;
89 }
90 .wppb-user-forms .wppb-wysiwyg button:hover{ /* wysiwyg - overwrite the theme inherited background color on hover*/
91 background: none;
92 }
93 .wppb-user-forms .wppb-wysiwyg div.mce-tinymce.mce-panel{ /*Display the borders for the TinyMCE editor - Visual tab*/
94 border: 1px solid #ccc !important;
95 color: #666 !important;
96 }
97 .wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-first{
98 border-width: 0 0 1px 0 !important;
99 }
100 .wppb-user-forms .wppb-wysiwyg div.mce-panel.mce-last{
101 border-width: 1px 0 !important;
102 }
103 .wppb-user-forms .wppb-wysiwyg .quicktags-toolbar { /*Display the borders for the TinyMCE editor - Text tab*/
104 border: 1px solid #dedede;
105 border-bottom: 0;
106 }
107 #wp-link label input[type="text"] { /*Fix the looks of the Add Link window for TinyMCE editor*/
108 padding: 0px;
109 }
110
111 #wppb-search-fields{
112 min-width: 250px;
113 float:left;
114 margin-right:20px;
115 }
116
117 .wppb-user-forms .wppb-search-button{
118 margin-right:10px;
119 padding:7px 20px;
120 line-height: 24px;
121 }
122
123 .wppb-search-users-wrap{
124 margin-bottom: 20px;
125 }
126
127 .wppb-user-forms .extra_field_heading {
128 margin-bottom: 0;
129 }
130
131 .wppb-gdpr-delete-button .wppb-delete-account {
132 width: 110px;
133 }
134
135 .wppb-user-forms .form-submit #register:disabled,
136 .wppb-user-forms .form-submit #edit_profile:disabled {
137 background: #414141;
138 opacity: 0.3;
139 cursor: not-allowed;
140 }
141
142 /*--------------------------------------------------------------
143 3.0 Alignments
144 --------------------------------------------------------------*/
145 .wppb-user-forms ul{
146 max-width:900px;
147 list-style:none;
148 margin-left:0;
149 margin-right:0;
150 padding-left:0;
151 padding-right:0;
152 }
153
154 .wppb-user-forms ul li{
155 list-style:none;
156 }
157
158 #wppb-login-wrap p,
159 #select_user_to_edit_form p {
160 overflow:hidden;
161 margin:0;
162 padding-bottom:14px;
163 }
164
165 .wppb-user-forms ul li{
166 margin:0;
167 padding-bottom:14px;
168 }
169
170 .wppb-user-forms ul li:after{
171 content: "";
172 clear: both;
173 display: block;
174 }
175
176 .wppb-user-forms .wppb-input-hidden {
177 padding-bottom: 0;
178 }
179
180 .wppb-user-forms.wppb-user-role-administrator .wppb-input-hidden {
181 padding-bottom: 14px;
182 }
183
184 .wppb-user-forms .wppb-form-field > ul {
185 margin-left: 0;
186 }
187
188 .wppb-form-field.wppb-default-password,
189 .wppb-form-field.wppb-default-repeat-password,
190 #wppb-login-wrap .login-password {
191 position: relative;
192 }
193
194 .wppb-form-field label,
195 #wppb-login-wrap .login-username label,
196 #wppb-login-wrap .login-password label,
197 #wppb-login-wrap .login-auth label{
198 width:30%;
199 float:left;
200 min-height:1px;
201 }
202 .wppb-form-field input[type="text"], .wppb-form-field input[type="number"], .wppb-form-field input[type="email"], .wppb-form-field input[type="url"], .wppb-form-field input[type="password"], .wppb-form-field input[type="search"],
203 .wppb-form-field select,
204 .wppb-form-field textarea,
205 .wppb-checkboxes,
206 .wppb-radios,
207 #wppb-login-wrap .login-username input,
208 #wppb-login-wrap .login-password input,
209 #wppb-login-wrap .login-auth input{
210 width:69.9%;
211 float:left;
212 }
213
214 #wppb-login-wrap .login-remember {
215 display: flex;
216 align-items: center;
217 }
218
219 #wppb-login-wrap .login-remember input {
220 cursor: pointer;
221 }
222
223 #wppb-login-wrap .login-remember label {
224 padding-left: 8px;
225 margin-bottom: 0px;
226 cursor: pointer;
227 }
228
229 .wppb-form-field.wppb-timepicker select {
230 width: auto;
231 margin-right: 5px;
232 }
233
234 .wppb-user-forms .wppb-wysiwyg .wp-editor-wrap .wp-editor-tabs *{
235 box-sizing: content-box !important;
236 }
237
238 .wppb-user-forms .wp-editor-wrap input {
239 float: none;
240 width: auto;
241 }
242
243 input#send_credentials_via_email{
244 float:none;
245 margin-right:10px
246 }
247
248 .wppb-send-credentials-checkbox label{
249 width:auto;
250 }
251
252 .wppb-form-field > span{
253 display:block;
254 clear:both;
255 margin-left:30%;
256 font-size:80%;
257 font-style:italic;
258 }
259
260 .wppb-form-field > span.custom_field_html {
261 font-style: normal;
262 font-size: 100%;
263 }
264
265 .wppb-form-field > span.select2-container {
266 font-style: normal;
267 font-size: 100%;
268 clear:none;
269 }
270
271 .wppb-repeater .wppb-select-cpt span.select2-container{
272 width:auto !important;
273 }
274
275 .wppb-form-field.wppb-timepicker > span.wppb-timepicker-separator {
276 display: inline-block;
277 float: left;
278 clear: none;
279 margin-left: 0;
280 margin-right: 5px;
281 font-size: 100%;
282 font-style: normal;
283 }
284
285 .wppb_upload_button{
286 display:inline-block;
287 }
288
289 .wppb-user-forms .wppb-checkboxes li,
290 .wppb-user-forms .wppb-radios li{
291 display:inline-block;
292 padding:0 20px 0 0;
293 }
294
295 .wppb-user-forms .wppb-checkboxes li.wppb-hidden{
296 padding: 0;
297 }
298
299 .wppb-form-field .wppb-checkboxes label,
300 .wppb-form-field .wppb-radios label{
301 float:none;
302 min-width:0;
303 padding-left:5px;
304 width:auto;
305 display:inline-block;
306 }
307
308 .wppb-checkbox-terms-and-conditions input,
309 .wppb-checkboxes li input,
310 .wppb-radios li input{
311 min-width:0;
312 float:none;
313 }
314
315 .wppb-edit-user .wppb-checkbox-terms-and-conditions {
316 display:none;
317 }
318
319 .wppb-form-field.wppb-heading span,
320 .wppb-default-about-yourself-heading span,
321 .wppb-default-contact-info-heading span,
322 .wppb-default-name-heading span,
323 .wppb-checkbox-terms-and-conditions span{
324 margin-left:0;
325 }
326
327 .wppb-checkbox-terms-and-conditions label {
328 width: 100%;
329 }
330
331 .wppb-form-field.wppb-checkbox-terms-and-conditions input[type="checkbox"].custom_field_toa {
332 float:none;
333 margin-right:10px
334 }
335
336
337 .wppb-recaptcha-element{
338 display: inline-block;
339 }
340 .wppb-recaptcha-element.wppb-invisible-recaptcha {
341 display: block !important;
342 }
343 .wppb-recaptcha-element iframe{
344 margin-bottom: 0;
345 }
346
347 .wppb-form-field input.wppb-map-search-box {
348 position: absolute;
349 top: 10px !important;
350 height: 34px;
351 width: 50%;
352 min-width: 250px;
353 background: #fff;
354 border: 0;
355 border-radius: 1px;
356 padding: 0 10px;
357 box-shadow: 0 1px 1px 0 #c1c1c1;
358 font-family: 'Roboto', sans-serif;
359 }
360
361 .wppb-create-new-site{
362 width: 100%;
363 }
364 input#wppb_create_new_site_checkbox{
365 width: auto;
366 margin-right: 10px;
367 float: none;
368 }
369 label[for=wppb_create_new_site_checkbox]{
370 width:100%;
371 }
372 label[for=blog-privacy]{
373 width:100%;
374 }
375
376
377 /* GDPR checkbox */
378 .wppb-gdpr-checkbox.wppb-form-field label{
379 width:100%;
380 float:none;
381 }
382
383 .wppb-gdpr-checkbox.wppb-form-field #user_consent_gdpr{
384 float:none;
385 margin:0 10px 0 0;
386 }
387
388
389 /*--------------------------------------------------------------
390 4.0 Errors & Notices
391 --------------------------------------------------------------*/
392
393 .wppb-error,
394 .wppb-warning,
395 .wppb-notice,
396 .wppb-success {
397 padding: 6px 9px;
398 margin: 0 auto 25px;
399 display: block;
400 width: 100%;
401 }
402
403 .wppb-error,
404 .wppb-warning {
405 box-sizing: border-box;
406 background: #ffebe8;
407 border: 1px solid #C00;
408 }
409
410 .wppb-error,
411 .wppb-warning,
412 .wppb-notice {
413 color:#222222 !important;
414 }
415
416 .wppb-error a,
417 .wppb-warning a{
418 color:#007acc !important;
419 }
420
421 .admin-bar #wppb_form_general_message{
422 padding-top:32px;
423 }
424
425 .wppb-error a:hover,
426 .wppb-warning a:hover{
427 color:#007acc !important;
428 text-decoration: underline;
429 }
430
431 .wppb-notice {
432 box-sizing: border-box;
433 background: #ccc;
434 border: 1px solid #666;
435 }
436
437 .wppb-required{
438 color: red;
439 }
440
441 .wppb-required,
442 .wppb-checkbox-terms-and-conditions span.wppb-required{
443 margin-left:5px;
444 }
445
446 .wppb-success {
447 box-sizing: border-box;
448 background: #e7f7d3;
449 border: 1px solid #6c3;
450 }
451
452 .wppb-register-user .wppb-field-error,
453 .wppb-edit-user .wppb-field-error,
454 #wppb-recover-password .wppb-field-error{
455 background-color: #FFDFDF;
456 border: 1px dotted #C89797;
457 margin-bottom: 6px !important;
458 padding: 6px !important;
459 }
460
461 .wppb-field-error > input,
462 .wppb-field-error > select,
463 .wppb-field-error > textarea,
464 .wppb-field-error > label{
465 margin-bottom: 10px;
466 }
467
468 .wppb-field-error img{
469 box-shadow: none;
470 -webkit-box-shadow:none;
471 border:none;
472 border-radius:0px;
473 vertical-align: middle;
474 margin-top: -3px;
475 padding-left:5px;
476 width: auto;
477 height: auto;
478 }
479
480 .wppb-form-field > span.wppb-form-error{
481 margin-top:10px;
482 padding-top: 5px;
483 border-top:1px dotted #c89797;
484 font-size:100%;
485 margin-left: 0;
486 }
487
488 /* Remove global Blog Details Field error */
489 #wppb-register-user .wppb-default-blog-details.wppb-field-error{
490 background-color: transparent !important;
491 border: 0px !important;
492 }
493 .wppb-default-blog-details > span.wppb-form-error{
494 display:none;
495 }
496 .wppb-blog-details-heading span {
497 margin-left: 0;
498 }
499
500 .wppb-honeypot {
501 display: none;
502 }
503
504
505 /*--------------------------------------------------------------
506 5.0 User Listing
507 --------------------------------------------------------------*/
508 .wppb-table *{
509 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
510 }
511 .wppb-table{
512 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
513 border-spacing: 0.5rem;
514 border-collapse: collapse;
515 width: 100%;
516 }
517
518 .wppb-table th{
519 background: #f4f4f4;
520 padding: 7px;
521 border:1px solid #e1e1e1;
522 text-align: left;
523 }
524
525 .wppb-table thead tr:hover{
526 background: none;
527 }
528
529 .wppb-table .wppb-sorting .wppb-sorting-default {
530 display: inline-block;
531 width: 16px;
532 height: 16px;
533 background: url('../images/sorting-default.png') no-repeat center center;
534 vertical-align: middle;
535 }
536
537 .wppb-table .wppb-sorting .wppb-sorting-ascending {
538 background-image: url('../images/sorting-ascending.png');
539 }
540
541 .wppb-table .wppb-sorting .wppb-sorting-descending {
542 background-image: url('../images/sorting-descending.png');
543 }
544
545 .wppb-table tr:hover{
546 background: #f1fcff;
547 }
548 .wppb-table td{
549 padding: 7px;
550 border:1px solid #e1e1e1;
551 }
552
553 .wppb-table .wppb-posts,
554 .wppb-table .wppb-moreinfo{
555 text-align: center;
556 }
557
558 .wppb-avatar img {
559 max-width: none;
560 }
561
562 ul.wppb-profile{
563 list-style-type: none;
564 margin-left: 0;
565 margin-right: 0;
566 padding-left:0;
567 padding-right: 0;
568 }
569
570 ul.wppb-profile li{
571 margin-left: 0;
572 margin-right: 0;
573 overflow: hidden;
574 }
575
576 ul.wppb-profile li label{
577 display: block;
578 width:30%;
579 float:left;
580 min-height:1px;
581 font-weight: bold;
582 }
583
584 ul.wppb-profile li span{
585 display: block;
586 width:69.9%;
587 float:left;
588 }
589
590 ul.wppb-profile li h3,
591 ul.wppb-profile li h3:first-child{
592 margin:20px 0;
593 padding-top:20px;
594 border-top:1px solid #d2d2d2;
595 }
596
597 ul.wppb-faceted-list{
598 list-style: none;
599 margin:0 0 20px;
600 }
601
602 ul.wppb-faceted-list:after{
603 visibility: hidden;
604 display: block;
605 font-size: 0;
606 content: " ";
607 clear: both;
608 height: 0;
609 }
610
611 ul.wppb-faceted-list > li{
612 float:left;
613 margin-right: 15px;
614 max-width: 300px;
615 }
616
617 ul.wppb-faceted-list > li:first-child{
618 float:none;
619 clear:both;
620 }
621
622 .wppb-userlisting-container .wppb-faceted-list li h5{
623 margin-top: 20px;
624 margin-bottom: 5px;
625 }
626
627 ul.wppb-faceted-list label > *{
628 vertical-align: middle;
629 }
630
631 ul.wppb-faceted-list input[type="checkbox"]{
632 margin-right: 5px;
633 }
634
635 .wppb-userlisting-container.wppb-spinner{
636 position:relative;
637 opacity: 0.5
638 }
639
640 .wppb-userlisting-container.wppb-spinner:after{
641 content: '';
642 position: absolute;
643 top: 50%;
644 left: 50%;
645 margin-top: -16px;
646 margin-left: -16px;
647 display: block;
648 width: 32px;
649 height: 32px;
650 /*background: url('../images/ajax-loader.gif') no-repeat center;*/
651 z-index: 1000;
652 }
653
654 ul.wppb-faceted-list .hide-this{
655 display:none;
656 }
657
658 #wppb-remove-facets-container{
659 list-style: none;
660 margin: 0;
661 }
662
663 .wppb-remove-facet:before, .wppb-remove-all-facets:before {
664 content: "x";
665 display: inline-block;
666 border-right: 1px dotted #D3CCC9;
667 border-right: 1px dotted #6F6F6F;
668 padding-right: 5px;
669 margin-right: 5px;
670 }
671
672 .wppb-userlisting-container .wppb-ul-range-values{
673 padding: 5px 0;
674 }
675
676 .wppb-userlisting-container:after {
677 visibility: hidden;
678 display: block;
679 font-size: 0;
680 content: " ";
681 clear: both;
682 height: 0;
683 }
684
685 .wppb-float-left{
686 float:left;
687 }
688
689 .wppb-float-right{
690 float:right;
691 }
692
693 .wppb-facet-float-left{
694 float:left;
695 max-width:300px;
696 }
697
698 .wppb-facet-float-right{
699 float:right;
700 max-width:300px;
701 }
702
703 li.wppb-facet-search{
704 position: relative;
705 }
706
707 .wppb-facet-search-wrap label {
708 display: inline-block;
709 position: relative;
710 padding: 0 !important;
711 margin: 0 !important;
712 }
713
714 .wppb-facet-search{
715 width: 75% !important;
716 margin-right: 5px !important;
717 }
718
719 .wppb-facet-search .screen-reader-text{
720 display: none;
721 }
722
723 .wppb-facet-search,
724 .wppb-search-submit {
725 box-sizing: border-box;
726 display: inline-block !important;
727 vertical-align: middle;
728 }
729
730 .wppb-search-submit{
731 display: inline-block;
732 width: 20%;
733 height: 100%;
734 background: #4F5963;
735 position: absolute;
736 right: 0;
737
738 cursor: pointer;
739 border: 1px solid #444D57;
740 border-radius: 3px;
741 padding: 0 !important;
742 margin: 0 !important;
743 }
744
745 .wppb-search-submit:hover {
746 background: #fff;
747 color: #4F5963;
748 }
749
750 .wppb-search-submit::before{
751 content: "\26B2";
752 display: inline-block;
753 color: #fff;
754 font-size: 120%;
755
756 -webkit-transform: rotate(-45deg);
757 -moz-transform: rotate(-45deg);
758 -o-transform: rotate(-45deg);
759 transform: rotate(-45deg);
760 }
761
762 .wppb-search-submit:hover::before{
763 color: #4F5963;
764 }
765
766 @media screen and ( max-width: 720px ) {
767
768 .wppb-table {
769 border: 0;
770 }
771
772 .wppb-table thead {
773 display: none
774 }
775
776 .wppb-table tr {
777 display: block;
778 margin-bottom: 30px;
779 }
780
781 .wppb-table td {
782 display: block;
783 text-align: right;
784 border-bottom: 0;
785 }
786
787 .wppb-table td:last-of-type {
788 border-bottom: 1px solid #e1e1e1;
789 }
790
791 .wppb-table .wppb-posts,
792 .wppb-table .wppb-moreinfo{
793 text-align: right;
794 }
795
796 .wppb-table td:before {
797 content: attr(data-label);
798 float: left;
799 }
800
801 .wppb-table td:after {
802 content: '';
803 display: block;
804 clear: both;
805 }
806
807 }
808
809 /*--------------------------------------------------------------
810 6.0 Media Queries
811 --------------------------------------------------------------*/
812
813 @media screen and (max-width: 500px) {
814
815 .wppb-form-field label,
816 #wppb-login-wrap .login-username label,
817 #wppb-login-wrap .login-password label,
818 #wppb-login-wrap .login-auth label,
819 ul.wppb-profile li label{
820 width:100%;
821 display:block;
822 float:none;
823 }
824
825 .wppb-form-field input[type="text"], .wppb-form-field input[type="number"], .wppb-form-field input[type="email"], .wppb-form-field input[type="url"], .wppb-form-field input[type="password"], .wppb-form-field input[type="search"],
826 .wppb-form-field select,
827 .wppb-form-field textarea,
828 .wppb-checkboxes,
829 .wppb-radios,
830 #wppb-login-wrap .login-username input,
831 #wppb-login-wrap .login-password input,
832 #wppb-login-wrap .login-auth input,
833 ul.wppb-profile li span{
834 width:100%;
835 float:left;
836 }
837
838 .wppb-form-field > span{
839 margin-left:0;
840 }
841
842 .wppb-checkboxes li label,
843 .wppb-radios li label{
844 display:inline;
845 }
846
847 .wppb-form-field .wppb-avatar-nofile,
848 .wppb-form-field .wppb-avatar-file,
849 .wppb-form-field .wppb-upload-nofile,
850 .wppb-form-field .wppb-upload-file{
851 margin-left:0;
852 }
853
854 .wppb-form-field.wppb-default-password button.wppb-toggle-pw,
855 .wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw,
856 #wppb-login-wrap .login-password button.wppb-toggle-pw {
857 top: 6px!important;
858 }
859
860 }
861
862 /*--------------------------------------------------------------
863 7.0 Password Strength
864 --------------------------------------------------------------*/
865 #pass-strength-result {
866 background-color: #eee;
867 border: 1px solid #ddd;
868 display: none;
869 float: left;
870 margin: 13px 5px 5px 30%;
871 padding: 3px 5px;
872 text-align: center;
873 width: 200px;
874 height:28px;
875 }
876 #pass-strength-result.short {
877 background-color: #ffa0a0;
878 border-color: #f04040;
879 }
880 #pass-strength-result.bad {
881 background-color: #ffb78c;
882 border-color: #ff853c;
883 }
884 #pass-strength-result.good {
885 background-color: #ffec8b;
886 border-color: #fc0;
887 }
888 #pass-strength-result.strong {
889 background-color: #c3ff88;
890 border-color: #8dff1c;
891 }
892
893 /*--------------------------------------------------------------
894 7.0 Show/Hide Password
895 --------------------------------------------------------------*/
896 .wppb-form-field.wppb-default-password button.wppb-toggle-pw,
897 .wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw,
898 #wppb-login-wrap .login-password button.wppb-toggle-pw {
899 position: absolute;
900 right: 4px;
901 /* fields bottom padding / 2 */
902 top: -7px;
903 background: transparent !important;
904 background-color: transparent !important;
905 border: 1px solid transparent;
906 box-shadow: none;
907 padding: 0;
908 margin: 0;
909 height: 100%;
910 cursor: pointer;
911
912 display: flex;
913 align-items: center;
914 justify-content: center;
915 }
916
917 .wppb-form-field.wppb-default-password button img,
918 .wppb-form-field.wppb-default-repeat-password button img,
919 #wppb-login-wrap .login-password button img {
920 width: 20px;
921 }
922
923 /**************************************************/
924 /* Profile Builder Subscription Plans Field
925 /**************************************************/
926 .wppb-form-field.wppb-subscription-plans label {
927 width: 100%;
928 float: none;
929 }
930
931 .wppb-form-field.wppb-subscription-plans input {
932 display: inline-block;
933 float: none;
934 margin-right: 10px !important;
935 }
936
937 .wppb-form-field.wppb-subscription-plans span.description {
938 display: block;
939 font-size: 100%;
940 font-style: italic;
941 margin-left: 0;
942 margin-bottom: 1.5em;
943 }
944
945 /**************************************************/
946 /* This is very weird: if in the css there is a rule on table of border-collapse:collapse; then on FFox and Edge the Media upload won't open
947 /**************************************************/
948 .wppb-user-forms table{
949 border-collapse:separate;
950 }
951
952 /**************************************************/
953 /* Private Website CSS
954 /**************************************************/
955 .wppb-private-website.wppb-private-website-hide-menus .main-navigation{
956 display:none;
957 }
958
959
960 /* Map markers info */
961 .marker-content-info {position: absolute; top: -400px; left: -400px; display: none;}
962 .wppb-map-container .marker-content {min-width: 320px; max-width: 100%;}
963 .wppb-map-container .marker-content .marker-info-avatar_or_gravatar {float: left; margin-right: 10px;}
964
965 /**************************************************/
966 /* Elementor Visual Editor CSS
967 /**************************************************/
968 .elementor-edit-mode .wppb-map-container {
969 width: 69.9%;
970 float: left;
971 border: 1px solid #ccc;
972 border-radius: 3px;
973 }
974
975 /**************************************************/
976 /* Two-Factor Authentication CSS
977 /**************************************************/
978 #wppb_auth_secret_buttons,
979 #wppb_auth_verify_buttons,
980 #wppb_auth_QR_INFO {
981 margin-left: 30%;
982 }
983
984 #wppb_auth_secret_buttons,
985 #wppb_auth_verify_buttons {
986 display: flex;
987 justify-content: space-between;
988 align-items: stretch;
989 }
990
991 .wppb_auth_button {
992 background: none repeat scroll 0 0 #f7f7f7;
993 border: 1px solid #ccc !important;
994 color: #555;
995 cursor: pointer;
996 display: inline-block;
997 font-size: 12px;
998 line-height: 26px;
999 padding: 15px;
1000 text-decoration: none;
1001 white-space: nowrap;
1002 text-align: center;
1003 width: 30%;
1004 }
1005
1006 .wppb_auth_button:hover {
1007 background: none repeat scroll 0 0 #fafafa;
1008 border: 1px solid #999 !important;
1009 color: #222;
1010 text-decoration: none;
1011 }
1012
1013 #wppb_auth_newsecret.wppb_auth_new_button,
1014 #wppb_auth_verify_button.wppb_auth_verify_button {
1015 flex-grow: 1;
1016 }
1017
1018 #wppb_show_qr.wppb_auth_qr_button,
1019 #wppb_auth_verify_indicator.wppb_auth_verify_indicator {
1020 flex-grow: 1;
1021 }
1022
1023 #wppb_auth_verify_indicator {
1024 pointer-events: none !important;
1025 }
1026 #wppb_auth_verify_indicator.valid {
1027 background-color: #c3ff88;
1028 border-color: #8dff1c;
1029 }
1030 #wppb_auth_verify_indicator.invalid {
1031 background-color: #ffa0a0;
1032 border-color: #f04040;
1033 }
1034
1035 #wppb_auth_QR_INFO .wppb-description-delimiter {
1036 font-size:80%;
1037 font-style:italic;
1038 }
1039
1040 #wppb_auth_QRCODE {
1041 text-align: center;
1042 }