.login-page{background:var(--spotify-black);width:100%;height:100%}.login-page .login-box{display:flex;flex-flow:column nowrap;align-items:center;padding:32px;box-sizing:border-box}.login-page .login-box .login-logo{width:24px;height:24px;display:block;margin:24px 0 8px}.login-page .login-box .login-logo svg{width:100%;height:100%}.login-page .login-box h1{font-size:33px;height:46.67px;align-content:center;margin-bottom:32px}.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 hr{all:unset;width:100%;display:block;margin:32px 0;border:none;height:1px;background-color:#292929;box-sizing:border-box}.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:24px}.login-page .login-box .login-form .input-box label{height:20px;font-size:.8125rem;font-weight:700;align-content:center;margin-bottom:8px}.login-page .login-box .login-form .input-box .error-massage{height:20px;align-content:center;color:#f3727f;font-weight:400;font-size:.8125rem;margin-block-start:8px;display:none}.login-page .login-box .login-form .input-box .error-massage svg{vertical-align:bottom}.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:block}.login-page .login-box .login-form button{display:block;background:var(--spotify-green);color:#000;border:none;text-align:center;font-weight:800;font-size:1rem;margin-block-end:32px;transition:transform 33ms ease-in-out}.login-page .login-box .login-form button:hover{transform:scale(1.04);background-color:#3be477}.login-page .login-box .sign-box{display:flex;flex-flow:column nowrap;align-items:center}.login-page .login-box .sign-box .account-label{color:var(--spotify-light-gray);font-size:17px;margin-top:10px;height:21.9px}.login-page .login-box .sign-box .account-link{font-size:17px;display:block;height:32.38px;align-content:end;text-decoration:underline}.login-page .login-box .sign-box .account-link:hover{color:#1ed760}@media (width > 767px){.login-page{width:734px;height:668.72px;border-radius:8px}.login-page .login-box{padding:0 0 32px}.login-page .login-box .login-logo{display:block;width:36px;height:36px;margin:32px 0 8px}.login-page .login-box button{width:324px}.login-page .login-box hr{width:73%}.login-page .login-box .login-form{width:324px}.login-page .login-box .login-form .input-box label{font-size:15px}.login-page .login-box .login-form .input-box .error-massage{font-size:14.5px;height:21px;margin-top:8px;align-content:end}.login-page .login-box .login-form .input-box .error-massage svg{vertical-align:text-top}.login-page .login-box .sign-box{width:100%;flex-direction:row;align-items:baseline;justify-content:center}.login-page .login-box .sign-box .account-label{width:99.5px;margin:0;font-size:1rem;align-content:center}}