/* =========================================================================== * Auth Page — układ, shared inputy, overrides crispy/bootstrap, toggle stanu * Wszystko poniżej scope'owane przez `.auth-page` (klasa na ). * =========================================================================== */ /* ─── Wrapper z banerem ────────────────────────────────────────────────── */ .auth-page .auth-page-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; } .auth-page .auth-banner-alert { margin: 40px 16px 0; padding: 12px 16px; background-color: rgba(228, 1, 72, 0.08); color: #22252a; border: 1px solid rgba(228, 1, 72, 0.2); border-radius: 12px; text-align: center; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; } /* ─── Dwukolumnowy layout ──────────────────────────────────────────────── */ .auth-page .auth-page-root { width: 100%; max-width: 1200px; margin: 0 auto; padding: 85px 0 142px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; gap: 0; } .auth-page .auth-column { flex: 1; min-width: 0; } .auth-page .auth-divider { width: 1px; align-self: stretch; background-color: #dfe1e6; flex-shrink: 0; } /* ─── Jednokolumnowy (centered) layout ─────────────────────────────────── */ .auth-page .auth-centered-root { width: 100%; max-width: 1200px; margin: 0 auto; padding: 85px 0 142px; display: flex; justify-content: center; } .auth-page .auth-centered-column { width: 100%; max-width: 480px; padding: 0 24px; } .auth-page .auth-centered-column--wide { max-width: 720px; } .auth-page .auth-centered-section { width: 100%; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; gap: 24px; } .auth-page .auth-centered-title { width: 100%; margin: 0; text-align: center; color: #22252a; font-family: 'Parkinsans', 'Helvetica Neue', Arial; font-size: 28px; line-height: 33.6px; font-weight: 400; } .auth-page .auth-centered-description { width: 100%; color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; text-align: center; } .auth-page .auth-centered-description p { margin: 0 0 8px 0; } .auth-page .auth-centered-description p:last-child { margin-bottom: 0; } .auth-page .auth-centered-description strong { color: #22252a; font-weight: 500; } .auth-page .auth-centered-description a { color: #22252a; text-decoration: underline; } .auth-page .auth-centered-description a:hover { color: #e40148; } .auth-page .auth-centered-main { width: 100%; display: flex; flex-flow: column; align-items: center; gap: 16px; } .auth-page .auth-centered-form { width: 100%; display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 12px; } .auth-page .auth-centered-back-link { background: none; border: none; padding: 0; cursor: pointer; color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; text-decoration: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-underline-position: from-font; } .auth-page .auth-centered-back-link:hover { color: #e40148; } /* ─── Texty pomocnicze ─────────────────────────────────────────────────── */ .auth-page .auth-section-intro, .auth-page .auth-secondary-text, .auth-page .auth-success-text, .auth-page .auth-contact-note { color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; margin: 0 0 8px 0; } .auth-page .auth-secondary-text, .auth-page .auth-contact-note { color: #9096a3; } .auth-page .auth-success-text { color: #0daa76; font-weight: 500; } /* ─── Submit button (redesign primary, używany jak `auth-submit-btn`) ───── */ .auth-page .auth-submit-btn { width: 100%; min-width: 0; border: 1px solid transparent; outline: none; white-space: nowrap; padding: 0 20px; height: 40px; border-radius: 20px; text-transform: uppercase; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; cursor: pointer; text-decoration: none; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; gap: 8px; color: #ffffff; background-color: #e40148; border-color: #e40148; } .auth-page .auth-submit-btn:hover:not([disabled]) { background-color: #c10039; border-color: #c10039; } .auth-page .auth-submit-btn--danger { background-color: #e40148; border-color: #e40148; } .auth-page .auth-submit-btn--danger-outline { background-color: transparent; border-color: #e40148; color: #e40148; } .auth-page .auth-submit-btn--danger-outline:hover:not([disabled]) { background-color: rgba(228, 1, 72, 0.08); color: #e40148; } /* ─── Overrides dla istniejących klas (legacy bootstrap/old design) ────── */ /* btn-red (stary primary) → wyglądamy jak .btn--primary z redesignu */ .auth-page .btn-red, .auth-page .btn-login-button.btn-red { background-color: #e40148; border-color: #e40148; color: #ffffff; border-radius: 20px; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 700; text-transform: uppercase; padding: 0 20px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .auth-page .btn-red:hover:not([disabled]), .auth-page .btn-login-button.btn-red:hover:not([disabled]) { background-color: #c10039; border-color: #c10039; } /* btn-blue / btn-primary (legacy outline) */ .auth-page .btn-blue, .auth-page .btn-primary { background-color: transparent; border: 1px solid #22252a; color: #22252a; border-radius: 20px; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 700; text-transform: uppercase; padding: 0 20px; height: 40px; } /* ─── Crispy / bootstrap form output overrides ─────────────────────────── * * Wszystkie wrap'y (.login-crispy-wrap, .signup-crispy-wrap, .auth-crispy-wrap) * stylizujemy tak samo — tu są reguły dla outputu crispy_forms + bootstrap. */ .auth-page .login-crispy-wrap, .auth-page .signup-crispy-wrap, .auth-page .auth-crispy-wrap { width: 100%; display: flex; flex-flow: column; gap: 24px; } /* Reset bootstrap row/col w środku crispy outputu */ .auth-page .login-crispy-wrap .row, .auth-page .signup-crispy-wrap .row, .auth-page .auth-crispy-wrap .row { display: flex; flex-flow: column; margin: 0; width: 100%; } .auth-page .login-crispy-wrap [class*="col-"], .auth-page .signup-crispy-wrap [class*="col-"], .auth-page .auth-crispy-wrap [class*="col-"] { flex: 1 1 100%; max-width: 100%; padding: 0; } /* Wrapper pojedynczego pola — form-group (bs4) lub mb-3 (bs5) */ .auth-page .login-crispy-wrap .form-group, .auth-page .signup-crispy-wrap .form-group, .auth-page .auth-crispy-wrap .form-group, .auth-page .login-crispy-wrap .mb-3, .auth-page .signup-crispy-wrap .mb-3, .auth-page .auth-crispy-wrap .mb-3 { margin: 0; padding: 0; width: 100%; display: flex; flex-flow: column; gap: 0; } /* Label */ .auth-page .login-crispy-wrap label, .auth-page .signup-crispy-wrap label, .auth-page .auth-crispy-wrap label, .auth-page .login-crispy-wrap .form-label, .auth-page .signup-crispy-wrap .form-label, .auth-page .auth-crispy-wrap .form-label, .auth-page .login-crispy-wrap .control-label, .auth-page .signup-crispy-wrap .control-label, .auth-page .auth-crispy-wrap .control-label { margin: 0 0 4px 0; padding: 0; color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; text-align: left; } .auth-page .login-crispy-wrap label.requiredField .asteriskField, .auth-page .signup-crispy-wrap label.requiredField .asteriskField, .auth-page .auth-crispy-wrap label.requiredField .asteriskField { color: #e40148; margin-left: 2px; } /* W login skrywamy labels — design ma tylko placeholder */ .auth-page .login-crispy-wrap label { display: none; } /* Input — wszystkie typy text/email/password */ .auth-page .login-crispy-wrap input[type="text"], .auth-page .login-crispy-wrap input[type="email"], .auth-page .login-crispy-wrap input[type="password"], .auth-page .signup-crispy-wrap input[type="text"], .auth-page .signup-crispy-wrap input[type="email"], .auth-page .signup-crispy-wrap input[type="password"], .auth-page .auth-crispy-wrap input[type="text"], .auth-page .auth-crispy-wrap input[type="email"], .auth-page .auth-crispy-wrap input[type="password"], .auth-page .login-crispy-wrap .form-control, .auth-page .signup-crispy-wrap .form-control, .auth-page .auth-crispy-wrap .form-control, .auth-page .login-crispy-wrap .textinput, .auth-page .signup-crispy-wrap .textinput, .auth-page .auth-crispy-wrap .textinput { width: 100%; height: 40px; background-color: #ffffff; padding: 0 16px; color: #020408; border: 1px solid #dfe1e6; border-radius: 20px; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; box-sizing: border-box; outline: none; box-shadow: none; } .auth-page .login-crispy-wrap input::placeholder, .auth-page .signup-crispy-wrap input::placeholder, .auth-page .auth-crispy-wrap input::placeholder, .auth-page .login-crispy-wrap .form-control::placeholder, .auth-page .signup-crispy-wrap .form-control::placeholder, .auth-page .auth-crispy-wrap .form-control::placeholder { color: #9096a3; } .auth-page .login-crispy-wrap input:focus, .auth-page .signup-crispy-wrap input:focus, .auth-page .auth-crispy-wrap input:focus, .auth-page .login-crispy-wrap .form-control:focus, .auth-page .signup-crispy-wrap .form-control:focus, .auth-page .auth-crispy-wrap .form-control:focus { border-color: #9096a3; outline: none; box-shadow: none; } .auth-page .login-crispy-wrap .is-invalid, .auth-page .signup-crispy-wrap .is-invalid, .auth-page .auth-crispy-wrap .is-invalid, .auth-page .login-crispy-wrap input[aria-invalid="true"], .auth-page .signup-crispy-wrap input[aria-invalid="true"], .auth-page .auth-crispy-wrap input[aria-invalid="true"] { border-color: #e40148 !important; background-image: none !important; padding-right: 16px !important; } /* Komunikaty błędów */ .auth-page .login-crispy-wrap .errorlist, .auth-page .signup-crispy-wrap .errorlist, .auth-page .auth-crispy-wrap .errorlist, .auth-page .login-crispy-wrap .invalid-feedback, .auth-page .signup-crispy-wrap .invalid-feedback, .auth-page .auth-crispy-wrap .invalid-feedback, .auth-page .login-crispy-wrap .text-danger, .auth-page .signup-crispy-wrap .text-danger, .auth-page .auth-crispy-wrap .text-danger { display: block; list-style: none; margin: 2px 0 0 0; padding: 0; color: #e40148; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 12px; line-height: 16.8px; font-weight: 400; } .auth-page .login-crispy-wrap .errorlist li, .auth-page .signup-crispy-wrap .errorlist li, .auth-page .auth-crispy-wrap .errorlist li { margin: 0; padding: 0; } /* Pomocnicze teksty (help_text) */ .auth-page .login-crispy-wrap .form-text, .auth-page .signup-crispy-wrap .form-text, .auth-page .auth-crispy-wrap .form-text, .auth-page .login-crispy-wrap .helptext, .auth-page .signup-crispy-wrap .helptext, .auth-page .auth-crispy-wrap .helptext { margin: 4px 0 0 0; color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 12px; line-height: 16.8px; } /* Checkbox — accept_terms (przez AcceptTermsMixin / AcceptTermsParagraphMixin) */ .auth-page .signup-crispy-wrap input[type="checkbox"], .auth-page .auth-crispy-wrap input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 8px 0 0; cursor: pointer; accent-color: #22252a; flex-shrink: 0; } .auth-page .signup-crispy-wrap .form-check, .auth-page .auth-crispy-wrap .form-check, .auth-page .signup-crispy-wrap .checkbox, .auth-page .auth-crispy-wrap .checkbox { width: 100%; margin: 4px 0; padding: 0; display: flex; flex-flow: row; align-items: flex-start; gap: 0; } .auth-page .signup-crispy-wrap .form-check-label, .auth-page .auth-crispy-wrap .form-check-label, .auth-page .signup-crispy-wrap .form-check label, .auth-page .auth-crispy-wrap .form-check label, .auth-page .signup-crispy-wrap .checkbox label, .auth-page .auth-crispy-wrap .checkbox label { display: inline; margin: 0; color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; cursor: pointer; } .auth-page .signup-crispy-wrap .form-check-label a, .auth-page .auth-crispy-wrap .form-check-label a, .auth-page .signup-crispy-wrap .form-check label a, .auth-page .auth-crispy-wrap .form-check label a, .auth-page .signup-crispy-wrap .checkbox label a, .auth-page .auth-crispy-wrap .checkbox label a { color: #22252a; font-weight: 500; text-decoration: underline; } .auth-page .signup-crispy-wrap .form-check-label a:hover, .auth-page .auth-crispy-wrap .form-check-label a:hover, .auth-page .signup-crispy-wrap .checkbox label a:hover, .auth-page .auth-crispy-wrap .checkbox label a:hover { color: #e40148; } /* AcceptTermsParagraphMixin renderuje paragraph — wycentruj i wystylizuj */ .auth-page .signup-crispy-wrap p, .auth-page .auth-crispy-wrap p { color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; margin: 4px 0; } /* ─── Toggle stanu (intermediate ↔ formularz) ──────────────────────────── */ .auth-page .auth-signup-container[data-auth-state="register"] .signup-section { display: none; } .auth-page .auth-signup-container[data-auth-state="signup"] .register-section { display: none; } /* ─── Email management — lista adresów ─────────────────────────────────── */ .auth-page .auth-dashboard-section { width: 100%; max-width: 720px; margin: 0 auto; } .auth-page .auth-dashboard-form { max-width: 480px; margin: 0 auto; } .auth-page .email-list { width: 100%; border: 1px solid #dfe1e6; border-radius: 12px; padding: 12px; margin: 0 0 24px 0; display: flex; flex-flow: column; gap: 8px; } .auth-page .email-list-item { padding: 16px 20px; border-radius: 8px; background-color: #ffffff; } .auth-page .email-list-item:hover { background-color: #f8f9fb; } .auth-page .email-list-form { display: flex; flex-flow: column; gap: 16px; } .auth-page .email-list-text { display: flex; flex-flow: column; gap: 4px; } .auth-page .email-list-address { color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 500; word-break: break-all; } .auth-page .email-list-badges { display: inline-flex; flex-flow: row wrap; gap: 6px; } .auth-page .email-list-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 100px; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 12px; line-height: 16.8px; font-weight: 500; } .auth-page .email-list-badge--verified { background-color: rgba(13, 170, 118, 0.15); color: #0daa76; } .auth-page .email-list-badge--unverified { background-color: rgba(228, 1, 72, 0.15); color: #e40148; } .auth-page .email-list-badge--primary { background-color: #f8f9fb; color: #22252a; } .auth-page .email-actions { display: flex; flex-flow: row wrap; gap: 8px; justify-content: flex-end; } .auth-page .email-add-title { width: 100%; margin: 24px 0 16px 0; text-align: center; color: #22252a; font-family: 'Parkinsans', 'Helvetica Neue', Arial; font-size: 20px; line-height: 26px; font-weight: 400; } /* ─── Responsive (< 992px) ──────────────────────────────────────────────── */ @media only screen and (max-width: 991px) { .auth-page .auth-page-root { flex-direction: column; padding: 24px 16px; gap: 40px; } .auth-page .auth-column { width: 100%; } .auth-page .auth-divider { width: 100%; height: 1px; align-self: auto; } .auth-page .auth-centered-root { padding: 24px 16px; } .auth-page .auth-centered-column { padding: 0; } .auth-page .auth-banner-alert { margin: 16px 0 0; } .auth-page .email-actions { flex-direction: column; } .auth-page .email-actions .btn { width: 100%; } } /* =========================================================================== * Login Section — lewa kolumna (formularz + przyciski social) * Źródło: src/modules/auth/components/LoginSection.module.scss * =========================================================================== */ .auth-page .login-section { flex: 1; padding: 0 114px 0 102px; display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 32px; } .auth-page .login-section-title { width: 100%; margin: 0; text-align: center; color: #22252a; font-family: 'Parkinsans', 'Helvetica Neue', Arial; font-size: 28px; line-height: 33.6px; font-weight: 400; } .auth-page .login-register-modal-link { text-align: center; color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; margin: 0; } .auth-page .login-register-modal-link .link { color: #22252a; text-decoration: underline; cursor: pointer; font-weight: 500; } .auth-page .login-form { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 24px; } .auth-page .login-iframe-tos { margin: 8px 0 0 0; color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 12px; line-height: 16.8px; } /* "Nie pamiętam hasła" — link generowany przez FaniLoginForm w layoucie crispy. Dodaj do klasę login-forgot-link (najpewniejszy hook). Selektory po href zostają jako fallback. Wyrównanie przez margin-left:auto działa niezależnie od tego, czy rodzic jest flexem czy zwykłym blokiem. */ .auth-page .login-section .login-forgot-link, .auth-page .login-section a[href*="reset_password"], .auth-page .login-section a[href*="password/reset"] { display: block; width: fit-content; margin-left: auto; text-align: right; color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; text-decoration: underline; } /* ─── Sekcja przycisków social ─────────────────────────────────────────── */ .auth-page .login-social { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 16px; } .auth-page .login-social-label { color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; } .auth-page .login-social-buttons { display: flex; flex-flow: row; justify-content: center; align-items: center; gap: 8px; } .auth-page .login-social-btn { width: 40px; height: 40px; border-radius: 100px; border: 1px solid #dfe1e6; background: #ffffff; cursor: pointer; transition: background-color 0.2s ease-in-out; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 0; text-decoration: none; } .auth-page .login-social-btn:hover:not([disabled]) { background-color: #f8f9fb; } .auth-page .login-social-btn[disabled] { cursor: not-allowed; opacity: 0.7; } .auth-page .login-social-btn img, .auth-page .login-social-btn svg { width: 24px; height: 24px; } /* Apple — dostarczona grafika jest biała (niewidoczna na białym tle), wymuszamy solidnie czarny render przez filter. */ .auth-page .login-social-btn[aria-label="Apple"] img, .auth-page #apple-login img, .auth-page .login-social-btn.apple img, .auth-page .login-social-btn.socialaccount_provider.apple img { filter: brightness(0); } /* Schowaj stare etykiety tekstowe wewnątrz social buttonów (zostały z legacy) */ .auth-page .login-social-btn > *:not(img):not(svg) { display: none; } .auth-page .login-tos-info { margin: 0; text-align: center; color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 12px; line-height: 16.8px; } .auth-page .login-tos-info a { color: #22252a; text-decoration: underline; } .auth-page .login-tos-info a:hover { color: #e40148; } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media only screen and (max-width: 991px) { .auth-page .login-section { padding: 0; width: 100%; } } /* =========================================================================== * Register Section — prawa kolumna (zachęta do założenia konta + benefity) * Źródło: src/modules/auth/components/RegisterSection.module.scss * =========================================================================== */ .auth-page .register-section { flex: 1; padding: 0 97px 0 108px; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; gap: 24px; } .auth-page .register-section-title { width: 100%; margin: 0; text-align: center; color: #22252a; font-family: 'Parkinsans', 'Helvetica Neue', Arial; font-size: 28px; line-height: 33.6px; font-weight: 400; } .auth-page .register-create-account-btn { max-width: 200px; } .auth-page .register-benefits-title { width: 100%; margin: 0; text-align: center; color: #22252a; font-family: 'Parkinsans', 'Helvetica Neue', Arial; font-size: 16px; line-height: 22.4px; font-weight: 400; } .auth-page .register-benefits { list-style: none; width: 100%; padding: 0; margin: 0; display: flex; flex-flow: column; justify-content: flex-start; align-items: center; gap: 8px; } .auth-page .register-benefit-item { color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; gap: 8px; } .auth-page .register-benefit-icon { flex-shrink: 0; color: #22252a; } .auth-page .register-extras { width: 100%; margin: 16px 0 0 0; text-align: center; color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 12px; line-height: 16.8px; } .auth-page .register-extras a { color: #22252a; text-decoration: underline; } .auth-page .register-extras a:hover { color: #e40148; } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media only screen and (max-width: 991px) { .auth-page .register-section { padding: 0; width: 100%; } .auth-page .register-benefits { gap: 4px; } .auth-page .register-benefit-item { justify-content: center; } } /* =========================================================================== * Signup Section — prawa kolumna w trybie rejestracji * Źródło: src/modules/auth/components/SignupSection.module.scss * =========================================================================== */ .auth-page .signup-section { flex: 1; padding: 0 97px 0 108px; display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 32px; } .auth-page .signup-section-title { width: 100%; margin: 0; text-align: center; color: #22252a; font-family: 'Parkinsans', 'Helvetica Neue', Arial; font-size: 28px; line-height: 33.6px; font-weight: 400; } .auth-page .signup-form { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 24px; } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media only screen and (max-width: 991px) { .auth-page .signup-section { padding: 0; width: 100%; } } /* =========================================================================== * Forgot Password Section — gdy reset jest w 2-kolumnowym layout'cie * (obecnie reset hasła używa auth-centered, ten plik jest opcjonalny) * =========================================================================== */ .auth-page .forgot-password-section { flex: 1; padding: 0 114px 0 102px; display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 24px; } .auth-page .forgot-password-section-title { width: 100%; margin: 0; text-align: center; color: #22252a; font-family: 'Parkinsans', 'Helvetica Neue', Arial; font-size: 28px; line-height: 33.6px; font-weight: 400; } .auth-page .forgot-password-description { color: #9096a3; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; margin: 0; text-align: center; } .auth-page .forgot-password-form { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-flow: column; gap: 8px; } .auth-page .forgot-password-back-link { align-self: center; background: none; border: none; padding: 0; cursor: pointer; color: #22252a; font-family: 'DMSans', 'Helvetica Neue', Arial; font-size: 14px; line-height: 19.6px; font-weight: 400; text-decoration: underline; } .auth-page .forgot-password-back-link:hover { color: #e40148; } @media only screen and (max-width: 991px) { .auth-page .forgot-password-section { padding: 0; width: 100%; } }