/* ========================================================================== Universal Login Stylesheet (AUTO-GENERATED - DO NOT EDIT) Source: styles/src/ Build: npm run build:css Built: 2026-06-30T05:15:48.764Z ========================================================================== */ /* ========== fonts.css ========== */ /* --- Font Declarations ---------------------------------------------------- */ /* All fonts loaded from Cloudinary for consistent Auth0 Universal Login */ /* Main body font - Founders Grotesk */ @font-face { font-family: "Founders"; src: url("https://cdn.wynnresorts.com/raw/upload/Auth0/assets/fonts/FoundersGrotesk-Regular.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Headline font - Monday */ @font-face { font-family: "Monday"; src: url("https://cdn.wynnresorts.com/raw/upload/Auth0/assets/fonts/Monday-Regular.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Private Access fonts */ @font-face { font-family: "Florensans"; src: url("https://cdn.wynnresorts.com/raw/upload/Auth0/assets/fonts/Florensans.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Avenir Heavy"; src: url("https://cdn.wynnresorts.com/raw/upload/Auth0/assets/fonts/AvenirLTStd-Heavy.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Avenir Medium"; src: url("https://cdn.wynnresorts.com/raw/upload/Auth0/assets/fonts/AvenirLTStd-Medium.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } /* ========== variables.css ========== */ /* --- CSS Variables -------------------------------------------------------- */ :root { /* Brand Colors */ --primary-color: #006f62; --primary-color-hover: #008577; --bg-primary-color: #003333; --secondary-color: #ffd1b7; --white: #ffffff; --error-color: #d03c38; /* Gray Palette (from Auth0 system) */ --gray-lightest: #f1f2f3; --gray-light: #dee2e6; --gray-mid: #c2c8d0; --gray-mid-dark: #686868; --gray-dark: #6f7780; --gray-darkest: #2d333a; /* Semantic Colors */ --color-text-default: #000000; --color-text-muted: #3c3c3c; --color-border: #d8d8d8; --color-ada-focus-shadow: rgba(240, 147, 0, 0.4); --color-error-focus-shadow: rgba(208, 60, 56, 0.4); /* Font Families */ --font-body: 'Founders', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-headline: 'Monday', Georgia, serif; /* Font Sizes (4px baseline grid with 1.25 ratio) */ --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-15: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 24px; --font-size-30: 30px; --font-size-3xl: 40px; /* Line Heights */ --line-height-tight: 1.1; --line-height-snug: 1.2; --line-height-normal: 1.4; --line-height-relaxed: 1.5; /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* Spacing System (8px base) */ --spacing: 8px; --spacing-0-5: 4px; /* 4px */ --spacing-1: 8px; /* 8px */ --spacing-1-5: 12px; /* 12px */ --spacing-2: 16px; /* 16px */ --spacing-2-5: 20px; /* 20px */ --spacing-3: 24px; /* 24px */ --spacing-4: 32px; /* 32px */ --spacing-5: 40px; /* 40px */ /* Legacy Variables (for compatibility) */ --font-default-color: var(--color-text-default); --input-border-color: var(--color-text-default); --label-font-color: var(--color-text-default); --base-form-element-height: 45px; --base-focus-color: var(--primary-color); } body { /* Body-level overrides */ --font-family: 'Founders', sans-serif; --page-background-color: var(--white); --border-radius-outer: 0px; --input-text-color: var(--color-text-default); --input-border-color: var(--color-text-default); /* Apply base styles */ font-family: var(--font-body); background-color: var(--white); margin: 0; padding: 0; } /* ========== base.css ========== */ /* --- Global Resets -------------------------------------------------------- */ *:focus-visible, *:focus { outline: none !important; outline-offset: 0 !important; } *::placeholder { color: var(--color-text-default) !important; opacity: 1; } *::-webkit-scrollbar { width: 2px; } *::-webkit-scrollbar-track { background-color: var(--white); } *::-webkit-scrollbar-thumb { background-color: var(--gray-lightest); } /* --- Base Element Styles -------------------------------------------------- */ a { color: var(--color-text-muted) !important; font-family: var(--font-body); text-decoration: none; font-size: var(--font-size-15); line-height: var(--font-size-15); letter-spacing: 0.5px; } a:hover { color: var(--primary-color) !important; text-decoration: underline; } /* --- Accessibility -------------------------------------------------------- */ button:focus-visible, a:focus-visible { position: relative; } button:focus-visible::before, a:focus-visible::before { content: ""; position: absolute; outline: 1px solid var(--color-ada-focus-shadow); top: calc(-1 * var(--spacing-0-5) - 1px); left: calc(-1 * var(--spacing-0-5) - 1px); width: calc(100% + var(--spacing-1-5) - 2px); height: calc(100% + var(--spacing-1-5) - 2px); box-shadow: 0px 0px var(--spacing-0-5) var(--spacing-0-5) var(--color-ada-focus-shadow); border-radius: var(--spacing-0-5); background-color: transparent; } /* --- Utility Classes ------------------------------------------------------ */ .hidden { display: none !important; } /* ========== forms-fields.css ========== */ /* --- Prompt Partial Fields (signup-password injected fields) -------------- */ .ulp-field { margin-bottom: var(--spacing-1-5); text-align: left; } .ulp-field label { display: block; font-size: var(--font-size-sm); color: var(--label-font-color); margin-bottom: var(--spacing-0-5); font-family: var(--font-body); } .ulp-field label.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .ulp-field input, .ulp-field select, .input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: var(--input-height, 52px); padding: 0 var(--spacing-1-5); font-size: var(--font-size-md); font-family: var(--font-body); color: var(--input-text-color); background-color: var(--input-background-color, var(--white)); border: 1px solid var(--input-border-color); border-radius: var(--input-border-radius, 3px); box-sizing: border-box; } /* All focus states: green 2px border, no box-shadow by default. .input is Auth0's stable class on native prompt inputs (login/signup); targeting it instead of input[type=...] avoids the type attribute drift where the same logical field renders as type=email here and type=text there. */ .ulp-field input:focus, .ulp-field select:focus, .input:focus { border: 2px solid var(--primary-color); box-shadow: none !important; outline: none; } /* ADA focus-visible (keyboard navigation only) - add orange box-shadow. Text inputs (.input, .ulp-field input) are intentionally excluded: in Firefox they trigger :focus-visible on mouse click, which made the shadow appear on click. */ .ulp-field select:focus-visible { box-shadow: 0 0 4px 4px var(--color-ada-focus-shadow) !important; } /* Browser autofill override (global). Firefox/Chrome/Edge/Safari paint a yellow/cream tint on fields they've autofilled or are offering to autofill. The visible artifacts differ: - Chromium ignores background-color on autofilled inputs but honors a large inset box-shadow. - Firefox honors background-color on :autofill, but can also apply a filter on the input that leaves a residual tint; filter:none disables that path. Belt and suspenders here so both engines render cleanly across themes. Variables inherit per-theme: privateAccess maps --input-background-color to #00222a; default theme falls back to --white. */ .ulp-field input:-webkit-autofill, .ulp-field input:-webkit-autofill:hover, .ulp-field input:-webkit-autofill:focus, .ulp-field input:-webkit-autofill:active, .input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus, .input:-webkit-autofill:active, .af-stringField-input:-webkit-autofill, .af-stringField-input:-webkit-autofill:hover, .af-stringField-input:-webkit-autofill:focus, .af-stringField-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--input-background-color, var(--white)) inset !important; -webkit-text-fill-color: var(--input-text-color, var(--color-text-default)) !important; caret-color: var(--input-text-color, var(--color-text-default)) !important; } /* Firefox 86+ and modern Chromium use the standard :autofill pseudo-class. Kept as a separate rule because older browsers that don't recognize :autofill would invalidate the whole selector list above. */ .ulp-field input:autofill, .input:autofill, .af-stringField-input:autofill { background-color: var(--input-background-color, var(--white)) !important; box-shadow: 0 0 0 1000px var(--input-background-color, var(--white)) inset !important; -webkit-text-fill-color: var(--input-text-color, var(--color-text-default)) !important; color: var(--input-text-color, var(--color-text-default)) !important; caret-color: var(--input-text-color, var(--color-text-default)) !important; filter: none !important; } .ulp-field .ulp-error-info { display: none; color: var(--error-color); font-size: var(--font-size-xs); margin-top: var(--spacing-0-5); } /* --- Forms for Actions - Container & Structure ---------------------------- */ .custom-form .af-custom-form-container, .custom-form .af-custom-form-container * { font-family: var(--font-body); } /* Reset Auth0 SDK's aggressive * selector on our custom field internals */ .af-dob-wrapper *, .af-address-wrapper * { margin-top: 0 !important; line-height: normal !important; } .custom-form ._widget ._prompt-box-outer > div { height: 100%; display: flex; align-items: center; width: 100%; } .custom-form ._widget ._prompt-box-outer > div .af-custom-form-container { margin: auto; min-width: 300px; display: flex; justify-content: center; align-items: center; } .af-step.af-step-id-step_kTIW { box-shadow: none; padding: var(--spacing-3) 0; } .block-header { text-align: center; } .block-header .logo { display: block !important; background-size: contain; background-repeat: no-repeat; background-position: center; width: 170px; min-height: 73px; margin: auto; } /* Default neutral Wynn Resorts logo: slightly shorter min-height than the 73px property-specific logo so the wordmark sits flush without clipping. */ body:not([id]):not([data-site]) .block-header .logo { min-height: 70px; } .af-blockType-html .block-header h1 { line-height: var(--line-height-snug); margin: var(--spacing-2) auto; font-size: var(--title-font-size, var(--font-size-xl)) !important; font-family: var(--font-headline) !important; font-weight: var(--title-font-weight, 400) !important; color: var(--title-font-color, var(--color-text-muted)) !important; text-align: var(--header-alignment, center); } .af-blockType-html .block-header p.description { font-size: var(--font-size-md) !important; line-height: 24px; margin-top: var(--spacing-1-5); margin-bottom: var(--spacing-3); padding: 0; font-family: var(--font-body) !important; font-weight: var(--font-weight-normal) !important; color: var(--color-text-muted) !important; letter-spacing: 0.5px; } @media screen and (max-width: 768px) { .af-blockType-html .block-header p.description, .af-blockType-html .block-header p.description-muted { text-align: center; } } /* Subdued description text (e.g. error subtitles) */ .af-blockType-html .block-header p.description-muted { font-size: var(--font-size-md) !important; line-height: var(--line-height-normal); margin: calc(-1 * var(--spacing-0-5)) auto var(--spacing-2-5) auto; padding: 0; font-family: var(--font-body) !important; font-weight: var(--font-weight-normal) !important; color: var(--font-light-color, var(--gray-dark)) !important; text-align: center; } .block-header .fields-required-text { font-size: var(--font-size-md); text-align: left; margin-bottom: 0px; margin-top: var(--spacing-1-5); } .af-componentId-first_name, .af-componentId-last_name { display: inline-table; width: calc(50% - var(--spacing-1-5)); } .af-componentId-first_name { margin-right: var(--spacing-2-5); } .af-firstName-wrapper { position: relative; } .af-required-notice { position: absolute; bottom: 100%; left: 0; margin: 0 0 0.25rem 0; font-size: var(--font-size-sm); white-space: nowrap; } .footer-links { text-align: center; margin-top: var(--spacing-2-5); } .footer-links-divider { text-align: center; margin-top: var(--spacing-2-5); border-top: 1px dotted var(--gray-light); padding-top: var(--spacing-2-5); } @media screen and (min-width: 1500px) { .ulp-custom-form { min-width: 500px; } } /* --- Forms for Actions - Inputs, Labels & Dropdowns ----------------------- */ .af-component { margin-top: var(--spacing-1-5); margin-bottom: 0px !important; } .af-component .af-stringField-input, [class*="af-form-"] input.af-stringField-input { height: var(--input-height); padding: 0 var(--spacing-1-5) !important; line-height: normal !important; } .af-component .af-dropdownField-wrapper { height: var(--input-height); } .af-component .fields-noted-text { font-style: italic; font-size: var(--font-size-sm); margin-top: var(--spacing-1-5); } .af-component .af-legalField-label, .af-component .af-fieldLabel-text { color: var(--font-default-color) !important; } .af-component .af-legalField-label::after, .af-component .af-fieldLabel-text::after { content: ""; } .af-component .af-legalField-label p, .af-component .af-fieldLabel-text p { line-height: var(--line-height-relaxed); font-size: var(--font-size-base) !important; color: var(--font-default-color) !important; letter-spacing: normal; } .af-component .af-legalField-label p::after, .af-component .af-fieldLabel-text p::after { content: ""; } .af-component .af-legalField-label a, .af-component .af-fieldLabel-text a { color: var(--font-default-color) !important; display: inline-table !important; font-weight: normal !important; text-decoration: underline !important; } .af-dropdownField-wrapper .af-dropdownField-option { padding: 3px 16px; } .af-dropdownField-wrapper .af-dropdownField-option:first-child { padding-top: 10px; } .af-dropdownField-wrapper .af-dropdownField-option::after { display: none; } .af-dropdownField-wrapper .af-dropdownField-option:hover, .af-dropdownField-wrapper .af-dropdownField-option.af-hover { background-color: var(--primary-color, #006f62) !important; color: var(--white) !important; } .af-dropdownField-wrapper .af-dropdownField-options { background-color: var(--input-background-color, #ffffff); border-color: var(--input-border-color) !important; } /* privateAccess dropdown overrides */ #privateAccess .af-dropdownField-wrapper .af-dropdownField-options, body[data-site="privateAccess"] .af-dropdownField-wrapper .af-dropdownField-options { background-color: var(--input-background-color) !important; } #privateAccess .af-dropdownField-wrapper .af-dropdownField-option, body[data-site="privateAccess"] .af-dropdownField-wrapper .af-dropdownField-option { color: var(--input-text-color) !important; background-color: var(--input-background-color) !important; } #privateAccess .af-dropdownField-wrapper .af-dropdownField-option:hover, #privateAccess .af-dropdownField-wrapper .af-dropdownField-option.af-hover, body[data-site="privateAccess"] .af-dropdownField-wrapper .af-dropdownField-option:hover, body[data-site="privateAccess"] .af-dropdownField-wrapper .af-dropdownField-option.af-hover { background-color: rgba(217, 148, 109, 0.2) !important; } input[name="email_new"][readonly], input[name="email"][readonly] { background-color: var(--gray-lightest); pointer-events: none; cursor: not-allowed; } /* DOB 3-select field */ .af-dob-wrapper { width: 100%; } .af-dob-row { display: flex !important; flex-direction: row !important; gap: var(--spacing-1); width: 100%; } .af-dob-field { position: relative; } .af-dob-month { flex: 1.4; } .af-dob-day { flex: 0.8; } .af-dob-year { flex: 1; } /* Native select — visible on mobile only */ .af-dob-native { display: none !important; } /* Mobile: show native, hide custom */ @media screen and (max-width: 768px) { .af-dob-native { display: block !important; } .af-dob-custom { display: none !important; } } .af-dob-native { width: 100%; height: var(--input-height, 52px); padding: 0 28px 0 var(--spacing-1-5); font-size: var(--font-size-md); font-family: var(--font-body, sans-serif); color: var(--input-text-color, var(--color-text-default)); background-color: var(--input-background-color, var(--white)); border: 1px solid var(--input-border-color, var(--color-text-default)); border-radius: var(--input-border-radius, 0px); box-sizing: border-box; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23006f62' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--spacing-1-5) center; cursor: pointer; } /* All focus states: green 2px border, no box-shadow by default */ .af-dob-native:focus { border: 2px solid var(--primary-color); box-shadow: none !important; outline: none; } /* ADA focus-visible (keyboard navigation only) - add orange box-shadow */ .af-dob-native:focus-visible { box-shadow: 0 0 4px 4px var(--color-ada-focus-shadow) !important; } /* Custom dropdown trigger — shown on desktop, hidden on mobile */ .af-dob-custom { display: none; overflow: visible !important; position: relative; } .af-dob-trigger { width: 100%; height: var(--input-height, 52px); padding: 0 28px 0 12px; font-size: 16px; font-family: var(--font-body, sans-serif); color: var(--input-text-color, #000); background-color: var(--input-background-color, #fff); border: 1px solid var(--input-border-color, #000); border-radius: var(--input-border-radius, 0px); box-sizing: border-box; cursor: pointer; text-align: left; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23006f62' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .af-dob-trigger[data-placeholder="true"] { color: #999; } .af-dob-trigger:hover, .af-dob-trigger:active { border-color: var(--input-border-color, #000); } /* Dropdown list */ .af-dob-list-wrap { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; z-index: 99999; } .af-dob-list { max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); scrollbar-width: none; -ms-overflow-style: none; } .af-dob-list::-webkit-scrollbar { display: none; } .af-dob-list:focus, .af-dob-option:focus { outline: none; } .af-dob-trigger:focus, .af-dob-trigger:focus-visible, .af-dob-trigger:active, .af-dob-trigger:hover, button.af-dob-trigger:focus, button.af-dob-trigger:hover, button.af-dob-trigger:active, button.af-dob-trigger:focus-visible { outline: none !important; box-shadow: none !important; background-color: var(--input-background-color, #fff) !important; -webkit-tap-highlight-color: transparent !important; border-color: var(--input-border-color, #000) !important; } .af-dob-option { padding: 8px 14px; font-size: 16px; font-family: var(--font-body, sans-serif); cursor: pointer; color: #000; } .af-dob-option:hover, .af-dob-option.highlighted { background-color: var(--primary-color, #006f62); color: #fff; } .af-dob-option.selected { font-weight: 600; } /* Desktop: show custom, visually hide native (keep accessible for autofill) */ @media screen and (min-width: 769px) { .af-dob-native { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } .af-dob-custom { display: block !important; } } /* Country-State custom field */ .af-address-wrapper { display: flex; flex-direction: column; gap: calc(var(--spacing-1) - 2px); width: 100%; } /* Country has a default value so it shouldn't show invalid state */ .af-field-invalid .af-address-wrapper > .af-dob-field:first-child .af-dob-trigger, .af-field-invalid .af-address-wrapper > .af-dob-field:first-child .af-dob-native { border-color: var(--input-border-color, #000) !important; } /* privateAccess DOB overrides */ #privateAccess .af-dob-native, body[data-site="privateAccess"] .af-dob-native { background-color: #00222a !important; color: #faf9f4 !important; border: 1px solid var(--secondary-color) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffd1b7' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; } #privateAccess .af-dob-trigger, body[data-site="privateAccess"] .af-dob-trigger { background-color: #00222a !important; color: #faf9f4 !important; border: 1px solid var(--secondary-color) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffd1b7' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; } #privateAccess .af-dob-list, body[data-site="privateAccess"] .af-dob-list { background: #00222a !important; border-color: var(--secondary-color) !important; } #privateAccess .af-dob-option, body[data-site="privateAccess"] .af-dob-option { color: #faf9f4 !important; } #privateAccess .af-dob-option:hover, body[data-site="privateAccess"] .af-dob-option:hover { background-color: rgba(217, 148, 109, 0.2) !important; color: #faf9f4 !important; } /* ========== forms-buttons.css ========== */ /* --- Forms for Actions - Buttons ------------------------------------------ */ .af-button { text-transform: uppercase; box-shadow: none !important; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; letter-spacing: 0.02em; } .af-button-text { padding-top: 3px; text-transform: uppercase; } .af-component.af-block.af-blockType-next_button { min-height: var(--button-height, 48px); margin-top: var(--spacing-1-5, 12px) !important; margin-bottom: 0 !important; } .af-component.af-block.af-blockType-next_button .af-button { position: relative; min-height: var(--button-height, 48px); transform: none !important; } .af-component.af-block.af-blockType-next_button .af-button:active { transform: none !important; } .af-component.af-block.af-blockType-next_button .af-button[disabled] { transform: none !important; } /* ========== forms-validation.css ========== */ /* --- Forms for Actions - Legal Field (checkbox + label) ------------------- */ .af-component.af-fieldType-legal .af-legalField { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-top: 8px !important; } .af-legalField input[type="checkbox"], input[type="checkbox"].af-legalField-checkable { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; min-width: 20px !important; margin-top: 2px !important; border: 1px solid var(--input-border-color) !important; border-radius: 2px !important; cursor: pointer !important; accent-color: var(--primary-color) !important; -webkit-appearance: none !important; appearance: none !important; background-color: white !important; } .af-legalField input[type="checkbox"]:checked, input[type="checkbox"].af-legalField-checkable:checked { background-color: var(--primary-color) !important; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; border-color: var(--primary-color) !important; } .af-legalField input[type="checkbox"]:focus-visible, input[type="checkbox"].af-legalField-checkable:focus-visible { box-shadow: 0 0 0 2px rgba(0, 111, 98, 0.2) !important; outline: none !important; } .af-legalField-label { flex: 1 !important; min-width: 0 !important; } .af-legalField-label, .af-legalField-label p { font-size: 14px !important; line-height: 1.625 !important; color: var(--font-default-color) !important; margin: 0 !important; } .af-legalField-label a { color: var(--primary-color) !important; text-decoration: underline !important; } .af-legalField-label a:hover { color: var(--primary-color-hover) !important; } .af-component.af-fieldType-legal .af-fieldLabel-text { color: var(--font-default-color) !important; } /* --- Forms for Actions - Validation & Error States ------------------------ */ .af-field-invalid .af-stringField-input, .af-field-invalid .af-legalField-checkable, .af-field-invalid .af-dropdownField-wrapper { background-color: var(--input-background-color, #ffffff) !important; background-image: none !important; background-repeat: no-repeat !important; background-size: 0 0 !important; border: 1px solid var(--error-color) !important; } .af-stringField-input:focus-visible, .af-legalField-checkable:focus-visible { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 111, 98, 0.2); } .af-field-invalid .af-stringField-input:focus-visible, .af-field-invalid .af-legalField-checkable:focus-visible { box-shadow: 0 0 0 2px rgba(208, 60, 56, 0.2); } .af-field-invalid input[type="checkbox"].af-legalField-checkable, .af-field-invalid .af-legalField input[type="checkbox"] { border-color: var(--error-color) !important; } /* Field-level error message */ .af-component .af-message-text { display: flex; line-height: 1.1; } .af-component .af-message-text::before { content: ''; display: inline-block; height: 16px; width: 16px; margin-right: 8px; flex-shrink: 0; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='https://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 14.667A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.334z' fill='%23D00E17' stroke='%23D00E17' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 4.583a.75.75 0 0 1 .75.75V8a.75.75 0 0 1-1.5 0V5.333a.75.75 0 0 1 .75-.75z' fill='%23fff'/%3E%3Cpath d='M8.667 10.667a.667.667 0 1 1-1.334 0 .667.667 0 0 1 1.334 0z' fill='%23fff'/%3E%3C/svg%3E"); background-image: var(--icon-error); background-position: 0 0; background-repeat: no-repeat; background-size: 16px; margin-top: -3px; } /* Scenario-level error message */ div.af-scenarioMessage-error[style*="display:block"], div.af-scenarioMessage-error[style*="display: block"] { font-size: var(--font-size-sm); color: #7f1d1d; background-color: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid var(--error-color, #d03c38); border-radius: 3px; line-height: 1.4; padding: 10px 14px; margin-top: 10px; margin-bottom: 6px; } div.af-scenarioMessage-error::after, div.af-scenarioMessage-error::before { display: none !important; } /* --- Forms for Actions - OTP ---------------------------------------------- */ .otp-input-container { display: flex !important; flex-direction: row !important; justify-content: flex-start; gap: 10px; margin-bottom: 20px; } .otp-input-container .otp-input { width: 0 !important; min-width: 0; max-width: none; height: 62px; flex: 1 1 0; padding: 6px 0 0 0 !important; text-align: center; font-size: 24px; line-height: 1 !important; box-sizing: border-box; font-weight: 500; border: 1px solid var(--input-border-color, #d1d5db); border-radius: var(--input-border-radius, 6px); background-color: var(--input-background-color, #ffffff); color: var(--font-color, #1f2937); transition: border-color 0.2s, box-shadow 0.2s; } .otp-input-container .otp-input:focus-visible { outline: none; border-color: var(--primary-color, #006f62); box-shadow: 0 0 0 2px rgba(0, 111, 98, 0.2); } .otp-input-container .otp-input.error { border-color: var(--error-color, #d03c38); } .otp-input-container .otp-input.error:focus-visible { box-shadow: 0 0 0 2px rgba(208, 60, 56, 0.2); } .otp-input-container .otp-input:disabled { background-color: #f5f5f5; cursor: not-allowed; opacity: 0.7; } .af-componentId-verification_code .af-stringField-label { display: none; } .otp-footer-links { text-align: center; margin: 0; } .af-resendButton, .af-componentId-resend_button { text-align: center; text-transform: none !important; } .af-componentId-resend_button .af-resendButton { padding: 0 !important; min-height: auto !important; } .af-resendButton-text, .af-componentId-resend_button span { color: var(--font-default-color) !important; font-size: var(--font-size-md) !important; font-family: var(--font-body) !important; text-transform: none !important; } .af-resendButton-button, .af-resendButton-clickable, .af-componentId-resend_button button { background: none !important; border: none; color: var(--primary-color, #006f62) !important; font-size: var(--font-size-md) !important; font-family: var(--font-body) !important; cursor: pointer; padding: 0; text-decoration: underline; margin-left: 4px; text-transform: none !important; } .af-resendButton-button:hover:not(:disabled), .af-componentId-resend_button button:hover:not(:disabled) { background: none !important; color: var(--primary-color, #006f62); } .af-resendButton-button:disabled, .af-componentId-resend_button button:disabled { color: #9ca3af; cursor: not-allowed; text-decoration: none; } /* --- Forms for Actions - Icons -------------------------------------------- */ .error-cross-icon { background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='84' height='84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23E55E3F' stroke-width='3' cx='42' cy='42' r='40.5'/%3E%3Cpath d='M42 39.879l12.94-12.94 2.12 2.122L44.122 42l12.94 12.94-2.122 2.12L42 44.122l-12.94 12.94-2.12-2.122L39.878 42l-12.94-12.94 2.122-2.12L42 39.878z' fill='%23E55E3F' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E") no-repeat center; background-size: cover; height: 88px; width: 88px; margin: 0px auto 30px auto; } .success-check-icon { width: 60px; height: 60px; margin: 10px auto 20px auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .success-lock-icon { background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='84' height='84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%231BC462' stroke-width='3' fill='none' fill-rule='evenodd'%3E%3Ccircle cx='42' cy='42' r='40.5'/%3E%3Cpath d='M27 48.429L39.857 57 57 27'/%3E%3C/g%3E%3C/svg%3E") no-repeat center; background-size: cover; height: 88px; width: 88px; margin: 0px auto 30px auto; } /* ========== auth0-overrides.css ========== */ /* ========================================================================== Universal Login Stylesheet Covers: Auth0 widget overrides, Forms for Actions (.af-*), carousel, privateAccess theme, and error page. ========================================================================== */ /* --- Auth0 Widget Overrides ----------------------------------------------- */ ._widget { opacity: 0; justify-content: center; align-items: center; } ._widget.show { display: flex; opacity: 1; } .custom-form-widget-container ._widget { height: 100%; max-height: 100vh; overflow-y: auto; display: flex; align-items: center; justify-content: center; } ._widget ._prompt-box-outer > div { min-height: 0px !important; } ._widget ._prompt-box-outer > div > form, ._widget ._prompt-box-outer > div > div { width: 100%; } ._widget ._prompt-box-outer, ._widget .no-badge_prompt-box-outer { margin: auto; transform: translateY(-15px); } /* Always use #custom-prompt-logo for logo display (default: Wynn Resorts) */ ._widget ._prompt-box-outer #custom-prompt-logo { display: block !important; width: 291px; min-height: 90px; padding: var(--spacing-0-5) var(--spacing-2); margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; } /* Default neutral Wynn Resorts logo: shorter than property animated logos */ body:not([id]):not([data-site]) ._widget ._prompt-box-outer #custom-prompt-logo { min-height: 70px; } ._widget ._prompt-box-outer header { padding: var(--spacing-4) var(--spacing-2-5) var(--spacing-2-5) var(--spacing-2-5); } ._widget ._prompt-box-outer h1 { font-family: var(--font-headline); font-size: var(--font-size-xl); line-height: 1.2; letter-spacing: 0px; margin: var(--spacing-2) auto; } ._widget ._prompt-box-outer header p, ._widget ._prompt-box-outer p[id="aria-description-text"] { font-family: var(--font-body); font-size: var(--font-size-md); line-height: 24px; letter-spacing: 0.5px; margin-top: var(--spacing-1-5); color: var(--color-text-muted); } ._widget ._prompt-box-outer img#prompt-logo-center { display: none !important; } ._widget ._prompt-box-outer button { transition: transform 0.3s ease; } ._widget ._prompt-box-outer button:not(:disabled):hover { background-color: var(--primary-color-hover); transition: background-color 0.3s ease; } ._widget ._prompt-box-outer button:disabled { background-color: var(--button-background-color); opacity: 0.5; } ._widget ._prompt-box-outer .btnCheckEmail, ._widget ._prompt-box-outer button[data-action-button-primary="true"], ._widget ._prompt-box-outer button[value="resend-email-action"], ._widget ._prompt-box-outer .returnSignIn, ._widget ._prompt-box-outer section > a { margin-top: var(--spacing-2); text-transform: uppercase; background: var(--primary-color); color: var(--button-font-color) !important; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; min-height: var(--button-height); line-height: 1; letter-spacing: 0.02rem; padding: 3px var(--spacing-2) 0 var(--spacing-2) !important; text-decoration: none; } ._widget ._prompt-box-outer .btnCheckEmail:hover, ._widget ._prompt-box-outer button[data-action-button-primary="true"]:hover, ._widget ._prompt-box-outer button[value="resend-email-action"]:hover, ._widget ._prompt-box-outer .returnSignIn:hover, ._widget ._prompt-box-outer section > a:hover { color: var(--white) !important; background-color: var(--primary-color-hover); } ._widget ._prompt-box-outer button._link-refuse-add-device, ._widget ._prompt-box-outer button[value="back-action"], ._widget ._prompt-box-outer ._link-back-to-login, ._widget ._prompt-box-outer div.ulp-alternate-action a { background: transparent !important; } /* Hover feedback for the passkey refuse link ("Not on this device" / "No Thanks"). Auth0's default button:hover only changes the background, which reads as nothing on these transparent link-style buttons. Use the theme's accent (var(--primary-color) — teal on the main site, peach on privateAccess, which overrides it) plus an underline. privateAccess additionally needs an #id-scoped copy in its theme to beat its own white-text rule's specificity. */ ._widget ._prompt-box-outer button._link-refuse-add-device:hover, ._widget ._prompt-box-outer button[value="refuse-add-device"]:hover { color: var(--primary-color) !important; text-decoration: underline !important; } ._widget ._prompt-box-outer button[value="back-action"] { display: inline-flex; align-items: center; gap: var(--spacing-0-5); } ._widget ._prompt-box-outer button[value="back-action"]::before { content: ""; background: url("https://cdn.wynnresorts.com/image/upload/Auth0/assets/images/arrow-left") no-repeat center; background-size: contain; width: 9px; height: 8px; display: inline-block; flex-shrink: 0; margin-bottom: 4px; } /* Passkey awaiting-action screen: the primary form holds only hidden inputs, the screen-reader-only error announcer, and an empty container, so it renders nothing visible — but as a child of the flex content column it still consumes a gap slot, leaving an empty band between the heading/description and the Continue button. Take it out of flow (not display:none, which would drop the aria-live announcer from the accessibility tree) so the column closes up. Applies to every site since the passkey DOM is identical across themes. */ .ulp-awaiting-action-outer form[data-form-primary="true"] { position: absolute !important; } /* Passkey action-button spacing standard. With the loader hidden and the empty primary form taken out of flow (above), the Continue button is the first in-flow item in its column; "Remind me later" follows it, and on the device-registration-error screen the "Try again" button sits below the description. In every case Auth0's default top margin is too large — cap them to one consistent gap across every site. */ .ulp-awaiting-action-outer button[value="default"], .ulp-awaiting-action-outer button[value="snooze-enrollment"] { margin-top: var(--spacing-1) !important; } /* Kept in its own rule: a selector list is dropped entirely if any selector is unparseable, so mixing :has() with the non-:has() selectors above would lose their cap in browsers without :has() support. */ ._widget ._prompt-box-outer :has(> .error-cross) + section button[value="tryagain"] { margin-top: var(--spacing-1) !important; } /* These passkey buttons aren't tagged data-action-button-primary, so they miss the full-width primary-button rule above and render auto-width — narrower than the description text above them. Make them full-width to match. (tryagain is split out for the same :has()-parsing reason as above.) */ .ulp-awaiting-action-outer button[value="default"], .ulp-awaiting-action-outer button[value="snooze-enrollment"] { width: 100% !important; } ._widget ._prompt-box-outer :has(> .error-cross) + section button[value="tryagain"] { width: 100% !important; } /* The awaiting-action description sits in the (wider) header; keep it full-width but give it a small horizontal inset so it doesn't run flush past the action buttons below. */ .ulp-awaiting-action-outer header p { padding-left: var(--spacing-0-5) !important; padding-right: var(--spacing-0-5) !important; } /* The "Remind me later" button sits in its own
; zero that form's margin so the button cap above is the only gap between it and Continue. */ .ulp-awaiting-action-outer form:has(> button[value="snooze-enrollment"]) { margin-top: 0 !important; } /* "Remind me later" gains the accent fill on hover, so flip its label white for contrast (the default dark label would be hard to read on the fill). */ .ulp-awaiting-action-outer button[value="snooze-enrollment"]:hover { color: var(--white) !important; } /* Error screen: zero the wrapping form's margin so the button cap above is the only gap below the description, and pull the heading up under the error icon to match the spacing on the other passkey screens. */ ._widget ._prompt-box-outer :has(> .error-cross) + section > form { margin-top: 0 !important; } ._widget ._prompt-box-outer :has(> .error-cross) + section h1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; } /* The base h1 rule's 16px bottom margin (plus the description's own top margin) leaves too big a gap between the error title and the body text — pull the description up so it sits directly under the heading. */ ._widget ._prompt-box-outer :has(> .error-cross) + section h1 + div, ._widget ._prompt-box-outer :has(> .error-cross) + section h1 + div > p { margin-top: 0 !important; } ._widget ._prompt-box-outer .form-footer-end-actions, ._widget ._prompt-box-outer .ulp-alternate-action { margin-top: var(--spacing-2-5); transition: all 0.3s ease; } ._widget ._prompt-box-outer .form-footer-end-actions li, ._widget ._prompt-box-outer .form-footer-end-actions p, ._widget ._prompt-box-outer .ulp-alternate-action li, ._widget ._prompt-box-outer .ulp-alternate-action p { font-family: var(--font-body); font-size: var(--font-size-15); line-height: var(--font-size-15); color: var(--color-text-muted); text-align: center; white-space: nowrap; font-weight: var(--font-weight-semibold); } ._widget ._prompt-box-outer .forgotEmailLink a { font-family: var(--font-body); font-weight: var(--font-weight-semibold); font-size: var(--font-size-15); line-height: var(--font-size-15); color: var(--color-text-muted); text-align: center; } ._widget ._prompt-box-outer .form-footer-end-actions a, ._widget ._prompt-box-outer .ulp-alternate-action a { font-weight: var(--font-weight-semibold); text-decoration: none; position: relative; display: inline-flex; align-items: center; gap: var(--spacing-0-5); } ._widget ._prompt-box-outer .ulp-alternate-action a::after { content: ""; background: url("https://cdn.wynnresorts.com/image/upload/Auth0/assets/images/arrow-right") no-repeat center; background-size: contain; width: 9px; height: 8px; display: inline-block; flex-shrink: 0; margin-bottom: 4px; } ._widget ._prompt-box-outer #prompt-alert { background: transparent; border: 1px solid var(--error-color); margin-bottom: var(--spacing-4); padding: var(--spacing-1-5) !important; } ._widget ._prompt-box-outer #prompt-alert p { color: var(--error-color); font-size: var(--font-size-base); } ._widget ._prompt-box-outer .input-wrapper label { text-align: left; } ._widget .ulp-authenticator-selector-text { height: var(--input-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Captcha ------------------------------------------------------------ */ .ulp-captcha-container, .ulp-auth0-v2-captcha, .ulp-captcha { max-width: 400px !important; } /* --- Utilities & Accessibility -------------------------------------------- */ .af-componentId-dropdown_control { display: none !important; } .af-componentId-wl_statement { display: none; } #ebh .af-componentId-wl_statement:not(.hidden) { display: block; } .af-custom input[type="button"]:not(:disabled) { color: var(--font-default-color) !important; cursor: pointer; } .af-custom input[type="button"]:not(:disabled):hover { color: var(--primary-color) !important; } /* ========== carousel.css ========== */ /* --- Carousel ------------------------------------------------------------- */ .custom-form-layout { display: grid; grid-template-columns: 100%; min-height: 80vh; } @media (min-width: 1100px) { .custom-form-layout { grid-template-columns: 60% 40%; min-height: 100vh; } } .carousel-container { position: relative; display: none; overflow: hidden; } @media (min-width: 1100px) { .carousel-container { display: block; } } .custom-form-widget-container { height: 100vh; overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none; background-color: var(--white); } .custom-form-widget-container::-webkit-scrollbar { display: none; } .carousel-background { position: relative; width: 100%; height: 100%; overflow: hidden; } .carousel-images { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .carousel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .carousel-container.loaded .carousel-image { transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); } .carousel-image.active { opacity: 1; } .carousel-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.56) 100%); z-index: 1; } .carousel-content { position: absolute; bottom: 0; left: 0; width: 100%; min-height: 50%; padding-left: var(--spacing-4); padding-right: var(--spacing-4); padding-bottom: var(--spacing-2-5); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: var(--white); z-index: 2; } @media (min-width: 1024px) { .carousel-content { padding-left: 5%; padding-right: 5%; padding-bottom: var(--spacing-5); } } .carousel-content-wrapper { display: flex; flex-direction: column; gap: 29px; align-items: flex-start; width: 100%; max-width: 716px; margin-bottom: var(--spacing-4); } .carousel-progress-bar { background-color: rgba(255, 255, 255, 0.8); height: 4px; width: 37px; } .carousel-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; width: 100%; opacity: 1; transform: translateX(0); } .carousel-container.loaded .carousel-text { transition: opacity 0.3s ease; } .carousel-container.loaded .carousel-text.transitioning { opacity: 0; } .carousel-title-group { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; width: 100%; } .carousel-pretitle { font-family: var(--font-body); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); font-weight: var(--font-weight-normal); margin: 0; } .carousel-title { font-family: var(--font-headline); font-size: var(--font-size-3xl); line-height: var(--line-height-snug); font-weight: var(--font-weight-normal); margin: 0; width: 100%; } .carousel-description { font-family: var(--font-body); font-size: var(--font-size-lg); line-height: var(--line-height-tight); margin: 0; width: 100%; } .carousel-dots { display: flex; gap: calc(var(--spacing-1) - 2px); height: var(--spacing-1); align-items: center; } .carousel-dot { height: var(--spacing-1); width: var(--spacing-1); border-radius: 9999px; background-color: rgba(255, 255, 255, 0.5); border: none; padding: 0; cursor: pointer; transition: all 0.3s ease; } .carousel-dot:hover { background-color: rgba(255, 255, 255, 0.75); } .carousel-dot.active { background-color: var(--white); width: var(--spacing-3); } .carousel-footer { font-size: var(--font-size-base); width: 100%; } .carousel-footer-line { background-color: var(--white); height: 3px; width: 100%; margin-bottom: var(--spacing-3); } .carousel-footer-text { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-normal); } .carousel-footer-text a { color: var(--white) !important; text-decoration: none; } .carousel-footer-text a:hover { color: var(--primary-color); } /* ========== themes/private-access.css ========== */ /* --- privateAccess Theme -------------------------------------------------- */ #privateAccess, body[data-site="privateAccess"] { --input-background-color: #00222a; --primary-color: #d9946d; /* privateAccess overrides --primary-color but the base also defines a teal --primary-color-hover (#008577); without this override the peach CTAs would turn teal on hover. Set it to a slightly darker peach so primary buttons darken on hover, on-brand. */ --primary-color-hover: #c8835c; --button-font-color: #000000; --font-family: 'Avenir Medium', sans-serif; --font-default-color: #ffffff; --input-text-color: #fff; --input-border-color: var(--secondary-color); --font-light-color: var(--secondary-color); --base-focus-color: #f09300; --error-color: #ea798a; --input-border-radius: 0px; --link-color: #ffffff; background-color: var(--bg-primary-color) !important; font-family: 'Avenir Medium', sans-serif; color: var(--white); } #privateAccess .custom-form-widget-container, body[data-site="privateAccess"] .custom-form-widget-container { background-color: var(--bg-primary-color); } #privateAccess ._widget, body[data-site="privateAccess"] ._widget { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; } #privateAccess ._widget ._prompt-box-outer > div, body[data-site="privateAccess"] ._widget ._prompt-box-outer > div { background-color: transparent !important; box-shadow: none !important; } /* Brand heading. Not scoped to header/section: some screens (e.g. passkey enrollment, "Sign in faster on this device") render the h1 as a bare sibling of the logo rather than inside a
, so a wrapper-scoped selector would miss them and Auth0's larger default would win. Match every prompt-box h1. */ #privateAccess ._widget ._prompt-box-outer h1, body[data-site="privateAccess"] ._widget ._prompt-box-outer h1 { font-size: 34px; font-family: 'Florensans'; color: var(--white); margin: 30px auto 0px auto; } #privateAccess ._widget ._prompt-box-outer header p, body[data-site="privateAccess"] ._widget ._prompt-box-outer header p { display: none; } /* Exception: show the passkey awaiting-action ("Trust this device?…") description — it explains the prompt. Re-show just that one (scoped to .ulp-awaiting-action-outer) and give it a readable color, since the base header p rule colors it --color-text-muted (#3c3c3c), unreadable on the dark teal page. */ #privateAccess ._widget ._prompt-box-outer .ulp-awaiting-action-outer header p, body[data-site="privateAccess"] ._widget ._prompt-box-outer .ulp-awaiting-action-outer header p { display: block !important; color: var(--font-default-color) !important; } /* aria-description-text appears on confirmation/check-your-email screens. auth0-overrides.css sets it to --color-text-muted (#3c3c3c) which is unreadable on the dark teal page background. */ #privateAccess ._widget ._prompt-box-outer p[id="aria-description-text"], body[data-site="privateAccess"] ._widget ._prompt-box-outer p[id="aria-description-text"] { color: var(--white) !important; } #privateAccess ._widget ._prompt-box-outer img#prompt-logo-center, body[data-site="privateAccess"] ._widget ._prompt-box-outer img#prompt-logo-center { display: none !important; } #privateAccess ._widget ._prompt-box-outer #custom-prompt-logo, body[data-site="privateAccess"] ._widget ._prompt-box-outer #custom-prompt-logo { display: block !important; width: 200px; min-height: 110px; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; } #privateAccess ._widget ._prompt-box-outer .input-wrapper, body[data-site="privateAccess"] ._widget ._prompt-box-outer .input-wrapper { border: none !important; margin-top: 20px !important; } #privateAccess ._widget ._prompt-box-outer .input-wrapper > div, body[data-site="privateAccess"] ._widget ._prompt-box-outer .input-wrapper > div { box-shadow: none !important; border: none !important; } #privateAccess ._widget ._prompt-box-outer .input-wrapper input, body[data-site="privateAccess"] ._widget ._prompt-box-outer .input-wrapper input { background-color: var(--input-background-color); color: #faf9f4; border: 1px solid var(--secondary-color); } #privateAccess ._widget ._prompt-box-outer .input-wrapper input:focus, #privateAccess ._widget ._prompt-box-outer .input-wrapper input:hover, body[data-site="privateAccess"] ._widget ._prompt-box-outer .input-wrapper input:focus, body[data-site="privateAccess"] ._widget ._prompt-box-outer .input-wrapper input:hover { border-color: var(--base-focus-color); } /* Password field with show/hide eye toggle: the eye