Passive Liveness Detection

The web SDK provides two different ways of integrating passive liveness functionality into your project.

You can either use our pre-built components which can be configured and styled for your needs, or you can completely build the UI yourself and make use of our JavaScript API to integrate with our liveness functionality.

Components

The following components are available:

• Passive Component

• Result Component

Passive Component

This component can be found under the Sybrin.Biometrics namespace and is called PassiveComponent.

Full name: Sybrin.Biometrics.PassiveComponent.

It is a component that wraps the passive liveness detection functionality provided by the Sybrin Biometrics JavaScript API and presents it in the form of a simple UI. It's recommended that you use this component if you do not wish to create your own UI and simply want to use the passive liveness functionality provided by the Sybrin Biometrics Web SDK.

With default styling, the passive component appears as follows:

Upon clicking "Start", the user will be prompted with instructions on how to take a viable selfie. Upon proceeding, the user's camera will initialize and the component will display a video feed while waiting for the user to center their face inside the oval. This action can be cancelled, resulting in the onLivenessCancelled event firing.

If an error occurs, the onLivenessError event will fire.

If liveness detection completes, the onLivenessResult event will fire.

Initialization

The passive component can be initialized using the following code:

<div id='passive'></div>

var options = new Sybrin.Biometrics.Options({
    apiKey: 'your-api-key-here', 
    authorizationEndpoint: 'your-auth-endpoint-here',
    passiveLivenessEndpoint: 'your-liveness-endpoint-here',
    // modelPath: '/assets' // Use if your model is located elsewhere
});

// Option 1: Passing an id
var component = new Sybrin.Biometrics.PassiveComponent({ 
    id: 'passive',
    options: options
});

// Option 2: Passing a DOM element
var element = document.getElementById('passive');
var component = new Sybrin.Biometrics.PassiveComponent({ 
    element: element,
    options: options
});

component.initialize();

The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.

During initialization, the passive component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:

Required:

• id (string): ID of the element you wish to use for component initialization. Not required if element is passed.

• element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.

• api (Sybrin.Biometrics.Api): Instance of a JavaScript API that may be pre-configured as desired. Not required if an instance of options is passed.

• options (Sybrin.Biometrics.Options): Configuration options to instantiate Sybrin.Biometrics.Api with. Not required if an instance of api is passed.

Optional:

• correlationId (string): Unique identifier for the case that will be passed down to the back-end if set.

• useModal (boolean): Whether or not to pop the video feed out into a modal. By default, this is true.

• readonlyMode (boolean): Disables all events if true. Default false.

For altering component text or implementing localization if required:

• headingText (string): Text to display in the heading. Default "Take selfie"

• subtitleText (string): Text to display in the subtitle. Default "Take a photo"

• perfectSelfieText (string): Prompt to display above selfie instructions. Default "Guidelines to the perfect selfie"

• startButtonText (string): Text to display in the start button. Default "Start"

• gotitButtonText (string): Text to display in the proceed button of the instructions screen. Default "Got it!"

• cancelButtonText (string): Text to display in the cancel button. Default "Cancel"

• companyText (string): Company text to display at the foot of the component. Default "Sybrin"

• cameraAccessInstructionText (string): Instruction text stating to allow camera access. Default "Allow camera access when prompted"

• lightingInstructionText (string): Instruction text stating to ensure proper lighting conditions. Default "Ensure good lighting with no bright lights in background"

• accessoriesInstructionText (string): Instruction text stating to remove facial and/or topical accessories. Default "Remove hats, sunglasses and headsets"

• alignmentInstructionText (string): Instruction text stating to ensure correct alignment. Default "Ensure correct alignment"

• facePositionInstructionText (string): Instruction text stating to ensure face is positioned in frame. Default "Position face in frame"

• faceAmountInstructionText (string): Instruction text stating to ensure that only one face is in the frame. Default "Only one face must be in frame"

• followInstructionText (string): Instruction text stating to follow the on-screen prompts. Default "Follow on-screen instructions"

Destruction

The passive component may be removed from the UI by calling the destroy() function on it.

Example:

component.destroy();

Events

The passive component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

• onLivenessResult(result: PassiveLivenessResult)

• onLivenessError(error: string)

• onLivenessCancelled()

• onBeforeLiveness()

On Liveness Result

This function is called when a liveness result is acquired without error and includes liveness true and false results. To hook onto the event, you may use the following code:

component.onLivenessResult = function(result) {
    console.log('Alive: ', result.alive);
    console.log('Confidence: ', result.confidence);
}

