.login-page{max-width:388px;height:100%;padding:0 32px}.login-page .login-box{width:324px;display:flex;flex-flow:column nowrap;align-items:center;box-sizing:border-box}.login-page .login-box .login-logo{width:40px;height:40px;display:block;margin-block:32px 24px}.login-page .login-box .login-logo svg{width:100%;height:100%}.login-page .login-box h1{font-size:50px;margin-bottom:40px;text-align:center;line-height:1.4;word-spacing:-3px}.login-page .login-box .login-form{width:100%}.login-page .login-box .login-form .input-box{display:flex;flex-flow:column nowrap;align-items:start;justify-content:center;margin-bottom:20px}.login-page .login-box .login-form .input-box label{height:20px;font-size:15px;font-weight:700;align-content:center;margin-bottom:8px}.login-page .login-box .login-form .input-box .error-massage{height:41.9px;color:#f3727f;font-weight:400;font-size:15px;margin-block-start:8px;display:none;line-height:1.4}.login-page .login-box .login-form .input-box .error-massage svg{vertical-align:top;transform:translateY(3px)}.login-page .login-box .login-form .input-box .error-massage p{width:304px;display:inline-block;letter-spacing:-.3px;align-content:baseline}.login-page .login-box .login-form .input-box input{border:1px solid var(--spotify-gray);width:100%;height:48px;border-radius:4px;padding:12px;color:var(--spotify-white)}.login-page .login-box .login-form .input-box input::placeholder{font-weight:600}.login-page .login-box .login-form .input-box input:hover{border-color:#fff}.login-page .login-box .login-form .input-box input:focus{outline:3px solid white}.login-page .login-box .login-form .input-box input:user-invalid:focus{outline:3px solid rgb(237,44,63);border:none}.login-page .login-box .login-form .input-box input:user-invalid{outline:1px solid rgb(237,44,63);border:none}.login-page .login-box .login-form .input-box input:user-invalid+.error-massage{display:inline-block}.login-page .login-box .login-form .sign-btn{display:block;background:var(--spotify-green);color:#000;border:none;text-align:center;font-weight:800;font-size:1rem;transition:transform 33ms ease-in-out;margin-bottom:0}.login-page .login-box .login-form .sign-btn:hover{transform:scale(1.04);background-color:#3be477}.login-page .login-box .center-line{width:100%;position:relative;display:flex;-webkit-box-pack:center;justify-content:center;margin-block:32px}.login-page .login-box .center-line:before{content:" ";height:1px;background-color:var(--essential-subdued, #818181);display:block;position:absolute;top:50%;left:0;right:0}.login-page .login-box .center-line span{padding:0 12px;position:relative;display:inline-block;background:#121212}.login-page .login-box button{width:100%;height:48px;color:var(--spotify-white);border:1px solid var(--button-border);border-radius:48px;padding:7px 23px;margin-bottom:8px;font-weight:700;font-size:1rem;display:flex;flex-flow:row nowrap;align-items:center}.login-page .login-box button .icon{display:inline-block;width:24px;height:24px}.login-page .login-box button .icon svg{width:100%;height:100%}.login-page .login-box button .button-text{flex-grow:1}.login-page .login-box button:nth-of-type(1) .google{background:url(https://accounts.scdn.co/sso/images/new-google-icon.72fd940a229bc94cf9484a3320b3dccb.svg) center center no-repeat}.login-page .login-box button:nth-of-type(2) .facebook{background:url(https://accounts.scdn.co/sso/images/new-facebook-icon.eae8e1b6256f7ccf01cf81913254e70b.svg) center center no-repeat}.login-page .login-box button:nth-of-type(3) .apple{background:url(https://accounts.scdn.co/sso/images/new-apple-icon.e356139ea90852da2e60f1ff738f3cbb.svg) center center no-repeat}.login-page .login-box button:hover{border-color:var(--spotify-white)}.login-page .login-box .sign-box{display:flex;flex-flow:row nowrap;align-items:center;margin-top:3px}.login-page .login-box .sign-box .account-label{color:var(--spotify-light-gray);font-size:17px;height:21.9px;margin-right:3px}.login-page .login-box .sign-box .account-link{font-size:17px;display:block;height:23.8px;text-decoration:underline}.login-page .login-box .sign-box .account-link:hover{color:#1ed760}.login-page .login-box .line{width:100%;position:relative;display:flex;justify-content:center;margin-block:28px}.login-page .login-box .line:before{content:" ";height:1px;background-color:#81818142;display:block;position:absolute;top:50%;left:0;right:0}