Comment on page
Demo Application

The code example can be downloaded by clicking the file link below
sybrin-document-websdk-demo-application-2.3.0.zip
2MB
Binary
Download
This is a code example that fully incorporates the Sybrin Document Web SDK. To use the above example, please ensure the following:
You have an API key as provided by Sybrin
You have your backend API endpoints for authentication and OCR as provided by Sybrin
Then follow these steps:
1.Download the sybrin-document-websdk-demo-application.zip file linked above
2.Extract the zip file contents
3.Open index.js 
4.Follow JavaScript API and component configuration and initialization with the authentication method of your choice.
5.Host the UI folder in any hostable environment, e.g. IIS
For your convenience in formulating custom styling for all components, sybrin.document.css is also provided as a base example below.
index.html
index.js
index.css
sybrin.document.css
<!DOCTYPE html>
<html class="" lang="en" id="html">
​
<head>
    <title>
        Sybrin Document
    </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="index.js"></script>
    <script src="sybrin.document.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 - Document</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 sybrinDocument = new Sybrin.Document.Api();
    var options = new Sybrin.Document.Options({
        apiKey: 'your-api-key-here',
        authEndpoint: 'your-auth-endpoint-here',
        ocrEndpoint: 'your-ocr-endpoint-here'
    });
​
    sybrinDocument.initialize(options);
    sybrinDocument.getVersionInfo().then(function(versionInfo) {
        document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Document (version ' + versionInfo.webSdkVersion + ')';
    });
    sybrinDocument.checkCompatibility(true);
​
    var currentComponent = null;
​
    var initWizard = function() {
        if (currentComponent) {
            currentComponent.destroy();
        }
​
        currentComponent = new Sybrin.Document.WizardComponent({
            id: 'viewport',
            api: sybrinDocument
        });
​
        currentComponent.initialize();
​
        currentComponent.onWizardDone = function(result) {
            console.log(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;
​
    /* 
        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);
        --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);
        --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-document-wizard {
    position: relative;
    width: 100%;
    min-height: 21.375rem;
    margin: auto;
}
​
.sybrin-document-container,
.sybrin-document {
    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-document-container {
    position: relative;
    padding: var(--sdk-spacing-small);
    width: 100%;
    margin: auto;
    box-sizing: border-box;
    border-radius: var(--sdk-container-border-radius);
}
​
.sybrin-document-container button,
.sybrin-document 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-document-container button:disabled,
.sybrin-document button:disabled {
    color: var(--sdk-button-disable-text-color);
    background: var(--sdk-button-disable-background-color);
    border: none;
    box-shadow: none;
}
​
.sybrin-document-container input,
.sybrin-document input {
    border: var(--sdk-border-thin) solid var(--sdk-input-color);
    border-radius: var(--sdk-button-border-radius);
}
​
.sybrin-document-container input:active,
.sybrin-document input:active {
    border: var(--sdk-border-thin) solid var(--sdk-input-active-color);
}
​
.sybrin-document-container input:hover,
.sybrin-document input:hover {
    border: var(--sdk-border-thin) solid var(--sdk-input-hover-color);
}
​
.sybrin-document-container input:disabled,
.sybrin-document input:disabled {
    border: var(--sdk-border-thin) solid var(--sdk-input-disable-color);
}
​
.sybrin-document-container textarea,
.sybrin-document textarea {
    border: var(--sdk-border-thin) solid var(--sdk-input-color);
    border-radius: 0;
}
​
.sybrin-document-container textarea:active,
.sybrin-document textarea:active {
    border: var(--sdk-border-thin) solid var(--sdk-input-active-color);
}
​
.sybrin-document-container textarea:hover,
.sybrin-document textarea:hover {
    border: var(--sdk-border-thin) solid var(--sdk-input-hover-color);
}
​
.sybrin-document-container textarea:disabled,
.sybrin-document textarea:disabled {
    border: var(--sdk-border-thin) solid var(--sdk-input-disable-color);
}
​
.sybrin-document-center {
    text-align: center;
}
​
.sybrin-document-halves {
    display: flow-root;
}
​
.sybrin-document-half {
    float: left;
    width: 50%;
    margin: 0;
    text-align: center;
    padding: var(--sdk-spacing-small);
    box-sizing: border-box;
}
​
.sybrin-document-half p {
    margin-top: 0;
    margin-bottom: var(--sdk-spacing-small);
}
​
.sybrin-document-full {
    width: 100%;
    margin: 0;
    text-align: center;
    padding: var(--sdk-spacing-small);
    box-sizing: border-box;
}
​
.sybrin-document-full p {
    margin-top: 0;
    margin-bottom: var(--sdk-spacing-small);
}
​
.sybrin-document-component-section {
    padding: var(--sdk-spacing-small);
}
​
.sybrin-document-button-section {
    text-align: right;
}
​
.sybrin-document-button-section .sybrin-document-flow-button {
    margin: var(--sdk-spacing-small);
}
​
.sybrin-document-align-left {
    text-align: left;
}
​
.sybrin-document-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-document-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-document-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-document-block {
    border: var(--sdk-border-thin) solid var(--card-background-color);
    border-radius: var(--sdk-container-border-radius);
    width: 100%;
    box-sizing: border-box;
}
​
.sybrin-document-block-icon {
    margin: var(--sdk-spacing-normal);
}
​
.sybrin-document-block-icon svg {
    height: var(--sdk-icon-size-large);
    width: var(--sdk-icon-size-large);
}
​
.sybrin-document-block-icon svg path {
    color: var(--sdk-svg-color);
    fill: var(--sdk-svg-color);
}
​
.sybrin-document-block-prompt {
    margin: var(--sdk-spacing-normal);
}
​
.sybrin-document-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-document-block-button:hover,
.sybrin-document-flow-button.sybrin-secondary:hover {
    background: var(--sdk-secondary-button-hover-color);
    box-shadow: none;
}
​
.sybrin-document-flow-button:disabled {
    color: rgba(50, 50, 55, 0.4);
    background: transparent;
}
​
.sybrin-document-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(--card-background-color);
}
​
.sybrin-document-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-document-card-image {
    float: left;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    overflow: hidden;
}
​
.sybrin-document-card-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
​
.sybrin-document-icon {
    float: left;
    width: var(--sdk-icon-size-large);
    height: var(--sdk-icon-size-large);
    text-align: center;
}
​
.sybrin-document-icon svg {
    width: var(--sdk-icon-size-large);
    height: var(--sdk-icon-size-large);
}
​
.sybrin-document-icon svg path {
    color: var(--sdk-svg-color);
    fill: var(--sdk-svg-color);
}
​
.sybrin-document-text {
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: var(--sdk-spacing-normal);
}
​
.sybrin-document-country-select .sybrin-identity-text {
    max-width: calc(100% - 6.625rem);
}
​
.sybrin-document-card-title {
    margin: var(--sdk-spacing-tinier);
    font-weight: bold;
}
​
.sybrin-document-card-subtitle {
    margin: var(--sdk-spacing-tinier);
}
​
.sybrin-document-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-document-selected .sybrin-document-icon svg path {
    fill: var(--sdk-selected-item-text-color);
}
​
.sybrin-document-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-document-video {
    display: block;
    width: 100%;
    z-index: 4;
    border-radius: var(--sdk-inner-container-border-radius);
    -moz-border-radius: 