The result parameter is of type PassiveLivenessResult and includes the following properties:

• alive (boolean): Whether or not the liveness detection passed.

• confidence (float): Confidence in liveness. 0 is no confidence. 1 is full confidence.

On Liveness Error

This function is called when something goes wrong and an error occurs during liveness detection. To hook onto the event, you may use the following code:

component.onLivenessError = function(error) {
    console.log('An error occurred: ', error);
}

The error parameter is of type string.

On Liveness Cancelled

This function is called when liveness detection was started, but then cancelled before completion. To hook onto the event, you may use the following code:

component.onLivenessCancelled = function() {
    // Your code here
}

No parameter is passed to this function call.

On Before Liveness

This function is called before the camera is launched when passive liveness detection starts. It is recommended to use this function to set the correlationId of the component by calling setCorrelationId(). To hook onto the event, you may use the following code:

component.onBeforeLiveness = function() {
    // Your code here
    // component.setCorrelationId('your-id-here');
}

No parameter is passed to this function call.

Styling

The passive component is structured a follows:

<div class="sybrin-biometrics-passive">
    <h2 class="sybrin-biometrics-passive-heading"></h2>
    <p class="sybrin-biometrics-passive-subtitle"></p>
    <div class="sybrin-biometrics-passive-image">
    </div>
    <div class="sybrin-biometrics-passive-instructions" style="display: none">
    </div>
    <div class="sybrin-biometrics-passive-video" style="display: none">
    </div>
    <p class="sybrin-biometrics-passive-button">
        <button class="sybrin-biometrics-passive-start"></button>
        <button class="sybrin-biometrics-passive-gotit" style="display: none"></button>
        <button class="sybrin-biometrics-passive-cancel" style="display: none"></button>
    </p>
    <p class="sybrin-biometrics-passive-company"></p>
</div>

The classes and elements specified above may be used to freely style the passive component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.

When idle...

• sybrin-biometrics-passive-image is shown

• sybrin-biometrics-passive-video is hidden

• sybrin-biometrics-passive-start is shown

• sybrin-biometrics-passive-cancel is hidden

When running a liveness test...

• sybrin-biometrics-passive-image is hidden

• sybrin-biometrics-passive-video is shown

• sybrin-biometrics-passive-start is hidden

• sybrin-biometrics-passive-cancel is shown

Styling implementation example:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

.sybrin-biometrics-passive-button button {
    background: #963296;
}

Result Component

This component can be found under the Sybrin.Biometrics namespace and is called ResultComponent.

Full name: Sybrin.Biometrics.ResultComponent.

It is a component that displays the result of a liveness detection provided by the Sybrin Biometrics JavaScript API and presents it in the form of a UI component. It's recommended that you use this component if you do not wish to create your own UI and simply want to display a result provided by a completion of the Sybrin Biometrics Web SDK liveness detection.

The liveness result may be obtained by either using an instance of the JavaScript API or by using a liveness detection component such as PassiveComponent to run a liveness test.

With default styling, the result component appears as follows:

Upon clicking "Continue", the onContinue event will fire.

Upon clicking "Retry", the onRetry event will fire.

Initialization

The result component can be initialized using the following code:

<div id='result'></div>

// Option 1: Passing an id
var component = new Sybrin.Biometrics.ResultComponent({ 
    id: 'result',
    result: result
});

// Option 2: Passing a DOM element
var element = document.getElementById('result');
var component = new Sybrin.Biometrics.ResultComponent({ 
    element: element,
    result: result
});

component.initialize();

The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.

During initialization, the result component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:

Required:

• id (string): ID of the element you wish to use for component initialization. Not required if element is passed.

• element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.

• result (Sybrin.Biometrics.PassiveLivenessResult): The Sybrin.Biometrics.PassiveLivenessResult instance to construct the UI with.

For altering component text or implementing localization if required:

• headingText (string): Text to display in the heading. Default "Selfie result"

• subtitleSuccessText (string): Success text to display in the subtitle. Default "Your selfie was captured successfully"

• subtitleFailText (string): Fail text to display in the subtitle. Default "Your selfie could not be captured"

• continueButtonText (string): Text to display in the continue button. Default "Continue"

• retryButtonText (string): Text to display in the retry button. Default "Retry"

• companyText (string): Company text to display at the foot of the component. Default "Sybrin"

Destruction

The passive component may be removed from the UI by calling the "destroy()" function on it.

Example:

component.destroy();

Events

The result component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

• onContinue()

• onRetry()

On Continue

