#sf-login-popup{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.1);backdrop-filter:blur(2rem);z-index:9999;padding:2rem;transition:all .2s ease}#sf-login-popup .flex-center{display:flex;align-items:center;justify-content:center}#sf-login-popup .login-box{position:relative;margin:0 auto;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-regular);max-width:400px;max-height:700px;width:100%;height:100%;background-color:#fff;border-radius:var(--border-radius-xsmall);overflow-y:auto}#sf-login-popup .login-box .close{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background-color:rgba(243,244,246,.8);cursor:pointer;transition:all .2s ease}#sf-login-popup .login-box .close:hover{background-color:#ff9696;color:#fff}#sf-login-popup .login-box header{flex-direction:column;gap:.5rem}#sf-login-popup .login-box header .logo{width:150px}#sf-login-popup .login-box header .title{display:flex;flex-direction:column;align-items:center;gap:.5rem}#sf-login-popup .login-box header .title p{margin:0;font-size:var(--font-size-large);font-weight:bold;text-align:center}#sf-login-popup .login-box header .title span{font-size:var(--font-size-regular);color:#6b7280}#sf-login-popup .login-box main{max-width:320px;width:100%}#sf-login-popup .login-box main .button{gap:.5rem;border:1px solid #e5e7eb;transition:all .3s ease;border-radius:var(--border-radius-small);height:40px;font-size:15px;font-weight:bold;cursor:pointer}#sf-login-popup .login-box main .button:hover{background-color:rgba(249,250,251,.5);scale:1.05}#sf-login-popup .login-box main .google{position:relative;width:100%;height:40px}#sf-login-popup .login-box main .google .preview{position:absolute;top:0;left:0;width:100%;z-index:0}#sf-login-popup .login-box main .google .g_id_signin{position:relative;z-index:1;transition:all .2s ease}#sf-login-popup .login-box main .google .g_id_signin:hover{scale:1.05}#sf-login-popup .login-box .login-detail{margin-top:var(--spacing-medium)}#sf-login-popup .login-box .toolbar{display:flex;flex-direction:row;padding:4px;height:50px;background-color:rgba(243,244,246,.8);border-radius:var(--border-radius-small)}#sf-login-popup .login-box .toolbar .tab-1{flex:1;border-radius:var(--border-radius-small);font-size:16px;font-weight:bold;cursor:pointer;transition:all .3s ease}#sf-login-popup .login-box .toolbar .tab-1[s-active]{background-color:#fff;box-shadow:0 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0),0 2px 12px rgba(0,0,0,.04)}#sf-login-popup .login-box .detail-box{margin-top:var(--spacing-regular)}#sf-login-popup .login-box .detail-box *[from]{width:100%}#sf-login-popup .login-box .detail-box *[from]:not([s-active]){display:none}#sf-login-popup .login-box .detail-box *[from] .item{display:flex;flex-direction:row;align-items:center;gap:1rem;margin-bottom:.5rem;padding:.5rem;transition:all .3s ease;cursor:default;border-radius:var(--border-radius-small)}#sf-login-popup .login-box .detail-box *[from] .item:hover{background-color:rgba(249,250,251,.8)}#sf-login-popup .login-box .detail-box *[from] .item .icon{flex-shrink:0;width:50px;height:50px;border-radius:999px;background-color:#f3e8ff;color:#a855f7}#sf-login-popup .login-box footer a{color:#a855f7}#sf-login-popup .login-box footer span{color:#a855f7}@media screen and (max-width: 600px){#sf-login-popup{padding:0}#sf-login-popup .login-box{padding:1rem;width:100%;border-radius:0;max-height:none;max-width:none}}