/* ============================================================ PMGSY-DPRMS Perfex CRM 3.4.0 Custom Login Page Styling ============================================================ */ /* ============================================================ ADMIN LOGIN PAGE ============================================================ */ /* Perfex Admin Login: IMPORTANT: The background is applied to because Perfex/Tailwind controls the body background. */ html:has(body.login_admin) { min-height: 100% !important; width: 100% !important; background: url("/assets/images/login/admin-login-bg.jpg?v=20260814") center center / cover no-repeat fixed !important; } /* Make the Admin login body transparent so the background remains visible. */ html body.login_admin { min-height: 100vh !important; width: 100% !important; background: transparent !important; } /* Prevent Tailwind's body background from covering the image */ html body.login_admin.tw-bg-neutral-100 { background-color: transparent !important; background-image: none !important; } /* ============================================================ ADMIN LOGIN FORM WRAPPER ============================================================ */ html body.login_admin .authentication-form-wrapper { background: transparent !important; position: relative !important; z-index: 20 !important; } /* ============================================================ ADMIN LOGIN FORM / CARD ============================================================ */ html body.login_admin .authentication-form-wrapper form { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(213, 217, 224, 0.95) !important; border-radius: 10px !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.16) !important; } /* ============================================================ ADMIN LOGIN LOGO ============================================================ */ html body.login_admin .authentication-form-wrapper img { max-width: 100% !important; height: auto !important; object-fit: contain !important; } /* ============================================================ ADMIN LOGIN HEADINGS ============================================================ */ html body.login_admin h1, html body.login_admin h2, html body.login_admin h3, html body.login_admin h4 { color: #0D2B45 !important; } /* ============================================================ ADMIN LOGIN LABELS ============================================================ */ html body.login_admin label { color: #0D2B45 !important; font-weight: 600 !important; } /* ============================================================ ADMIN LOGIN INPUTS ============================================================ */ html body.login_admin input[type="text"], html body.login_admin input[type="email"], html body.login_admin input[type="password"] { background-color: rgba(255, 255, 255, 0.98) !important; border: 1px solid #C8CED8 !important; border-radius: 6px !important; color: #111827 !important; } /* ============================================================ ADMIN LOGIN INPUT FOCUS ============================================================ */ html body.login_admin input[type="text"]:focus, html body.login_admin input[type="email"]:focus, html body.login_admin input[type="password"]:focus { border-color: #1F4A8C !important; box-shadow: 0 0 0 3px rgba(31, 74, 140, 0.12) !important; outline: none !important; } /* ============================================================ ADMIN LOGIN LINKS ============================================================ */ html body.login_admin a { color: #1F4A8C; } html body.login_admin a:hover { color: #F58220; } /* ============================================================ ADMIN LOGIN BUTTON ============================================================ */ html body.login_admin button[type="submit"], html body.login_admin input[type="submit"], html body.login_admin form button { background-color: #F58220 !important; border-color: #F58220 !important; color: #FFFFFF !important; border-radius: 6px !important; font-weight: 600 !important; } /* ============================================================ ADMIN LOGIN BUTTON HOVER ============================================================ */ html body.login_admin button[type="submit"]:hover, html body.login_admin input[type="submit"]:hover, html body.login_admin form button:hover { background-color: #D96E0B !important; border-color: #D96E0B !important; color: #FFFFFF !important; } /* ============================================================ ADMIN LOGIN CHECKBOX ============================================================ */ html body.login_admin input[type="checkbox"] { accent-color: #F58220; } /* ============================================================ ADMIN LOGIN RECAPTCHA ============================================================ */ html body.login_admin .g-recaptcha { max-width: 100% !important; } /* ============================================================ ADMIN LOGIN - MOBILE ============================================================ */ @media (max-width: 767px) { html:has(body.login_admin) { background: url("/assets/images/login/admin-login-bg.jpg?v=20260814") center center / cover no-repeat scroll !important; } html body.login_admin { background: transparent !important; } html body.login_admin .authentication-form-wrapper { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; margin-left: auto !important; margin-right: auto !important; } html body.login_admin .authentication-form-wrapper form { width: 100% !important; max-width: 100% !important; } } /* ============================================================ ADMIN LOGIN - TABLET ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { html:has(body.login_admin) { background: url("/assets/images/login/admin-login-bg.jpg?v=20260814") center center / cover no-repeat fixed !important; } } /* ============================================================ ADMIN LOGIN - DESKTOP ============================================================ */ @media (min-width: 1025px) { html:has(body.login_admin) { background: url("/assets/images/login/admin-login-bg.jpg?v=20260814") center center / cover no-repeat fixed !important; } } /* ============================================================ CUSTOMER LOGIN PAGE ============================================================ */ /* Customer login body: IMPORTANT: The customer background that was already working is retained. */ html:has(body.customers_login) { min-height: 100% !important; width: 100% !important; background: url("/assets/images/login/customer-login-bg.jpg?v=20260814") center center / cover no-repeat fixed !important; } html body.customers_login { min-height: 100vh !important; background: transparent !important; } /* ============================================================ CUSTOMER LOGIN WRAPPER ============================================================ */ html body.customers_login .authentication-form-wrapper { background: transparent !important; position: relative !important; z-index: 20 !important; } /* ============================================================ CUSTOMER LOGIN FORM ============================================================ */ html body.customers_login .authentication-form-wrapper form { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(213, 217, 224, 0.95) !important; border-radius: 10px !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.16) !important; } /* ============================================================ CUSTOMER LOGIN HEADINGS ============================================================ */ html body.customers_login h1, html body.customers_login h2, html body.customers_login h3, html body.customers_login h4 { color: #0D2B45 !important; } /* ============================================================ CUSTOMER LOGIN LABELS ============================================================ */ html body.customers_login label { color: #0D2B45 !important; font-weight: 600 !important; } /* ============================================================ CUSTOMER LOGIN INPUTS ============================================================ */ html body.customers_login input[type="text"], html body.customers_login input[type="email"], html body.customers_login input[type="password"] { background-color: rgba(255, 255, 255, 0.98) !important; border: 1px solid #C8CED8 !important; border-radius: 6px !important; color: #111827 !important; } /* ============================================================ CUSTOMER LOGIN INPUT FOCUS ============================================================ */ html body.customers_login input[type="text"]:focus, html body.customers_login input[type="email"]:focus, html body.customers_login input[type="password"]:focus { border-color: #1F4A8C !important; box-shadow: 0 0 0 3px rgba(31, 74, 140, 0.12) !important; outline: none !important; } /* ============================================================ CUSTOMER LOGIN LINKS ============================================================ */ html body.customers_login a { color: #1F4A8C; } html body.customers_login a:hover { color: #F58220; } /* ============================================================ CUSTOMER LOGIN BUTTON ============================================================ */ html body.customers_login button[type="submit"], html body.customers_login input[type="submit"], html body.customers_login form button { background-color: #F58220 !important; border-color: #F58220 !important; color: #FFFFFF !important; border-radius: 6px !important; font-weight: 600 !important; } /* ============================================================ CUSTOMER LOGIN BUTTON HOVER ============================================================ */ html body.customers_login button[type="submit"]:hover, html body.customers_login input[type="submit"]:hover, html body.customers_login form button:hover { background-color: #D96E0B !important; border-color: #D96E0B !important; color: #FFFFFF !important; } /* ============================================================ CUSTOMER LOGIN - MOBILE ============================================================ */ @media (max-width: 767px) { html:has(body.customers_login) { background: url("/assets/images/login/customer-login-bg.jpg?v=20260814") center center / cover no-repeat scroll !important; } html body.customers_login { background: transparent !important; } } /* ============================================================ END PMGSY-DPRMS LOGIN CUSTOMIZATION ============================================================ */