This function is called when the user clicks on the continue button. To hook onto the event, you may use the following code:

component.onContinue = function() {
    // Your code here
}

No parameter is passed to this function call.

On Retry

This function is called when the user clicks on the retry button. To hook onto the event, you may use the following code:

component.onRetry = function() {
    // Your code here
}

No parameter is passed to this function call.

Styling

The result component is structured a follows:

<div class="sybrin-biometrics-result">
    <h2 class="sybrin-biometrics-result-heading"></h2>
    <h4 class="sybrin-biometrics-result-subtitle"></h4>
    <div class="sybrin-biometrics-result-image">
    </div>
    <p class="sybrin-biometrics-result-button">
        <button class="sybrin-biometrics-result-continue"></button>
        <button class="sybrin-biometrics-result-retry"></button>
    </p>
    <p class="sybrin-biometrics-result-company"></p>
</div>

The classes and elements specified above may be used to freely style the result component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.

When alive is true...

• sybrin-biometrics-result-continue is shown

• sybrin-biometrics-result-retry is hidden

When alive is false...

• sybrin-biometrics-result-continue is hidden

• sybrin-biometrics-result-retry is shown

Styling implementation example:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

.sybrin-biometrics-result-button button {
    background: #963296;
}

JavaScript API

If you wish to use the functionality provided by the Sybrin Biometrics Web SDK but create your own UI entirely, you may achieve this by simply creating an instance of the JavaScript API and using the functions exposed by it.

Initialization

The JavaScript API may be initialized as follows:

var options = new Sybrin.Biometrics.Options({
    apiKey: 'your-api-key-here', 
    authorizationEndpoint: 'your-auth-endpoint-here'
    passiveLivenessEndpoint: 'your-liveness-endpoint-here',
    // modelPath: 'assets' // Use if your model is located elsewhere
});

var biometrics = new Sybrin.Biometrics.Api();

biometrics.initialize(options);

The options object may be used to configure the API as desired.

Configuration Options

The following properties are exposed as configuration options:

Required

• apiKey (string): Your API key as provided by Sybrin.

• authorizationEndpoint (string): The endpoint that will be used to authorize.

• passiveLivenessEndpoint (string): The endpoint that will be used to execute passive liveness detection.

Optional

• assetHeaders: (dictionary<string, any>): A dictionary of strings as keys and any value types, used to construct request headers when performing asset retrievals.

• authHeaders: (dictionary<string, any>): A dictionary of strings as keys and any value types, used to construct request headers when performing the authorization API call.

• blurThreshold (number): The threshold that the blur detection algorithm must pass for the image to be considered clear enough. A higher value is more strict. A lower value is less strict. Default 5.5

• faceDetectionModel (string: express | complex): Which face detection model to use on the UI. Express is faster and smaller, but slightly less accurate. Complex is slower and significantly larger, but slightly more accurate. The default value is "express".

• faceDetectionScoreThreshold (float): The UI-side threshold for facial detection confidence. The default value is 0.15.

• faceDistanceThreshold (number): The distance threshold for the face to be considered close enough, where 0.9 is the closest and 0.1 is the furthest. Default 0.5.

• mediaStreamStartTimeout (integer): The time (in milliseconds) that the SDK is given to enable and hook onto the user's camera before it times out. The default value is 6000.

• modelPath (string): Path to the model used for UI-side facial detection. The default value is "assets".

• overexposedThreshold (number): The percentage of overexposed pixels that should be present for an image to be considered overexposed. Default 50.

• overexposedValue (number): The grayscale RGB value (0-255) that a pixel's color must be larger than in order to be considered overexposed. Default 220.

• passiveLivenessHeaders: (dictionary<string, any>): A dictionary of strings as keys and any value types, used to construct request headers when performing the passive liveness API call.

• passiveLivenessModelNumber (string): The version number of the server-side model used for liveness detection. The default value is "7".

• passiveLivenessParamName (string): The parameter name of the image to run passive liveness detection on. The default value is "media".

• underexposedThreshold (number): The percentage of underexposed pixels that should be present for an image to be considered underexposed. Default 40.

• underexposedValue (number): The grayscale RGB value (0-255) that a pixel's color must be smaller than in order to be considered underexposed. Default 30.

• videoInterval (integer): The interval (in milliseconds) at which the video stream is analyzed for faces during liveness detection. The default and minimum value is 500.

Component text and localization

• messageAlignment (string): Text prompt to display if a misaligned face is detected. Default "Please center face and open your eyes"

