/* * Shared ePaystubs create-tool action design. * Visual only. * * Reference: * W-2 create tool. */ .epay-create-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; margin-top: 16px !important; padding: 0 !important; align-items: stretch !important; } .epay-create-actions > * { min-width: 0 !important; margin: 0 !important; } .epay-create-actions .paystub_submit_button, .epay-create-actions .form_warrap { width: 100% !important; margin: 0 !important; padding: 0 !important; } :is( #epay-create-action-specificity, .epay-create-action ) { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 50px !important; margin: 0 !important; padding: 12px 18px !important; border-radius: 11px !important; font-family: "Poppins", sans-serif !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 600 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* Open Full Preview / Generate Preview */ :is( #epay-create-secondary-specificity, .epay-create-action--secondary ) { border: 1px solid #023047 !important; background: #ffffff !important; color: #023047 !important; } :is( #epay-create-secondary-specificity, .epay-create-action--secondary ):hover, :is( #epay-create-secondary-specificity, .epay-create-action--secondary ):focus, :is( #epay-create-secondary-specificity, .epay-create-action--secondary ):focus-visible { border-color: #023047 !important; background: #eef5f7 !important; color: #023047 !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(7, 59, 92, .12) !important; } /* Submit Information */ :is( #epay-create-primary-specificity, .epay-create-action--primary ) { border: 1px solid #0097b2 !important; background: #0097b2 !important; color: #ffffff !important; } :is( #epay-create-primary-specificity, .epay-create-action--primary ):hover, :is( #epay-create-primary-specificity, .epay-create-action--primary ):focus, :is( #epay-create-primary-specificity, .epay-create-action--primary ):focus-visible { border-color: #007f98 !important; background: #007f98 !important; color: #ffffff !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(31, 158, 173, .18) !important; } /* Existing loading / disabled state remains functional. */ :is( #epay-create-action-specificity, .epay-create-action ):disabled, :is( #epay-create-action-specificity, .epay-create-action )[aria-disabled="true"] { opacity: .62 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* Mobile = same W-2 stacked action layout. */ @media (max-width: 767.98px) { .epay-create-actions { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin-top: 16px !important; } :is( #epay-create-action-specificity, .epay-create-action ) { min-height: 50px !important; padding: 12px 16px !important; font-size: 0.91rem !important; } } /* ========================================================== EPAY_CREATE_ACTION_W4_W2C_OVERRIDE_V1 Strong final specificity for: - W-4 create tool - W-2c / W-3c correction tool Matches W-2 action design exactly. Visual only. ========================================================== */ /* ---------------------------------------------------------- ACTION CONTAINERS ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions, .epay-w2c-generator .w2c-preview-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; margin-top: 16px !important; padding: 0 !important; align-items: stretch !important; } .epay-w4-generator .w4-preview-actions > *, .epay-w2c-generator .w2c-preview-actions > * { min-width: 0 !important; margin: 0 !important; } /* ---------------------------------------------------------- BOTH BUTTONS Exact W-2 dimensions / typography ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #previewBtn, .epay-w4-generator .w4-preview-actions #w4FormButton, .epay-w2c-generator .w2c-preview-actions #previewBtn, .epay-w2c-generator .w2c-preview-actions #saveW2cForm { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 50px !important; margin: 0 !important; padding: 12px 18px !important; border-radius: 11px !important; font-family: inherit !important; font-size: 0.91rem !important; line-height: 1.25 !important; font-weight: 800 !important; text-align: center !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* ---------------------------------------------------------- OPEN FULL PREVIEW White + W2 navy ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #previewBtn, .epay-w2c-generator .w2c-preview-actions #previewBtn { border: 1px solid #023047 !important; background: #ffffff !important; background-image: none !important; color: #023047 !important; } .epay-w4-generator .w4-preview-actions #previewBtn:hover, .epay-w4-generator .w4-preview-actions #previewBtn:focus, .epay-w4-generator .w4-preview-actions #previewBtn:focus-visible, .epay-w2c-generator .w2c-preview-actions #previewBtn:hover, .epay-w2c-generator .w2c-preview-actions #previewBtn:focus, .epay-w2c-generator .w2c-preview-actions #previewBtn:focus-visible { border-color: #023047 !important; background: #eef5f7 !important; background-image: none !important; color: #023047 !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(2, 48, 71, .12) !important; } /* ---------------------------------------------------------- SUBMIT INFORMATION W2 teal ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #w4FormButton, .epay-w2c-generator .w2c-preview-actions #saveW2cForm { border: 1px solid #0097b2 !important; background: #0097b2 !important; background-image: none !important; color: #ffffff !important; } .epay-w4-generator .w4-preview-actions #w4FormButton:hover, .epay-w4-generator .w4-preview-actions #w4FormButton:focus, .epay-w4-generator .w4-preview-actions #w4FormButton:focus-visible, .epay-w2c-generator .w2c-preview-actions #saveW2cForm:hover, .epay-w2c-generator .w2c-preview-actions #saveW2cForm:focus, .epay-w2c-generator .w2c-preview-actions #saveW2cForm:focus-visible { border-color: #007f98 !important; background: #007f98 !important; background-image: none !important; color: #ffffff !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(0, 151, 178, .18) !important; } /* ---------------------------------------------------------- DISABLED / LOADING Preserve existing behavior ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #previewBtn:disabled, .epay-w4-generator .w4-preview-actions #w4FormButton:disabled, .epay-w2c-generator .w2c-preview-actions #previewBtn:disabled, .epay-w2c-generator .w2c-preview-actions #saveW2cForm:disabled { opacity: .62 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* ---------------------------------------------------------- MOBILE Same W2 stacked layout ---------------------------------------------------------- */ @media (max-width: 767.98px) { .epay-w4-generator .w4-preview-actions, .epay-w2c-generator .w2c-preview-actions { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin-top: 16px !important; } .epay-w4-generator .w4-preview-actions #previewBtn, .epay-w4-generator .w4-preview-actions #w4FormButton, .epay-w2c-generator .w2c-preview-actions #previewBtn, .epay-w2c-generator .w2c-preview-actions #saveW2cForm { width: 100% !important; min-height: 50px !important; padding: 12px 16px !important; font-size: 0.91rem !important; } } /* ========================================================== /EPAY_CREATE_ACTION_W4_W2C_OVERRIDE_V1 ========================================================== */ /* ========================================================== EPAY_CREATE_ACTION_W4_W7_EXACT_W2_V2 W-4 + W-7 only. Match the ACTUAL current W-2 rendered action design, including the later W-2 submit-button override. VISUAL ONLY. ========================================================== */ /* ---------------------------------------------------------- ACTION ROW Same layout as current W-2 ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions.epay-create-actions, .epay-w7-generator .w7-preview-actions.epay-create-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; margin: 16px 0 0 !important; padding: 0 !important; align-items: stretch !important; } .epay-w4-generator .w4-preview-actions.epay-create-actions > *, .epay-w7-generator .w7-preview-actions.epay-create-actions > * { min-width: 0 !important; margin: 0 !important; } /* ---------------------------------------------------------- COMMON BUTTON FOUNDATION ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #previewBtn.epay-create-action, .epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action, .epay-w7-generator .w7-preview-actions #previewBtn.epay-create-action, .epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 12px 18px !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transform: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important; } /* ---------------------------------------------------------- OPEN FULL PREVIEW EXACT CURRENT W-2 SECONDARY BUTTON ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #previewBtn.epay-create-action, .epay-w7-generator .w7-preview-actions #previewBtn.epay-create-action { min-height: 50px !important; padding: 12px 18px !important; border: 1px solid #7895a8 !important; border-radius: 11px !important; background: #eaf2f6 !important; background-image: none !important; color: #023047 !important; font-family: inherit !important; font-size: 0.91rem !important; line-height: 1.25 !important; font-weight: 800 !important; box-shadow: 0 1px 3px rgba(15, 50, 71, .14) !important; } .epay-w4-generator .w4-preview-actions #previewBtn.epay-create-action:hover, .epay-w4-generator .w4-preview-actions #previewBtn.epay-create-action:focus, .epay-w4-generator .w4-preview-actions #previewBtn.epay-create-action:focus-visible, .epay-w7-generator .w7-preview-actions #previewBtn.epay-create-action:hover, .epay-w7-generator .w7-preview-actions #previewBtn.epay-create-action:focus, .epay-w7-generator .w7-preview-actions #previewBtn.epay-create-action:focus-visible { border-color: #023047 !important; background: #dceaf1 !important; background-image: none !important; color: #023047 !important; box-shadow: 0 1px 3px rgba(15, 50, 71, .18) !important; transform: none !important; outline: 0 !important; } /* ---------------------------------------------------------- SUBMIT INFORMATION EXACT CURRENT W-2 FINAL OVERRIDE W-2 currently resolves to: 52px 8px radius Open Sans 16px / 700 #1a9ba8 ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action, .epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action { min-height: 52px !important; padding: 12px 18px !important; border: 0 !important; border-radius: 8px !important; background: #1a9ba8 !important; background-image: none !important; color: #ffffff !important; font-family: "Open Sans", sans-serif !important; font-size: 16px !important; line-height: 1.2 !important; font-weight: 700 !important; box-shadow: none !important; } .epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action:hover:not(:disabled), .epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action:focus:not(:disabled), .epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action:focus-visible:not(:disabled), .epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action:hover:not(:disabled), .epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action:focus:not(:disabled), .epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action:focus-visible:not(:disabled) { border: 0 !important; background: #158793 !important; background-image: none !important; color: #ffffff !important; box-shadow: none !important; transform: none !important; outline: 0 !important; } /* ---------------------------------------------------------- DISABLED Same W-2 behavior ---------------------------------------------------------- */ .epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action:disabled, .epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action:disabled { opacity: .65 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* ---------------------------------------------------------- MOBILE Same current W-2 responsive action layout ---------------------------------------------------------- */ @media (max-width: 767.98px) { .epay-w4-generator .w4-preview-actions.epay-create-actions, .epay-w7-generator .w7-preview-actions.epay-create-actions { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin-top: 16px !important; } .epay-w4-generator .w4-preview-actions #previewBtn.epay-create-action, .epay-w7-generator .w7-preview-actions #previewBtn.epay-create-action { width: 100% !important; min-height: 50px !important; } .epay-w4-generator .w4-preview-actions #w4FormButton.epay-create-action, .epay-w7-generator .w7-preview-actions #save_w7formdata.epay-create-action { width: 100% !important; min-height: 52px !important; } } /* ========================================================== /EPAY_CREATE_ACTION_W4_W7_EXACT_W2_V2 ========================================================== */ /* ========================================================== EPAY_CREATE_DATE_FORMAT_UPPERCASE_V3 Visible browser date-format presentation only. dd/mm/yyyy -> DD/MM/YYYY Does NOT alter: - input type - actual input value - validation - JavaScript - calculations - submitted date - database/backend format ========================================================== */ input[type="date"] { text-transform: uppercase !important; } input[type="date"]::placeholder { text-transform: uppercase !important; } input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="date"]::-webkit-datetime-edit-text, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-year-field { text-transform: uppercase !important; } /* /EPAY_CREATE_DATE_FORMAT_UPPERCASE_V3 */