Demo Application
Last updated
Last updated
The code example can be downloaded by clicking the file link below.
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:
Download the sybrin-biometrics-websdk-demo-application.zip file linked above
Extract the zip file contents
Open ui/index.js
Follow JavaScript API and component initialization with the authentication method of your choice
Host the UI folder in any hostable environment, e.g. IIS
If you would like to use the companion API or your own middleware implementation, please see the Middleware section for details on how to accomplish this.
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 http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="index.css" media="screen" />
<script src="sybrin.common.js"></script>
<script src="index.js"></script>
<script src="sybrin.biometrics.js"></script>
</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">
</div>
</header>
<div id="viewport" class="viewport">
<div class="sybrin-demo-loading">
Please wait. Loading...
</div>
</div>
</body>
</html>function detectIE() {
try {
var isIE = false || !!document.documentMode;
if (!isIE) {
if (navigator.userAgent.indexOf("MSIE") > 0) {
return true;
} else {
return false;
}
}
return true;
} catch(e) {
return true;
}
};
var isIE = detectIE();
if (isIE) {
alert('Browser not supported');
}
document.addEventListener('DOMContentLoaded', function (event) {
var biometrics = new Sybrin.Biometrics.Api();
var options = new Sybrin.Biometrics.Options({
apiKey: 'your-api-key-here',
integrationMode: 0,
authEndpoint: 'your-auth-endpoint-here',
passiveLivenessEndpoint: 'your-liveness-endpoint-here',
});
biometrics.initialize(options);
biometrics.getVersionInfo().then(function (versionInfo) {
document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Biometrics (version ' + versionInfo.webSdkVersion + ')';
});
biometrics.checkCompatibility(true);
var currentComponent = null;
var initWizard = function() {
if (currentComponent) {
currentComponent.destroy();
}
currentComponent = new Sybrin.Biometrics.WizardComponent({
id: 'viewport',
api: biometrics
});
currentComponent.initialize();
currentComponent.onWizardDone = function(result) {
alert(JSON.stringify(result));
}
currentComponent.onLivenessError = function(error) {
console.error(error);
}
currentComponent.onLivenessCancelled = function() {
console.log('Operation cancelled');
}
}
initWizard();
});
button {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
color: #3498db;
font-size: 16px;
font-weight: normal;
padding: 10px 27px;
text-decoration: none;
cursor: pointer;
background: #ffffff;
border: 1px solid;
}
body {
text-align: center;
background-color: #2d2d46;
margin: 0;
padding: 0;
font-family: Roboto, Helvetica, sans-serif;
}
header {
background-color: white;
margin-bottom: 24px;
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 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 1.5rem !important;
border-radius: 50rem !important;
border: none;
color: #fff !important;
background: linear-gradient(160deg, #00fafa 0, #3264fa 100%);
box-shadow: 0 15px 30px -10px #3264fa !important;
cursor: pointer;
}
.viewport {
border: 2px solid rgba(50, 50, 55, 0.2);
border-radius: 8px;
display: inline-block;
-webkit-box-shadow: 0 0 16px 8px rgba(50, 50, 55, 0.2);
box-shadow: 0 0 16px 8px rgba(50, 50, 55, 0.2);
width: 80%;
max-width: 1024px;
overflow: hidden;
}
.sybrin-demo-loading {
color: white;
padding: 20px;
}
@media screen and (max-width: 800px) {
header {
display: none;
}
.viewport {
width: calc(100% - 4px);
}
}:root {
/* Colors */
/* Blue */
--bs-blue: rgba(50, 100, 250, 1.00);
--bs-blue-900: rgba(50, 100, 250, 0.90);
--bs-blue-800: rgba(50, 100, 250, 0.80);
--bs-blue-700: rgba(50, 100, 250, 0.70);
--bs-blue-600: rgba(50, 100, 250, 0.60);
--bs-blue-500: rgba(50, 100, 250, 0.50);
--bs-blue-400: rgba(50, 100, 250, 0.40);
--bs-blue-300: rgba(50, 100, 250, 0.30);
--bs-blue-200: rgba(50, 100, 250, 0.20);
--bs-blue-100: rgba(50, 100, 250, 0.10);
--bs-blue-0: rgba(50, 100, 250, 0.00);
--bs-bluegray: rgb(234, 239, 253);
/* Dark blue */
--bs-blue-dark: rgba(0, 0, 30, 1.00);
--bs-blue-dark-900: rgba(0, 0, 30, 0.90);
--bs-blue-dark-800: rgba(0, 0, 30, 0.80);
--bs-blue-dark-700: rgba(0, 0, 30, 0.70);
--bs-blue-dark-600: rgba(0, 0, 30, 0.60);
--bs-blue-dark-500: rgba(0, 0, 30, 0.50);
--bs-blue-dark-400: rgba(0, 0, 30, 0.40);
--bs-blue-dark-300: rgba(0, 0, 30, 0.30);
--bs-blue-dark-200: rgba(0, 0, 30, 0.20);
--bs-blue-dark-100: rgba(0, 0, 30, 0.10);
--bs-blue-dark-0: rgba(0, 0, 30, 0.00);
/* Gray*/
--bs-gray: rgba(130, 130, 140, 1.00);
--bs-gray-900: rgba(130, 130, 140, 0.90);
--bs-gray-800: rgba(130, 130, 140, 0.80);
--bs-gray-700: rgba(130, 130, 140, 0.70);
--bs-gray-600: rgba(130, 130, 140, 0.60);
--bs-gray-500: rgba(130, 130, 140, 0.50);
--bs-gray-400: rgba(130, 130, 140, 0.40);
--bs-gray-300: rgba(130, 130, 140, 0.30);
--bs-gray-200: rgba(130, 130, 140, 0.20);
--bs-gray-100: rgba(130, 130, 140, 0.10);
--bs-gray-0: rgba(130, 130, 140, 0.00);
--bs-gray-alt: rgb(244, 244, 244);
--bs-gray-alt-2: rgb(234, 234, 234);
/* Gray Dark */
--bs-gray-dark: rgba(70, 70, 80, 1.00);
--bs-gray-dark-900: rgba(70, 70, 80, 0.90);
--bs-gray-dark-800: rgba(70, 70, 80, 0.80);
--bs-gray-dark-700: rgba(70, 70, 80, 0.70);
--bs-gray-dark-600: rgba(70, 70, 80, 0.60);
--bs-gray-dark-500: rgba(70, 70, 80, 0.50);
--bs-gray-dark-400: rgba(70, 70, 80, 0.40);
--bs-gray-dark-300: rgba(70, 70, 80, 0.30);
--bs-gray-dark-200: rgba(70, 70, 80, 0.20);
--bs-gray-dark-100: rgba(70, 70, 80, 0.10);
--bs-gray-dark-0: rgba(70, 70, 80, 0.00);
/* White */
--bs-white: rgba(255, 255, 255, 1.00);
--bs-white-900: rgba(255, 255, 255, 0.90);
--bs-white-800: rgba(255, 255, 255, 0.80);
--bs-white-700: rgba(255, 255, 255, 0.70);
--bs-white-600: rgba(255, 255, 255, 0.60);
--bs-white-500: rgba(255, 255, 255, 0.50);
--bs-white-400: rgba(255, 255, 255, 0.40);
--bs-white-300: rgba(255, 255, 255, 0.30);
--bs-white-200: rgba(255, 255, 255, 0.20);
--bs-white-100: rgba(255, 255, 255, 0.10);
--bs-white-0: rgba(255, 255, 255, 0.00);
/* Dark */
--bs-dark: rgba(30, 30, 40, 1.00);
--bs-dark-900: rgba(30, 30, 40, 0.90);
--bs-dark-800: rgba(30, 30, 40, 0.80);
--bs-dark-700: rgba(30, 30, 40, 0.70);
--bs-dark-600: rgba(30, 30, 40, 0.60);
--bs-dark-500: rgba(30, 30, 40, 0.50);
--bs-dark-400: rgba(30, 30, 40, 0.40);
--bs-dark-300: rgba(30, 30, 40, 0.30);
--bs-dark-200: rgba(30, 30, 40, 0.20);
--bs-dark-100: rgba(30, 30, 40, 0.10);
--bs-dark-0: rgba(30, 30, 40, 0.00);
/* Green */
--bs-green: rgba(40, 220, 120, 1.00);
--bs-green-900: rgba(40, 220, 120, 0.90);
--bs-green-800: rgba(40, 220, 120, 0.80);
--bs-green-700: rgba(40, 220, 120, 0.70);
--bs-green-600: rgba(40, 220, 120, 0.60);
--bs-green-500: rgba(40, 220, 120, 0.50);
--bs-green-400: rgba(40, 220, 120, 0.40);
--bs-green-300: rgba(40, 220, 120, 0.30);
--bs-green-200: rgba(40, 220, 120, 0.20);
--bs-green-100: rgba(40, 220, 120, 0.10);
--bs-green-0: rgba(40, 220, 120, 0.00);
/* Orange */
--bs-orange: rgba(250, 100, 50, 1.00);
--bs-orange-900: rgba(250, 100, 50, 0.90);
--bs-orange-800: rgba(250, 100, 50, 0.80);
--bs-orange-700: rgba(250, 100, 50, 0.70);
--bs-orange-600: rgba(250, 100, 50, 0.60);
--bs-orange-500: rgba(250, 100, 50, 0.50);
--bs-orange-400: rgba(250, 100, 50, 0.40);
--bs-orange-300: rgba(250, 100, 50, 0.30);
--bs-orange-200: rgba(250, 100, 50, 0.20);
--bs-orange-100: rgba(250, 100, 50, 0.10);
--bs-orange-0: rgba(250, 100, 50, 0.00);
/* Red */
--bs-red: rgba(220, 40, 60, 1.00);
--bs-red-900: rgba(220, 40, 60, 0.90);
--bs-red-800: rgba(220, 40, 60, 0.80);
--bs-red-700: rgba(220, 40, 60, 0.70);
--bs-red-600: rgba(220, 40, 60, 0.60);
--bs-red-500: rgba(220, 40, 60, 0.50);
--bs-red-400: rgba(220, 40, 60, 0.40);
--bs-red-300: rgba(220, 40, 60, 0.30);
--bs-red-200: rgba(220, 40, 60, 0.20);
--bs-red-100: rgba(220, 40, 60, 0.10);
--bs-red-0: rgba(220, 40, 60, 0.00);
/* Structure */
--sdk-container-border-radius: 1.875rem;
--sdk-inner-container-border-radius: 1.438rem;
--sdk-button-border-radius: 2.8125rem;
--sdk-scrollbar-border-radius: 0.625rem;
--sdk-scrollbar-width: 0.625rem;
--sdk-primary-font-size: 0.9375rem;
--sdk-primary-button-font-size: 0.833rem;
--sdk-spacing-tiniest: 0.15rem;
--sdk-spacing-tinier: 0.25rem;
--sdk-spacing-tiny: 0.375rem;
--sdk-spacing-smaller: 0.5rem;
--sdk-spacing-small: 0.75rem;
--sdk-spacing-medium: 1rem;
--sdk-spacing-normal: 1.5rem;
--sdk-spacing-large: 2.5rem;
--sdk-border-thin: 0.125rem;
--sdk-border-thick: 0.5rem;
--sdk-shadow-thin: 0.938rem;
--sdk-shadow-thin-negative: -0.938rem;
--sdk-shadow-thick: 1.875rem;
--sdk-icon-size-small: 1.563rem;
--sdk-icon-size-large: 3rem;
/*
2px = 0.15rem = --sdk-spacing-tiniest
4px = 0.25rem = --sdk-spacing-tinier
6px = 0.375rem = --sdk-spacing-tiny
8px = 0.5rem = --sdk-spacing-smaller
12px = 0.75rem = --sdk-spacing-small
16px = 1rem = --sdk-spacing-medium
24px = 1.5rem = --sdk-spacing-normal
40px = 2.5rem = --sdk-spacing-large
*/
}
/* Themes */
@media (prefers-color-scheme: light) {
:root {
/* Base */
--sdk-primary-background-color: var(--bs-white);
--sdk-primary-accent-color: var(--bs-blue);
--sdk-secondary-background-color: var(--bs-gray-alt);
--sdk-secondary-accent-color: var(--bs-bluegray);
--sdk-card-background-color: var(--bs-gray-alt-2);
/* Buttons */
--sdk-primary-button-background-color: var(--bs-blue);
--sdk-primary-button-box-shadow-color: var(--bs-blue);
--sdk-primary-button-text-color: var(--bs-white);
--sdk-button-disable-text-color: var(--bs-gray);
--sdk-button-disable-background-color: var(--bs-gray-300);
--sdk-secondary-button-text-color: var(--bs-blue);
--sdk-secondary-button-background-color: var(--bs-blue-100);
--sdk-secondary-button-hover-color: var(--bs-blue-200);
/* SVG */
--sdk-svg-color: var(--bs-gray-dark);
--sdk-svg-error-color: var(--bs-red);
--sdk-svg-success-color: var(--bs-green);
/* Text */
--sdk-error-text-color: var(--bs-red);
--sdk-success-text-color: var(--bs-green);
--sdk-primary-heading-text-color: var(--bs-gray-dark);
--sdk-primary-text-color: var(--bs-gray);
/* Selected */
--sdk-selected-item-text-color: var(--bs-white);
--sdk-selected-item-background-color: var(--bs-blue);
}
}
@media (prefers-color-scheme: dark) {
:root {
/* Base */
--sdk-primary-background-color: var(--bs-white);
--sdk-primary-accent-color: var(--bs-blue);
--sdk-secondary-background-color: var(--bs-gray-alt);
--sdk-secondary-accent-color: var(--bs-bluegray);
--sdk-card-background-color: var(--bs-gray-alt-2);
/* Buttons */
--sdk-primary-button-background-color: var(--bs-blue);
--sdk-primary-button-box-shadow-color: var(--bs-blue);
--sdk-primary-button-text-color: var(--bs-white);
--sdk-button-disable-text-color: var(--bs-gray);
--sdk-button-disable-background-color: var(--bs-gray-300);
--sdk-secondary-button-text-color: var(--bs-blue);
--sdk-secondary-button-background-color: var(--bs-blue-100);
--sdk-secondary-button-hover-color: var(--bs-blue-200);
/* SVG */
--sdk-svg-color: var(--bs-gray-dark);
--sdk-svg-error-color: var(--bs-red);
--sdk-svg-success-color: var(--bs-green);
/* Text */
--sdk-error-text-color: var(--bs-red);
--sdk-success-text-color: var(--bs-green);
--sdk-primary-heading-text-color: var(--bs-gray-dark);
--sdk-primary-text-color: var(--bs-gray);
/* Selected */
--sdk-selected-item-text-color: var(--bs-white);
--sdk-selected-item-background-color: var(--bs-blue);
}
}
.sybrin-biometrics-wizard {
position: relative;
width: 100%;
min-height: 21.375rem;
margin: auto;
}
.sybrin-biometrics-container,
.sybrin-biometrics {
font-family: Roboto, Helvetica, sans-serif;
text-align: center;
background-color: var(--sdk-primary-background-color);
font-size: var(--sdk-primary-font-size);
color: var(--sdk-primary-text-color);
}
.sybrin-biometrics-container {
position: relative;
padding: var(--sdk-spacing-small);
width: 100%;
margin: auto;
box-sizing: border-box;
border-radius: var(--sdk-container-border-radius);
}
.sybrin-biometrics-container button,
.sybrin-biometrics button {
font-family: Roboto, Helvetica, sans-serif;
font-size: var(--sdk-primary-button-font-size);
-webkit-border-radius: var(--sdk-button-border-radius);
-moz-border-radius: var(--sdk-button-border-radius);
border-radius: var(--sdk-button-border-radius);
border: none;
padding: var(--sdk-spacing-medium);
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
font-weight: bold;
}
.sybrin-biometrics-container button:disabled,
.sybrin-biometrics button:disabled {
color: var(--sdk-button-disable-text-color);
background: var(--sdk-button-disable-background-color);
border: none;
box-shadow: none;
}
.sybrin-biometrics-halves {
display: flow-root;
}
.sybrin-biometrics-half {
float: left;
width: 50%;
margin: 0;
text-align: center;
padding: var(--sdk-spacing-small);
box-sizing: border-box;
}
.sybrin-biometrics-face-container {
margin: var(--sdk-spacing-normal) auto;
padding: 0;
position: relative;
z-index: 4;
border: var(--sdk-border-thick) solid var(--sdk-primary-accent-color);
border-radius: var(--sdk-container-border-radius);
box-sizing: border-box;
width: calc(100% - (var(--sdk-spacing-normal) + var(--sdk-spacing-normal)));
}
.sybrin-biometrics-face-container svg {
width: 12rem;
height: 12rem;
margin: var(--sdk-spacing-normal);
}
.sybrin-biometrics-compare-prompt {
margin: var(--sdk-spacing-small);
}
.sybrin-biometrics-compare-face-title {
margin: 0 0 var(--sdk-spacing-normal) 0;
}
.sybrin-biometrics-face-container.sybrin-biometrics-compare-match {
border: var(--sdk-border-thick) solid var(--sdk-success-text-color);
}
.sybrin-biometrics-face-container.sybrin-biometrics-compare-mismatch {
border: var(--sdk-border-thick) solid var(--sdk-error-text-color);
}
.sybrin-biometrics-compare-image-container {
position: relative;
margin: var(--sdk-spacing-normal);
}
.sybrin-biometrics-compare-image-circle {
display: block;
width: 100%;
height: 100%;
background: transparent;
text-align: center;
align-content: center;
align-items: center;
border-radius: var(--sdk-container-border-radius);
-moz-border-radius: var(--sdk-container-border-radius);
-webkit-border-radius: var(--sdk-container-border-radius);
overflow: hidden;
}
.sybrin-biometrics-compare-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sybrin-biometrics-component-section {
padding: var(--sdk-spacing-small);
}
.sybrin-biometrics-button-section {
text-align: right;
}
.sybrin-biometrics-button-section .sybrin-biometrics-flow-button {
margin: var(--sdk-spacing-small);
}
.sybrin-biometrics-align-left {
text-align: left;
}
.sybrin-biometrics-flow-button {
color: var(--sdk-primary-button-text-color);
background: var(--sdk-primary-button-background-color);
font-weight: normal;
text-decoration: none;
cursor: pointer;
width: 13rem;
}
.sybrin-biometrics-flow-button:hover {
box-shadow: 0 var(--sdk-shadow-thin) var(--sdk-shadow-thick) var(--sdk-shadow-thin-negative) var(--sdk-primary-button-box-shadow-color);
}
.sybrin-biometrics-flow-button.sybrin-secondary {
background-color: var(--sdk-secondary-button-background-color);
color: var(--sdk-secondary-button-text-color);
font-weight: normal !important;
font-size: var(--sdk-primary-button-font-size) !important;
}
.sybrin-biometrics-block {
border: var(--sdk-border-thin) solid var(--sdk-card-background-color);
border-radius: var(--sdk-container-border-radius);
width: 100%;
box-sizing: border-box;
}
.sybrin-biometrics-block-icon {
margin: var(--sdk-spacing-normal);
}
.sybrin-biometrics-block-icon svg {
height: var(--sdk-icon-size-large);
width: var(--sdk-icon-size-large);
}
.sybrin-biometrics-block-icon svg path {
color: var(--sdk-svg-color);
fill: var(--sdk-svg-color);
}
.sybrin-biometrics-block-prompt {
margin: var(--sdk-spacing-normal);
}
.sybrin-biometrics-block-button {
margin: 0 var(--sdk-spacing-normal) var(--sdk-spacing-normal) var(--sdk-spacing-normal);
color: var(--sdk-secondary-button-text-color);
background: var(--sdk-secondary-button-background-color);
cursor: pointer;
width: calc(100% - (var(--sdk-spacing-normal) + var(--sdk-spacing-normal)));
font-weight: normal !important;
font-size: var(--sdk-primary-button-font-size) !important;
}
.sybrin-biometrics-block-button-half {
width: calc(50% - 2.25rem);
margin: 0 var(--sdk-spacing-normal) var(--sdk-spacing-normal) var(--sdk-spacing-normal);
}
.sybrin-biometrics-block-button-half:last-child {
margin-left: 0;
}
.sybrin-biometrics-block-button:hover,
.sybrin-biometrics-flow-button.sybrin-secondary:hover {
background: var(--sdk-secondary-button-hover-color);
box-shadow: none;
}
.sybrin-biometrics-flow-button:disabled {
color: rgba(50, 50, 55, 0.4);
background: transparent;
}
.sybrin-biometrics-block-button:disabled {
color: rgba(50, 50, 55, 0.4);
background: transparent;
}
.sybrin-biometrics-list {
width: 100%;
max-width: 29rem;
margin: auto;
padding: var(--sdk-spacing-medium);
background-color: var(--sdk-secondary-background-color);
border-radius: var(--sdk-container-border-radius);
-moz-border-radius: var(--sdk-container-border-radius);
-webkit-border-radius: var(--sdk-container-border-radius);
max-height: 28rem;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
border: var(--sdk-border-thin) solid var(--sdk-card-background-color);
}
.sybrin-biometrics-card {
display: block;
height: 3rem;
padding: var(--sdk-spacing-medium);
text-align: left;
border-radius: var(--sdk-container-border-radius);
-moz-border-radius: var(--sdk-container-border-radius);
-webkit-border-radius: var(--sdk-container-border-radius);
cursor: pointer;
box-sizing: content-box;
}
.sybrin-biometrics-icon {
float: left;
width: var(--sdk-icon-size-large);
height: var(--sdk-icon-size-large);
text-align: center;
}
.sybrin-biometrics-icon svg {
width: var(--sdk-icon-size-large);
height: var(--sdk-icon-size-large);
}
.sybrin-biometrics-icon svg path {
color: var(--sdk-svg-color);
fill: var(--sdk-svg-color);
}
.sybrin-biometrics-text {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: var(--sdk-spacing-normal);
}
.sybrin-biometrics-selected {
background-color: var(--sdk-selected-item-background-color);
box-shadow: 0 var(--sdk-shadow-thin) var(--sdk-shadow-thick) var(--sdk-shadow-thin-negative) var(--sdk-primary-button-box-shadow-color);
color: var(--sdk-selected-item-text-color);
}
.sybrin-biometrics-selected .sybrin-biometrics-icon svg path {
fill: var(--sdk-selected-item-text-color);
}
.sybrin-biometrics-video-container {
position: relative;
width: 100%;
max-width: 30rem;
z-index: 4;
margin: auto;
border: var(--sdk-border-thick) solid var(--sdk-primary-accent-color);
border-radius: var(--sdk-container-border-radius);
-moz-border-radius: var(--sdk-container-border-radius);
-webkit-border-radius: var(--sdk-container-border-radius);
box-sizing: border-box;
}
.sybrin-biometrics-video {
display: block;
width: 100%;
max-width: 30rem;
z-index: 4;
border-radius: var(--sdk-inner-container-border-radius);
-moz-border-radius: var(--sdk-inner-container-border-radius);
-webkit-border-radius: var(--sdk-inner-container-border-radius);
}
.sybrin-biometrics-video-mirrored {
display: block;
width: 100%;
max-width: 30rem;
z-index: 4;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
border-radius: var(--sdk-inner-container-border-radius);
-moz-border-radius: var(--sdk-inner-container-border-radius);
-webkit-border-radius: var(--sdk-inner-container-border-radius);
}
.sybrin-biometrics-cutout {
z-index: 5;
position: absolute;
top: 0;
left: 0;
border-radius: var(--sdk-inner-container-border-radius);
-moz-border-radius: var(--sdk-inner-container-border-radius);
-webkit-border-radius: var(--sdk-inner-container-border-radius);
}
.sybrin-biometrics-passive-prompt-container {
z-index: 100;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: var(--sdk-spacing-normal);
padding-bottom: var(--sdk-spacing-normal);
color: var(--sdk-primary-heading-text-color);
text-align: center;
background-color: transparent;
}
.sybrin-biometrics-passive-prompt {
margin: auto;
color: var(--sdk-primary-heading-text-color);
}
.sybrin-biometrics-result-image-container {
position: relative;
width: 19.5rem;
margin: auto;
}
.sybrin-biometrics-result-image-circle {
display: block;
width: 100%;
height: 100%;
background: transparent;
text-align: center;
align-content: center;
align-items: center;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
overflow: hidden;
}
.sybrin-biometrics-result-image-circle svg {
height: 100%;
width: 100%;
}
.sybrin-biometrics-result-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sybrin-biometrics-result-icon {
height: var(--sdk-icon-size-large);
width: var(--sdk-icon-size-large);
position: absolute;
top: 0;
right: 0;
}
.sybrin-biometrics-result-icon svg {
height: var(--sdk-icon-size-large);
width: var(--sdk-icon-size-large);
}
.sybrin-biometrics-result-icon-success svg path {
fill: var(--sdk-svg-success-color);
}
.sybrin-biometrics-result-icon-fail svg path {
fill: var(--sdk-svg-error-color);
}
.sybrin-biometrics-mobile-capture-url {
word-break: break-all;
}
.sybrin-custom-scrollbar::-webkit-scrollbar-track
{
box-shadow: inset 0 0 var(--sdk-spacing-tiny) rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 var(--sdk-spacing-tiny) rgba(0, 0, 0, 0.3);
background-color: var(--sdk-secondary-background-color);
border-radius: var(--sdk-scrollbar-border-radius);
}
.sybrin-biometrics-camera-permission-request-text {
text-align: center;
margin: auto;
height: 6rem;
display: flex;
align-items: center;
}
.sybrin-custom-scrollbar::-webkit-scrollbar
{
width: var(--sdk-scrollbar-width);
background-color: var(--sdk-secondary-background-color);
}
.sybrin-custom-scrollbar::-webkit-scrollbar-thumb
{
border-radius: var(--sdk-scrollbar-border-radius);
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, var(--sdk-primary-accent-color)),
color-stop(0.72, var(--sdk-primary-accent-color)),
color-stop(0.86, var(--sdk-primary-accent-color)));
}
.sybrin-hidden {
display: none;
}
.sybrin-biometrics-guideline-component {
text-align: center;
}
.sybrin-biometrics-guideline-header {
color: var(--sdk-primary-heading-text-color);
margin: var(--sdk-spacing-medium) 0;
}
.sybrin-biometrics-guideline-container {
display: block;
}
.sybrin-biometrics-guideline {
padding: var(--sdk-spacing-small) var(--sdk-spacing-smaller);
margin: 0 var(--sdk-spacing-small) var(--sdk-spacing-medium) var(--sdk-spacing-small);
}
.sybrin-biometrics-guideline-icon {
float: left;
height: var(--sdk-icon-size-small);
width: 10%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.sybrin-biometrics-guideline-icon svg {
height: 100%;
width: 100%;
color: var(--sdk-svg-color);
fill: var(--sdk-svg-color);
}
.sybrin-biometrics-guideline-text {
float: right;
text-align: left;
width: 85%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.sybrin-biometrics-loader-wrapper {
background-color: white;
z-index: 6;
position: absolute;