• messageBlurry (string): Text prompt to display when the video feed is too blurred. Default "Image too blurry"

• messageDistance (string): Text prompt to display if the face is too far away. Default "Please move closer to the camera"

• messageLightingBright (string): Text prompt to display when the video feed is overexposed. Default "Lighting conditions too bright"

• messageLightingDark (string): Text prompt to display when the video feed is underexposed. Default "Lighting conditions too dark"

• messageNoFace (string): Text prompt to display while no face is detected. Default "Scanning for face..."

• messagePreparing (string): Text prompt to display while initializing the video stream. Default "Preparing..."

• messageSuccess (string): Text prompt to display after a successful image capture. Default "Good job!"

Functionality

The Sybrin Biometrics Javascript API provides multiple ways of running liveness detection and other functions to control the Web SDK.

These include:

• Run Liveness Using Camera

• Cancel

Additionally, the API provides:

• Version Information Retrieval

• Client Information Retrieval

Run Liveness Using Camera

To use the camera for passive liveness detection, you may make use of the openPassiveLivenessDetection function exposed by the JavaScript API.

Optionally, you may pass an object literal as a parameter and specify either id or element as a property.

If no parameter is passed, the Web SDK will temporarily inject a full screen element to display the video feed. If id (type string) or element (type HTMLElement) is passed, the Web SDK will create the video feed inside the passed element or element matching the passed ID.

You may also optionally pass a correlationId value to associate the result with a specific case.

The function returns a promise, so you may choose to use either the asynchronous await pattern or to subscribe to the result using .then(), .catch() and .finally().

Example:

<button onclick="openPassiveLivenessDetection()">Start Liveness Detection</button>

// Option 1: Asynchronous await
var openPassiveLivenessDetection = async function() {
    try {
        var result = await biometrics.openPassiveLivenessDetection();
        
        console.log('Alive: ', result.alive);
        console.log('Confidence: ', result.confidence);
    } catch (error) {
        console.log('An error occurred: ', error);
    } finally {
        console.log('Done');
    }
};

// Option 2: Subscription
var openPassiveLivenessDetection = function() {
    biometrics.openPassiveLivenessDetection().then(function(result) {
        console.log('Alive: ', result.alive);
        console.log('Confidence: ', result.confidence);
    }).catch(function(error) {
        console.log('An error occurred: ', error);
    }).finally(function() {
        console.log('Done');
    });
};

Cancel

A function to cancel any action that the biometrics Web SDK is currently executing. This is useful if you wish to add a cancel button to the UI so that the user may stop liveness detection while it's in progress.

Example:

<button onclick="cancel()">Cancel</button>

var cancel = function() {
    biometrics.cancel();
};

Version Information Retrieval

To get all version info regarding the Web SDK and its components, the API exposes a function called getVersionInfo.

Usage example:

biometrics.getVersionInfo().then(function(result) {
    console.log(result);
}).catch(function(error) {
    console.log('An error occurred: ', error);
}).finally(function() {
    console.log('Done');
});

The result has the following properties:

• webSdkVersion (string): The semantic version number of the JavaScript web SDK that is currently in use.

Client Information Retrieval

To get all version info regarding the client environment in which the application is currently running, the API exposes a function called getClientInfo.

Usage example:

biometrics.getClientInfo().then(function(result) {
    console.log(result);
}).catch(function(error) {
    console.log('An error occurred: ', error);
}).finally(function() {
    console.log('Done');
});

The result is of type ClientInfo and has the following properties:

• isMobile (boolean): Whether or not the client environment is mobile (tablet or phone).

• isMobileAndroid (boolean): Whether or not the client environment is running Android.

• isMobileBlackberry (boolean): Whether or not the client environment is running Blackberry.

• isIphone (boolean): Whether or not the client environment is running on an iPhone.

• isIpad (boolean): Whether or not the client environment is running on an iPad.

• isIpadPro (boolean): Whether or not the client environment is running on an iPad Pro.

• isIpod (boolean): Whether or not the client environment is running on iPod.

• isMobileIos (boolean): Whether or not the client environment is running iOS.

• isMobileOpera (boolean): Whether or not the client environment is mobile Opera.

• isMobileWindows (boolean): Whether or not the client environment is Windows Mobile.

• isMac (boolean): Whether or not the client environment is running on Mac.

Demo Application

This is a code example that fully incorporates the Sybrin Biometrics Web SDK. To use the above example, please ensure the following:

• You have an API key as provided by Sybrin

• You have the backend API endpoints for authentication and liveness as provided by Sybrin

