/*--------------------------------------- Buttons ---------------------------------------*/ .pmpro_btn, .pmpro_btn:link, .pmpro_content_message a, .pmpro_content_message a:link { background-color: #EFEFEF; background-image: none; border: 1px solid #D6D6D6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; color: #444; cursor: pointer; display: inline-block; font-weight: 700; margin: 0; padding: 6px 12px; text-align: center; text-decoration: none; text-transform: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } .pmpro_btn:focus, .pmpro_content_message a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .pmpro_btn:hover, a.pmpro_btn:hover, .entry-content a.pmpro_btn:hover, .pmpro_btn:focus, .pmpro_checkout .pmpro_btn:hover, .pmpro_checkout .pmpro_btn:focus, .pmpro_content_message a:focus, .pmpro_content_message a:hover { -webkit-box-shadow: none; border-color: #D6D6D6; box-shadow: none; text-decoration: none; } .pmpro_btn:active, .pmpro_btn.active { background-image: none; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); outline: 0; } .pmpro_btn.disabled, .pmpro_btn[disabled], fieldset[disabled] .pmpro_btn { -webkit-box-shadow: none; box-shadow: none; filter: alpha(opacity=65); opacity: 0.65; } .pmpro_btn.pmpro_btn-cancel, .pmpro_btn.pmpro_btn-cancel:link, .pmpro_btn.pmpro_btn-cancel:hover, .entry-content a.pmpro_btn.pmpro_btn-cancel:hover { background: none; border: none; box-shadow: none; color: #666; text-decoration: underline; } .pmpro_btn.pmpro_btn-submit-checkout { width: auto; } input[type="button"]#discount_code_button, input[type="button"]#discount_code_button:hover, input[type="button"]#discount_code_button:focus, input[type="button"]#other_discount_code_button, input[type="button"]#other_discount_code_button:hover, input[type="button"]#other_discount_code_button:focus, button[type="button"]#other_discount_code_toggle, button[type="button"]#other_discount_code_toggle:hover, button[type="button"]#other_discount_code_toggle:focus { -webkit-appearance: none; -moz-appearance: none; background: none; border: none; box-shadow: none; color: inherit; cursor: pointer; display: inline-block; font-family: inherit; font-size: 100%; font-weight: normal; margin: 0; outline: none; padding: 0; text-align: center; text-decoration: underline; text-transform: none; transform: none; } /*--------------------------------------- Forms ---------------------------------------*/ form.pmpro_form .pmpro_checkout-fields div, #loginform p { margin: 0 0 1em 0; } form.pmpro_form label, #loginform label { font-weight: 700; display: block; margin: 0; text-align: left; } form.pmpro_form label.pmpro_label-inline { display: inline-block; } form.pmpro_form label.pmpro_clickable { cursor: pointer; } form.pmpro_form .pmpro_asterisk abbr { border: none; text-decoration: none; } form.pmpro_form .lite { color: #666; } form.pmpro_form .pmpro_captcha div { clear: none; margin: 0; } form.pmpro_form .pmpro_submit { margin-top: 1em; } form.pmpro_form #pmpro_processing_message { color: #999; display: block; font-style: italic; margin: 1em 0 0 0; text-align: left; } /** General Field Types **/ form.pmpro_form input[type=text], form.pmpro_form input[type=password], form.pmpro_form input[type=email], form.pmpro_form input[type=number], form.pmpro_form textarea, form.pmpro_form select, #loginform input[type=text], #loginform input[type=password] { display: inline-block; max-width: 90%; min-height: 1.5rem; } /** Checkbox-specific field type **/ form.pmpro_form .pmpro_checkout-field-checkbox label { cursor: pointer; display: inline; width: auto; } form.pmpro_form .pmpro_checkout-field-checkbox input[type=checkbox] { opacity: 1; } form.pmpro_form .pmpro_checkout-field-checkbox_grouped ul { list-style: none; margin-left: 0; padding-left: 0; } form.pmpro_form .pmpro_checkout-field-checkbox_grouped li { list-style: none; margin-left: 0; padding-left: 0; } /** Radio-specific field type **/ form.pmpro_form .pmpro_checkout-fields .pmpro_checkout-field-radio-item { margin-bottom: 0; } form.pmpro_form .pmpro_checkout-field-radio-item label { cursor: pointer; display: inline-block; width: auto; } form.pmpro_form .pmpro_checkout-field-radio-item input[type=radio] { opacity: 1; } /** Select-specific field type **/ form.pmpro_form .pmpro_checkout-field-select select { min-width: 50%; } /** Date-specific field type **/ form.pmpro_form .pmpro_checkout-field-date select { max-width: unset; width: unset; } form.pmpro_form .pmpro_checkout-field-date input[type=text] { margin-left: 5px; max-width: unset; width: unset; } /** Membership Checkout and Billing-specific Fields **/ form.pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields label { display: block; float: none; max-width: initial; min-width: initial; text-align: left; width: auto; } form.pmpro_form .pmpro_checkout-field-bcity_state_zip .input, form.pmpro_form .pmpro_checkout-field-bcity_state_zip select { max-width: 30%; } form.pmpro_form .pmpro_payment-cvv .input, form.pmpro_form .pmpro_payment-discount-code .input, form.pmpro_form #other_discount_code.input { max-width: 40%; } form.pmpro_form #discount_code.input, form.pmpro_form #other_discount_code.input { margin-right: .5em; } form.pmpro_form input[type=checkbox]#tos { width: auto; } /* Lost Password Frontend Form */ form.pmpro_form .pmpro_lost_password-fields div { margin: 0 0 1em 0; } /* Member Profile Edit Frontend Form */ form.pmpro_form .pmpro_member_profile_edit-fields > div { margin: 0 0 1em 0; } /* Change Password Frontend Form */ form.pmpro_form .pmpro_change_password-fields div { margin: 0 0 1em 0; } /* Password Strength Meter on Frontend Forms */ .pmpro_reset_password_wrap form.pmpro_form #pass-strength-result, form.pmpro_form .pmpro_change_password-fields #pass-strength-result { display: inline-block; max-width: 150px; } .pmpro_reset_password_wrap form.pmpro_form .lite, form.pmpro_form .pmpro_change_password-fields .lite { margin-top: 10px; } /*-------------------------------------------------- Messages - Success, Error, Alert ----------------------------------------------------*/ .pmpro_message { background-color: #d9edf7; border: 1px solid #bce8f1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #31708f; font-size: 14px; font-weight: 400; line-height: 1.5em; margin: .5em 0; padding: 10px 15px; text-align: left; } .pmpro_success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } .pmpro_error, input[type="text"].pmpro_error, input[type="email"].pmpro_error, input[type="url"].pmpro_error, input[type="password"].pmpro_error, input[type="number"].pmpro_error, input[type="tel"].pmpro_error, input[type="range"].pmpro_error, input[type="date"].pmpro_error, input[type="month"].pmpro_error, input[type="week"].pmpro_error, input[type="time"].pmpro_error, input[type="datetime"].pmpro_error, input[type="datetime-local"].pmpro_error, input[type="color"].pmpro_error, textarea.pmpro_error { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } .pmpro_alert { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; } .pmpro_content_message a, .pmpro_content_message a:link { margin: 10px 10px 0 0; } .pmpro_message a { color: #245269; text-decoration: underline; } .pmpro_success a { color: #2b542c; } .pmpro_error a { color: #843534; } .pmpro_alert a { color: #66512c; } input.pmpro_error { background-image: none; } select.pmpro_error { background-image: none; } .pmpro_message p:last-child { margin-bottom: 0; } #pmpro_message_bottom { margin-bottom: 1em; } /*--------------------------------------- Display Price Parts ---------------------------------------*/ .pmpro_price_part_span { display: block; } .pmpro_price_part-total { border-top: 1px solid #CCC; margin-top: 5px; padding-top: 5px; } .pmpro_price_part_label:after { content: ": "; } .pmpro_price_part_sub { font-size: 75%; } span.pmpro_price_part_sub:before { content: "\2022"; padding-right: 5px; } /*--------------------------------------- Membership Checkout ---------------------------------------*/ #pmpro_form .pmpro_checkout h2 { margin: 1em 0 0 0; padding: 0; } .pmpro_checkout h2 span.pmpro_checkout-h2-name { display: inline-block; margin: 0 .5rem 1rem 0; } .pmpro_checkout h2 span.pmpro_checkout-h2-msg { font-size: 13px; font-style: italic; font-weight: normal; letter-spacing: normal; } #pmpro_payment_method span.gateway_paypalexpress { margin-left: 2em; } #pmpro_payment_information_fields .pmpro_checkout-fields-display-seal { clear: both; display: -ms-grid; display: grid; -ms-grid-columns: 3fr 1em 1fr; grid-template-columns: 3fr 1fr; grid-column-gap: 1em; grid-template-areas: "leftcol rightcol"; } #pmpro_payment_information_fields .pmpro_checkout-fields-display-seal .pmpro_checkout-fields-leftcol { grid-area: leftcol; } #pmpro_payment_information_fields .pmpro_checkout-fields-display-seal .pmpro_checkout-fields-rightcol { grid-area: rightcol; } #pmpro_license { background: #FFF; border: 1px solid #CCC; color: #333; height: 200px; margin: 3px; overflow: auto; padding: 5px; } /* Stripe gateway Membership Checkout specific styles. */ .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_checkout-field-payment-request-button { grid-area: paymentrequestbutton; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_checkout-field-payment-request-button h4 { margin-top: 1em; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields-display-seal { grid-template-areas: "paymentrequestbutton rightcol" "leftcol rightcol"; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields, .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_checkout-fields { display: -ms-grid; display: grid; -ms-grid-rows: auto 1em auto 1em auto; grid-template-areas: "AccountNumber AccountNumber" "Expiry CVV" "DiscountCode DiscountCode"; grid-column-gap: 1em; -ms-grid-columns: 1fr 1em 1fr; grid-template-columns: 1fr 1fr; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber, .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry, .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV, .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#AccountNumber, .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#Expiry, .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields div#CVV { color: #666; background: #FFF; border: 1px solid #ccc; border-radius: 3px; margin: 0; padding: 0.625em 0.4375em; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-account-number, .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-account-number { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: AccountNumber; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-expiration, .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-expiration { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: Expiry; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-cvv, .pmpro_billing_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-cvv { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: CVV; } .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields .pmpro_payment-discount-code { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: DiscountCode; } /*--------------------------------------- Membership Confirmation ---------------------------------------*/ /*--------------------------------------- Membership Invoice ---------------------------------------*/ .pmpro_invoice_details { display: -webkit-box; display: -ms-flexbox; display: flex; } .pmpro_invoice_details .pmpro_invoice-billing-address, .pmpro_invoice_details .pmpro_invoice-payment-method, .pmpro_invoice_details .pmpro_invoice-total { -webkit-box-flex: 3; -ms-flex: 3 1 33%; flex: 3 1 33%; } .pmpro_invoice_details .pmpro_invoice-billing-address, .pmpro_invoice_details .pmpro_invoice-payment-method { padding-right: 10px; } .pmpro_invoice-field-billing_name, .pmpro_invoice-field-billing_street, .pmpro_invoice-field-billing_country, .pmpro_invoice-field-billing_phone { display: block; } .pmpro_invoice-field-billing_city:after { content: ','; } /*--------------------------------------- Membership Account ---------------------------------------*/ #pmpro_account .pmpro_box { border-top: 1px solid #CCC; margin: 1em 0; padding: 1em 0; } #pmpro_account .pmpro_box h2 { background: none; border: none; margin: 0; padding: 0; } #pmpro_account .pmpro_box p { margin: .5em 0 0 0; padding: 0; } #pmpro_account .pmpro_box ul { margin-bottom: 0; } #pmpro_account #pmpro_account-membership { } #pmpro_account #pmpro_account-profile { } #pmpro_account #pmpro_account-billing { } #pmpro_account #pmpro_account-invoices { } #pmpro_account #pmpro_account-links { } #pmpro_account #pmpro_account-membership .pmpro_table td:nth-child(1) { min-width: 200px; } #pmpro_account #pmpro_account-profile .pmpro_actionlinks { margin-top: .5em; } .pmpro_actionlinks a { display: inline-block; text-decoration: none; } .pmpro_actionlinks a:last-child { margin-right: 0; } .pmpro_hidden { display: none; } li.pmpro_more { list-style-type: none; margin-left: -20px; padding-left: 0; text-align: center; } /*--------------------------------------- Membership Billing Page ---------------------------------------*/ .pmpro_billing_wrap { margin-bottom: 1em; } /*--------------------------------------- Log In and Password Reset Pages ---------------------------------------*/ .pmpro_login_wrap, .pmpro_lost_password_wrap, .pmpro_reset_password_wrap { margin-bottom: 1em; } /*--------------------------------------- This section based on similar rules in wp-admin/css/forms.css ---------------------------------------*/ #pass-strength-result { background-color: #eee; border: 1px solid #ddd; color: #23282d; margin: -1px 1px 5px; padding: 3px 5px; text-align: center; width: 25em; box-sizing: border-box; opacity: 0; } #pass-strength-result.short { background-color: #f1adad; border-color: #e35b5b; opacity: 1; } #pass-strength-result.bad { background-color: #fbc5a9; border-color: #f78b53; opacity: 1; } #pass-strength-result.good { background-color: #ffe399; border-color: #ffc733; opacity: 1; } #pass-strength-result.strong { background-color: #c1e1b9; border-color: #83c373; opacity: 1; } .pass1.short, .pass1-text.short { border-color: #e35b5b; } .pass1.bad, .pass1-text.bad { border-color: #f78b53; } .pass1.good, .pass1-text.good { border-color: #ffc733; } .pass1.strong, .pass1-text.strong { border-color: #83c373; } .pw-weak { display: none; } .indicator-hint { padding-top: 8px; } .wp-pwd [type="text"], .wp-pwd [type="password"] { margin-bottom: 0; /* Same height as the buttons */ min-height: 30px; } /* Hide the Edge "reveal password" native button */ .wp-pwd input::-ms-reveal { display: none; } .pass1-text, .show-password #pass1 { display: none; } .pass1-text::-ms-clear { display: none; } .show-password #pass1-text { display: inline-block; } /*--------------------------------------- Member Profile Edit Page ---------------------------------------*/ .pmpro_member_profile_edit_wrap, .pmpro_change_password_wrap { margin-bottom: 1em; } /*--------------------------------------- Membership Levels ---------------------------------------*/ #pmpro_levels_table { table-layout: fixed; width: 100%; } #pmpro_levels_table thead th, #pmpro_levels_table tbody th { text-align: left; } #pmpro_levels_table td:nth-child(1) { min-width: 200px; } #pmpro_levels_table .pmpro_btn { display: block; } /*--------------------------------------- Misc ---------------------------------------*/ .pmpro_actions_nav { text-align: center; } .pmpro_actions_nav-left { display: block; float: left; width: 48%; text-align: left; } .pmpro_actions_nav-right { display: block; float: right; width: 48%; text-align: right; } .pmpro-levels .pmpro_actions_nav { text-align: left; } .pmpro_a-right { float: right; font-size: 11px; text-align: right; text-decoration: underline; width: auto; } .pmpro_a-print { background: url(../images/printer-icon.svg) top left no-repeat; color: #345395; cursor: pointer; float: right; font-size: 11px; line-height: 16px; padding: 0px 0px 2px 20px; text-decoration: none; width: auto; } .pmpro_red { color: #CC0000; } .pmpro_grey { color: #999; } .top1em { margin-top: 1em; } .bot1em { margin-bottom: 1em; } .bot0em { margin-bottom: 0em; } .clear { clear: both; } .pmpro_small { font-size: .8em; } /*--------------------------------------- Responsive Styles ---------------------------------------*/ @media only screen and (min-width: 1160px) { .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields #payment-request-button { max-width: 50%; } } @media only screen and (min-width: 960px) and (max-width: 1160px) { .pmpro_checkout_gateway-stripe form.pmpro_form #pmpro_payment_information_fields #payment-request-button { max-width: 50%; } } @media (max-width:768px) { #pmpro_account #pmpro_account-membership .pmpro_table td:nth-child(1), #pmpro_levels_table td:nth-child(1) { min-width: unset; } .pmpro_checkout h2 span.pmpro_checkout-h2-name { display: block; } .pmpro_checkout h2 span.pmpro_checkout-h2-msg { display: block; margin-bottom: 1em; } form.pmpro_form input[type=text].input, form.pmpro_form input[type=password].input, .pmpro_login_wrap form#loginform input[type=text].input, .pmpro_login_wrap form#loginform input[type=password].input { width: 90%; } /* Password Strength Meter on Frontend Forms */ .pmpro_reset_password_wrap form.pmpro_form #pass-strength-result, form.pmpro_form .pmpro_change_password-fields #pass-strength-result { max-width: 90%; } form.pmpro_form input[type=text]#other_discount_code, form.pmpro_form input[type=text]#CVV, form.pmpro_form input[type=text]#discount_code { width: 40%; } #pmpro_payment_information_fields .pmpro_checkout-fields-display-seal { display: block; } form.pmpro_form .pmpro_btn, .pmpro_login_wrap #loginform input[type=submit] { display: block; width: 100%; } form.pmpro_form #pmpro_processing_message { text-align: center; } .pmpro_invoice_details { display: block; } }