/* stylelint-disable */ /* CORE PAYMENT UI //////////////// */ .select_border, .select-area, #productSearch-input, .select-content, #coupon-input { border-color: #c3cad8; background-color: #fff; } .form-product-category-item { border-color: #d9dde4; } .payment_footer, .p_item_separator { border-top-color: rgba(195,202,216,.5); } .form-product-item:not(.show_image).focusedProduct .p_col { display: flex; align-items: center; } .form-product-item:not(.show_image).focusedProduct .p_col, .form-product-item.show_image .p_col { padding-right: 16px; } .card-2col .form-product-item, .card-3col .form-product-item { border-color: rgba(195,202,216,.5); } .card-2col .form-product-details, .card-3col .form-product-details { color: #4c71fb; } #coupon-button { border-color: #4c71fb; background-color: #4c71fb; } #coupon-table { border-spacing: 0; } input.form-product-custom_price, .form-product-item .custom-recurring-payments { background: #fff; background-color: #fff; padding: 4px; border-radius: 2px; border: 1px solid #dee2ed; margin-left: 4px; margin-right: 4px; width: 90px; } .custom-recurring-payments-wrapper { position: relative; display: inline-block; } .form-product-item .form-product-container .form-sub-label-container .custom-recurring-payments-wrapper + label.form-sub-label { font-size: 14px; color: #2c3345; } .form-product-item .custom-recurring-payments { height: 36px; padding: 0 1.25em 0 0.625em; } .form-product-item .custom-recurring-payments:hover { border-color: rgba(46,105,255,.5); box-shadow: 0 0 0 2px rgba(46,105,255,.25) !important; } .custom-recurring-payments-dropdown-icon { position: absolute; width: 12px; height: auto; right: 10px; top: 50%; transform: translateY(-50%); } input.form-product-custom_price[readonly] { background: rgba(85, 115, 215, 0.06); background-color: rgba(85, 115, 215, 0.06); padding: 4px; margin-left: 4px; margin-right: 4px; border-radius: 2px; border: 1px solid #dee2ed; width: 90px; } #stripe-templates { width: 100%; } .payment-form-table { padding: 0; } .payment-form-table th { padding-left: 0; padding-bottom: 8px; } .payment-form-table td + td { padding-left: 8px; } .form-product-child-table td { padding-left: 6px; font-size: 0.825em; } .form-product-item .form-product-child-table tr td:nth-last-child(2) { text-align: right !important; } .form-product-item .form-product-child-table tr td .old_price span { text-decoration: line-through; } .p_item_separator { border-top-width: 1px; border-top-style: dashed; opacity: 0.8; margin: 8px 0 8px 35px; } .p_item_separator ~ br { display: none; } .form-product-item.new_ui.hover-product-item:hover { background: rgba(85, 115, 215, 0.06); background-color: rgba(85, 115, 215, 0.06); border-radius: 4px !important; cursor: pointer !important; } .form-product-item.new_ui.p_selected { background: rgba(85, 115, 215, 0.06); background-color: rgba(85, 115, 215, 0.06); border-radius: 4px !important; } .form-product-item { display: block; cursor: pointer; } .form-product-item .new_ui { width: 100%; padding: 8px 4px; margin: 0; display: block; } .form-product-item .form-product-item-detail { display: flex; flex-basis: 100%; padding: 16px; } .form-product-item.focusedProduct .form-product-item-detail { padding: 15px; } .form-product-item input { height: 36px; padding: 0 0.625em; } .form-product-item select { height: 28px; min-width: auto !important; appearance: none !important; box-shadow: none !important; padding: 0 1.875em 0 0.625em; background-position: right 10px bottom 50%; background-size: 0.625em; background-repeat: no-repeat; cursor: pointer; } .form-product-item table tr td select { border: 1px solid #dee2ed; } .form-product-item .form-special-subtotal { text-align: right; font-size: 0.825em; position: absolute; right: 0; bottom: -10px; line-height: 19px; display: flex !important; font-weight: 500; margin: auto; font-size: 13px; opacity: 0.8; } .form-product-item .form-special-subtotal * { display: inline-block; } .form-product-item .form-special-subtotal .form-item-subtotal { padding-right: 12px; } .isBuilder .form-product-item .form-special-subtotal span span { margin-left: 2px; } .form-product-item .p_checkbox { position: relative; width: 20px; height: 20px; border-radius: 2px; margin-top: 6px; margin-bottom: 6px; } .form-product-item .p_checkbox input { opacity: 0; z-index: 3; position: absolute; top: 0; left: 0; cursor: pointer; margin: 0; max-width: 20px; max-height: 20px; width: 100%; height: 100%; } .form-product-item .p_checkbox .checked { z-index: 2; display: none; border: 1px solid #2e69ff; background-color: #2e69ff; position: absolute; top: 0; content: ""; width: 20px; height: 20px; border-radius: 2px; background-position: center center; background-repeat: no-repeat; background-size: 10px; background-image: url("data:image/svg+xml; charset=utf-8,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.667 3L9 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .form-product-item .p_checkbox .select_border { content: ""; border-width: 1px; border-style: solid; width: 20px; height: 20px; border-radius: 2px; border-color: #c3cad8; display: block; position: absolute; top: 0; z-index: 1; } .form-product-item .p_checkbox:hover .select_border { border-color: #a9bff9; box-shadow: 0 0 0 2px #c9d8fe; } .form-product-item .p_checkbox input[type="checkbox"]:checked ~ div { display: block; } .form-product-item .p_checkbox input[type="radio"] ~ div.select_border { border-radius: 50%; } .form-product-item .p_checkbox input[type="radio"]:checked ~ div.checked { display: block; border-radius: 50%; background-image: none; top: 3px; left: 3px; width: 14px; height: 14px; } .form-product-item .p_checkbox input[type="radio"]:checked ~ div.select_border { border: 1px solid #2e69ff; } .form-product-item .p_checkbox .form-checkbox[disabled] ~ .checked, .form-product-item .p_checkbox .form-checkbox[required] ~ .checked { background-color: #ccc; border: 1px solid #ccc; } .form-product-item .p_image { position: relative; display: none; } .form-product-item .p_image .image_area { background-color: #fff; position: relative; width: 72px; height: 72px; border: 1px solid #e6e6e6; overflow: hidden; border-radius: 3px; display: none; background-size: cover; background-position: center center; background-repeat: no-repeat; margin: 0; top: 0; } .form-product-item .p_image .image_area .payment-product-image-wrapper { position: absolute; width: 100%; height: 100%; } .form-product-item .p_image .image_area .payment-product-image-wrapper .payment-product-image { width: 100%; height: 100%; object-fit: cover; } .form-product-item.show_image.full_img .p_image .image_area .payment-product-image-wrapper .payment-product-image { object-fit: contain; } .form-product-item .p_image .image_area .image_zoom { width: 0; height: 0; border: 0; background: rgba(1, 118, 254, 0.5); background-image: url("https://cdn.jotfor.ms/assets/img/payments/image_zoom.svg"); position: absolute; display: none !important; top: 26px; right: 26px; cursor: pointer; background-position: center center; background-size: 36px; background-repeat: no-repeat; border-radius: 3px; } .form-product-item .p_image:hover .image_zoom { display: block !important; width: 72px; height: 72px; top: 0; right: 0; border-radius: 3px; } .form-product-item .form-product-container { position: relative; width: 100%; display: block; padding: 0 0 0 16px; min-width: 0; } span.form-product-item .form-product-container [data-wrapper-react=true] { flex-direction: column; } span.form-product-item .form-product-container .form-product-details > b >span[data-wrapper-react=true] { display: flex; flex-direction: inherit; } .form-product-item .form-product-container br { display: none; } .form-product-item .form-product-container:after { content: ""; clear: both; display: block; width: 100%; } .form-product-item .form-product-container .form-product-name { display: block; padding-top: 6px; padding-right: 116px; font-weight: 600; padding-bottom: 4px; max-width: 100%; word-wrap: break-word; white-space: pre-wrap; } .form-product-item .form-product-container .form-product-name .editor-container .inlineEditor { max-width: 100%; } .form-product-item .form-product-container .form-product-description { padding-top: 2px; padding-right: 42px; display: block; font-size: 14px; opacity: 0.8; width: 100%; word-wrap: break-word; white-space: pre-wrap; } .form-product-item:not(.show_desc) .form-product-container .form-product-description { display: none; } .form-product-item .form-product-container .form-product-details { position: absolute; top: 6px; right: 0; font-size: 14px; } .form-product-item .form-product-container .form-product-details * { display: inline; } .form-product-item span > span, .total_area .form-payment-price span[data-wrapper-react="true"] > span:nth-child(1) { margin-left: 1px; } .form-product-item span.currency_abr, .total_area .form-payment-price span.currency_abr { margin-left: 2px; } .form-product-item .form-product-container .form-sub-label-container { display: block; float: left; padding-top: 0; margin-top: 8px; margin-left: 0; margin-right: 8px; width: auto; } .form-product-item .form-product-container .form-sub-label-container label.form-sub-label { display: inline-block; white-space: nowrap; padding-right: 8px; } .form-product-item .form-product-container .form-sub-label-container span { display: inline-block; } .form-product-item .form-product-container .form-sub-label-container input.form-product-custom_quantity { display: inline-block !important; border-style: solid; border-width: 1px; border-radius: 3px; font-weight: 400; font-size: 16px; min-width: auto !important; max-width: 40px; width: auto; padding: 0 10px; height: 34px !important; } .form-product-item .form-product-container .form-sub-label-container .form-textbox { padding: 3px 3px 3px 6px; } .form-product-item .form-product-container .form-sub-label-container span.select_cont { border-radius: 4px; display: inline-block; position: relative; padding-right: 0; } .form-product-item .form-product-container .form-sub-label-container span.select_cont:hover { border-color: #a9bff9; box-shadow: 0 0 0 2px #c9d8fe; } .form-product-item .form-product-container .form-sub-label-container span.select_cont select { border-style: solid; border-width: 1px; width: 100%; height: 34px; min-width: 52px; padding-right: 24px; box-shadow: none; outline: none; appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2357647E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px bottom 50%; background-size: 9px; } .form-product-item .form-product-container .form-sub-label-container:after { content: ""; clear: both; display: block; width: 100%; } .form-product-item .form-product-container table .form-product-child-price span { display: inline-block; } .form-product-item .form-product-container .form-product-details b { display: flex; } .form-product-item .form-product-container .form-product-details b .old_price { font-weight: 500; margin-right: 6px; margin-left: 0; } .show_image .p_image { display: block; } .show_image .p_image .image_area { display: block; } .show_image .p_checkbox { margin-top: 24px; } .show_image .title_description { display: flex; align-items: center; } .show_image .form-product-container .form-product-name { display: flex; min-height: 70px; align-items: center; padding-top: 0; } .show_image .form-product-container .form-product-details { top: 25px; } .show_image.show_desc .title_description { display: block; } .show_image.show_desc .form-product-name { min-height: auto; display: block; } .show_image.show_desc .form-product-details { top: 1px; } .show_image.show_option .form-product-name { padding-top: 12px; line-height: normal; } .show_image.show_option .form-product-details { top: 11px; } .show_image.show_option .form-product-container .form-product-name { min-height: auto; } .show_image.show_option.show_desc .form-product-name { display: block; padding-top: 0; } .show_image.show_option.show_desc .image_zoom { top: 0; } .show_image.show_option.show_desc .form-product-details { top: 2px; right: 0; } .show_desc .form-product-description { display: block; padding: 4px 0; } .show_subtotal .form-product-container { padding-bottom: 34px; } .sub_product .form-product-child-table { display: none; } .isBuilder .sub_product .form-product-child-table { display: block; } .sub_product .form-special-subtotal { display: none; } .show_sub_product .form-product-child-table { display: block; } .show_sub_product .form-special-subtotal { display: block; } .form-product-item .show_desc .form-product-container .form-product-name, .form-product-item .show_option .form-product-container .form-product-name { padding-top: 6px; } .form-product-item.show_image.full_img .p_image .image_area { background-size: contain !important; } /* SUBSCRIPTION ////////////// */ div[data-paymenttype="subscription"] .form-product-container span[data-wrapper-react="true"] { display: block; } div[data-paymenttype="subscription"] .title_description { min-height: auto !important; } div[data-paymenttype="subscription"] .form-product-details { position: relative !important; width: 100%; display: block; top: auto !important; left: auto; right: auto !important; } li[data-type="control_stripe"] .payment-form-table .form-sub-label { display: none; } .form-product-item.new_ui.invisible_product { display: none; } .form-product-item.new_ui.invisible_product + .p_item_separator { display: none; } /* stock features fields */ .form-product-item.new_ui.sold_out_product .p_col, .form-product-item.new_ui.sold_out_product .p_image, .form-product-item.new_ui.sold_out_product .form-product-name, .form-product-item.new_ui.sold_out_product .form-product-description, .form-product-item.new_ui.sold_out_product .form-sub-label-container, .form-product-item.new_ui.sold_out_product .form-product-details > b { opacity: 0.5; } .form-product-item.new_ui.just_sold_out_product .p_image, .form-product-item.new_ui.just_sold_out_product .form-product-name, .form-product-item.new_ui.just_sold_out_product .form-product-description, .form-product-item.new_ui.just_sold_out_product .form-sub-label-container, .form-product-item.new_ui.just_sold_out_product .form-product-details > b { opacity: 0.5; } .form-product-item.new_ui.sold_out_product + .p_item_separator, .form-product-item.new_ui.just_sold_out_product + .p_item_separator { opacity: 0.5; } .form-product-item.new_ui.focusedProduct.sold_out_product .p_col, .form-product-item.new_ui.focusedProduct.sold_out_product .p_image, .form-product-item.new_ui.focusedProduct.sold_out_product .form-product-name, .form-product-item.new_ui.focusedProduct.sold_out_product .form-product-description, .form-product-item.new_ui.focusedProduct.sold_out_product .form-sub-label-container, .form-product-item.new_ui.focusedProduct.sold_out_product .form-product-details > b { opacity: 1; } .form-product-item.new_ui.focusedProduct.just_sold_out_product .p_image, .form-product-item.new_ui.focusedProduct.just_sold_out_product .form-product-name, .form-product-item.new_ui.focusedProduct.just_sold_out_product .form-product-description, .form-product-item.new_ui.focusedProduct.just_sold_out_product .form-sub-label-container, .form-product-item.new_ui.focusedProduct.just_sold_out_product .form-product-details > b { opacity: 1; } .form-product-item.new_ui.focusedProduct.sold_out_product + .p_item_separator, .form-product-item.new_ui.focusedProduct.just_sold_out_product + .p_item_separator { opacity: 1; } .payment-error-message { margin-bottom: 20px; padding: 4px 6px 4px 21px; } .form-product-item.just_sold_out_product.new_ui, .form-product-item.not_enough_stock_product.new_ui { background-color: #ffeded; } .form-product-item.not_enough_stock_product.new_ui { padding-bottom: 20px; } .jotform-form .form-product-item.new_ui.sold_out_product input[type="checkbox"], .jotform-form .form-product-item.new_ui.sold_out_product { pointer-events: none; user-select: none; } .jotform-form .form-product-item.new_ui.just_sold_out_product .p_image, .jotform-form .form-product-item.new_ui.just_sold_out_product .select_cont, .jotform-form .form-product-item.new_ui.just_sold_out_product select, .jotform-form .form-product-item.new_ui.just_sold_out_product .form-product-custom_quantity { pointer-events: none; user-select: none; } div[data-paymenttype="subscription"] .form-product-details input { font-size: 1em; } .form-product-item.new_ui.sold_out_product .form-product-details, .form-product-item.new_ui.just_sold_out_product .form-product-details, .form-product-item.new_ui.not_enough_stock_product .form-product-details { top: -6px; } .form-product-item.new_ui.sold_out_product.show_option .form-product-details, .form-product-item.new_ui.just_sold_out_product.show_option .form-product-details, .form-product-item.new_ui.not_enough_stock_product .form-product-details { top: 6px; } .form-product-item.new_ui.sold_out_product.show_desc .form-product-details, .form-product-item.new_ui.just_sold_out_product.show_desc .form-product-details, .form-product-item.new_ui.not_enough_stock_product .form-product-details { top: 6px; } .form-product-item.new_ui.sold_out_product .form-product-details b, .form-product-item.new_ui.just_sold_out_product .form-product-details b, .form-product-item.new_ui.not_enough_stock_product .form-product-details b { display: block; } .form-product-item.new_ui .form-product-details .payment-badge { color: #FFF; font-size: 13px; padding: 2px 4px 3px; border-radius: 2px; position: absolute; right: 0; min-width: 63px; text-align: center; margin-top: 3px; } .form-product-item.new_ui.focusedProduct .form-product-details .payment-badge { right: 12px; } .isMobile .form-product-item.new_ui.focusedProduct .form-product-details .payment-badge, .card-3col .form-product-item.new_ui.focusedProduct .form-product-details .payment-badge, .card-2col .form-product-item.new_ui.focusedProduct .form-product-details .payment-badge { right: 0px; } .form-product-item.new_ui .form-product-details .payment-badge.sold-out-label { background-color: #4B71FB; color: #ffffff !important; } .form-product-item.new_ui .form-product-details .payment-badge.just-sold-out-label { background-color: #f23a3c; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14.515a7 7 0 110-14 7 7 0 010 14zm-.814-5.86h1.628v-5.21H6.186v5.21zM7 11.259a.82.82 0 00.814-.824A.816.816 0 007 9.631a.813.813 0 100 1.628z' fill='%23fff'/%3E%3C/svg%3E"); background-size: .875em; background-position: .375em; background-repeat: no-repeat; min-width: 110px; padding-left: 1.625em; } .form-product-item.new_ui.not_enough_stock_product .payment-badge { background-color: #f23a3c; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14.515a7 7 0 110-14 7 7 0 010 14zm-.814-5.86h1.628v-5.21H6.186v5.21zM7 11.259a.82.82 0 00.814-.824A.816.816 0 007 9.631a.813.813 0 100 1.628z' fill='%23fff'/%3E%3C/svg%3E"); background-size: .875em; background-position: .5em; background-repeat: no-repeat; width: auto; padding-left: 18px; font-size: 13px; padding: 3px 6px 4px 22px; border-radius: 2px; color: #FFFFFF; margin-bottom: 12px; position: relative; margin-left: 18px; } .form-product-item.new_ui.sold_out_product .form-product-container { padding-right: 64px; } .subscription_cont .new_ui .form-product-container span[data-wrapper-react="true"] { display: block; } .subscription_cont .new_ui .form-product-container .title_description { min-height: auto; } .subscription_cont .new_ui .title_description { display: block; width: 100%; } .subscription_cont .new_ui .form-product-details { position: relative; width: 100%; display: block; top: auto; left: auto; right: auto; padding-top: 2px !important; margin-left: 0; } .subscription_cont .new_ui .form-product-details * { display: initial !important; font-weight: 400; text-decoration: none; } .subscription_cont .new_ui .form-product-details span b { padding-right: 0; } .subscription_cont .new_ui .form-product-details input { font-size: 1em; } .subscription_cont .show_image .p_checkbox { margin-top: 27px; } .subscription_cont .show_image .form-product-name { padding-top: 12px; min-height: auto; } .subscription_cont .show_image.show_desc .form-product-name { padding-top: 4px !important; } .subscription_cont .form-product-item .form-product-container .form-product-name { padding-top: 4px; padding-right: 0; } .old_price { opacity: 0.5; } .p_item_separator.last_p_seperator, .last_p_category.title_collapsed { border-color: transparent !important; } .form-product-child-table .payment-badge { padding-left: 6px !important; background-image: none !important; margin-left: 0 !important; } .sub-product-just-sold-out th, .sub-product-just-sold-out td:not(.sub-product-warning), .sub-product-sold-out th, .sub-product-sold-out td { opacity: 0.5; pointer-events: none; user-select: none; } .sub-product-just-sold-out .just-sold-out-label { background-color: #4B71FB !important; } .show_sub_product.not_enough_stock_product > .not-enough-stock-label.payment-badge { display: none; } input[value*="newStockEditMode"] ~ .form-all .show_sub_product.not_enough_stock_product > .not-enough-stock-label.payment-badge { display: inline-block; } .form-line-error { background-color: inherit; } /* E.O. SUBSCRIPTION */ .payment_footer.new_ui { width: 100%; overflow: hidden; padding: 16px 0 !important; /* E.O total area */ } .payment_footer.new_ui #coupon-container { border: 0 !important; margin-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .payment_footer.new_ui #coupon-container #coupon-header { padding-bottom: 4px; font-size: 12px; font-weight: 500; } .payment_footer.new_ui #coupon-container #coupon-input { min-width: 154px !important; height: 40px; margin-top: 4px; } .payment_footer.new_ui #coupon-container input { height: 40px; line-height: 40px; border-style: solid; border-width: 1px; border-radius: 3px; padding-left: 12px; padding-right: 12px; font-size: 0.875em; } .payment_footer.new_ui #coupon-container button { height: 40px; border-width: 1px; border-style: solid; color: #fff; padding-left: 20px; padding-right: 20px; border-radius: 3px; cursor: pointer; margin-top: 4px; font-size: 0.875em; } .payment_footer.new_ui:after { clear: both; display: block; width: 100%; } .payment_footer.new_ui .total_area { display: table; padding: 20px 0 0; min-width: 140px; float: right; } .payment_footer.new_ui .total_area * { padding: 0; margin: 0; line-height: 16px; font-size: 14px; } .payment_footer.new_ui .total_area .form-payment-label { display: flex; padding-bottom: 6px; font-size: 0.875em; max-width: auto; white-space: nowrap; } .payment_footer.new_ui .total_area .form-payment-discount { display: flex; padding-bottom: 6px; font-size: 0.875em; opacity: 0.6; max-width: auto; white-space: nowrap; color: #2f69ff; } /* .payment_footer.new_ui .total_area .form-payment-recurringpayments{ display: flex; flex-direction: column; } .payment_footer.new_ui .total_area .form-payment-label { display: flex; padding-bottom: 6px; font-size: 0.875em; max-width: auto; white-space: nowrap; justify-content: space-between; } .payment_footer.new_ui .total_area .form-payment-discount { display: flex; flex-direction: column; padding-bottom: 6px; font-size: 0.875em; opacity: 0.6; max-width: auto; white-space: nowrap; color: #2f69ff; } .payment_footer.new_ui .total_area .form-payment-amount { display: flex; flex-direction: column; padding-bottom: 6px; font-size: 0.875em; opacity: 0.6; max-width: auto; white-space: nowrap; color: black; } .payment_footer.new_ui .total_area .form-payment-discount .form-discount-container, .payment_footer.new_ui .total_area .form-amount-container { display: flex; flex-direction: row; justify-content: space-between; } */ .payment_footer.new_ui .total_area .form-payment-price { width: 100%; padding-left: 12px; padding-right: 0; display: block; } .payment_footer.new_ui .total_area .form-payment-price > span { text-align: right; display: flex; justify-content: flex-end; } .payment_footer.new_ui .total_area .form-payment-total { font-weight: 600; display: flex; padding-bottom: 6px; font-size: 0.875em; align-items: center; } .payment_footer.new_ui .total_area .form-payment-total #total-text { line-height: normal; } .payment_footer.new_ui .total_area .form-payment-total:after { display: none !important; } .payment_footer.new_ui .total_area:nth-child(1) { width: auto !important; float: right; vertical-align: middle; text-align: right; } .payment_footer.new_ui .total_area:nth-child(2) { width: auto !important; float: none; display: table-cell !important; } .payment_footer.new_ui .total_area:nth-child(2) span { float: right; padding-left: 12px; } .payment_footer.new_ui .total_area:nth-child(2) span > span { float: none; padding-left: 0; } .payment_footer.new_ui .total_area .form-payment-divider { display: none !important; } .payment_footer.new_ui.show_coupon { display: flex; justify-content: space-between; } .payment_footer.new_ui.show_coupon .total_area { float: right; padding-right: 0 !important; padding-left: 0 !important; } .payment_footer.new_ui #coupon-message.invalid { color: #f23a3c; background-color: #ffe9e9; font-size: 0.75em; font-weight: 500; margin-top: 8px; display: block; float: left; clear: both; width: 100%; min-height: 32px; padding: 8px 8px 8px 32px; position: relative; } .payment_footer.new_ui #coupon-container .invalid:before { background-color: #f23a3c; color: #fff; display: block; position: absolute; line-height: 16px; text-align: center; font-weight: 700; left: 8px; top: 8px; width: 16px; height: 16px; content: "!"; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-size: 10px; } .payment_footer.new_ui #coupon-container .valid { color: #18bd5b; background-color: #d6f5e3; font-size: 0.75em; font-weight: 500; margin-top: 8px; display: block; float: left; clear: both; width: 100%; height: 32px; line-height: 32px; padding-left: 32px; position: relative; } .payment_footer.new_ui #coupon-container .valid:before { background-color: #18bd5b; display: block; position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; content: ""; border-radius: 2px; background-position: center center; background-repeat: no-repeat; background-size: 10px; background-image: url("data:image/svg+xml; charset=utf-8,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.667 3L9 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .payment_footer.new_ui:after { clear: both; display: block; width: 100%; } .form-payment-divider { border: 0; } .payment_footer { padding-top: 24px; margin-top: 12px; position: relative; border-top-width: 1px; border-top-style: solid; } /* Payment Fields //// */ .form-address-table.payment-form-table .form-sub-label-container .form-sub-label { padding: 4px 0 0; margin: 0; } .form-address-table.payment-form-table .form-sub-label-container .editor-container { padding: 0; margin: 0; } .form-address-table.payment-form-table span.form-sub-label-container { display: block; padding-top: 12px; } /* Sub-Product Button //////////////// */ .product_show_options { border: 1px solid #dee2ed; border-radius: 3px; display: block; background-color: #f4f7fc; font-size: 14px; color: rgb(85, 85, 85); height: 30px; line-height: 26px; cursor: pointer; position: relative; padding-left: 8px; width: 126px; margin-top: 4px; } .form-line:hover .product_show_options { background-color: #ffffff; } .product_show_options:after { content: ""; display: block; width: 18px; height: 18px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2357647E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center center; transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; transform: rotate(0deg); top: 4px; right: 6px; position: absolute; } .show_sub_product .product_show_options:after { transform: rotate(180deg); } span.sub_product_alert { font-size: 12px; border-radius: 3px; padding: 4px 0; color: #2e69ff; margin-top: 6px; display: block; width: 313px; } span.sub_product_alert:before { content: "!"; background-color: #2e69ff; display: inline-block; text-align: center; border-radius: 50%; width: 16px; height: 16px; color: #fff; margin-right: 6px; } span.sub_product_alert_submit { font-size: 12px; border-radius: 3px; padding: 4px 6px; color: #fff; margin-top: 6px; display: block; width: 228px; background-color: #f23a3c; padding-left: 24px; position: relative; } span.sub_product_alert_submit:before { content: ""; display: inline-block; text-align: center; border-radius: 50%; width: 16px; height: 16px; position: absolute; left: 4px; color: #f23a3c; margin-right: 6px; background-image: url("https://cdn.jotfor.ms/images/exclamation-octagon.png"); background-size: 12px 12px; background-repeat: no-repeat; background-position: center center; } /* E.O. Sub-Product Button //////////////// */ .form-line[data-type="control_square"] .form-address-table.payment-form-table span.form-sub-label-container iframe { background-color: #fff; border-width: 1px; border-style: solid; border-radius: 2px; display: block; min-width: 100%; } /* Square CC field */ /* E.O Square CC field */ /* Stripe ACH */ .plaid_area { width: 100%; } .plaid_area .plaid_description, .plaid_area .plaid-bank-details { padding-top: 12px; } .plaid_area button { margin-left: 10px; align-items: center; flex-pack: center; justify-content: center; height: 3em; font-size: 1em; border-radius: 4px; background-color: transparent; border: 1px solid; cursor: pointer; font-weight: 500; padding: 0 16px; } .plaid_area .plaid-bank-buttons, .plaid_area .plaid_select_btn { text-align: right; padding-top: 8px; } .plaid_area .open-plaid-link { background-color: #5469D4; color: #ffffff; border-color: #5469D4; background-image: url(https://cdn.jotfor.ms/assets/img/payments/stripeACH_plaid.svg); background-repeat: no-repeat; background-position: left 13px center; background-size: 16px; padding: 0 16px 0 40px; text-align: left; } .plaid_area #plaid-change-bank { background-color: #5469D4; color: #ffffff; border-color: #5469D4; } .plaid_area .plaid-remove-bank { border-color: #c3cad8; color: #2C3368; background-color: #fff; } .stripe-sca-template .form-address-table.payment-form-table span.form-sub-label-container input { color: #000; font-family: roboto, sans-serif; font-weight: 400; font-size: 14px !important; padding-left: 13px; height: 42.09px; -webkit-font-smoothing: subpixel-antialiased; } .stripe-sca-template .form-address-table.payment-form-table span.form-sub-label-container input::placeholder { color: #757575; font-weight: 400; } .stripe-sca-template .form-address-table.payment-form-table span.form-sub-label-container input:-ms-input-placeholder { color: #757575; font-weight: 400; } .stripe-sca-template .form-address-table.payment-form-table span.form-sub-label-container input::-webkit-input-placeholder { color: #757575; font-weight: 400; } .stripe-sca-template .form-address-table.payment-form-table span.form-sub-label-container input::-moz-placeholder { color: #000000; font-weight: 400; } .stripe-sca-template .payment-form-table td:first-child { padding-right: 6px; } .stripe-sca-template .payment-form-table td + td { padding-left: 6px; } /* E.O Stripe ACH */ /* PayPal Checkout */ .paypal-submit-container { padding-top: 36px; position: relative; } .paypal-submit-container > span { display: none; } .isBuilder .paypal-submit-container { padding-top: 36px !important; } .paypal-submit-container .paypal-submit-button-wrapper { width: 100%; padding-bottom: 16px; order: 1; } .paypal-submit-container .form-pagebreak-back-container, .paypal-submit-container .form-submit-print, .paypal-submit-container .editor-container, .paypal-submit-container .form-submit-button { order: 2; } /* E.O. PayPal Checkout */ body.JotFormCardBuilder .payment-methods-area .paypal-toggle-content, body.jfCardForm .payment-methods-area .paypal-toggle-content { flex-wrap: wrap; } body.JotFormCardBuilder .payment-methods-area .paypal-toggle-content .paypal-paylater-messages, body.jfCardForm .payment-methods-area .paypal-toggle-content .paypal-paylater-messages { width: 90%; margin: 0 auto; } .rightPanel.paymentsettings .description-creator-area { position: absolute; top: 6px; left: 12px; width: 344px; height: 76px; overflow-y: auto; } .rightPanel.paymentsettings .description-creator-area::-webkit-scrollbar { width: 6px; background-color: #31333b; border-radius: 4px; border: 0; opacity: 0.8; } .rightPanel.paymentsettings textarea[name="description"]::-webkit-scrollbar { width: 14px; background-color: #31333b; border-radius: 4px; border: 0; opacity: 0.8; border-right: 12px !important; } .rightPanel.paymentsettings textarea[name="description"]::-webkit-scrollbar-thumb { border-right: 4px solid #535f70; border-left: 4px solid #535f70; } .rightPanel.paymentsettings textarea[name="description"]::-webkit-scrollbar-track { border: 4px solid #535f70; } .rightPanel.paymentsettings .description-creator-area p button { border: 0; border-radius: 3px; color: #FFF; font-size: 14px; margin-right: 4px; line-height: 20px; padding-bottom: 3px; cursor: pointer; } .rightPanel.paymentsettings .description-creator-area p button:nth-child(1) { background-color: #3f4652; } .rightPanel.paymentsettings .description-creator-area p button:nth-child(2) { background-color: #F15656; } .rightPanel.paymentsettings .description-creator-area span button { border: 0; color: #ffffff; font-size: 14px; background-color: transparent; text-decoration: underline; padding: 0; cursor: pointer; } .rightPanel.paymentsettings .description-creator-area span { color: #949fae; } .rightPanel.paymentsettings .reusable-connection-dropdown { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 90%; } .rightPanel.paymentsettings .reusable-dropdown-container { background-color: #30333A; } .rightPanel.paymentsettings .reusable-dropdown-container .connection-item:hover { background-color: rgba(85, 95, 110, .2); } .rightPanel.paymentsettings .reusable-dropdown-container .connection-item.selected { background-color: rgba(85, 95, 110, .5); } .rightPanel.paymentsettings .payment-element-sublabel { display: inline-block; color: #8F98A1; font-size: 14px; line-height: 20px; margin-bottom: 6px; } /* product recommendation */ .paymentModal .products-area { display: flex; width: 80%; margin: 0 auto; flex-wrap: nowrap; justify-content: center; } .paymentModal .modal-title { width: 80%; margin: 0 auto; color: #2c3345; font-size: 20px !important; padding: 0 12px 12px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; color: rgb(44, 51, 69); font-family: "Circular Std", CircularStd, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif; } .paymentModal .modal-title b { font-size: 15px; font-style: normal; font-weight: 700; text-transform: uppercase; } .paymentModal .modal-container > button { position: absolute; top: 25px; right: 25px; color: #edeef5; cursor: pointer; width: 42px; height: 42px; background-color: #edeef5; border-radius: 50%; text-align: center; font-size: 26px; line-height: 36px; font-weight: 200; border: 0; } .paymentModal .modal-container > button:before { background-size: contain; background-position: center; content: ""; display: block; width: 21px; height: 21px; position: absolute; left: 11px; top: 11px; opacity: .3; transition: .3s; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik03LjY4IDcuMTVMNS4wMyA0LjVsMi42NS0yLjY1YS4zOC4zOCAwIDAwLS41My0uNTNMNC41IDMuOTcgMS44NSAxLjMyYS4zOC4zOCAwIDAwLS41My41M0wzLjk3IDQuNSAxLjMyIDcuMTVhLjM4LjM4IDAgMDAuNTMuNTNMNC41IDUuMDNsMi42NSAyLjY1YS4zOC4zOCAwIDAwLjUzLS41MyIvPgo8L3N2Zz4K); } .paymentModal .modal-container .products-area .product { margin: 12px; border: 1px solid #EEE; border-radius: 3px; position: relative; flex: 1 1 100%; padding: 6px; box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.17); } .paymentModal .modal-container .products-area .product._disabled { opacity: 0.5; box-shadow: none; pointer-events: none; user-select: none; } .paymentModal .modal-container .products-area .product:hover { background-color: rgba(85, 115, 215, 0.06); } .paymentModal .modal-container .products-area .product-image { width: 100% !important; height: 120px; min-height: 120px; max-height: 120px; overflow: hidden; background-position: center center; background-size: cover; } .paymentModal .modal-container .products-area .product .product-content { padding-top: 12px; } .paymentModal .modal-container .products-area .product .product-content button { right: -8px; bottom: -8px; background-color: #4673e3; color: #fff; border: 0; border-radius: 3px; line-height: 30px; padding: 0 10px; position: absolute; cursor: pointer; text-transform: uppercase; } .paymentModal .modal-container .products-area .product .product-content button:hover { background-color: #3f4652; } .paymentModal .modal-container .products-area .product .product-content span { width: 100%; display: block; padding-right: 40px; } /* E.O. product recommendation */ /* product recommendation */ .backdrop { background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: auto; position: absolute; top: 0; left: 0; z-index: 9; } .suggested-categories .modal-container { background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.2); min-height: 200px; border-radius: 8px; max-width: 460px; max-height: 92%; min-width: 320px; z-index: 9999; } .suggested-categories .modal-container .modal-title { margin: 0; padding: 20px; } .suggested-categories .modal-container hr { display: none; } .suggested-categories .modal-container .modal-content { border-top: 1px solid #EEE; } .suggested-categories .modal-container .modal-content .description p { padding: 0 20px; } .suggested-categories .modal-container .modal-content .category-list { padding: 12px 24px; } .suggested-categories .modal-container .modal-content .category-list ul li.category-field { font-weight: bold; border-bottom: 1px solid #EEE; font-size: 16px; line-height: 32px; } .suggested-categories .modal-container .modal-content .category-list ul li.category-product-field { font-size: 15px; line-height: 32px; padding-left: 6px; } .suggested-categories .modal-container .modal-content .modal-footer { display: flex; padding: 20px; border-top: 1px solid #eee; background-color: #F8F8F8; } .suggested-categories .modal-container .modal-content .modal-footer .check-area { flex: 1 70%; display: flex; align-items: center; } .suggested-categories .modal-container .modal-content .modal-footer .check-area label { padding-left: 12px; } .suggested-categories .modal-container .modal-content .modal-footer button { flex: 1 30%; background-color: #4c71fb; color: #fff; font-size: 16px; text-transform: uppercase; border-radius: 3px; border: 0; cursor: pointer; } .suggested-categories .modal-container .modal-content .modal-footer button:hover { opacity: 0.8; } /* E.O. category recommendation */ /* E.O. recommendation list */ .jot-assistant-container { background-color: #262C3D; color: white; width: 310px !important; border-radius: 4px; transition: all 0.5s ease; } .jot-assistant-container .assistant-header { display: flex; font-style: italic; font-weight: 13px; font-weight: bold; } .jot-assistant-container .assistant-header img { height: 116px; } .suggestion-list { display: block; } .suggestion-list li { margin-top: 12px; background-color: #FFF; color: #262c3d; font-size: 13px; padding: 8px; border-radius: 3px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; cursor: pointer; } .suggestion-list li button { background-color: #262c3d; display: block; border: 0; background-image: url("https://cdn.jotfor.ms/assets/img/payments/trash_btn.svg"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; height: 36px; min-width: 36px; border-radius: 50%; visibility: hidden; } .suggestion-list li:hover button { visibility: visible; } .suggestion-list li:hover { background-color: #f4f7fc; } .close-assistant-button { border-radius: 50%; position: absolute; right: 6px; top: 6px; background-color: #364150; border: 0; padding: 0; width: 24px; height: 24px; cursor: pointer; } .close-assistant-button:hover { background-color: #ffffff; } .jot-assistant-container.hide_elements { background-color: transparent; border: 0; width: auto; transition: all 0.5s ease; } .jot-assistant-container.hide_elements .close-assistant-button, .jot-assistant-container.hide_elements .suggestion-list, .jot-assistant-container.hide_elements .assistant-header span { display: none; } .jot-assistant-container.hide_elements .assistant-header { justify-content: flex-end; } .jot-assistant-container.hide_elements .assistant-header img { cursor: pointer; } /* pagseguro */ .pagseguro_phone_field > span { display: flex; } .pagseguro_phone_field > span .form-sub-label-container:nth-child(1){ flex: 0 0 54px; } .pagseguro_phone_field > span .form-sub-label-container:nth-child(2){ flex: 0 0 130px; margin-right: -8px; } /* E.O. pagseguro */ /* -- MOLLIE/SQUARE CSS For Payment UI-- */ .mollie-payment-wrapper .mollie-apm, .square-payment-wrapper .square-apm { width: 100%; margin-top: 30px; } .payment-apm-list .payment-method-container { position: relative; padding: 12px !important; margin-bottom: 5px; border: 1px solid #eeeeee; background-color: #fff; cursor: pointer; border-radius: 3px; } .square-pm-disabled-radio[disabled] { pointer-events:none; opacity: .5; } .payment-method-alert .redirect-info, .payment-method-alert .something-went-wrong-info { margin: 16px 0 0 5px; font-size: 12px; text-align: left; display: none; } .payment-apm-list .payment-method-container .payment-method-alert { background-color: #FFFFFF; text-align: left; color: #7F848E; font-size: 12px; } .payment-apm-list .payment-method-container .payment-method-alert .redirect-info.square-apm-redirect-alert { display: block !important; } .payment-apm-list .payment-method-container .payment-method-alert .something-went-wrong-info.square-apm-smth-went-wrong-alert { display: block; } .payment-apm-list .payment-method-container.selected { border-color: #2E68FF !important; background-color: #F4F7FD; } .payment-apm-list .payment-method-container .square-pm-icon { position: absolute; left: 45px; top: 10px; width: 32px; height: 24px; border-radius: 3px; } .payment-apm-list .payment-method-container svg.square-pm-icon { left: 35px; top: 0; width: 45px; height: auto; border-radius: 0; } .payment-apm-list .payment-method-container[data-id*="Pay"] svg.square-pm-icon { width: 38px; left: 40px; top: 6px; } .payment-apm-list .payment-method-container img.square-apm-smth-went-wrong-img-fade, .payment-apm-list .payment-method-container .form-radio + label.square-apm-smth-went-wrong-label-fade { opacity: 0.5; } .payment-apm-list .payment-method-container .form-radio + label { padding-left: 78px !important; } .payment-apm-list #mollie-creditcard { padding: 18px 34px; } .payment-apm-list #klarnasliceit_description { display: block; padding: 24px 32px 0; } .payment-apm-list #mollie-credit-card-address { padding-left: 32px; } .payment-apm-list #mollie-credit-card-address-klarnasliceit-description { padding-top: 16px; } .JotFormBuilder [data-payment="true"] .payment-methods-header { margin-bottom: 12px; font-size: 16px; color: #2c3345; font-weight: 500; } table.mollie-address tr th { font-size: 15px; margin-bottom: -6px; } #mollie-creditcard tbody tr:nth-child(1) td, #mollie-creditcard tbody tr:nth-child(2) td, .mollie-address tbody tr:nth-child(3) td, .mollie-address tbody tr:nth-child(4) td { padding-right: 0 !important; } .payment-apm-list #square-creditcard, .payment-apm-list #mollie-creditcard, .payment-apm-list #klarnasliceit_description, .payment-apm-list .mollie-addres, .payment-apm-list #mollie-credit-card-address-klarnasliceit-description, .payment-apm-list #mollie-credit-card-address-klarnasliceit, .payment-apm-list #mollie-credit-card-address-klarnapaylater, .payment-apm-list #mollie-credit-card-address-voucher { display: none; } .payment-apm-list .payment-method-container#mollieAPM img { vertical-align: middle; } #mollie-apm .payment-apm-list .payment-method-container label img, .payment-apm-list .payment-method-container#mollieAPM[data-id="creditcard"] label img { position: absolute; left: 34px; top: -2px; width: 32px; } table#square-creditcard { width: 100%; } #square-apm-list #square-creditcard, #square-apm-list #square-ach { width: 80%; margin-left: 0; padding-left: 30px } #square-apm-list #square-creditcard.square-apm-creditcard-show, #square-apm-list #square-ach.square-apm-ach-show { display: table !important; } #square-apm-list #square_dummy { margin-top: 3px; } #square_dummy.form-error-message { display: none; } #square_dummy.form-error-message.square-credit-card-show-error { display: inline-block; margin-bottom: 15px; } .payment-apm-list .payment-method-container.selected #mollie-creditcard, .payment-apm-list .payment-method-container.selected #klarnasliceit_description, .payment-apm-list .payment-method-container.selected .mollie-addres, .payment-apm-list .payment-method-container.selected #mollie-credit-card-address-klarnasliceit-description, .payment-apm-list .payment-method-container.selected #mollie-credit-card-address-klarnasliceit, .payment-apm-list .payment-method-container.selected #mollie-credit-card-address-klarnapaylater, .payment-apm-list .payment-method-container.selected #mollie-credit-card-address-voucher, .payment-apm-list .payment-method-container.selected h4 { display: block; } #mollie-creditcard .form-sub-label-container .form-textbox { line-height: 34px; height: 40px; padding-top: 0; padding-bottom: 0; } .payment-apm-list #mollie-credit-card-address-klarnasliceit-description { font-size: 14px; padding-left: 32px; } #mollie-credit-card-address-klarnasliceit, #mollie-credit-card-address-klarnapaylater, #mollie-credit-card-address-voucher { padding-left: 32px; } /* Payment CC field */ table.form-address-table.payment-form-table { display: inline-table; } .payment-form-table.square-cc-field .if_cc_field > td { padding-right: 0; } span.sq-card-message{ display: none; } .square-cc-field .form-dropdown:not([size]), .square-cc-field .form-textbox { height: 48px; } .square-cc-field .form-dropdown:not([size]), .square-cc-field .form-textbox { height: 48px; } .square-cc-field, .square-ach { margin: 20px 0 0 30px; } .square-cc-field #card-container { margin-top: 12px; } .payment-form-table.square-cash-app.multiple-pm{ margin: 10px 0 0 20px; } .payment-form-table.square-cash-app.multiple-pm .sq-cash-qr-container .col-left{ height: 180px; max-width: 80%; background-color: rgba(0,0,0,0); } .payment-form-table.square-cash-app.multiple-pm .sq-cash-qr-container .col-left img{ margin: 100px 0 0 100px; width: auto; height: auto; } .payment-form-table.square-cash-app.multiple-pm .sq-cash-qr-container .col-right .sq-cash-qr-code{ margin: 40px 0 0 48%; width: 25%; height: auto; } .payment-form-table.square-cc-field th { text-align:left; margin-top:20px; display:table; font-weight:500; font-size:16px; padding-bottom: 16px; } .payment-form-table.square-cc-field td[width="50%"] input { max-width: 100%; min-width: 100%; } .payment-form-table.square-cc-field tbody tr td:nth-child(1) { padding-right: 6px; } .payment-form-table.square-cc-field tbody tr td:nth-child(2) { padding-left: 6px; } .payment-form-table.square-cc-field tbody tr.if_cc_field td:nth-child(1) { padding-right: 0; } /* Payment CC field & addres field */ /* E.O. Payment Fields //// */ /* E.O. recommendation list */ .paymentsettings .spanel_back_btn { position: absolute; color: #A5AAB0 !important; right: 8px; top: 10px; display: block; background-color: #2F333B; text-transform: uppercase; padding: 0 12px 0 24px; font-size: 14px; border-radius: 2px; line-height: 30px; cursor: pointer; border: 0; } .paymentsettings .spanel_back_btn:before { background-image: url("https://cdn.jotfor.ms/assets/img/payments/sp_back_icon.svg"); background-position: left 8px center; background-repeat: no-repeat; content: ""; width: 16px; height: 30px; position: absolute; z-index: 9999999; top: 0; left: 0; background-size: 8px; opacity: 0.6; } /* Payment Settings Modal */ .productConfirmationModal { position: absolute; background-color: #262C3D; width: 94%; left: 3%; top: 23px; border-radius: 3px; color: #ffffff; z-index: 9999999; } .productConfirmationModal > p { font-size: 15px; padding: 0 44px 0 78px; background-image: url("https://cdn.jotfor.ms/assets/img/payments/alert_blue.svg"); background-position: left 26px center; background-size: 32px; line-height: 18px; background-repeat: no-repeat; } .productConfirmationModal > button { border: 0; background-color: transparent; color: #ffF; position: absolute; width: 44px; height: 44px; top: 20px; right: 0; color: transparent; background-image: url("https://cdn.jotfor.ms/assets/img/payments/close_white.svg"); background-repeat: no-repeat; background-position: top right 16px; background-size: 14px; cursor: pointer; } .productConfirmationModal .modalActions { width: 100%; border-top: 1px solid #191c25; padding: 12px; text-align: center; } .productConfirmationModal .modalActions button { height: 36px; border-radius: 3px; padding: 0 20px; min-width: 100px; line-height: 33px; cursor: pointer; } .productConfirmationModal .modalActions button:nth-child(1) { border: 0; background-color: transparent; color: #fff; } .productConfirmationModal .modalActions button:nth-child(2) { border: 0; background-color: #2F90FF; color: #fff; } .paymentSettingsSave { padding: 20px; background-color: #3E464F; border-top: 1px solid #333b44; border-radius: 1px; color: #b4b9be; position: fixed; bottom: -60px; left: 0; width: 100%; background-size: 32px 32px; background-repeat: no-repeat; background-position: left 20px center; z-index: 99 !important; transition: transform 0.8s; text-align: center; display: block; } .paymentSettingsSave a { width: 80%; margin: 0 auto !important; text-align: center; float: none !important; } /* Product Inline Edit */ .form-product-item.focusedProduct .p_checkbox { opacity: 0.6; background-size: 10px; background-repeat: no-repeat; } .form-product-item.focusedProduct .p_col .p_checkbox .p-number { display: block; font-size: 12px; font-weight: bold; text-align: center; line-height: 24px; color: #798dcb; width: 24px; height: 24px; border-radius: 3px; border: 1px solid #dee3f3; background-color: #ffffff; } .card-3col .form-product-item.focusedProduct .p_col .p_checkbox .p-number { margin-top: -6px; margin-left: -4px; } .card-2col .form-product-item.focusedProduct .p_col .p_checkbox .p-number { margin-top: -6px; margin-left: -2px; } .isMobile .form-product-item.focusedProduct .p_checkbox, .card-2col .form-product-item.focusedProduct .p_checkbox, .card-3col .form-product-item.focusedProduct .p_checkbox { position: absolute; z-index: 4; top: 4px !important; left: 4px; background-size: 10px; background-repeat: no-repeat; } .form-product-item.focusedProduct .p_checkbox * { display:none; } .form-product-item.focusedProduct { position:relative; border: 1px solid #DEE3F4; background-color: #f4f7fc; width: 100%; border-radius: 3px; } .form-product-item.focusedProduct .p_image, .form-product-item.focusedProduct .image_area.null, .form-product-item.focusedProduct .image_area.upload_image { display:block; position: relative; } .form-product-item:not(.show_image).focusedProduct .p_image::after { content: 'Upload'; font-size: 11px; width: 72px; display: block; text-align: center; position: absolute; top: 46px; } .form-product-item:not(.show_image).focusedProduct .p_image::before { content: ''; font-size: 11px; width: 60px; height: 60px; display: block; text-align: center; position: absolute; top: 6px; right: 6px; border: 1px dashed #dee3f3; z-index:2 } .form-product-item.focusedProduct .image_area.null, .form-product-item.focusedProduct .image_area.upload_image { background-image: url("https://cdn.jotfor.ms/assets/img/payments/product_upload.svg") !important; background-size: 28px; background-position: center 16px; } .form-product-item .focus_action_button_container { display: none; } .form-product-item.focusedProduct .focus_action_button_container { display: block; display: flex; align-items: center; flex-direction: column; justify-content: center; border-left: 1px solid #DEE3F4; padding-left: 12px; padding-right: 12px; margin-top: -16px; margin-bottom: -16px; min-height: 104px; margin-right: -16px; } .form-product-item.focusedProduct .focus_action_button_container a { border: 1px solid #DEE3F4; background-color: #ffffff; width: 34px; height: 34px; min-width: 34px; background-repeat: no-repeat; background-position: center; border-radius: 2px; } .form-product-item.focusedProduct .focus_action_button_container a:hover { background-color: #f4f7fc; } .form-product-item.focusedProduct .focus_action_button_container a:nth-child(1) { background-image: url("https://cdn.jotfor.ms/assets/img/payments/product_delete.png"); background-size: 10px; margin-bottom: 6px; } .form-product-item.focusedProduct .focus_action_button_container a:nth-child(2) { background-image: url("https://cdn.jotfor.ms/assets/img/payments/product_settings.png"); background-size: 12px; } .form-product-item.focusedProduct .form-product-details{ padding-right: 12px; } /* card view layout setup */ .form-product-item.focusedProduct.new_ui:not(.show_image), .form-product-item.focusedProduct.new_ui:not(.show_image), .isMobile .form-product-item:not(.show_image).focusedProduct { padding: 0!important; } .isMobile .form-product-item.new_ui.focusedProduct .p_image, .card-2col .form-product-item.new_ui.focusedProduct .p_image { padding: 0; float: none; width: 100%; height: 164px; border-bottom: 1px solid #DEE3F4; } .card-2col .form-product-item:not(.show_image).focusedProduct .p_image .image_area.null, .isMobile .form-product-item:not(.show_image).focusedProduct .p_image .image_area.null, .card-2col .form-product-item:not(.show_image).focusedProduct .p_image .image_area.upload_image, .isMobile .form-product-item:not(.show_image).focusedProduct .p_image .image_area.upload_image { margin: 4px; height: 158px; width: calc(100% - 8px); background-position: center center; border-radius: 4px; border-style: dashed; } .card-3col .form-product-item.new_ui.focusedProduct .p_image { padding: 0; float: none; width: 100%; height: 144px; border-bottom: 1px solid #DEE3F4; } .card-3col .form-product-item:not(.show_image).focusedProduct .p_image .image_area.null, .card-3col .form-product-item:not(.show_image).focusedProduct .p_image .image_area.upload_image { margin: 4px; height: 138px; width: calc(100% - 8px); background-position: center center; border-radius: 4px; border-style: dashed; } .isMobile .form-product-item:not(.show_image).focusedProduct .p_image::after, .card-3col .form-product-item:not(.show_image).focusedProduct .p_image::after, .card-2col .form-product-item:not(.show_image).focusedProduct .p_image::after { font-size: 13px; width: 100%; display: block; top: 90px; } .card-2col .form-product-item:not(.show_image).focusedProduct .p_image::after { top: 96px; } .isMobile .form-product-item:not(.show_image).focusedProduct .p_image::before, .card-3col .form-product-item:not(.show_image).focusedProduct .p_image::before, .card-2col .form-product-item:not(.show_image).focusedProduct .p_image::before { display: none; } .card-3col .form-product-item.focusedProduct .focus_action_button_container, .card-2col .form-product-item.focusedProduct .focus_action_button_container, .isMobile .form-product-item.focusedProduct .focus_action_button_container { display: flex; justify-content: flex-start; flex-direction: row; border-left: 0 solid #DEE3F4; width: 100%; margin: 0; padding: 0; min-height: unset; height: unset; margin-left: 10px; margin-bottom: 10px; } .card-2col .form-product-item.focusedProduct .focus_action_button_container, .isMobile .form-product-item.focusedProduct .focus_action_button_container { margin-left: 16px; margin-bottom: 16px; } .card-3col .form-product-item.focusedProduct .focus_action_button_container a:nth-child(1), .card-2col .form-product-item.focusedProduct .focus_action_button_container a:nth-child(1), .isMobile .form-product-item.focusedProduct .focus_action_button_container a { margin: 0; padding: 0; min-height: unset; margin-right: 6px; } .btn-add-product { background-color: #EFF3FE; border-width: 1px; border-style: solid; height: 42px; text-align: center; line-height: 38px; width: 100%; display: block; font-weight: 700; color: #5175F2; border-radius: 3px; margin-top: 18px; margin-bottom: 30px; cursor: pointer; } .card-3col .btn-add-product { width: calc(33.333% - 8px); border-width: 1px; border-style: dashed; position: relative; border-radius: 3px; margin: 0; display: flex; height: auto; text-align: center; justify-content: center; align-items: center; margin: 0 12px 12px 0; } .card-2col .btn-add-product { width: calc(50% - 8px); border-width: 1px; border-style: dashed; position: relative; border-radius: 3px; margin: 0; display: flex; height: auto; text-align: center; justify-content: center; align-items: center; margin: 0 12px 20px 0; } .isNotSelected .btn-add-product, .card-2col.isNotSelected .btn-add-product, .card-3col.isNotSelected .btn-add-product { display: none; } .isMobile .card-3col .btn-add-product, .isMobile .card-2col .btn-add-product { width: 100%; } .card-3col .on_col2 + .btn-add-product, .card-2col .on_col1 + .btn-add-product { margin-right: 0; } /* E.O. Product Inline Edit */ @keyframes SHW { from { transform: translate(0, 60px); } to { transform: translate(0, -60px); } } .paymentSettingsSave.active { animation: SHW .8s; animation-fill-mode: both; } /* E.O. Payment Settings Modal */ /* Product Inline Edit */ .form-product-item .form-product-item-detail.focusedProduct { position:relative; } .form-product-item .form-product-item-detail.focusedProduct .p_checkbox { position:absolute; top: 35px; left: 8px; background-size: 12px; background-repeat:no-repeat; background-image: url("https://cdn.jotfor.ms/assets/img/payments/product_drag.png"); } .form-product-item .form-product-item-detail.focusedProduct .p_checkbox * { display:none; } .form-product-item .form-product-item-detail.focusedProduct { border: 1px solid #DEE3F4 !important; background-color: #f4f7fc; margin: 0 16px; width: calc(100% - 30px); border-radius: 3px; } .form-product-item .form-product-item-detail.focusedProduct .p_image, .form-product-item .form-product-item-detail.focusedProduct .image_area.null, .form-product-item .form-product-item-detail.focusedProduct .image_area.upload_image { display:block; position: relative; } .form-product-item .form-product-item-detail.focusedProduct .p_image::after { content: 'Upload'; font-size: 11px; width: 72px; display: block; text-align: center; position: absolute; top: 46px; } .form-product-item .form-product-item-detail.focusedProduct .p_image::before { content: ''; font-size: 11px; width: 60px; height: 60px; display: block; text-align: center; position: absolute; top: 6px; right: 6px; border: 1px dashed #dee3f3; z-index:2 } .form-product-item .form-product-item-detail.focusedProduct .image_area.null, .form-product-item .form-product-item-detail.focusedProduct .image_area.upload_image { background-image: url("https://cdn.jotfor.ms/assets/img/payments/product_upload.svg") !important; background-size: 28px; background-position: center 16px; } .form-product-item .form-product-item-detail.focusedProduct .focus_action_button_container a { border: 1px solid #DEE3F4; background-color: #ffffff; width: 34px; height: 34px; min-width: 34px; background-repeat: no-repeat; background-position: center; border-radius: 2px; } .form-product-item .form-product-item-detail.focusedProduct .focus_action_button_container a:hover { background-color: #f4f7fc; } .form-product-item .form-product-item-detail.focusedProduct .focus_action_button_container a:nth-child(1) { background-image: url("https://cdn.jotfor.ms/assets/img/payments/product_settings.png"); background-size: 12px; margin-bottom: 6px; } .form-product-item .form-product-item-detail.focusedProduct .focus_action_button_container a:nth-child(2) { background-image: url("https://cdn.jotfor.ms/assets/img/payments/product_delete.png"); background-size: 14px; } .form-product-item .form-product-item-detail.focusedProduct .form-product-details{ padding-right: 12px; } /* E.O. Product Inline Edit */ /* google Pay */ #square-google-pay-content { display: flex; border: 1px solid #e1e4eb; border-radius: 3px; align-items: center; } #square-google-pay-content div:nth-child(1) { width: 118px; } #square-google-pay-content div:nth-child(1) img { width: 38px; margin: 16px; } #square-google-pay-content div:nth-child(2) { width: 210px; min-width: 95px; border-right: 1px solid #e1e4eb; display: block; height: 58px; line-height: 56px; font-weight: 600; } #square-google-pay-content div:nth-child(3) { padding-left: 14px; font-size: 14px; color: #646b78; } /* E.O. google Pay */ @media screen and (max-width: 768px) { .form-buttons-wrapper.paypal-submit-container { flex-wrap: wrap !important; } } /* PAYMEN UI: CSS for Mobile View */ @media screen and (max-width: 560px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) { /* do not delete*/ .form-line[data-payment="true"] { width: calc(100% - 8px); } .payment_footer { display: block !important; } .payment_footer #coupon-container { width: 100% !important; } .payment_footer #coupon-container table { width: 100%; } .payment_footer #coupon-container #coupon-input, .payment_footer #coupon-container #coupon-button { width: 100%; } .payment_footer .total_area { width: 100%; padding: 20px 6px 0 !important; margin-top: 12px; } .payment-form-table.square-cc-field tbody tr td:nth-child(2) { padding-left: 12px; } } @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) { /* do not delete*/ .form-line[data-payment="true"] { width: calc(100% - 8px); } /* do not delete*/ .form-line[data-payment="true"] div[data-wrapper-react="true"] { display: flex; flex-wrap: wrap; width: 100%; align-items: stretch; } .payment_footer.new_ui .total_area:nth-child(1) { width: 100% !important; border: 0; } .payment_footer.new_ui.show_coupon .total_area { border-top: 1px solid #EEE; } .form-product-item .form-product-container .form-sub-label-container label.form-sub-label, .form-product-item .form-product-container .form-sub-label-container span.select_cont { display: block; float: none; } span.form-product-item { width: 100%; margin: 12px 0 !important; } .form-product-item + .p_item_separator { display: none; } .form-product-item.new_ui { border: 1px solid #dee2ee; position: relative; border-radius: 3px; padding: 0 0 0 28px; margin: 0 10px 20px; } .subscription_cont .form-product-item.new_ui .form-product-item-detail.new_ui { display: block !important; } .subscription_cont .form-product-details { padding-left: 0; } .p_item_separator { margin: 12px 0 0 !important; opacity: 0 !important; } .select_border { opacity: 1; } .form-product-item.new_ui .form-product-item-detail.new_ui { display: block !important; margin-top: 0 !important; padding: 0; } .form-product-item.new_ui .form-product-container { padding: 16px; margin: 0 !important; } .form-product-item.new_ui.show_subtotal .form-product-container { padding: 16px 16px 34px !important; margin: 0 !important; } .form-product-item .form-special-subtotal { bottom: 14px !important; top: auto; } .form-product-item.new_ui .form-product-container .form-product-name { min-height: auto; padding: 0; } .form-product-item.new_ui .p_col { position: absolute; left: 10px; top: 12px !important; } .form-product-item.new_ui.show_image { padding: 0; display: block; } .form-product-item.new_ui.show_image .p_image { padding: 0; float: none; min-width: 120px; max-height: 320px; width: 100%; height: 100%; } .form-product-item.new_ui.show_image .image_zoom { width: 100%; height: 100%; } .form-product-item.new_ui.show_image .image_area { min-height: 168px; width: 100%; height: 100%; border-radius: 0; border: 0; background-color: #F4F4F4; border-bottom: 1px solid #F4F4F4; } .form-product-item.new_ui.show_image .form-product-container .form-sub-label-container { margin-right: 12px; margin-top: 2px; } .form-product-item.new_ui.show_image .form-product-container .form-product-description { padding-right: 0 !important; padding-top: 4px; } .form-product-item.new_ui.show_image .title_description { padding: 0; min-height: auto; } .form-product-item.new_ui .form-product-details { padding-top: 4px; position: relative; display: block; top: 0; left: 0; margin-left: 0; color: #2e69ff; } .form-product-item.show_image .p_checkbox { margin-top: 0; } .payment_footer.new_ui { margin: 10px 0; position: relative; } .form-product-category-item { margin: 0 10px 16px; padding: 30px 0 12px !important; width: 100%; } .payment_footer.new_ui .total_area { padding-right: 0; } .form-product-category-item { width: 100%; } .form-product-item.new_ui.not-category-found { display: none !important; } .paypal-submit-container .paypal-submit-button-wrapper { width: calc(100% - 30px) !important; } .form-product-category-item { width: 100%; } .payment-form-table tbody { width: 100%; display: grid; } .payment-form-table tbody tr td { display: flex; width: 100%; padding-left: 0 !important; } .payment-form-table tbody tr td iframe { border: 1px solid #c3cad8; background-color: #ffffff; } .form-product-item.new_ui.sold_out_product .form-product-details { display: flex !important; width: 100%; } .form-product-item.new_ui.sold_out_product .form-product-details .payment-badge { margin-top: -2px; margin-left: 6px; position: relative; } .form-product-item.new_ui.sold_out_product .form-product-details { display: flex !important; width: 100%; flex-direction: column; } .form-product-item.new_ui.sold_out_product .form-product-details .payment-badge { margin-top: 6px; margin-bottom: 6px; margin-left: 0; position: relative; max-width: 70px; } .form-product-item.new_ui.not_enough_stock_product .form-product-details .payment-badge { margin-top: 6px; margin-bottom: 6px; margin-left: 0; position: relative; max-width: 140px; } .form-product-item.new_ui.not_enough_stock_product .payment-badge { display: block; width: calc(100% - 32px); padding-left: 26px; margin-bottom: 16px; } .payment-form-table.square-cc-field tbody tr td { max-width: 304px; } .payment-form-table.square-cc-field tbody tr td:nth-child(2) { padding-left: 0; padding-top: 20px; } #square-google-pay-content { flex-wrap: wrap; } #square-google-pay-content div:nth-child(1) { width: 66px !important; } #square-google-pay-content div:nth-child(2) { border-right: unset !important; display: block; width: 50% !important; } #square-google-pay-content div:nth-child(3) { padding-left: 14px; font-size: 14px; width:100; padding:20px; border-top: 1px solid #e1e4eb; } } /* do not delete */ div[data-wrapper-react="true"] { display: block; } .product-container-wrapper .form-product-description .inlineEditor { width: 100%; } .form-line.isSelected[data-payment="true"] { z-index: 2 !important; } .form-line[data-payment="true"] br { display: none; } .form-line[data-payment="true"] .form-checkbox, .form-line[data-payment="true"] .form-radio { clip: auto !important; } .form-line[data-payment="true"].form-line-active { background-color: transparent; } .form-line[data-payment="true"] .form-label-left, .form-line[data-payment="true"] .form-label-right { float: left; padding-top: 20px; } .form-line.donation_cont .form-label-left, .form-line.donation_cont .form-label-right { padding-top: 3px; } .form-line.donation_cont input[data-component="paymentDonation"] { margin-right: 4px; } .form-line[data-payment="true"] .form-label-left ~ div.form-input { float: left; display: block; width: calc(100% - 160px); } .form-line[data-payment="true"] .form-label-right { float: left; } .form-line[data-payment="true"] .form-label-right ~ div.form-input { float: left; display: block; width: calc(100% - 160px); } .form-line[data-payment="true"]:after { content: ""; display: block; clear: both; width: 100%; } .form-line[data-payment="true"] hr { border: 0; border-top-width: 1px; border-top-style: solid; border-top-color: rgba(195,202,216,.5); margin: 16px 0; width: 100%; } /* E.O. NEW PAYMENT UI //////////////// */