Then follow these steps:

1. Download the sybrin-biometrics-websdk-demo-application.zip file linked above

2. Extract the zip file contents

3. Open index.js

4. In index.js, replace 'your-api-key-here' with the API key provided by Sybrin

5. In index.js, replace 'your-auth-endpoint-here' with your backend authorization API endpoint

6. In index.js, replace 'your-liveness-endpoint-here' with your backend liveness API endpoint

7. Host the folder in any hostable environment, e.g. IIS

For your convenience in formulating custom styling for all components, sybrin.biometrics.css is also provided as a base example below.

<!DOCTYPE html>
<html class="" lang="en" id="html">

<head>
    <title>
        Sybrin Biometrics
    </title>

    <base href="./" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script src="sybrin.biometrics.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css" media="screen" />
</head>

<body>
    <header>
        <div class="branding">
            <img class="logo"
                src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Sybrin-Logo-Horizontal-Blue.svg" />
        </div>
        <div class="branding">
            <span class="title">Sybrin Web SDK - Biometrics</span>
        </div>
        <div class="actions">
            <button onclick="openPassiveLivenessDetection()">Run Passive Liveness</button>
        </div>
    </header>
    <div id="viewport">
        <div class="sybrin-demo-loading"> Please wait. Loading... </div>
    </div>
</body>

</html>

var biometrics;
var detectionModel = 'express';

var openPassiveLivenessDetection = async function () {
    try {
        const response = await biometrics.openPassiveLivenessDetection();
        alert(`alive: ${response.alive} confidence: ${response.confidence}`);
    } catch (error) {
        alert(`Error! ${error}`);
    }
}

document.addEventListener('DOMContentLoaded', function (event) {
    var options = new Sybrin.Biometrics.Options({
        apiKey: 'your-api-key-here',
        authorizationEndpoint:  'your-auth-endpoint-here',
        passiveLivenessEndpoint: 'your-liveness-endpoint-here',
        faceDetectionModel: detectionModel
        // modelPath: 'assets' // Use if your model is located elsewhere
    });

    biometrics = new Sybrin.Biometrics.Api();
    biometrics.initialize(options);
    biometrics.getVersionInfo().then(versionInfo => {
        document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Biometrics (version ' + versionInfo.webSdkVersion + ')';
    });

    var passiveComponent = null;
    var resultComponent = null;

    var initPassive = async () => {
        if (resultComponent) {
            resultComponent.destroy();
        }

        var clientInfo = await biometrics.getClientInfo();

        passiveComponent = new Sybrin.Biometrics.PassiveComponent({
            id: 'viewport',
            api: biometrics,
            useModal: (!clientInfo.isMobile)
        });

        passiveComponent.initialize();

        passiveComponent.onLivenessResult = (result) => {
            initResult(result);
        }

        passiveComponent.onLivenessError = (error) => {
            alert(`${error}`);
        }

        passiveComponent.onLivenessCancelled = () => {
            console.log('Operation cancelled');
        }
    };

    var initResult = (result) => {
        if (passiveComponent) {
            passiveComponent.destroy();
        }

        resultComponent = new Sybrin.Biometrics.ResultComponent({
            id: 'viewport',
            result: result
        });

        resultComponent.initialize();

        resultComponent.onRetry = resultComponent.onContinue = () => {
            initPassive();
        };
    };

    initPassive();
});

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #2d2d46;
    margin: 0;
    padding: 0;
}

header {
    background-color: white;
    margin-bottom: 50px;
    padding: 15px 60px;
    overflow: auto;
}

header .branding {
    float: left;
}

header .actions {
    float: right;
}

header img {
    height: 33px;
    padding-top: 3px;
}

header span.title {
    display: inline-block;
    line-height: 1;
    border-radius: 50rem !important;
    margin-left: 0.5rem !important;
    padding: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    background: rgba(0, 0, 30, 0.05) !important;
    color: rgba(0, 0, 30, 0.824) !important;
    margin-top: 4px;
}

