.retrieve-password, .register, .login { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 2rem; } .retrieve-password:deep(.el-form), .register:deep(.el-form), .login:deep(.el-form) { width: 100%; } .retrieve-password:deep(.el-form) .el-form-item, .register:deep(.el-form) .el-form-item, .login:deep(.el-form) .el-form-item { position: relative; margin-bottom: 1.6rem; } .retrieve-password:deep(.el-form) .el-form-item__content, .register:deep(.el-form) .el-form-item__content, .login:deep(.el-form) .el-form-item__content { position: relative; } .retrieve-password:deep(.el-form) .el-form-item__label, .register:deep(.el-form) .el-form-item__label, .login:deep(.el-form) .el-form-item__label { color: #232323; font-size: 1.2rem; margin-bottom: 0.8rem; line-height: 1.5rem; } .retrieve-password:deep(.el-form) .el-input, .register:deep(.el-form) .el-input, .login:deep(.el-form) .el-input { --el-input-height: 3.4rem; --el-input-border-radius: 0; --el-input-text-color: #232323; --el-border-color: #C4C4C4; font-size: 1rem; } .retrieve-password:deep(.el-form) .el-input::placeholder, .register:deep(.el-form) .el-input::placeholder, .login:deep(.el-form) .el-input::placeholder { color: #9F9F9F; } .retrieve-password:deep(.el-form) .password-tip, .register:deep(.el-form) .password-tip, .login:deep(.el-form) .password-tip { position: absolute; z-index: 10; top: -1rem; right: 0; transform: translateY(-100%); } .retrieve-password:deep(.el-form) .password-warning, .register:deep(.el-form) .password-warning, .login:deep(.el-form) .password-warning { --el-checkbox-height: auto; margin-top: -0.6rem; margin-bottom: 1.6rem; display: flex; align-items: center; } .retrieve-password:deep(.el-form) .password-warning > .icon, .register:deep(.el-form) .password-warning > .icon, .login:deep(.el-form) .password-warning > .icon { width: 1.4rem; height: 1.4rem; margin-right: 0.8rem; } .retrieve-password:deep(.el-form) .password-warning > .label, .register:deep(.el-form) .password-warning > .label, .login:deep(.el-form) .password-warning > .label { font-family: KaiseiOpti-Regular; font-size: 1rem; color: #9F9F9F; } .retrieve-password:deep(.el-form) .forgotPassword, .register:deep(.el-form) .forgotPassword, .login:deep(.el-form) .forgotPassword { margin-top: -0.8rem; margin-bottom: 5rem; font-size: 1.1rem; text-align: right; color: #666666; cursor: pointer; text-decoration: underline; font-family: KaiseiOpti-Regular; } .retrieve-password:deep(.el-form) .el-form-item__error, .register:deep(.el-form) .el-form-item__error, .login:deep(.el-form) .el-form-item__error { padding-top: 1px; font-size: 1rem; } .retrieve-password:deep(.el-form) .submit, .register:deep(.el-form) .submit, .login:deep(.el-form) .submit { width: 100%; height: 4rem; font-size: 1.36rem; } .retrieve-password:deep(.el-form) .privacy, .register:deep(.el-form) .privacy, .login:deep(.el-form) .privacy { margin-top: -0.6rem; --el-checkbox-height: auto; } .retrieve-password:deep(.el-form) .privacy .el-checkbox__label, .register:deep(.el-form) .privacy .el-checkbox__label, .login:deep(.el-form) .privacy .el-checkbox__label { font-size: 1.1rem; color: #666666; font-family: KaiseiOpti-Regular; } .retrieve-password:deep(.el-form) .privacy .el-checkbox__label > div > span, .register:deep(.el-form) .privacy .el-checkbox__label > div > span, .login:deep(.el-form) .privacy .el-checkbox__label > div > span { font-family: KaiseiOpti-Bold; text-decoration: underline; cursor: pointer; color: #232323; } .retrieve-password > .other-login, .register > .other-login, .login > .other-login { margin-top: 4rem; }