/* --- Safeguards: reset default browser spacing that can push .login-page taller than the viewport (browsers add margin to by default) --- */ html, body { height: 100%; margin: 0; } *, *::before, *::after { box-sizing: border-box; /* make sure padding/border never add extra height */ } .login-page { height: 100vh; height: 100dvh; /* better handling on mobile when address bar shows/hides */ overflow: hidden; /* prevent the whole page from growing beyond viewport */ } .login-page .container-fluid, .login-page .row { height: 100%; /* inherit fixed height, independent of content */ margin: 0; /* remove Bootstrap's default row negative gutter margins */ } .login-page .row > [class*="col"] { padding-left: 0; padding-right: 0; /* remove Bootstrap's default column gutter padding (safe since layout already uses g-0 in markup) */ } .login-left { background: #f6f9fc; position: relative; display: flex; justify-content: center; align-items: center; padding: 6px 20px; overflow: hidden; /* clip left column to its own height */ height: 100%; } .login-wrapper { width: 100%; max-width: 420px; max-height: 100%; /* never taller than .login-left */ overflow-y: auto; /* if form content is taller than viewport, scroll only here */ position: relative; z-index: 2; } .login-wrapper .header-title-wrapper { margin-top: 30px; } h1.header-title { font-size: 32px; color: var(--deep-blue-color-santen); margin-bottom: 10px; } .subtitle { color: #9ca3af; margin-bottom: 25px; } .form-item label{ text-transform: uppercase; } .user-login-form .form-item--remember-me { margin-bottom: 0; margin-left: 0; } .user-login-form .form-item--remember-me label { text-transform: initial; color: var(--grey-color-santen); font-size: 13px; font-weight: 400; padding-left: 0; margin-left: 5px; } .user-login-form .forgot-password-link { color: var(--deep-blue-color-santen); font-size: 13px; font-weight: 400; padding-left: 0; } .form-control { height: 48px; border-radius: 6px; } .register-link { color: var(--grey-color-santen); width: 100%; text-align: center; } .register-link a { color: var(--deep-blue-color-santen); font-weight: 700; } /* Right-side image container: anchor point for the absolutely positioned image */ .login-image { position: relative; height: 100%; overflow: hidden; } /* Base image sizing/cropping behavior */ .login-image img { object-fit: cover; object-position: center; display: block; } /* Override Bootstrap's .img-fluid (height: auto !important) so the image fully fills its container instead of using its natural aspect ratio height. position: absolute also takes the image out of normal flow so it can never push .login-image / .row / .login-page taller than the viewport. */ .login-image img.img-fluid { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; } .circle { position: absolute; border-radius: 50%; background: #d7ecfb; } .circle-top { width: 180px; height: 180px; left: -60px; top: -60px; } .circle-bottom { width: 180px; height: 180px; right: -70px; bottom: -70px; } @media (max-width: 991px) { .login-page { height: auto; /* on mobile the layout stacks vertically and is meant to scroll normally, so release the fixed 100vh lock */ overflow: visible; } .login-page .container-fluid, .login-page .row { height: auto; } .circle { display: none; } .login-left { padding: 0 0 40px; background: none; height: auto; overflow: visible; } .login-wrapper { max-width: none; max-height: none; overflow-y: visible; } .banner-sp-wrapper { position: relative; } .banner-sp-wrapper:after { content: ""; position: absolute; inset: 0; background: #00339999; } .banner-sp-wrapper img { width: 100%; } .group-welcome { position: relative; } .group-welcome .logo-sp { position: absolute; top: 25px; left: 20px; } .group-welcome .header-title-wrapper { position: absolute; bottom: 10px; color: #fff; padding: 0 20px 0; } .group-welcome .header-title-wrapper h1 { color: #fff; } .group-welcome .header-title-wrapper .subtitle { color: #fff; } .form-content-wrapper { margin-top: 30px; padding: 0 30px; } } dl, ol, ul{ margin-bottom: 0rem!important; }