header button {
    font: 300 1em/2em Roboto, sans-serif;
    padding: 0.25rem 1rem;
    border-radius: 50rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    border: none;
    color: #fff !important;
    background: linear-gradient(160deg, #00fafa 0, #3264fa 100%);
    box-shadow: 0 15px 30px -10px #3264fa !important;
    cursor: pointer;
}

@media screen and (max-width: 700px) {
    header {
        display: none;
    }
}

.sybrin-demo-loading {
    color: white;
    padding: 20px;
}

.sybrin-biometrics-passive {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e4e5e8;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    width: calc(100% - 4px);
    max-width: 400px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    background-color: white;
}

.sybrin-biometrics-passive-modal-commands button,
.sybrin-biometrics-passive button {
    border: none;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    font-size: 20px;
    font-weight: normal;
    background: #3498db;
    padding: 10px 35px;
    text-decoration: none;
    cursor: pointer;
}

.sybrin-biometrics-passive-modal-commands button:hover,
.sybrin-biometrics-passive button:hover {
    background: #3cb0fd;
    text-decoration: none;
}

.sybrin-biometrics-passive-image {
    height: 300px;
}

.sybrin-biometrics-passive-image svg {
    height: 300px;
}

.sybrin-biometrics-passive-video {
    position: relative;
    width: 100%;
}

.sybrin-biometrics-passive-instruction {
    padding: 15px 10px;
    margin: 10px 20px;
}

.sybrin-biometrics-passive-instruction-icon {
    float: left;
    height: 25px;
    width: 30px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-biometrics-passive-instruction-icon svg {
    height: 100%;
}

.sybrin-biometrics-passive-instruction-text {
    float: right;
    text-align: left;
    width: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-biometrics-passive-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.sybrin-biometrics-passive-modal {
    width: calc(100% - 32px);
    max-width: calc((100vh / 3 * 4) - 70px);
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

@media (orientation: portrait) {
    .sybrin-biometrics-passive-modal-narrow {
        width: calc(100% - 325px);
    }
}

.sybrin-biometrics-passive-modal-video {
    background-color: white;
    border-top: 2px solid #e4e5e8;
    border-left: 2px solid #e4e5e8;
    border-right: 2px solid #e4e5e8;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
}

.sybrin-biometrics-passive-modal-commands {
    background-color: white;
    border-bottom: 2px solid #e4e5e8;
    border-left: 2px solid #e4e5e8;
    border-right: 2px solid #e4e5e8;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 10px 0;
    width: 100%;
}

.sybrin-biometrics-result {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e4e5e8;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    box-shadow: 0 0 5px 2px rgb(0 0 0 / 50%);
    width: calc(100% - 4px);
    max-width: 400px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
    background-color: white;
}

.sybrin-biometrics-result button {
    border: none;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #ffffff;
    font-size: 20px;
    font-weight: normal;
    background: #3498db;
    padding: 10px 35px;
    text-decoration: none;
    cursor: pointer;
}

.sybrin-biometrics-result button:hover {
    background: #3cb0fd;
    text-decoration: none;
}

.sybrin-biometrics-result-image {
    padding: 30px;
    height: 100px;
}

.sybrin-biometrics-result-image svg {
    height: 100%;
    width: 100%;
}

.sybrin-biometrics-result-image svg path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.sybrin-biometrics-result-image-success svg path {
    stroke: #00aa6e;
    fill: #00aa6e;
}

.sybrin-biometrics-result-image-fail svg path {
    stroke: #a8262b;
    fill: #a8262b;
}

.sybrin-biometrics-loader-wrapper {
    background-color: white;
    z-index: 6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sybrin-biometrics-loader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    top: 50%;
    transform: translateY(-50%);
}
.sybrin-biometrics-loader div {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #0078c8;
    border-radius: 50%;
    animation: sybrin-biometrics-loader 1.2s linear infinite;
}
.sybrin-biometrics-loader div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
}
.sybrin-biometrics-loader div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22px;
    left: 62px;
}
.sybrin-biometrics-loader div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11px;
    left: 52px;
}
.sybrin-biometrics-loader div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7px;
    left: 37px;
}
.sybrin-biometrics-loader div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11px;
    left: 22px;
}
.sybrin-biometrics-loader div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22px;
    left: 11px;
}
.sybrin-biometrics-loader div:nth-child(7) {
    animation-delay: -0.6s;
    top: 37px;
    left: 7px;
}
.sybrin-biometrics-loader div:nth-child(8) {
    animation-delay: -0.7s;
    top: 52px;
    left: 11px;
}
.sybrin-biometrics-loader div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62px;
    left: 22px;
}
.sybrin-biometrics-loader div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66px;
    left: 37px;
}
.sybrin-biometrics-loader div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
}
.sybrin-biometrics-loader div:nth-child(12) {
    animation-delay: -1.1s;
    top: 52px;
    left: 62px;
}
@keyframes sybrin-biometrics-loader {
    0%,
    20%,
    80%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.sybrin-biometrics-passive-prompt-container {
    z-index: 6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: