.face-authenticate-modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0000004b;justify-content:center;align-items:center;width:100dvw;height:100dvh;display:flex;position:fixed;top:0;left:0}.face-authenticate-modal .inner-authenticate{background-color:#fff;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;gap:25px;padding:20px;display:flex}.face-authenticate-modal .inner-authenticate .header-section{flex-direction:column;align-items:center;margin-bottom:1.5rem;display:flex}.face-authenticate-modal .inner-authenticate .header-section img{width:auto;height:50px;margin-bottom:.5rem}.face-authenticate-modal .inner-authenticate .header-section h2{color:#1f2937;margin:0;font-size:1.5rem}.face-authenticate-modal .inner-authenticate .header-section p{color:#6b7280;margin-top:.5rem;font-size:.9rem}.face-authenticate-modal .inner-authenticate .video-streaming-section{justify-content:center;align-items:center;height:max-content;display:flex}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container{aspect-ratio:1;background-color:#ffffff5d;border:2px solid #e4e4e4;border-radius:50%;width:320px;max-width:100%;position:relative;overflow:hidden}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container.warning .video-section .face-frame{border:2px solid red}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container.warning .video-section .face-frame.scanning:after{background:red}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container.retry .video-section .face-frame{border:2px solid var(--default-color)}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section{background-color:#fff;width:100%;height:100%}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section .face-frame{aspect-ratio:1;border:2px solid green;border-radius:50%;outline:530px solid #00000068;justify-content:center;align-items:center;width:320px;max-width:100%;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 15px #00ffccb3}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section .face-frame .retry-btn{background-color:var(--default-color);color:#aaa6a6;cursor:pointer;background-color:#0000;border:none;outline:none;width:max-content;height:max-content;padding:5px;font-weight:600;position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%)}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section .face-frame .retry-btn svg{width:35px;height:35px}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section .face-frame .retry-btn:active{transform:translate(-50%,50%)scale(.95)}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section .face-frame:before{content:"";z-index:-1;width:500%;height:500%;position:fixed;top:-200%;left:-200%}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .video-section .face-frame.scanning:after{content:"";z-index:8;background:green;width:100%;height:2px;animation:2s linear infinite scan;position:absolute;left:0}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .auth-demo{background-color:#fff;justify-content:center;align-items:center;width:320px;min-width:100%;height:320px;min-height:100%;display:flex}.face-authenticate-modal .inner-authenticate .video-streaming-section .video-streaming-inner-container .auth-demo video{width:calc(100% + 100px);max-width:calc(100% + 100px);height:calc(100% + 100px);max-height:calc(100% + 100px)}.face-authenticate-modal .inner-authenticate .qr-code-section{background-color:#fff;border:8px solid #e4e4e4;border-radius:10px;padding:10px;display:flex;position:relative;overflow:hidden}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section{text-align:center;background-color:#fff;border-radius:10px;flex-direction:column;align-items:center;gap:10px;display:flex}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section .qr-code{z-index:2;position:relative}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section .qr-code.reload .blur-cover,.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section .qr-code.reload .reload-btn{display:block}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section .qr-code .blur-cover{content:"";-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);width:100%;height:100%;display:none;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute!important}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section .qr-code .reload-btn{content:"";background-color:var(--default-color);color:#fff;border:none;border-radius:50%;outline:none;width:60px;height:60px;padding:0;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section .qr-code .reload-btn:active{transform:translate(-50%,-50%)scale(.95)}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section .qr-code .reload-btn svg{width:calc(100% - 20px);height:calc(100% - 20px)}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section p{width:100%;font-size:14px}.face-authenticate-modal .inner-authenticate .qr-code-section .main-qr-code-section p.title{font-size:20px;font-weight:600}.face-authenticate-modal .inner-authenticate .footer-section{width:80%}.face-authenticate-modal .inner-authenticate .footer-section .progress-bar{background:#eef2f7;border-radius:3px;height:6px;margin-bottom:1.5rem;overflow:hidden}.face-authenticate-modal .inner-authenticate .footer-section .progress-bar:after{content:"";height:100%;width:var(--progress);background:#333;border-radius:3px;display:block}.face-authenticate-modal .inner-authenticate .footer-section .cancel-btn{cursor:pointer;background:#f9f9f9;border:1px solid #ddd;border-radius:8px;width:100%;padding:.8rem;font-weight:500;transition:all .3s}.face-authenticate-modal .inner-authenticate .footer-section .cancel-btn:hover{background:#f0f0f0}@keyframes scan{0%{top:0}to{top:100%}}