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 Identity 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 data extraction as provided by Sybrin
Then follow these steps:
Download the sybrin-identity-websdk-demo-application.zip file linked above
Extract the zip file contents
Open 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.identity.css is also provided as a base example below.
<!DOCTYPE html>
<html class="" lang="en" id="html">
<head>
<title>
Sybrin Identity
</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.identity.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 - Identity</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 identity = new Sybrin.Identity.Api();
var options = new Sybrin.Identity.Options({
apiKey: 'your-api-key-here',
integrationMode: 0,
authEndpoint: 'your-auth-endpoint-here',
dataExtractionEndpoint: 'your-data-extraction-endpoint-here',
captureMode: 0
});
identity.initialize(options);
identity.getVersionInfo().then(function(versionInfo) {
document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Identity (version ' + versionInfo.webSdkVersion + ')';
});
identity.checkCompatibility(true);
var currentComponent = null;
var initWizard = function() {
if (currentComponent) {
currentComponent.destroy();
}
currentComponent = new Sybrin.Identity.WizardComponent({
id: 'viewport',
api: identity
});
currentComponent.initialize();
currentComponent.onWizardDone = function(result, editedValues) {
alert(JSON.stringify(result));
}
currentComponent.onScanError = function(error) {
console.error(error);
}
currentComponent.onScanCancelled = function() {
console.log('Operation cancelled');
}
}
initWizard();
})
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;
}
.sybrin-debug-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;
}
@media screen and (max-width: 800px) {
header {
display: none;
}
}
@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;
}
/* 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);
/* Input */
--sdk-input-color: var(--bs-gray-700);
--sdk-input-disable-color: var(--bs-gray-300);
--sdk-input-hover-color: var(--bs-blue);
--sdk-input-active-color: var(--bs-blue);
--sdk-primary-input-selected-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);
/* Input */
--sdk-input-color: var(--bs-gray-700);
--sdk-input-disable-color: var(--bs-gray-300);
--sdk-input-hover-color: var(--bs-blue);
--sdk-input-active-color: var(--bs-blue);
--sdk-primary-input-selected-color: var(--bs-blue);
}
}
.sybrin-identity-wizard {
position: relative;
width: 100%;
min-height: 21.375rem;
margin: auto;
}
.sybrin-identity-container,
.sybrin-identity {
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-identity-container {
position: relative;
padding: var(--sdk-spacing-small);
width: 100%;
margin: auto;
box-sizing: border-box;
border-radius: var(--sdk-container-border-radius);
}
.sybrin-identity-container button,
.sybrin-identity 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-identity-container button:disabled,
.sybrin-identity button:disabled {
color: var(--sdk-button-disable-text-color);
background: var(--sdk-button-disable-background-color);
border: none;
box-shadow: none;
}
.sybrin-identity-container input,
.sybrin-identity input {
border: var(--sdk-border-thin) solid var(--sdk-input-color);
border-radius: var(--sdk-button-border-radius);
}
.sybrin-identity-container input:active,
.sybrin-identity input:active {
border: var(--sdk-border-thin) solid var(--sdk-input-active-color);
}
.sybrin-identity-container input:hover,
.sybrin-identity input:hover {
border: var(--sdk-border-thin) solid var(--sdk-input-hover-color);
}
.sybrin-identity-container input:disabled,
.sybrin-identity input:disabled {
border: var(--sdk-border-thin) solid var(--sdk-input-disable-color);
}
.sybrin-identity-halves {
display: flow-root;
}
.sybrin-identity-half {
float: left;
width: 50%;
margin: 0;
text-align: center;
padding: var(--sdk-spacing-small);
box-sizing: border-box;
}
.sybrin-identity-half p {
margin-top: 0;
margin-bottom: var(--sdk-spacing-small);
}
.sybrin-identity-component-section {
padding: var(--sdk-spacing-small);
}
.sybrin-identity-button-section {
text-align: right;
}
.sybrin-identity-button-section .sybrin-identity-flow-button {
margin: var(--sdk-spacing-small);
}
.sybrin-identity-align-left {
text-align: left;
}
.sybrin-identity-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-identity-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-identity-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-identity-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-identity-block-icon {
margin: var(--sdk-spacing-normal);
}
.sybrin-identity-block-icon svg {
height: var(--sdk-icon-size-large);
width: var(--sdk-icon-size-large);
}
.sybrin-identity-block-icon svg path {
color: var(--sdk-svg-color);
fill: var(--sdk-svg-color);
}
.sybrin-identity-block-prompt {
margin: var(--sdk-spacing-normal);
}
.sybrin-identity-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-identity-block-button:hover,
.sybrin-identity-flow-button.sybrin-secondary:hover {
background: var(--sdk-secondary-button-hover-color);
box-shadow: none;
}
.sybrin-identity-flow-button:disabled {
color: rgba(50, 50, 55, 0.4);
background: transparent;
}
.sybrin-identity-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-identity-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-identity-card-image {
float: left;
height: 3rem;
width: 3rem;
border-radius: 50%;
overflow: hidden;
}
.sybrin-identity-card-image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sybrin-identity-icon {
float: left;
width: var(--sdk-icon-size-large);
height: var(--sdk-icon-size-large);
text-align: center;
}
.sybrin-identity-icon svg {
width: var(--sdk-icon-size-large);
height: var(--sdk-icon-size-large);
}
.sybrin-identity-icon svg path {
color: var(--sdk-svg-color);
fill: var(--sdk-svg-color);
}
.sybrin-identity-text {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: var(--sdk-spacing-normal);
}
.sybrin-identity-country-select .sybrin-identity-text {
max-width: calc(100% - 6.625rem);
}
.sybrin-identity-text-middle {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.sybrin-identity-card-title {
margin: var(--sdk-spacing-tinier);
font-weight: bold;
}
.sybrin-identity-card-subtitle {
margin: var(--sdk-spacing-tinier);
}
.sybrin-identity-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-identity-selected .sybrin-identity-icon svg path {
fill: var(--sdk-selected-item-text-color);
}
.sybrin-identity-video-container {
position: relative;
width: 100%;
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-identity-video {
display: block;
width: 100%;
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-identity-video-mirrored {
display: block;
width: 100%;
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-identity-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-identity-prompt-container {
z-index: 100;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: var(--sdk-spacing-tinier);
padding-bottom: var(--sdk-spacing-tinier);
color: var(--sdk-primary-heading-text-color);
text-align: center;
background-color: transparent;
}
.sybrin-identity-prompt-container-top {
top: 0;
}
.sybrin-identity-prompt-container-bottom {
bottom: 0;
}
.sybrin-identity-prompt {
text-align: center;
color: var(--sdk-primary-heading-text-color);
}
.sybrin-identity-fullscreen-video-container {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 3;
top: 0;
left: 0;
background-color: black;
}
.sybrin-identity-float-left {
float: left;
}
.sybrin-identity-float-right {
float: right;
}
.sybrin-identity-result-fields {
width: 100%;
padding: 0 var(--sdk-spacing-small);
border-radius: var(--sdk-container-border-radius);
max-height: 17.5rem;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.sybrin-identity-result-group {
display: flow-root;
}
.sybrin-identity-result-field {
width: calc(50% - var(--sdk-spacing-small));
margin-bottom: var(--sdk-spacing-small);
box-sizing: border-box;
}
.sybrin-identity-result-field-wrapper {
position: relative;
min-height: 2.813rem;
}
.sybrin-identity-result-field-icon {
cursor: pointer;
}
.sybrin-identity-result-field svg {
width: 1.2rem;
height: 1.2rem;
position: absolute;
right: 0.8rem;
top: 0.8rem;
z-index: 1;
}
.sybrin-identity-result-field.sybrin-identity-field-attention svg path {
fill: var(--sdk-svg-error-color);
}
.sybrin-identity-result-field.sybrin-identity-field-touched svg path {
fill: var(--sdk-svg-success-color);
}
.sybrin-identity-result-field input {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding-top: var(--sdk-spacing-medium);
padding-left: var(--sdk-spacing-medium);
padding-right: var(--sdk-spacing-large);
}
.sybrin-identity-searchbox {
width: 100%;
max-width: 29rem;
height: 2.5rem;
box-sizing: border-box;
margin: auto auto var(--sdk-spacing-smaller) auto;
padding: var(--sdk-spacing-smaller);
display: block;
}
.sybrin-identity-confidence-prompt {
margin: 0 var(--sdk-spacing-small) var(--sdk-spacing-small) 0;
color: var(--sdk-error-text-color);
text-align: center;
}
.sybrin-identity-result-field label {
position: absolute;
top: 0.375rem;
left: 1.063rem;
opacity: 0.5;
font-size: 0.688rem;
}
.sybrin-identity-result-image {
width: 100%;
border-radius: var(--sdk-container-border-radius);
overflow: hidden;
height: 14.375rem;
background-color: black;
}
.sybrin-identity-result-image img {
height: 100%;
display: block;
margin: auto;
max-width: 100%;
object-fit: contain;
}
.sybrin-identity-fail-message {
padding: var(--sdk-spacing-small);
color: var(--sdk-error-text-color);
text-align: center;
}
.sybrin-identity-prompt-message {
padding: var(--sdk-spacing-small);
}
.sybrin-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-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)));
}