/* Unlimited Tech auth branding */ .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Центрирование карточки */ .mx_AuthPage_modal { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; } /* Liquid glass карточка */ .mx_AuthPage_modal, .mx_AuthBody { background: rgba(255, 255, 255, 0.34) !important; border: 1px solid rgba(255, 255, 255, 0.56) !important; border-radius: 22px !important; box-shadow: 0 28px 80px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(22px) saturate(150%) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; } /* Убираем стандартный footer Element */ .mx_AuthFooter, .mx_AuthFooter_links, .mx_AuthFooter_language, .mx_AuthFooter_poweredBy, .mx_AuthPage_footer { display: none !important; } /* Кнопка входа */ .mx_Login_submit, .mx_AccessibleButton_kind_primary { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; border-color: rgba(255, 255, 255, 0.35) !important; border-radius: 10px !important; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22) !important; } /* Поля */ .mx_Field input, .mx_Field select, .mx_Field textarea { background: rgba(255, 255, 255, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.68) !important; border-radius: 10px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; } /* Заголовок в карточке, glass-плашка */ .mx_AuthBody h1, .mx_AuthBody h2 { display: inline-block !important; padding: 8px 16px !important; margin-left: auto !important; margin-right: auto !important; background: rgba(255, 255, 255, 0.22) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; border-radius: 16px !important; color: #172033 !important; font-weight: 800 !important; letter-spacing: -0.35px !important; box-shadow: 0 14px 32px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important; backdrop-filter: blur(14px) saturate(145%) !important; -webkit-backdrop-filter: blur(14px) saturate(145%) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 22px rgba(37, 99, 235, 0.16) !important; } /* Замена логотипа в карточке на backgroundlogo.png */ .mx_AuthHeaderLogo, .mx_AuthHeader_logo, .mx_AuthHeader img, .mx_AuthBody img:first-of-type, .mx_AuthPage_modal img:first-of-type { content: url("/backgroundlogo.png") !important; width: 54px !important; height: 54px !important; object-fit: cover !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.16) !important; padding: 2px !important; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; -webkit-mask-image: radial-gradient(circle, black 58%, rgba(0,0,0,0.72) 74%, transparent 100%); mask-image: radial-gradient(circle, black 58%, rgba(0,0,0,0.72) 74%, transparent 100%); } /* Если логотип задан как background-image */ .mx_AuthHeaderLogo, .mx_AuthHeader_logo { background-image: url("/backgroundlogo.png") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Strong liquid glass title plate inside auth card */ .mx_AuthBody h1, .mx_AuthBody h2 { display: block !important; width: fit-content !important; max-width: 88% !important; margin: 10px auto 16px auto !important; padding: 10px 18px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18) ) !important; border: 1px solid rgba(255, 255, 255, 0.72) !important; border-radius: 18px !important; box-shadow: 0 18px 42px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(37, 99, 235, 0.06) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; color: #172033 !important; font-weight: 900 !important; letter-spacing: -0.4px !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 22px rgba(37, 99, 235, 0.12) !important; } /* Small highlight stripe on the title plate */ .mx_AuthBody h1::before, .mx_AuthBody h2::before { content: ""; display: block; height: 1px; width: 72%; margin: 0 auto 7px auto; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.85), transparent ); } /* Exact logo replacement in auth card */ .mx_WelcomePage_body .mx_Logo, .mx_Welcome .mx_Logo { content: url("/backgroundlogo.png") !important; width: 54px !important; height: 54px !important; object-fit: cover !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.20) !important; padding: 3px !important; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; -webkit-mask-image: radial-gradient(circle, black 62%, rgba(0,0,0,0.78) 78%, transparent 100%); mask-image: radial-gradient(circle, black 62%, rgba(0,0,0,0.78) 78%, transparent 100%); } /* Exact liquid glass title */ .mx_WelcomePage_body .mx_Header_title, .mx_Welcome .mx_Header_title { display: block !important; width: fit-content !important; max-width: 92% !important; margin: 10px auto 14px auto !important; padding: 8px 16px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22) ) !important; border: 1px solid rgba(255, 255, 255, 0.76) !important; border-radius: 16px !important; box-shadow: 0 14px 34px rgba(37, 99, 235, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -1px 0 rgba(37, 99, 235, 0.06) !important; backdrop-filter: blur(16px) saturate(155%) !important; -webkit-backdrop-filter: blur(16px) saturate(155%) !important; color: #172033 !important; font-weight: 900 !important; line-height: 1.25 !important; letter-spacing: -0.25px !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 22px rgba(37, 99, 235, 0.12) !important; } /* Hide empty subtitle area */ .mx_WelcomePage_body .mx_Header_subtitle, .mx_Welcome .mx_Header_subtitle { display: none !important; } /* Final polish for auth title glass */ .mx_WelcomePage_body .mx_Header_title, .mx_Welcome .mx_Header_title { margin: 14px auto 18px auto !important; padding: 7px 15px !important; max-width: 82% !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16) ) !important; border: 1px solid rgba(255, 255, 255, 0.58) !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(37, 99, 235, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important; font-size: 17px !important; line-height: 1.22 !important; } /* Final polish for auth card */ .mx_AuthPage_modal, .mx_AuthBody, .mx_WelcomePage_guest { background: rgba(255, 255, 255, 0.30) !important; border: 1px solid rgba(255, 255, 255, 0.48) !important; box-shadow: 0 26px 72px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important; } /* Final logo spacing */ .mx_WelcomePage_body .mx_Logo, .mx_Welcome .mx_Logo { margin-bottom: 4px !important; } /* Only Unlimited Messenger inside title gets glass */ .mx_WelcomePage_body .mx_Header_title, .mx_Welcome .mx_Header_title { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; } .ut_glass_title { display: inline-block !important; margin-left: 4px !important; padding: 7px 14px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18) ) !important; border: 1px solid rgba(255, 255, 255, 0.64) !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(14px) saturate(150%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important; font-weight: 900 !important; color: #172033 !important; } /* Remove glass from the whole welcome title */ .mx_WelcomePage_body .mx_Header_title, .mx_Welcome .mx_Header_title { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; } /* Glass only for Unlimited Messenger */ .mx_Header_title .ut_glass_title { display: inline-block !important; margin-left: 4px !important; padding: 6px 12px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18) ) !important; border: 1px solid rgba(255, 255, 255, 0.68) !important; border-radius: 13px !important; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(14px) saturate(150%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important; color: #172033 !important; font-weight: 900 !important; } /* Wider auth card */ .mx_AuthPage_modal, .mx_AuthBody, .mx_WelcomePage_guest { width: 420px !important; max-width: 420px !important; min-width: 420px !important; } /* Keep welcome title in one line */ .mx_WelcomePage_body .mx_Header_title, .mx_Welcome .mx_Header_title { white-space: nowrap !important; width: max-content !important; max-width: none !important; font-size: 16px !important; line-height: 1.2 !important; text-align: center !important; } /* Glass only for Unlimited Messenger, but no wrapping */ .mx_Header_title .ut_glass_title { display: inline-block !important; white-space: nowrap !important; margin-left: 4px !important; padding: 5px 10px !important; } /* Give the title area enough room */ .mx_WelcomePage_body .mx_Parent, .mx_Welcome .mx_Parent { width: 100% !important; max-width: 100% !important; } /* Slightly wider button to match the larger card */ .mx_ButtonGroup, .mx_ButtonParent, .mx_WelcomePage_body .mx_ButtonGroup { width: 100% !important; } .mx_ButtonParent, .mx_ButtonSignIn { min-width: 170px !important; } /* Final auth card centering and width */ .mx_AuthPage_modal, .mx_WelcomePage_guest, .mx_WelcomePage_body { width: 520px !important; max-width: 520px !important; min-width: 520px !important; box-sizing: border-box !important; } /* Make inner auth content centered */ .mx_WelcomePage_body, .mx_WelcomePage_body .mx_Parent { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Keep title centered */ .mx_WelcomePage_body .mx_Header_title, .mx_Welcome .mx_Header_title { width: auto !important; max-width: 460px !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; white-space: nowrap !important; } /* Button must stay inside the card */ .mx_WelcomePage_body .mx_ButtonGroup, .mx_WelcomePage_body .mx_ButtonParent, .mx_WelcomePage_body .mx_ButtonSignIn, .mx_WelcomePage_body .mx_ButtonLabel { width: 320px !important; max-width: 320px !important; min-width: 320px !important; box-sizing: border-box !important; } .mx_WelcomePage_body .mx_ButtonParent { margin-left: auto !important; margin-right: auto !important; } /* Slightly more breathing room in the card */ .mx_WelcomePage_guest { padding: 28px 38px 26px 38px !important; } /* Hard final centering for auth card content */ .mx_WelcomePage_guest { width: 520px !important; min-width: 520px !important; max-width: 520px !important; padding: 34px 44px 30px 44px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .mx_WelcomePage_body { width: 100% !important; min-width: 0 !important; max-width: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .mx_WelcomePage_body .mx_Parent { width: 100% !important; min-width: 0 !important; max-width: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Logo exactly centered */ .mx_WelcomePage_body .mx_Logo { display: block !important; margin-left: auto !important; margin-right: auto !important; } /* Title exactly centered */ .mx_WelcomePage_body .mx_Header_title { display: block !important; width: 100% !important; max-width: 100% !important; text-align: center !important; margin: 14px auto 18px auto !important; white-space: nowrap !important; } /* Button group centered and inside card */ .mx_WelcomePage_body .mx_ButtonGroup { width: 320px !important; min-width: 320px !important; max-width: 320px !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; } .mx_WelcomePage_body .mx_ButtonParent, .mx_WelcomePage_body .mx_ButtonSignIn { width: 320px !important; min-width: 320px !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; } .mx_WelcomePage_body .mx_ButtonLabel { width: 100% !important; text-align: center !important; justify-content: center !important; } /* Language dropdown centered */ .mx_WelcomePage_body + .mx_LanguageDropdown, .mx_Dropdown.mx_LanguageDropdown, .mx_AuthBody_language { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Darker glass for Unlimited Messenger phrase */ .mx_Header_title .ut_glass_title { background: linear-gradient( 135deg, rgba(37, 99, 235, 0.26), rgba(23, 32, 51, 0.16) ) !important; border: 1px solid rgba(37, 99, 235, 0.32) !important; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(23, 32, 51, 0.10) !important; color: #0f172a !important; } /* Darker liquid glass auth card */ .mx_AuthPage_modal, .mx_AuthBody, .mx_WelcomePage_guest { background: rgba(219, 234, 253, 0.48) !important; border: 1px solid rgba(148, 163, 184, 0.32) !important; box-shadow: 0 28px 78px rgba(37, 99, 235, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(15, 23, 42, 0.06) !important; backdrop-filter: blur(24px) saturate(145%) !important; -webkit-backdrop-filter: blur(24px) saturate(145%) !important; } /* Final rounded auth panel */ .mx_AuthPage_modal, .mx_AuthBody, .mx_WelcomePage_guest { border-radius: 28px !important; overflow: hidden !important; } /* Main welcome area: rounded top and clean bottom */ .mx_WelcomePage_guest { padding: 42px 44px 0 44px !important; } /* Welcome body spacing so language selector does not overlap */ .mx_WelcomePage_body { padding-bottom: 28px !important; } /* Language selector as separate soft glass footer */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { width: calc(100% + 88px) !important; margin-left: -44px !important; margin-right: -44px !important; margin-top: 8px !important; min-height: 54px !important; padding: 12px 44px !important; box-sizing: border-box !important; background: rgba(219, 234, 253, 0.58) !important; border-top: 1px solid rgba(148, 163, 184, 0.24) !important; border-radius: 0 0 28px 28px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(15, 23, 42, 0.04) !important; } /* Rounded sign-in button */ .mx_WelcomePage_body .mx_ButtonParent, .mx_WelcomePage_body .mx_ButtonSignIn, .mx_WelcomePage_body .mx_ButtonLabel, .mx_Login_submit, .mx_AccessibleButton_kind_primary { border-radius: 14px !important; } /* Better button proportions */ .mx_WelcomePage_body .mx_ButtonParent, .mx_WelcomePage_body .mx_ButtonSignIn { height: 46px !important; min-height: 46px !important; } .mx_WelcomePage_body .mx_ButtonLabel { height: 46px !important; min-height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Prevent any square child backgrounds inside the rounded button */ .mx_WelcomePage_body .mx_ButtonParent *, .mx_WelcomePage_body .mx_ButtonSignIn * { border-radius: inherit !important; } /* Fix language footer overlap */ .mx_WelcomePage_guest { overflow: hidden !important; padding: 42px 44px 0 44px !important; } .mx_WelcomePage_body { padding-bottom: 26px !important; } /* Reset previous oversized language dropdown rules */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; min-height: 56px !important; height: 56px !important; padding: 0 44px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(219, 234, 253, 0.62) !important; border-top: 1px solid rgba(148, 163, 184, 0.24) !important; border-radius: 0 0 28px 28px !important; position: relative !important; transform: none !important; } /* Make dropdown text centered */ .mx_LanguageDropdown .mx_Dropdown_input, .mx_LanguageDropdown .mx_Dropdown_option, .mx_WelcomePage_guest .mx_Dropdown_input { text-align: center !important; justify-content: center !important; } /* Keep button separated from language footer */ .mx_WelcomePage_body .mx_ButtonGroup, .mx_WelcomePage_body .mx_ButtonParent { margin-bottom: 4px !important; } /* FINAL: smoother auth panel colors and no overlap */ /* Whole auth card */ .mx_WelcomePage_guest, .mx_AuthPage_modal, .mx_AuthBody { background: rgba(226, 238, 255, 0.44) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; border-radius: 30px !important; overflow: hidden !important; box-shadow: 0 30px 90px rgba(37, 99, 235, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.50) !important; backdrop-filter: blur(24px) saturate(145%) !important; -webkit-backdrop-filter: blur(24px) saturate(145%) !important; } /* Main upper area */ .mx_WelcomePage_body { background: rgba(255, 255, 255, 0.16) !important; border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 30px 30px 20px 20px !important; padding-top: 42px !important; padding-bottom: 34px !important; box-sizing: border-box !important; } /* Language footer: no visual overlap */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { position: relative !important; top: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(226, 238, 255, 0.34) !important; border-top: none !important; border-radius: 0 0 30px 30px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34) !important; } /* Language text color */ .mx_LanguageDropdown, .mx_LanguageDropdown *, .mx_WelcomePage_guest .mx_Dropdown, .mx_WelcomePage_guest .mx_Dropdown * { color: rgba(15, 23, 42, 0.58) !important; font-weight: 600 !important; } /* Button spacing */ .mx_WelcomePage_body .mx_ButtonGroup { margin-top: 24px !important; margin-bottom: 0 !important; } /* Button softer rounded */ .mx_WelcomePage_body .mx_ButtonParent, .mx_WelcomePage_body .mx_ButtonSignIn, .mx_WelcomePage_body .mx_ButtonLabel { border-radius: 16px !important; } /* Unlimited Messenger glass: darker but not blue-button-like */ .mx_Header_title .ut_glass_title { background: linear-gradient( 135deg, rgba(172, 196, 235, 0.46), rgba(219, 234, 253, 0.24) ) !important; border: 1px solid rgba(96, 125, 170, 0.28) !important; border-radius: 13px !important; color: #172033 !important; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -1px 0 rgba(15, 23, 42, 0.05) !important; } /* Remove accidental spacing artifacts */ .mx_Header_title { margin-bottom: 0 !important; } .mx_Header_title .ut_glass_title + * { margin-left: 0 !important; } /* FINAL FIX: one-piece auth card, no broken transition */ /* Outer card is the only visible glass container */ .mx_WelcomePage_guest, .mx_AuthPage_modal, .mx_AuthBody { background: rgba(226, 238, 255, 0.48) !important; border: 1px solid rgba(148, 163, 184, 0.24) !important; border-radius: 30px !important; overflow: hidden !important; box-shadow: 0 30px 90px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important; backdrop-filter: blur(24px) saturate(145%) !important; -webkit-backdrop-filter: blur(24px) saturate(145%) !important; } /* Upper body must NOT look like a separate rounded card */ .mx_WelcomePage_body { background: transparent !important; border: none !important; border-bottom: none !important; border-radius: 0 !important; box-shadow: none !important; padding-top: 46px !important; padding-bottom: 28px !important; } /* Language row is just a footer row inside the same card */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { background: transparent !important; border: none !important; border-top: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 0 !important; box-shadow: none !important; width: 100% !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; top: auto !important; bottom: auto !important; transform: none !important; } /* Remove any inner artificial panel that creates the visible seam */ .mx_WelcomePage_body::before, .mx_WelcomePage_body::after, .mx_WelcomePage_guest::before, .mx_WelcomePage_guest::after { display: none !important; content: none !important; } /* Keep content visually centered */ .mx_WelcomePage_body .mx_Parent { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* Softer phrase glass */ .mx_Header_title .ut_glass_title { background: linear-gradient( 135deg, rgba(172, 196, 235, 0.40), rgba(219, 234, 253, 0.18) ) !important; border: 1px solid rgba(96, 125, 170, 0.24) !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important; } /* Button stays clean */ .mx_WelcomePage_body .mx_ButtonParent, .mx_WelcomePage_body .mx_ButtonSignIn, .mx_WelcomePage_body .mx_ButtonLabel { border-radius: 16px !important; } /* Remove hard seam between body and language row */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { border-top: none !important; background: linear-gradient( 180deg, rgba(226, 238, 255, 0.04) 0%, rgba(226, 238, 255, 0.22) 100% ) !important; } /* Ensure upper body has no bottom border or shadow seam */ .mx_WelcomePage_body { border-bottom: none !important; box-shadow: none !important; } /* Soften possible internal divider from Element styles */ .mx_WelcomePage_guest > div, .mx_AuthBody > div { border-bottom-color: transparent !important; } /* Smooth card bottom */ .mx_WelcomePage_guest { background: linear-gradient( 180deg, rgba(226, 238, 255, 0.50) 0%, rgba(226, 238, 255, 0.46) 72%, rgba(226, 238, 255, 0.40) 100% ) !important; } /* Remove visible auth card outline */ .mx_WelcomePage_guest, .mx_AuthPage_modal, .mx_AuthBody { border: none !important; outline: none !important; } /* Keep soft glass depth without hard border */ .mx_WelcomePage_guest { box-shadow: 0 30px 90px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important; } .mx_AuthPage_modal, .mx_AuthBody { box-shadow: none !important; } .mx_WelcomePage_guest, .mx_WelcomePage_body { box-shadow: none !important; } /* Slightly darker language selector area */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { background: linear-gradient( 180deg, rgba(180, 203, 235, 0.16) 0%, rgba(148, 163, 184, 0.20) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(15, 23, 42, 0.04) !important; } /* Language text a bit stronger */ .mx_LanguageDropdown, .mx_LanguageDropdown *, .mx_WelcomePage_guest .mx_Dropdown, .mx_WelcomePage_guest .mx_Dropdown * { color: rgba(15, 23, 42, 0.66) !important; } /* More transparent language selector area */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { background: linear-gradient( 180deg, rgba(226, 238, 255, 0.04) 0%, rgba(226, 238, 255, 0.10) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(15, 23, 42, 0.02) !important; } .mx_LanguageDropdown, .mx_LanguageDropdown *, .mx_WelcomePage_guest .mx_Dropdown, .mx_WelcomePage_guest .mx_Dropdown * { color: rgba(15, 23, 42, 0.54) !important; } /* Almost transparent liquid glass language selector */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { background: rgba(255, 255, 255, 0.035) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -8px 24px rgba(255, 255, 255, 0.035) !important; backdrop-filter: blur(18px) saturate(135%) !important; -webkit-backdrop-filter: blur(18px) saturate(135%) !important; } .mx_LanguageDropdown, .mx_LanguageDropdown *, .mx_WelcomePage_guest .mx_Dropdown, .mx_WelcomePage_guest .mx_Dropdown * { color: rgba(15, 23, 42, 0.44) !important; } /* Almost transparent liquid glass language selector */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { background: rgba(255, 255, 255, 0.015) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 -8px 24px rgba(255, 255, 255, 0.02) !important; backdrop-filter: blur(22px) saturate(140%) !important; -webkit-backdrop-filter: blur(22px) saturate(140%) !important; } .mx_LanguageDropdown, .mx_LanguageDropdown *, .mx_WelcomePage_guest .mx_Dropdown, .mx_WelcomePage_guest .mx_Dropdown * { color: rgba(15, 23, 42, 0.36) !important; } /* Blue liquid glass auth card */ .mx_WelcomePage_guest, .mx_AuthPage_modal, .mx_AuthBody { background: linear-gradient( 135deg, rgba(219, 234, 253, 0.56) 0%, rgba(191, 219, 254, 0.38) 45%, rgba(219, 234, 253, 0.30) 100% ) !important; border: 1px solid rgba(147, 197, 253, 0.22) !important; border-radius: 30px !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(37, 99, 235, 0.06) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } /* Blue glass inner auth area */ .mx_WelcomePage_body { background: linear-gradient( 135deg, rgba(219, 234, 253, 0.18), rgba(255, 255, 255, 0.08) ) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20) !important; } /* Language row in the same blue liquid glass style */ .mx_Dropdown.mx_LanguageDropdown, .mx_LanguageDropdown, .mx_AuthBody_language, .mx_WelcomePage_guest .mx_Dropdown { background: linear-gradient( 180deg, rgba(191, 219, 254, 0.10) 0%, rgba(147, 197, 253, 0.14) 100% ) !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -10px 28px rgba(147, 197, 253, 0.06) !important; backdrop-filter: blur(24px) saturate(150%) !important; -webkit-backdrop-filter: blur(24px) saturate(150%) !important; } /* Slightly blue title glass */ .mx_Header_title .ut_glass_title { background: linear-gradient( 135deg, rgba(147, 197, 253, 0.34), rgba(219, 234, 253, 0.20) ) !important; border: 1px solid rgba(96, 165, 250, 0.26) !important; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; } /* ========================= FIX LOGIN PAGE LAYOUT ========================= */ /* Login page background */ .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Main login modal */ .mx_AuthPage_modalContent { width: 520px !important; max-width: 520px !important; min-width: 520px !important; margin: 0 auto !important; padding: 0 !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.56) 0%, rgba(191, 219, 254, 0.38) 45%, rgba(219, 234, 253, 0.30) 100% ) !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(37, 99, 235, 0.06) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } /* Remove broken left auth/welcome side panel on login */ .mx_AuthPage_modalContent > div:first-child:not(.mx_AuthBody), .mx_AuthPage_modalContent .mx_Welcome, .mx_AuthPage_modalContent .mx_WelcomePage_guest, .mx_AuthPage_modalContent .mx_WelcomePage_body { display: none !important; } /* Login body should fill the card normally */ .mx_AuthBody, .mx_Login { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 42px 52px 34px 52px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Login title */ .mx_AuthBody h1, .mx_Login h1 { display: block !important; width: fit-content !important; margin: 0 auto 24px auto !important; padding: 10px 20px !important; background: linear-gradient( 135deg, rgba(147, 197, 253, 0.34), rgba(219, 234, 253, 0.20) ) !important; border: 1px solid rgba(96, 165, 250, 0.26) !important; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; color: #172033 !important; font-weight: 900 !important; text-align: center !important; } /* Homeserver pill */ .mx_ServerPicker, .mx_ServerPicker_server, .mx_ServerPicker_change { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Login form fields */ .mx_Login .mx_Field, .mx_Login input, .mx_Login select, .mx_Login .mx_Dropdown { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mx_Login input, .mx_Login select, .mx_Login .mx_Dropdown { background: rgba(255, 255, 255, 0.34) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 20px rgba(37, 99, 235, 0.05) !important; } /* Login button */ .mx_Login_submit, .mx_Login .mx_AccessibleButton_kind_primary, .mx_Login button[type="submit"] { width: 100% !important; max-width: 100% !important; height: 46px !important; border-radius: 16px !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } /* Bottom register text */ .mx_Login .mx_Login_links, .mx_Login .mx_Login_footer, .mx_Login .mx_AuthBody_changeFlow { text-align: center !important; color: rgba(15, 23, 42, 0.58) !important; } /* Language selector on login should not become a left column */ .mx_AuthPage_modalContent .mx_Dropdown.mx_LanguageDropdown, .mx_AuthPage_modalContent .mx_LanguageDropdown { position: static !important; width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.015) !important; border: none !important; border-radius: 0 0 30px 30px !important; } /* Prevent old welcome sizing from affecting login */ .mx_Login .mx_ButtonGroup, .mx_Login .mx_ButtonParent, .mx_Login .mx_ButtonLabel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Remove default Element mountain background from login/auth cards */ .mx_AuthPage_modal, .mx_AuthPage_modalContent, .mx_AuthBody, .mx_Login, .mx_Login *, .mx_AuthPage_modalContent *, .mx_AuthPage_modal * { background-image: none !important; } /* Keep our corporate background only on the whole auth page */ .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Restore intended blue liquid glass on login card after removing images */ .mx_AuthPage_modalContent { background: linear-gradient( 135deg, rgba(219, 234, 253, 0.58) 0%, rgba(191, 219, 254, 0.42) 45%, rgba(219, 234, 253, 0.32) 100% ) !important; border-radius: 30px !important; overflow: hidden !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(37, 99, 235, 0.06) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } /* Restore transparent field backgrounds after global image reset */ .mx_Login input, .mx_Login select, .mx_Login .mx_Dropdown { background: rgba(255, 255, 255, 0.34) !important; } /* Restore button gradient after global image reset */ .mx_Login_submit, .mx_Login .mx_AccessibleButton_kind_primary, .mx_Login button[type="submit"] { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; } /* Remove liquid glass from login title */ .mx_AuthBody h1, .mx_Login h1 { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; margin: 0 auto 28px auto !important; color: #172033 !important; font-weight: 900 !important; } /* Remove liquid glass from homeserver title */ .mx_ServerPicker, .mx_ServerPicker_server, .mx_ServerPicker_change, .mx_ServerPicker .mx_AccessibleButton, .mx_ServerPicker button, .mx_Login .mx_ServerPicker, .mx_Login .mx_ServerPicker_server { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep homeserver label as plain text */ .mx_ServerPicker_server, .mx_ServerPicker_change { color: #172033 !important; font-weight: 800 !important; } /* Hard remove border/pill from homeserver selector */ .mx_ServerPicker *, .mx_ServerPicker_server *, .mx_ServerPicker_change *, .mx_Login .mx_ServerPicker *, .mx_Login .mx_ServerPicker_server *, .mx_Login .mx_ServerPicker_change * { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Homeserver selector wrapper must also be plain */ .mx_ServerPicker, .mx_ServerPicker_server, .mx_ServerPicker_change, .mx_Login .mx_ServerPicker, .mx_Login .mx_ServerPicker_server, .mx_Login .mx_ServerPicker_change { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Keep spacing readable after removing the pill */ .mx_ServerPicker { margin: 0 auto 18px auto !important; } .mx_ServerPicker_server { color: #172033 !important; font-weight: 800 !important; } /* Exact remove glass/border from server picker title */ .mx_ServerPicker, .mx_ServerPicker::before, .mx_ServerPicker::after, .mx_ServerPicker h2, .mx_ServerPicker h2::before, .mx_ServerPicker h2::after, .mx_ServerPicker .mx_ServerPicker_server, .mx_ServerPicker .mx_ServerPicker_server::before, .mx_ServerPicker .mx_ServerPicker_server::after { background: transparent !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Keep server picker as plain centered text block */ .mx_ServerPicker { display: block !important; text-align: center !important; margin: 0 auto 22px auto !important; padding: 0 !important; } .mx_ServerPicker h2 { margin: 0 0 14px 0 !important; padding: 0 !important; color: #172033 !important; font-weight: 800 !important; } .mx_ServerPicker .mx_ServerPicker_server { display: block !important; margin: 0 !important; padding: 0 !important; color: #172033 !important; font-weight: 700 !important; } /* ========================= FINAL LOGIN PAGE CLEANUP Glass only on input controls ========================= */ /* Auth body centered again */ .mx_AuthBody, .mx_Login { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 42px 52px 34px 52px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Remove liquid glass from all text titles */ .mx_AuthBody h1, .mx_AuthBody h2, .mx_AuthBody h3, .mx_AuthBody h4, .mx_AuthBody label, .mx_AuthBody span, .mx_AuthBody p, .mx_Login h1, .mx_Login h2, .mx_Login h3, .mx_Login h4, .mx_Login label, .mx_Login span, .mx_Login p, .mx_ServerPicker, .mx_ServerPicker *, .mx_AuthBody_changeFlow, .mx_AuthBody_changeFlow *, .mx_Login_forgot, .mx_Login_forgot *, .mx_Login_links, .mx_Login_links * { background: transparent !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Plain centered login title */ .mx_AuthBody h1, .mx_Login h1 { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 28px 0 !important; padding: 0 !important; text-align: center !important; color: #172033 !important; font-size: 28px !important; font-weight: 900 !important; line-height: 1.2 !important; } /* Plain server picker */ .mx_ServerPicker { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 0 24px 0 !important; padding: 0 !important; text-align: center !important; } .mx_ServerPicker h2 { margin: 0 0 14px 0 !important; padding: 0 !important; color: #172033 !important; font-size: 18px !important; font-weight: 800 !important; text-align: center !important; } .mx_ServerPicker_server { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #172033 !important; font-size: 16px !important; font-weight: 700 !important; text-align: center !important; } /* Login form centered and normalized */ .mx_Login form { width: 100% !important; max-width: 420px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* Login type row */ .mx_Login_type_container { width: 100% !important; max-width: 420px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; align-items: center !important; margin: 0 0 14px 0 !important; padding: 0 !important; } .mx_Login_type_label { color: #172033 !important; font-size: 14px !important; font-weight: 500 !important; text-align: left !important; } /* Glass only on method selector */ .mx_Login_type_container .mx_Field, .mx_Login_type_container .mx_Dropdown, .mx_Login_type_container select { width: 100% !important; max-width: 100% !important; background: rgba(255, 255, 255, 0.34) !important; border: 1px solid rgba(148, 163, 184, 0.34) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 20px rgba(37, 99, 235, 0.05) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; } /* Glass only on username/password fields */ .mx_Login .mx_Field { width: 100% !important; max-width: 100% !important; margin: 0 0 14px 0 !important; padding: 0 !important; box-sizing: border-box !important; } .mx_Login .mx_Field input, .mx_Login input#mx_LoginForm_username, .mx_Login input#mx_LoginForm_password { width: 100% !important; max-width: 100% !important; height: 48px !important; padding: 0 16px !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.34) !important; border: 1px solid rgba(148, 163, 184, 0.34) !important; border-radius: 14px !important; color: #172033 !important; font-size: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 20px rgba(37, 99, 235, 0.05) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; } /* Hide field labels visually, keep placeholders */ .mx_Login .mx_Field label, .mx_Login .mx_Field_label { display: none !important; } /* Forgot password plain text */ .mx_Login_forgot { margin: 10px 0 18px 0 !important; text-align: center !important; } .mx_Login_forgot, .mx_Login_forgot a { color: #172033 !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: underline !important; } /* Button centered, normal width */ .mx_Login_submit, .mx_Login button[type="submit"], .mx_Login .mx_AccessibleButton_kind_primary { width: 100% !important; max-width: 420px !important; height: 50px !important; margin: 0 auto 20px auto !important; padding: 0 !important; border: none !important; border-radius: 16px !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } /* Registration line plain */ .mx_AuthBody_changeFlow, .mx_AuthBody_changeFlow *, .mx_Login .mx_AuthBody_changeFlow, .mx_Login .mx_AuthBody_changeFlow * { color: rgba(15, 23, 42, 0.62) !important; font-size: 14px !important; text-align: center !important; } /* Keep links readable */ .mx_AuthBody a, .mx_Login a { color: #172033 !important; font-weight: 700 !important; } /* Prevent old welcome rules from affecting login */ .mx_Login .mx_ButtonGroup, .mx_Login .mx_ButtonParent, .mx_Login .mx_ButtonLabel { width: 100% !important; max-width: 420px !important; min-width: 0 !important; } /* Language/auth header should not shift form */ .mx_AuthHeader, .mx_AuthHeaderLogo, .mx_AuthHeader_logo { display: none !important; } /* Remove remaining internal stripe/seam on login card */ .mx_AuthPage_modal, .mx_AuthPage_modalContent, .mx_AuthBody, .mx_Login, .mx_Login form, .mx_ServerPicker, .mx_Login_type_container { border-top: none !important; border-bottom: none !important; outline: none !important; } /* Remove pseudo-element stripes */ .mx_AuthPage_modal::before, .mx_AuthPage_modal::after, .mx_AuthPage_modalContent::before, .mx_AuthPage_modalContent::after, .mx_AuthBody::before, .mx_AuthBody::after, .mx_Login::before, .mx_Login::after, .mx_ServerPicker::before, .mx_ServerPicker::after { content: none !important; display: none !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Remove inset shadow that creates horizontal line */ .mx_AuthPage_modalContent { box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; } /* Make inner body fully transparent, no panel seam */ .mx_AuthBody, .mx_Login { background: transparent !important; box-shadow: none !important; } /* Remove accidental line from server area */ .mx_ServerPicker { box-shadow: none !important; background: transparent !important; } /* Smooth single-piece login card */ .mx_AuthPage_modalContent { background: linear-gradient( 135deg, rgba(219, 234, 253, 0.54) 0%, rgba(191, 219, 254, 0.36) 48%, rgba(219, 234, 253, 0.28) 100% ) !important; } /* Remove remaining internal stripe/seam on login card */ .mx_AuthPage_modal, .mx_AuthPage_modalContent, .mx_AuthBody, .mx_Login, .mx_Login form, .mx_ServerPicker, .mx_Login_type_container { border-top: none !important; border-bottom: none !important; outline: none !important; } /* Remove pseudo-element stripes */ .mx_AuthPage_modal::before, .mx_AuthPage_modal::after, .mx_AuthPage_modalContent::before, .mx_AuthPage_modalContent::after, .mx_AuthBody::before, .mx_AuthBody::after, .mx_Login::before, .mx_Login::after, .mx_ServerPicker::before, .mx_ServerPicker::after { content: none !important; display: none !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Remove inset shadow that creates horizontal line */ .mx_AuthPage_modalContent { box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; } /* Make inner body fully transparent, no panel seam */ .mx_AuthBody, .mx_Login { background: transparent !important; box-shadow: none !important; } /* Remove accidental line from server area */ .mx_ServerPicker { box-shadow: none !important; background: transparent !important; } /* Smooth single-piece login card */ .mx_AuthPage_modalContent { background: linear-gradient( 135deg, rgba(219, 234, 253, 0.54) 0%, rgba(191, 219, 254, 0.36) 48%, rgba(219, 234, 253, 0.28) 100% ) !important; } /* Hide background SVG artifacts inside login card */ .mx_AuthPage_modalContent { position: relative !important; overflow: hidden !important; } /* Uniform inner glass layer above background image, below form content */ .mx_AuthPage_modalContent::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.72) 0%, rgba(191, 219, 254, 0.58) 48%, rgba(219, 234, 253, 0.50) 100% ) !important; border-radius: inherit !important; pointer-events: none !important; backdrop-filter: blur(22px) saturate(140%) !important; -webkit-backdrop-filter: blur(22px) saturate(140%) !important; } /* Put real login content above the inner layer */ .mx_AuthPage_modalContent > * { position: relative !important; z-index: 1 !important; } /* Remove old possible pseudo-line overrides conflict */ .mx_AuthPage_modalContent::after { content: none !important; display: none !important; } /* Login page: remove SVG decorative artifacts behind login card */ .mx_AuthPage { background-image: none !important; background-color: #dbeafd !important; } /* Keep login card as clean blue liquid glass without background artifacts */ .mx_AuthPage_modalContent { background: linear-gradient( 135deg, rgba(219, 234, 253, 0.78) 0%, rgba(191, 219, 254, 0.62) 48%, rgba(219, 234, 253, 0.54) 100% ) !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.16) !important; } /* Disable inner pseudo layer if it creates visual seams */ .mx_AuthPage_modalContent::before, .mx_AuthPage_modalContent::after { display: none !important; content: none !important; } /* Make the login card itself fully smooth */ .mx_AuthPage_modalContent, .mx_AuthBody, .mx_Login { border: none !important; outline: none !important; background-clip: padding-box !important; } /* RESTORE corporate auth background */ .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Remove Element internal blurred background layer, it creates the stripe */ .mx_AuthPage_modalBlur, .mx_AuthPage_modalBlur::before, .mx_AuthPage_modalBlur::after { display: none !important; content: none !important; background: transparent !important; background-image: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: none !important; } /* Keep the login card visible and correctly sized */ .mx_AuthPage_modalContent { width: 520px !important; max-width: 520px !important; min-width: 520px !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.58) 0%, rgba(191, 219, 254, 0.42) 48%, rgba(219, 234, 253, 0.32) 100% ) !important; border: none !important; border-radius: 30px !important; overflow: hidden !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } /* No extra inner line or pseudo-layer */ .mx_AuthPage_modalContent::before, .mx_AuthPage_modalContent::after { display: none !important; content: none !important; } /* Keep inner auth body transparent */ .mx_AuthBody, .mx_Login { background: transparent !important; box-shadow: none !important; border: none !important; } /* Softer, lighter login card */ .mx_AuthPage_modalContent { background: linear-gradient( 135deg, rgba(235, 245, 255, 0.46) 0%, rgba(219, 234, 253, 0.34) 48%, rgba(235, 245, 255, 0.28) 100% ) !important; box-shadow: 0 30px 84px rgba(37, 99, 235, 0.10) !important; backdrop-filter: blur(22px) saturate(135%) !important; -webkit-backdrop-filter: blur(22px) saturate(135%) !important; } /* Make inner login body even cleaner */ .mx_AuthBody, .mx_Login { background: rgba(255, 255, 255, 0.02) !important; } /* Slightly lighter form fields */ .mx_Login_type_container .mx_Field, .mx_Login_type_container .mx_Dropdown, .mx_Login_type_container select, .mx_Login .mx_Field input, .mx_Login input#mx_LoginForm_username, .mx_Login input#mx_LoginForm_password { background: rgba(255, 255, 255, 0.28) !important; border-color: rgba(148, 163, 184, 0.24) !important; } /* FIX: show welcome auth card again */ .mx_AuthPage_modalContent .mx_Welcome, .mx_AuthPage_modalContent .mx_WelcomePage_guest, .mx_AuthPage_modalContent .mx_WelcomePage_body { display: flex !important; } /* Welcome card layout restore */ .mx_Welcome { width: 100% !important; max-width: 100% !important; align-items: center !important; justify-content: center !important; } .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-radius: 30px !important; overflow: hidden !important; } .mx_WelcomePage_body { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 46px !important; padding-bottom: 28px !important; } /* Keep login page from inheriting welcome layout too aggressively */ .mx_Login { display: flex !important; flex-direction: column !important; } /* SAFARI/WELCOME FIX: undo old rule that hides the first auth child */ .mx_AuthPage_modalContent > div:first-child { display: flex !important; } /* Restore welcome card visibility */ .mx_AuthPage_modalContent .mx_Welcome, .mx_AuthPage_modalContent .mx_WelcomePage_guest, .mx_AuthPage_modalContent .mx_WelcomePage_body, .mx_Welcome, .mx_WelcomePage_guest, .mx_WelcomePage_body { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Center welcome modal content */ .mx_AuthPage_modalContent { display: flex !important; align-items: center !important; justify-content: center !important; } /* Welcome card itself */ .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-radius: 30px !important; overflow: hidden !important; } /* Welcome body */ .mx_WelcomePage_body { width: 100% !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 46px !important; padding-bottom: 28px !important; } /* Prevent login form from being destroyed by welcome fix */ .mx_Login, .mx_AuthBody { flex-direction: column !important; } /* HARD FIX: restore welcome screen hidden by old login rule */ .mx_AuthPage_modalContent > div:first-child:not(.mx_AuthBody), .mx_AuthPage_modalContent > div:first-child, .mx_AuthPage_modalContent .mx_Welcome, .mx_AuthPage_modalContent .mx_WelcomePage_guest, .mx_AuthPage_modalContent .mx_WelcomePage_body { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Keep welcome content above background */ .mx_AuthPage_modalContent { position: relative !important; z-index: 10 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 520px !important; max-width: 520px !important; min-width: 520px !important; margin: 0 auto !important; } /* Restore welcome card */ .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-radius: 30px !important; overflow: hidden !important; } /* Restore welcome inner body */ .mx_WelcomePage_body { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 46px !important; padding-bottom: 28px !important; } /* Do not let login page use the welcome card rules */ .mx_AuthBody.mx_Login, .mx_Login { display: flex !important; flex-direction: column !important; } /* ========================= ROUTE-SPECIFIC AUTH FIX welcome and login separated ========================= */ /* Common auth background */ body.ut-page-welcome .mx_AuthPage, body.ut-page-login .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* ---------- WELCOME ONLY ---------- */ body.ut-page-welcome .mx_AuthPage_modalContent { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } body.ut-page-welcome .mx_AuthPage_modalContent > div:first-child:not(.mx_AuthBody), body.ut-page-welcome .mx_AuthPage_modalContent > div:first-child, body.ut-page-welcome .mx_AuthPage_modalContent .mx_Welcome, body.ut-page-welcome .mx_AuthPage_modalContent .mx_WelcomePage_guest, body.ut-page-welcome .mx_AuthPage_modalContent .mx_WelcomePage_body { display: flex !important; visibility: visible !important; opacity: 1 !important; } body.ut-page-welcome .mx_Welcome { width: 100% !important; max-width: 100% !important; align-items: center !important; justify-content: center !important; } body.ut-page-welcome .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.56) 0%, rgba(191, 219, 254, 0.38) 45%, rgba(219, 234, 253, 0.30) 100% ) !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } body.ut-page-welcome .mx_WelcomePage_body { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 46px !important; padding-bottom: 28px !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Welcome language row */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown { width: 100% !important; height: 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.015) !important; border: none !important; box-shadow: none !important; } /* ---------- LOGIN ONLY ---------- */ body.ut-page-login .mx_AuthPage_modalContent { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.46) 0%, rgba(219, 234, 253, 0.34) 48%, rgba(235, 245, 255, 0.28) 100% ) !important; box-shadow: 0 30px 84px rgba(37, 99, 235, 0.10) !important; backdrop-filter: blur(22px) saturate(135%) !important; -webkit-backdrop-filter: blur(22px) saturate(135%) !important; } /* On login, hide welcome-specific blocks only */ body.ut-page-login .mx_AuthPage_modalContent .mx_Welcome, body.ut-page-login .mx_AuthPage_modalContent .mx_WelcomePage_guest, body.ut-page-login .mx_AuthPage_modalContent .mx_WelcomePage_body { display: none !important; } /* Login body */ body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 !important; padding: 42px 52px 34px 52px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Login text elements plain */ body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_AuthBody h2, body.ut-page-login .mx_AuthBody h3, body.ut-page-login .mx_AuthBody h4, body.ut-page-login .mx_AuthBody label, body.ut-page-login .mx_AuthBody span, body.ut-page-login .mx_AuthBody p, body.ut-page-login .mx_Login h1, body.ut-page-login .mx_Login h2, body.ut-page-login .mx_Login h3, body.ut-page-login .mx_Login h4, body.ut-page-login .mx_Login label, body.ut-page-login .mx_Login span, body.ut-page-login .mx_Login p, body.ut-page-login .mx_ServerPicker, body.ut-page-login .mx_ServerPicker *, body.ut-page-login .mx_AuthBody_changeFlow, body.ut-page-login .mx_AuthBody_changeFlow *, body.ut-page-login .mx_Login_forgot, body.ut-page-login .mx_Login_forgot * { background: transparent !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Login title */ body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_Login h1 { width: 100% !important; margin: 0 0 28px 0 !important; padding: 0 !important; text-align: center !important; color: #172033 !important; font-size: 28px !important; font-weight: 900 !important; line-height: 1.2 !important; } /* Server picker */ body.ut-page-login .mx_ServerPicker { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 0 24px 0 !important; padding: 0 !important; text-align: center !important; } body.ut-page-login .mx_ServerPicker h2 { margin: 0 0 14px 0 !important; padding: 0 !important; color: #172033 !important; font-size: 18px !important; font-weight: 800 !important; text-align: center !important; } body.ut-page-login .mx_ServerPicker_server { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #172033 !important; font-size: 16px !important; font-weight: 700 !important; text-align: center !important; } /* Login form */ body.ut-page-login .mx_Login form { width: 100% !important; max-width: 420px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* Login method row */ body.ut-page-login .mx_Login_type_container { width: 100% !important; max-width: 420px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; align-items: center !important; margin: 0 0 14px 0 !important; padding: 0 !important; } body.ut-page-login .mx_Login_type_label { color: #172033 !important; font-size: 14px !important; font-weight: 500 !important; text-align: left !important; } /* Glass only on login controls */ body.ut-page-login .mx_Login_type_container .mx_Field, body.ut-page-login .mx_Login_type_container .mx_Dropdown, body.ut-page-login .mx_Login_type_container select, body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login .mx_Login input#mx_LoginForm_username, body.ut-page-login .mx_Login input#mx_LoginForm_password { width: 100% !important; max-width: 100% !important; height: 48px !important; padding: 0 16px !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.28) !important; border: 1px solid rgba(148, 163, 184, 0.24) !important; border-radius: 14px !important; color: #172033 !important; font-size: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 20px rgba(37, 99, 235, 0.05) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; } body.ut-page-login .mx_Login .mx_Field { margin: 0 0 14px 0 !important; padding: 0 !important; } /* Hide field labels, keep placeholders */ body.ut-page-login .mx_Login .mx_Field label, body.ut-page-login .mx_Login .mx_Field_label { display: none !important; } /* Login button */ body.ut-page-login .mx_Login_submit, body.ut-page-login .mx_Login button[type="submit"], body.ut-page-login .mx_Login .mx_AccessibleButton_kind_primary { width: 100% !important; max-width: 420px !important; height: 50px !important; margin: 0 auto 20px auto !important; padding: 0 !important; border: none !important; border-radius: 16px !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } /* ========================= ROUTE-SPECIFIC AUTH FIX welcome and login separated ========================= */ /* Common auth background */ body.ut-page-welcome .mx_AuthPage, body.ut-page-login .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* ---------- WELCOME ONLY ---------- */ body.ut-page-welcome .mx_AuthPage_modalContent { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } body.ut-page-welcome .mx_AuthPage_modalContent > div:first-child:not(.mx_AuthBody), body.ut-page-welcome .mx_AuthPage_modalContent > div:first-child, body.ut-page-welcome .mx_AuthPage_modalContent .mx_Welcome, body.ut-page-welcome .mx_AuthPage_modalContent .mx_WelcomePage_guest, body.ut-page-welcome .mx_AuthPage_modalContent .mx_WelcomePage_body { display: flex !important; visibility: visible !important; opacity: 1 !important; } body.ut-page-welcome .mx_Welcome { width: 100% !important; max-width: 100% !important; align-items: center !important; justify-content: center !important; } body.ut-page-welcome .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.56) 0%, rgba(191, 219, 254, 0.38) 45%, rgba(219, 234, 253, 0.30) 100% ) !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } body.ut-page-welcome .mx_WelcomePage_body { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding-top: 46px !important; padding-bottom: 28px !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Welcome language row */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown { width: 100% !important; height: 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.015) !important; border: none !important; box-shadow: none !important; } /* ---------- LOGIN ONLY ---------- */ body.ut-page-login .mx_AuthPage_modalContent { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.46) 0%, rgba(219, 234, 253, 0.34) 48%, rgba(235, 245, 255, 0.28) 100% ) !important; box-shadow: 0 30px 84px rgba(37, 99, 235, 0.10) !important; backdrop-filter: blur(22px) saturate(135%) !important; -webkit-backdrop-filter: blur(22px) saturate(135%) !important; } /* On login, hide welcome-specific blocks only */ body.ut-page-login .mx_AuthPage_modalContent .mx_Welcome, body.ut-page-login .mx_AuthPage_modalContent .mx_WelcomePage_guest, body.ut-page-login .mx_AuthPage_modalContent .mx_WelcomePage_body { display: none !important; } /* Login body */ body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 !important; padding: 42px 52px 34px 52px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Login text elements plain */ body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_AuthBody h2, body.ut-page-login .mx_AuthBody h3, body.ut-page-login .mx_AuthBody h4, body.ut-page-login .mx_AuthBody label, body.ut-page-login .mx_AuthBody span, body.ut-page-login .mx_AuthBody p, body.ut-page-login .mx_Login h1, body.ut-page-login .mx_Login h2, body.ut-page-login .mx_Login h3, body.ut-page-login .mx_Login h4, body.ut-page-login .mx_Login label, body.ut-page-login .mx_Login span, body.ut-page-login .mx_Login p, body.ut-page-login .mx_ServerPicker, body.ut-page-login .mx_ServerPicker *, body.ut-page-login .mx_AuthBody_changeFlow, body.ut-page-login .mx_AuthBody_changeFlow *, body.ut-page-login .mx_Login_forgot, body.ut-page-login .mx_Login_forgot * { background: transparent !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Login title */ body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_Login h1 { width: 100% !important; margin: 0 0 28px 0 !important; padding: 0 !important; text-align: center !important; color: #172033 !important; font-size: 28px !important; font-weight: 900 !important; line-height: 1.2 !important; } /* Server picker */ body.ut-page-login .mx_ServerPicker { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 0 24px 0 !important; padding: 0 !important; text-align: center !important; } body.ut-page-login .mx_ServerPicker h2 { margin: 0 0 14px 0 !important; padding: 0 !important; color: #172033 !important; font-size: 18px !important; font-weight: 800 !important; text-align: center !important; } body.ut-page-login .mx_ServerPicker_server { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #172033 !important; font-size: 16px !important; font-weight: 700 !important; text-align: center !important; } /* Login form */ body.ut-page-login .mx_Login form { width: 100% !important; max-width: 420px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* Login method row */ body.ut-page-login .mx_Login_type_container { width: 100% !important; max-width: 420px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; align-items: center !important; margin: 0 0 14px 0 !important; padding: 0 !important; } body.ut-page-login .mx_Login_type_label { color: #172033 !important; font-size: 14px !important; font-weight: 500 !important; text-align: left !important; } /* Glass only on login controls */ body.ut-page-login .mx_Login_type_container .mx_Field, body.ut-page-login .mx_Login_type_container .mx_Dropdown, body.ut-page-login .mx_Login_type_container select, body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login .mx_Login input#mx_LoginForm_username, body.ut-page-login .mx_Login input#mx_LoginForm_password { width: 100% !important; max-width: 100% !important; height: 48px !important; padding: 0 16px !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.28) !important; border: 1px solid rgba(148, 163, 184, 0.24) !important; border-radius: 14px !important; color: #172033 !important; font-size: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 20px rgba(37, 99, 235, 0.05) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; } body.ut-page-login .mx_Login .mx_Field { margin: 0 0 14px 0 !important; padding: 0 !important; } /* Hide field labels, keep placeholders */ body.ut-page-login .mx_Login .mx_Field label, body.ut-page-login .mx_Login .mx_Field_label { display: none !important; } /* Login button */ body.ut-page-login .mx_Login_submit, body.ut-page-login .mx_Login button[type="submit"], body.ut-page-login .mx_Login .mx_AccessibleButton_kind_primary { width: 100% !important; max-width: 420px !important; height: 50px !important; margin: 0 auto 20px auto !important; padding: 0 !important; border: none !important; border-radius: 16px !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } /* ========================= RESPONSIVE AUTH SCREENS ========================= */ /* Base safety */ .mx_AuthPage, .mx_AuthPage_modal { min-height: 100vh !important; min-height: 100svh !important; overflow: hidden !important; } .mx_AuthPage_modalContent { box-sizing: border-box !important; } /* Large tablets and small laptops */ @media (max-width: 1200px) { body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent { width: min(520px, 86vw) !important; max-width: min(520px, 86vw) !important; min-width: 0 !important; } body.ut-page-welcome .mx_WelcomePage_guest { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } body.ut-page-login .mx_Login form, body.ut-page-login .mx_Login_type_container, body.ut-page-login .mx_Login_submit, body.ut-page-login .mx_Login button[type="submit"], body.ut-page-login .mx_Login .mx_AccessibleButton_kind_primary { max-width: 100% !important; } } /* Tablets */ @media (max-width: 900px) { .mx_AuthPage { background-position: center center !important; } body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent { width: min(500px, 88vw) !important; max-width: min(500px, 88vw) !important; } body.ut-page-welcome .mx_WelcomePage_body { padding-top: 38px !important; padding-bottom: 24px !important; } body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { padding: 38px 42px 30px 42px !important; } body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_Login h1 { font-size: 26px !important; } } /* Phones landscape / narrow tablets */ @media (max-width: 700px) { body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent { width: min(460px, 92vw) !important; max-width: min(460px, 92vw) !important; border-radius: 26px !important; } body.ut-page-welcome .mx_WelcomePage_guest { border-radius: 26px !important; } body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { padding: 34px 28px 28px 28px !important; } body.ut-page-login .mx_Login_type_container { grid-template-columns: 1fr !important; gap: 8px !important; } body.ut-page-login .mx_Login_type_label { text-align: center !important; } body.ut-page-login .mx_ServerPicker h2 { font-size: 17px !important; } body.ut-page-login .mx_ServerPicker_server { font-size: 15px !important; word-break: break-word !important; } body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login .mx_Login input#mx_LoginForm_username, body.ut-page-login .mx_Login input#mx_LoginForm_password, body.ut-page-login .mx_Login_type_container .mx_Dropdown, body.ut-page-login .mx_Login_type_container select { height: 46px !important; font-size: 15px !important; } body.ut-page-login .mx_Login_submit, body.ut-page-login .mx_Login button[type="submit"], body.ut-page-login .mx_Login .mx_AccessibleButton_kind_primary { height: 48px !important; } body.ut-page-welcome .mx_Header_title { font-size: 16px !important; line-height: 1.3 !important; white-space: normal !important; text-align: center !important; } body.ut-page-welcome .mx_Header_title .ut_glass_title { display: inline-block !important; margin-top: 4px !important; } } /* Phones portrait */ @media (max-width: 520px) { .mx_AuthPage, body.ut-page-welcome .mx_AuthPage, body.ut-page-login .mx_AuthPage { background-size: cover !important; background-position: center center !important; } body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; min-width: 0 !important; border-radius: 24px !important; } body.ut-page-welcome .mx_WelcomePage_guest { width: 100% !important; max-width: 100% !important; min-width: 0 !important; border-radius: 24px !important; } body.ut-page-welcome .mx_WelcomePage_body { padding: 30px 20px 22px 20px !important; box-sizing: border-box !important; } body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { padding: 30px 22px 26px 22px !important; } body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_Login h1 { font-size: 24px !important; margin-bottom: 24px !important; } body.ut-page-login .mx_ServerPicker { margin-bottom: 20px !important; } body.ut-page-login .mx_ServerPicker h2 { font-size: 16px !important; margin-bottom: 10px !important; } body.ut-page-login .mx_ServerPicker_server { font-size: 14px !important; } body.ut-page-login .mx_Login form { width: 100% !important; max-width: 100% !important; } body.ut-page-login .mx_Login_forgot, body.ut-page-login .mx_Login_forgot a, body.ut-page-login .mx_AuthBody_changeFlow, body.ut-page-login .mx_AuthBody_changeFlow * { font-size: 13px !important; } body.ut-page-welcome .mx_ButtonParent, body.ut-page-welcome .mx_ButtonSignIn, body.ut-page-welcome .mx_ButtonLabel { width: 100% !important; max-width: 100% !important; } } /* Very small phones */ @media (max-width: 380px) { body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; border-radius: 22px !important; } body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { padding: 26px 16px 22px 16px !important; } body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_Login h1 { font-size: 22px !important; } body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login .mx_Login input#mx_LoginForm_username, body.ut-page-login .mx_Login input#mx_LoginForm_password, body.ut-page-login .mx_Login_type_container .mx_Dropdown, body.ut-page-login .mx_Login_type_container select { height: 44px !important; font-size: 14px !important; padding-left: 12px !important; padding-right: 12px !important; } body.ut-page-login .mx_Login_submit, body.ut-page-login .mx_Login button[type="submit"], body.ut-page-login .mx_Login .mx_AccessibleButton_kind_primary { height: 46px !important; font-size: 15px !important; } } /* Low height screens */ @media (max-height: 720px) { body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { padding-top: 26px !important; padding-bottom: 22px !important; } body.ut-page-login .mx_AuthBody h1, body.ut-page-login .mx_Login h1 { margin-bottom: 18px !important; } body.ut-page-login .mx_ServerPicker { margin-bottom: 16px !important; } body.ut-page-login .mx_Login .mx_Field { margin-bottom: 10px !important; } body.ut-page-login .mx_Login_forgot { margin-top: 6px !important; margin-bottom: 12px !important; } } /* Very low height, for small mobile browsers */ @media (max-height: 580px) { .mx_AuthPage_modal { align-items: center !important; } body.ut-page-login .mx_AuthPage_modalContent, body.ut-page-welcome .mx_AuthPage_modalContent { transform: scale(0.92) !important; transform-origin: center center !important; } } /* FIX: welcome card must not stretch vertically */ body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-welcome .mx_Welcome, body.ut-page-welcome .mx_WelcomePage_guest { height: auto !important; min-height: 0 !important; max-height: none !important; align-self: center !important; } /* Real fixed-size welcome card */ body.ut-page-welcome .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; flex-direction: column !important; border-radius: 30px !important; overflow: hidden !important; } /* Do not stretch inner welcome body */ body.ut-page-welcome .mx_WelcomePage_body { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; padding-top: 46px !important; padding-bottom: 28px !important; } /* Language row fixed height, not stretching */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown { height: 58px !important; min-height: 58px !important; max-height: 58px !important; flex: 0 0 58px !important; } /* Modal wrapper centers card without stretching it */ body.ut-page-welcome .mx_AuthPage_modalContent { display: flex !important; align-items: center !important; justify-content: center !important; } /* Responsive width only, no vertical stretch */ @media (max-width: 700px) { body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-welcome .mx_WelcomePage_guest { width: min(460px, 92vw) !important; max-width: min(460px, 92vw) !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; } } @media (max-width: 520px) { body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-welcome .mx_WelcomePage_guest { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; } } /* ========================= HARD FIX: welcome card must not stretch ========================= */ /* On welcome, outer modal must be invisible and not stretched */ body.ut-page-welcome .mx_AuthPage_modalContent { width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; align-self: center !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; } /* Welcome wrapper must also not stretch */ body.ut-page-welcome .mx_Welcome, body.ut-page-welcome .mx_WelcomePage_guest { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; align-self: center !important; } /* The real visible welcome card */ body.ut-page-welcome .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.56) 0%, rgba(191, 219, 254, 0.38) 45%, rgba(219, 234, 253, 0.30) 100% ) !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } /* Body of welcome card */ body.ut-page-welcome .mx_WelcomePage_body { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; padding: 46px 34px 28px 34px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Language row fixed, not stretching */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown { height: 58px !important; min-height: 58px !important; max-height: 58px !important; flex: 0 0 58px !important; width: 100% !important; margin: 0 !important; } /* Mobile width only */ @media (max-width: 700px) { body.ut-page-welcome .mx_WelcomePage_guest { width: min(460px, 92vw) !important; max-width: min(460px, 92vw) !important; min-width: 0 !important; } } @media (max-width: 520px) { body.ut-page-welcome .mx_WelcomePage_guest { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; min-width: 0 !important; } } /* ========================= PROPORTIONAL SCALING FIX ========================= */ /* Background should scale with viewport, not crop side text */ body.ut-page-welcome .mx_AuthPage, body.ut-page-login .mx_AuthPage, .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: 100% 100% !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Center auth modal area */ body.ut-page-welcome .mx_AuthPage_modal, body.ut-page-login .mx_AuthPage_modal { display: flex !important; align-items: center !important; justify-content: center !important; width: 100vw !important; height: 100vh !important; min-height: 100svh !important; overflow: hidden !important; } /* Default proportional scale */ body.ut-page-welcome, body.ut-page-login { --ut-auth-scale: 1; } /* Scale down proportionally on smaller screens */ @media (max-width: 1400px), (max-height: 820px) { body.ut-page-welcome, body.ut-page-login { --ut-auth-scale: 0.92; } } @media (max-width: 1200px), (max-height: 720px) { body.ut-page-welcome, body.ut-page-login { --ut-auth-scale: 0.84; } } @media (max-width: 1000px), (max-height: 640px) { body.ut-page-welcome, body.ut-page-login { --ut-auth-scale: 0.76; } } @media (max-width: 760px), (max-height: 560px) { body.ut-page-welcome, body.ut-page-login { --ut-auth-scale: 0.68; } } @media (max-width: 520px) { body.ut-page-welcome, body.ut-page-login { --ut-auth-scale: 0.62; } } /* Outer modal content must not stretch anymore */ body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent { width: 520px !important; max-width: 520px !important; min-width: 520px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; flex: 0 0 auto !important; align-self: center !important; transform: scale(var(--ut-auth-scale)) !important; transform-origin: center center !important; } /* Welcome: outer container invisible, actual card fixed */ body.ut-page-welcome .mx_AuthPage_modalContent { background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; } body.ut-page-welcome .mx_Welcome, body.ut-page-welcome .mx_WelcomePage_guest, body.ut-page-welcome .mx_WelcomePage_body { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; } body.ut-page-welcome .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.56) 0%, rgba(191, 219, 254, 0.38) 45%, rgba(219, 234, 253, 0.30) 100% ) !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; } body.ut-page-welcome .mx_WelcomePage_body { width: 100% !important; padding: 46px 34px 28px 34px !important; box-sizing: border-box !important; } body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown { height: 58px !important; min-height: 58px !important; max-height: 58px !important; flex: 0 0 58px !important; } /* Login card fixed and proportional */ body.ut-page-login .mx_AuthPage_modalContent { border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.46) 0%, rgba(219, 234, 253, 0.34) 48%, rgba(235, 245, 255, 0.28) 100% ) !important; box-shadow: 0 30px 84px rgba(37, 99, 235, 0.10) !important; backdrop-filter: blur(22px) saturate(135%) !important; -webkit-backdrop-filter: blur(22px) saturate(135%) !important; } /* Prevent previous mobile width rules from overriding proportional scale */ @media (max-width: 700px) { body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent, body.ut-page-welcome .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; } } @media (max-width: 520px) { body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent, body.ut-page-welcome .mx_WelcomePage_guest { width: 520px !important; max-width: 520px !important; min-width: 520px !important; } } /* ========================= SAFARI FINAL FIX: fixed welcome card ========================= */ /* On welcome all outer auth containers are only layout, not cards */ body.ut-page-welcome .mx_AuthPage_modal, body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-welcome .mx_Welcome { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* The real welcome card is fixed to screen center */ body.ut-page-welcome .mx_WelcomePage_guest { position: fixed !important; left: 50% !important; top: 50% !important; width: 520px !important; min-width: 520px !important; max-width: 520px !important; height: auto !important; min-height: 0 !important; max-height: none !important; transform: translate(-50%, -50%) scale(var(--ut-auth-scale, 1)) !important; transform-origin: center center !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(219, 234, 253, 0.56) 0%, rgba(191, 219, 254, 0.38) 45%, rgba(219, 234, 253, 0.30) 100% ) !important; box-shadow: 0 34px 95px rgba(37, 99, 235, 0.18) !important; backdrop-filter: blur(28px) saturate(155%) !important; -webkit-backdrop-filter: blur(28px) saturate(155%) !important; z-index: 50 !important; } /* Inner welcome content must define card height */ body.ut-page-welcome .mx_WelcomePage_body { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; padding: 46px 34px 28px 34px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Language row fixed under welcome body */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown { width: 100% !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; flex: 0 0 58px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Smaller devices: same card, proportional scale only */ body.ut-page-welcome { --ut-auth-scale: 1; } @media (max-width: 1400px), (max-height: 820px) { body.ut-page-welcome { --ut-auth-scale: 0.92; } } @media (max-width: 1200px), (max-height: 720px) { body.ut-page-welcome { --ut-auth-scale: 0.84; } } @media (max-width: 1000px), (max-height: 640px) { body.ut-page-welcome { --ut-auth-scale: 0.76; } } @media (max-width: 760px), (max-height: 560px) { body.ut-page-welcome { --ut-auth-scale: 0.68; } } @media (max-width: 520px) { body.ut-page-welcome { --ut-auth-scale: 0.62; } } /* ========================= SAFARI FINAL FIX: fixed login card ========================= */ /* On login all outer containers are layout only */ body.ut-page-login .mx_AuthPage_modal, body.ut-page-login .mx_AuthPage_modalContent { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* The real login card */ body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { position: fixed !important; left: 50% !important; top: 50% !important; width: 520px !important; min-width: 520px !important; max-width: 520px !important; height: auto !important; min-height: 0 !important; max-height: none !important; transform: translate(-50%, -50%) scale(var(--ut-auth-scale, 1)) !important; transform-origin: center center !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 !important; padding: 42px 52px 34px 52px !important; box-sizing: border-box !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.46) 0%, rgba(219, 234, 253, 0.34) 48%, rgba(235, 245, 255, 0.28) 100% ) !important; box-shadow: 0 30px 84px rgba(37, 99, 235, 0.10) !important; backdrop-filter: blur(22px) saturate(135%) !important; -webkit-backdrop-filter: blur(22px) saturate(135%) !important; z-index: 60 !important; } /* Login form remains normal inside fixed card */ body.ut-page-login .mx_Login form { width: 100% !important; max-width: 420px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* Make sure welcome blocks do not appear on login */ body.ut-page-login .mx_Welcome, body.ut-page-login .mx_WelcomePage_guest, body.ut-page-login .mx_WelcomePage_body { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Login scale rules */ body.ut-page-login { --ut-auth-scale: 1; } @media (max-width: 1400px), (max-height: 820px) { body.ut-page-login { --ut-auth-scale: 0.92; } } @media (max-width: 1200px), (max-height: 720px) { body.ut-page-login { --ut-auth-scale: 0.84; } } @media (max-width: 1000px), (max-height: 640px) { body.ut-page-login { --ut-auth-scale: 0.76; } } @media (max-width: 760px), (max-height: 560px) { body.ut-page-login { --ut-auth-scale: 0.68; } } @media (max-width: 520px) { body.ut-page-login { --ut-auth-scale: 0.62; } } /* Small vertical screens */ @media (max-height: 520px) { body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { --ut-auth-scale: 0.58; } } /* ========================= REMOVE CENTER BACKDROP BLUR Keep glass color, remove background distortion ========================= */ /* Welcome card without backdrop blur */ body.ut-page-welcome .mx_WelcomePage_guest { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.62) 0%, rgba(219, 234, 253, 0.48) 45%, rgba(235, 245, 255, 0.38) 100% ) !important; box-shadow: 0 28px 72px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important; } /* Login card without backdrop blur */ body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.62) 0%, rgba(219, 234, 253, 0.48) 48%, rgba(235, 245, 255, 0.38) 100% ) !important; box-shadow: 0 28px 72px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important; } /* Remove blur from any remaining auth containers */ body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modalContent, body.ut-page-welcome .mx_AuthPage_modal, body.ut-page-login .mx_AuthPage_modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } /* Keep fields glass-like, but do not blur the whole center */ body.ut-page-login .mx_Login_type_container .mx_Field, body.ut-page-login .mx_Login_type_container .mx_Dropdown, body.ut-page-login .mx_Login_type_container select, body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login .mx_Login input#mx_LoginForm_username, body.ut-page-login .mx_Login input#mx_LoginForm_password, body.ut-page-welcome .ut_glass_title { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================= EMERGENCY FINAL WELCOME RESTORE clean fixed card, no blur, no stretching ========================= */ body.ut-page-welcome { --ut-auth-scale: 1 !important; } /* Page background */ body.ut-page-welcome .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Kill all wrong stretched/blurred outer containers */ body.ut-page-welcome .mx_AuthPage_modal, body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-welcome .mx_Welcome { position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; } /* Keep auth area simple */ body.ut-page-welcome .mx_AuthPage_modal { display: block !important; } /* Real visible welcome card */ body.ut-page-welcome .mx_WelcomePage_guest { position: fixed !important; left: 50% !important; top: 50% !important; width: 520px !important; min-width: 520px !important; max-width: 520px !important; height: auto !important; min-height: 0 !important; max-height: none !important; transform: translate(-50%, -50%) !important; transform-origin: center center !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.72) 0%, rgba(219, 234, 253, 0.56) 45%, rgba(235, 245, 255, 0.44) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.34) !important; box-shadow: 0 28px 72px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 100 !important; } /* Main welcome body */ body.ut-page-welcome .mx_WelcomePage_body { order: 1 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 46px 34px 28px 34px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Language row must be below the main body, not over the title */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown.mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest > .mx_Dropdown { order: 2 !important; position: static !important; width: 100% !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; flex: 0 0 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.04) !important; border: none !important; box-shadow: none !important; } /* Restore welcome title readability */ body.ut-page-welcome .mx_Header_title, body.ut-page-welcome .mx_WelcomePage_body h1, body.ut-page-welcome .mx_WelcomePage_body h2 { width: auto !important; max-width: 100% !important; margin: 14px auto 24px auto !important; padding: 0 !important; color: #172033 !important; font-size: 18px !important; font-weight: 900 !important; line-height: 1.25 !important; text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Glass only on Unlimited Messenger phrase */ body.ut-page-welcome .ut_glass_title { display: inline-block !important; padding: 5px 12px !important; margin: 0 4px !important; border-radius: 12px !important; background: rgba(147, 197, 253, 0.26) !important; border: 1px solid rgba(96, 165, 250, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px rgba(37, 99, 235, 0.08) !important; color: #172033 !important; font-weight: 900 !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Welcome logo */ body.ut-page-welcome .mx_Logo, body.ut-page-welcome .mx_WelcomePage_body .mx_Logo { width: 44px !important; height: 44px !important; margin: 0 auto 8px auto !important; } /* Welcome button */ body.ut-page-welcome .mx_ButtonParent, body.ut-page-welcome .mx_ButtonSignIn, body.ut-page-welcome .mx_ButtonLabel, body.ut-page-welcome a[href="#/login"], body.ut-page-welcome a[href="/#/login"] { width: 320px !important; max-width: 320px !important; min-width: 0 !important; } body.ut-page-welcome .mx_ButtonParent, body.ut-page-welcome .mx_ButtonSignIn, body.ut-page-welcome a[href="#/login"], body.ut-page-welcome a[href="/#/login"] { height: 46px !important; border-radius: 16px !important; } /* Responsive: scale whole card only on truly small screens */ @media (max-width: 700px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.86) !important; } } @media (max-width: 520px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.72) !important; } } @media (max-height: 620px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.82) !important; } } @media (max-height: 500px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.68) !important; } } /* ========================================================= FINAL CLEAN OVERRIDE no backdrop blur, stable welcome/login layout ========================================================= */ /* Kill every auth blur layer */ .mx_AuthPage *, .mx_AuthPage, .mx_AuthPage_modal, .mx_AuthPage_modalContent, .mx_AuthPage_modalBlur, .mx_WelcomePage_guest, .mx_WelcomePage_body, .mx_AuthBody, .mx_Login { filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Hide Element blur layer completely */ .mx_AuthPage_modalBlur { display: none !important; opacity: 0 !important; visibility: hidden !important; background: transparent !important; background-image: none !important; } /* Shared background */ body.ut-page-welcome .mx_AuthPage, body.ut-page-login .mx_AuthPage, .mx_AuthPage { background-color: #dbeafd !important; background-image: url("/background.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Outer containers must not look like cards */ body.ut-page-welcome .mx_AuthPage_modal, body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-login .mx_AuthPage_modal, body.ut-page-login .mx_AuthPage_modalContent { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; overflow: visible !important; } /* ================= WELCOME ================= */ body.ut-page-welcome .mx_Welcome, body.ut-page-welcome .mx_WelcomePage_guest, body.ut-page-welcome .mx_WelcomePage_body { display: flex !important; visibility: visible !important; opacity: 1 !important; } body.ut-page-welcome .mx_WelcomePage_guest { position: fixed !important; left: 50% !important; top: 50% !important; width: 520px !important; min-width: 520px !important; max-width: 520px !important; height: auto !important; min-height: 0 !important; max-height: none !important; transform: translate(-50%, -50%) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.82) 0%, rgba(219, 234, 253, 0.66) 50%, rgba(235, 245, 255, 0.56) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; box-shadow: 0 26px 62px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; z-index: 100 !important; } body.ut-page-welcome .mx_WelcomePage_body { order: 1 !important; width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 42px 34px 26px 34px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Return language selector on welcome */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown.mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest > .mx_Dropdown { order: 2 !important; position: static !important; width: 100% !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.08) !important; border: none !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; } body.ut-page-welcome .mx_Header_title { margin: 12px auto 24px auto !important; padding: 0 !important; color: #172033 !important; font-size: 18px !important; font-weight: 900 !important; line-height: 1.25 !important; text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.ut-page-welcome .ut_glass_title { display: inline-block !important; padding: 5px 12px !important; margin: 0 4px !important; border-radius: 12px !important; background: rgba(147, 197, 253, 0.26) !important; border: 1px solid rgba(96, 165, 250, 0.22) !important; color: #172033 !important; font-weight: 900 !important; } body.ut-page-welcome .mx_ButtonParent, body.ut-page-welcome .mx_ButtonSignIn, body.ut-page-welcome a[href="#/login"], body.ut-page-welcome a[href="/#/login"] { width: 320px !important; max-width: 320px !important; height: 46px !important; border-radius: 16px !important; } /* ================= LOGIN ================= */ body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { position: fixed !important; left: 50% !important; top: 50% !important; width: 520px !important; min-width: 520px !important; max-width: 520px !important; transform: translate(-50%, -50%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 42px 52px 34px 52px !important; box-sizing: border-box !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.82) 0%, rgba(219, 234, 253, 0.66) 50%, rgba(235, 245, 255, 0.56) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; box-shadow: 0 26px 62px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; z-index: 100 !important; } body.ut-page-login .mx_Welcome, body.ut-page-login .mx_WelcomePage_guest, body.ut-page-login .mx_WelcomePage_body { display: none !important; } /* Fix duplicated username/method controls */ body.ut-page-login .mx_Login_type_container { width: 100% !important; max-width: 420px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; align-items: center !important; margin: 0 0 14px 0 !important; } body.ut-page-login .mx_Login_type_container .mx_Field { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.ut-page-login .mx_Login_type_container .mx_Field input, body.ut-page-login .mx_Login_type_container .mx_Dropdown, body.ut-page-login .mx_Login_type_container select { width: 100% !important; height: 46px !important; background: rgba(255, 255, 255, 0.34) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; border-radius: 14px !important; box-shadow: none !important; } body.ut-page-login .mx_Login form { width: 100% !important; max-width: 420px !important; } body.ut-page-login .mx_Login .mx_Field { width: 100% !important; margin: 0 0 14px 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password { width: 100% !important; height: 48px !important; padding: 0 16px !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.34) !important; border: 1px solid rgba(148, 163, 184, 0.28) !important; border-radius: 14px !important; box-shadow: none !important; } body.ut-page-login .mx_Login .mx_Field label, body.ut-page-login .mx_Login .mx_Field_label { display: none !important; } body.ut-page-login .mx_Login_submit, body.ut-page-login .mx_Login button[type="submit"], body.ut-page-login .mx_Login .mx_AccessibleButton_kind_primary { width: 100% !important; max-width: 420px !important; height: 50px !important; border-radius: 16px !important; border: none !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.20) !important; } /* Responsive scaling */ @media (max-width: 700px) { body.ut-page-welcome .mx_WelcomePage_guest, body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { transform: translate(-50%, -50%) scale(0.86) !important; } } @media (max-width: 520px) { body.ut-page-welcome .mx_WelcomePage_guest, body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { transform: translate(-50%, -50%) scale(0.72) !important; } } @media (max-height: 620px) { body.ut-page-welcome .mx_WelcomePage_guest, body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { transform: translate(-50%, -50%) scale(0.82) !important; } } @media (max-height: 500px) { body.ut-page-welcome .mx_WelcomePage_guest, body.ut-page-login .mx_AuthBody, body.ut-page-login .mx_Login { transform: translate(-50%, -50%) scale(0.68) !important; } } /* ========================================================= FIX WELCOME CARD POSITION ONLY ========================================================= */ /* Welcome page: outer containers must not position the card */ body.ut-page-welcome .mx_AuthPage_modal, body.ut-page-welcome .mx_AuthPage_modalContent, body.ut-page-welcome .mx_Welcome { position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; } /* Real welcome card exactly in the center */ body.ut-page-welcome .mx_WelcomePage_guest { position: fixed !important; left: 50vw !important; top: 50vh !important; right: auto !important; bottom: auto !important; width: 520px !important; min-width: 520px !important; max-width: 520px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; transform-origin: center center !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; border-radius: 30px !important; overflow: hidden !important; background: linear-gradient( 135deg, rgba(235, 245, 255, 0.82) 0%, rgba(219, 234, 253, 0.66) 50%, rgba(235, 245, 255, 0.56) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; box-shadow: 0 26px 62px rgba(37, 99, 235, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 9999 !important; } /* Welcome body inside card */ body.ut-page-welcome .mx_WelcomePage_body { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 42px 34px 26px 34px !important; box-sizing: border-box !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Welcome language row must stay inside the card */ body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown.mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest > .mx_Dropdown { position: static !important; width: 100% !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; flex: 0 0 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.08) !important; border: none !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; } /* Responsive welcome scale */ @media (max-width: 700px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.86) !important; } } @media (max-width: 520px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.72) !important; } } @media (max-height: 620px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.82) !important; } } @media (max-height: 500px) { body.ut-page-welcome .mx_WelcomePage_guest { transform: translate(-50%, -50%) scale(0.68) !important; } } /* ========================================================= FINAL: hide language selector on login only keep it on welcome ========================================================= */ /* Hide language selector on login page */ body.ut-page-login .mx_Dropdown.mx_LanguageDropdown, body.ut-page-login .mx_LanguageDropdown, body.ut-page-login .mx_AuthBody_language, body.ut-page-login .mx_AuthBody .mx_Dropdown.mx_LanguageDropdown, body.ut-page-login .mx_AuthPage_modalContent .mx_Dropdown.mx_LanguageDropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; position: absolute !important; pointer-events: none !important; } /* Keep welcome language selector visible */ body.ut-page-welcome .mx_Dropdown.mx_LanguageDropdown, body.ut-page-welcome .mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_Dropdown.mx_LanguageDropdown, body.ut-page-welcome .mx_WelcomePage_guest .mx_LanguageDropdown { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Re-center login form after language selector removal */ body.ut-page-login .mx_Login form { margin: 0 auto !important; } body.ut-page-login .mx_Login_type_container { margin-top: 0 !important; } /* ========================================================= LOGIN CLEANUP: hide links and remove input borders ========================================================= */ /* Hide "Forgot password" */ body.ut-page-login .mx_Login_forgot, body.ut-page-login .mx_Login_forgot *, body.ut-page-login a.mx_Login_forgot { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* Hide "First time here? Create account" */ body.ut-page-login .mx_AuthBody_changeFlow, body.ut-page-login .mx_AuthBody_changeFlow *, body.ut-page-login .mx_Login .mx_AuthBody_changeFlow, body.ut-page-login .mx_Login .mx_AuthBody_changeFlow * { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* Remove borders/outlines around username and password fields */ body.ut-page-login .mx_Login .mx_Field, body.ut-page-login .mx_Login .mx_Field_input, body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password { border: none !important; outline: none !important; box-shadow: none !important; } /* Keep fields readable without outline */ body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password { background: rgba(255, 255, 255, 0.34) !important; border-radius: 14px !important; } /* Remove focus ring too */ body.ut-page-login .mx_Login .mx_Field:focus, body.ut-page-login .mx_Login .mx_Field:focus-within, body.ut-page-login .mx_Login .mx_Field input:focus, body.ut-page-login input#mx_LoginForm_username:focus, body.ut-page-login input#mx_LoginForm_password:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================= LOGIN INPUTS: no border until focus ========================================================= */ /* Default state: no visible gray border */ body.ut-page-login .mx_Login .mx_Field, body.ut-page-login .mx_Login .mx_Field_input, body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password { border: 1px solid transparent !important; outline: none !important; box-shadow: none !important; } /* Keep soft field background */ body.ut-page-login .mx_Login .mx_Field input, body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password { background: rgba(255, 255, 255, 0.34) !important; border-radius: 14px !important; } /* Focus state: show border only when user clicks/types */ body.ut-page-login .mx_Login .mx_Field:focus-within, body.ut-page-login .mx_Login .mx_Field input:focus, body.ut-page-login input#mx_LoginForm_username:focus, body.ut-page-login input#mx_LoginForm_password:focus { border-color: rgba(37, 99, 235, 0.42) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important; } /* ========================================================= LOGIN INPUT WRAPPER: remove gray border completely ========================================================= */ /* Default: remove border from field wrapper and pseudo elements */ body.ut-page-login .mx_Login .mx_Field, body.ut-page-login .mx_Login .mx_Field::before, body.ut-page-login .mx_Login .mx_Field::after, body.ut-page-login .mx_Login .mx_Field_input, body.ut-page-login .mx_Login .mx_Field_input::before, body.ut-page-login .mx_Login .mx_Field_input::after { border: none !important; outline: none !important; box-shadow: none !important; background-image: none !important; } /* Default: input itself has no border */ body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password, body.ut-page-login .mx_Login input[type="text"], body.ut-page-login .mx_Login input[type="password"] { border: none !important; outline: none !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.34) !important; border-radius: 14px !important; } /* Focus: border appears only when field is active */ body.ut-page-login .mx_Login .mx_Field:focus-within { border: 1px solid rgba(37, 99, 235, 0.42) !important; border-radius: 14px !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important; } /* Focus: keep input itself clean, wrapper shows the focus */ body.ut-page-login .mx_Login .mx_Field:focus-within input, body.ut-page-login input#mx_LoginForm_username:focus, body.ut-page-login input#mx_LoginForm_password:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================= LOGIN INPUT WRAPPER: remove gray border completely ========================================================= */ /* Default: remove border from field wrapper and pseudo elements */ body.ut-page-login .mx_Login .mx_Field, body.ut-page-login .mx_Login .mx_Field::before, body.ut-page-login .mx_Login .mx_Field::after, body.ut-page-login .mx_Login .mx_Field_input, body.ut-page-login .mx_Login .mx_Field_input::before, body.ut-page-login .mx_Login .mx_Field_input::after { border: none !important; outline: none !important; box-shadow: none !important; background-image: none !important; } /* Default: input itself has no border */ body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password, body.ut-page-login .mx_Login input[type="text"], body.ut-page-login .mx_Login input[type="password"] { border: none !important; outline: none !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.34) !important; border-radius: 14px !important; } /* Focus: border appears only when field is active */ body.ut-page-login .mx_Login .mx_Field:focus-within { border: 1px solid rgba(37, 99, 235, 0.42) !important; border-radius: 14px !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important; } /* Focus: keep input itself clean, wrapper shows the focus */ body.ut-page-login .mx_Login .mx_Field:focus-within input, body.ut-page-login input#mx_LoginForm_username:focus, body.ut-page-login input#mx_LoginForm_password:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================= LOGIN INPUTS FINAL BORDER RESET remove gray border from Element/Safari field wrappers ========================================================= */ /* Full reset for username/password wrappers */ body.ut-page-login .mx_Login .mx_Field, body.ut-page-login .mx_Login .mx_Field *, body.ut-page-login .mx_Login .mx_Field::before, body.ut-page-login .mx_Login .mx_Field::after, body.ut-page-login .mx_Login .mx_Field_input, body.ut-page-login .mx_Login .mx_Field_input *, body.ut-page-login .mx_Login .mx_Field_input::before, body.ut-page-login .mx_Login .mx_Field_input::after { border-color: transparent !important; outline-color: transparent !important; box-shadow: none !important; background-image: none !important; } /* Wrapper itself should not draw anything */ body.ut-page-login .mx_Login .mx_Field { background: transparent !important; border: 1px solid transparent !important; outline: none !important; box-shadow: none !important; border-radius: 14px !important; overflow: visible !important; } /* Real input visual */ body.ut-page-login .mx_Login input#mx_LoginForm_username, body.ut-page-login .mx_Login input#mx_LoginForm_password, body.ut-page-login .mx_Login input[name="username"], body.ut-page-login .mx_Login input[name="password"], body.ut-page-login .mx_Login input[type="text"], body.ut-page-login .mx_Login input[type="password"] { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 48px !important; border: 1px solid transparent !important; outline: none !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.34) !important; background-image: none !important; background-clip: padding-box !important; border-radius: 14px !important; color: #172033 !important; } /* Remove Safari autofill outline/glow */ body.ut-page-login .mx_Login input:-webkit-autofill, body.ut-page-login .mx_Login input:-webkit-autofill:hover, body.ut-page-login .mx_Login input:-webkit-autofill:focus { -webkit-appearance: none !important; appearance: none !important; border: 1px solid transparent !important; outline: none !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.34) inset !important; -webkit-text-fill-color: #172033 !important; } /* Focus: only then show soft blue border */ body.ut-page-login .mx_Login .mx_Field:focus-within { border: 1px solid rgba(37, 99, 235, 0.42) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important; } /* Focus input itself remains clean */ body.ut-page-login .mx_Login .mx_Field:focus-within input, body.ut-page-login .mx_Login input#mx_LoginForm_username:focus, body.ut-page-login .mx_Login input#mx_LoginForm_password:focus { border: 1px solid transparent !important; outline: none !important; box-shadow: none !important; } /* ========================================================= LOGIN INPUTS: remove border completely, always ========================================================= */ /* Remove all borders from login/password wrappers */ body.ut-page-login .mx_Login .mx_Field, body.ut-page-login .mx_Login .mx_Field:hover, body.ut-page-login .mx_Login .mx_Field:focus, body.ut-page-login .mx_Login .mx_Field:focus-within, body.ut-page-login .mx_Login .mx_Field_input, body.ut-page-login .mx_Login .mx_Field_input:hover, body.ut-page-login .mx_Login .mx_Field_input:focus, body.ut-page-login .mx_Login .mx_Field_input:focus-within, body.ut-page-login .mx_Login .mx_Field::before, body.ut-page-login .mx_Login .mx_Field::after, body.ut-page-login .mx_Login .mx_Field_input::before, body.ut-page-login .mx_Login .mx_Field_input::after { border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none !important; } /* Remove all borders from actual inputs */ body.ut-page-login .mx_Login input, body.ut-page-login .mx_Login input:hover, body.ut-page-login .mx_Login input:focus, body.ut-page-login .mx_Login input:active, body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_username:hover, body.ut-page-login input#mx_LoginForm_username:focus, body.ut-page-login input#mx_LoginForm_username:active, body.ut-page-login input#mx_LoginForm_password, body.ut-page-login input#mx_LoginForm_password:hover, body.ut-page-login input#mx_LoginForm_password:focus, body.ut-page-login input#mx_LoginForm_password:active { -webkit-appearance: none !important; appearance: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none !important; background-color: rgba(255, 255, 255, 0.34) !important; border-radius: 14px !important; } /* Remove Safari autofill border/glow too */ body.ut-page-login .mx_Login input:-webkit-autofill, body.ut-page-login .mx_Login input:-webkit-autofill:hover, body.ut-page-login .mx_Login input:-webkit-autofill:focus, body.ut-page-login .mx_Login input:-webkit-autofill:active { -webkit-appearance: none !important; appearance: none !important; border: 0 !important; outline: 0 !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.34) inset !important; -webkit-text-fill-color: #172033 !important; } /* Keep field shape without any outline */ body.ut-page-login .mx_Login .mx_Field { border-radius: 14px !important; overflow: hidden !important; background: rgba(255, 255, 255, 0.34) !important; } /* ========================================================= LOGIN INPUTS: total border removal ========================================================= */ /* Remove every visible border/outline/shadow from login input wrappers */ body.ut-page-login .mx_Login .mx_Field, body.ut-page-login .mx_Login .mx_Field *, body.ut-page-login .mx_Login .mx_Field::before, body.ut-page-login .mx_Login .mx_Field::after, body.ut-page-login .mx_Login .mx_Field_input, body.ut-page-login .mx_Login .mx_Field_input *, body.ut-page-login .mx_Login .mx_Field_input::before, body.ut-page-login .mx_Login .mx_Field_input::after { border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none !important; } /* Remove borders from actual username/password inputs */ body.ut-page-login input#mx_LoginForm_username, body.ut-page-login input#mx_LoginForm_password, body.ut-page-login .mx_Login input[type="text"], body.ut-page-login .mx_Login input[type="password"] { -webkit-appearance: none !important; appearance: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.34) !important; background-image: none !important; border-radius: 14px !important; } /* No focus border at all */ body.ut-page-login .mx_Login .mx_Field:focus, body.ut-page-login .mx_Login .mx_Field:focus-within, body.ut-page-login .mx_Login .mx_Field input:focus, body.ut-page-login input#mx_LoginForm_username:focus, body.ut-page-login input#mx_LoginForm_password:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Kill Safari autofill border/glow too */ body.ut-page-login .mx_Login input:-webkit-autofill, body.ut-page-login .mx_Login input:-webkit-autofill:hover, body.ut-page-login .mx_Login input:-webkit-autofill:focus { -webkit-appearance: none !important; appearance: none !important; border: 0 !important; outline: 0 !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.34) inset !important; -webkit-text-fill-color: #172033 !important; } /* ========================================================= LOGIN CLEANUP FINAL ========================================================= */ /* Hide language selector on login only */ body.ut-page-login .mx_Dropdown.mx_LanguageDropdown, body.ut-page-login .mx_LanguageDropdown, body.ut-page-login .mx_AuthBody_language, body.ut-page-login .mx_AuthBody .mx_Dropdown.mx_LanguageDropdown, body.ut-page-login .mx_AuthPage_modalContent .mx_Dropdown.mx_LanguageDropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; position: absolute !important; pointer-events: none !important; } /* Hide forgot password */ body.ut-page-login .mx_Login_forgot, body.ut-page-login .mx_Login_forgot *, body.ut-page-login a.mx_Login_forgot { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* Hide create account */ body.ut-page-login .mx_AuthBody_changeFlow, body.ut-page-login .mx_AuthBody_changeFlow *, body.ut-page-login .mx_Login .mx_AuthBody_changeFlow, body.ut-page-login .mx_Login .mx_AuthBody_changeFlow * { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* Remove username/password field border */ body.ut-page-login .mx_Field:has(#mx_LoginForm_username), body.ut-page-login .mx_Field:has(#mx_LoginForm_password), body.ut-page-login .mx_Field:has(#mx_LoginForm_username)::before, body.ut-page-login .mx_Field:has(#mx_LoginForm_username)::after, body.ut-page-login .mx_Field:has(#mx_LoginForm_password)::before, body.ut-page-login .mx_Field:has(#mx_LoginForm_password)::after, body.ut-page-login .mx_Field:has(#mx_LoginForm_username) *, body.ut-page-login .mx_Field:has(#mx_LoginForm_password) * { border: none !important; outline: none !important; box-shadow: none !important; background-image: none !important; } body.ut-page-login #mx_LoginForm_username, body.ut-page-login #mx_LoginForm_password { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 48px !important; padding: 0 16px !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.34) !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 14px !important; } body.ut-page-login #mx_LoginForm_username:focus, body.ut-page-login #mx_LoginForm_password:focus { border: none !important; outline: none !important; box-shadow: none !important; }