@charset "UTF-8";
/* CSS Document

lastmod: 2023-03-23

 */
    
button.myCamSelector              {     
    
    display: inline-block;
    float: none;
    margin: 3px;
    padding: 14px 4px 14px 32px;
    position: relative;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9.56 8l-2-2-4.15-4.14L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.55-.18L19.73 21l1.41-1.41-8.86-8.86L9.56 8zM5 16V8h1.73l8 8H5zm10-8v2.61l6 6V6.5l-4 4V7c0-.55-.45-1-1-1h-5.61l2 2H15z'/%3E%3C/svg%3E");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 8px center;
    outline: none;
    border: 0px;
    border-radius: 7px;
    background-color: crimson;
    color: #eee;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    
    
}

button.myCamSelector.selected     { 
    
background-color:darkgreen;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM15 16H5V8h10v8zm-6-1h2v-2h2v-2h-2V9H9v2H7v2h2z'/%3E%3C/svg%3E"); 
    
}

div.framer {flex-wrap: wrap;} 



div#uiInstructions  {     
    
    display: flex !important;
    position: relative;
    background: rgba(255,255,255,0.05);
    box-sizing: border-box;
    padding: 12px 18px 12px 18px;
    max-width: 95%;
    min-width: 95%;
    margin-top: 6px;
    border-radius: 6px;
    min-height: 240px;
    justify-content: center;
    align-items: center; 

    

} 
div#uiInstructions > span                   { 
    
    display:inline-flex !important; box-sizing: border-box; padding:0px; width:100%; flex-wrap: wrap; flex-direction: column; 

    padding-top:90px;
    
    background-size:100px;
    background-repeat: no-repeat;
    background-position: center -10px;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' height='48' width='48'%3E%3Cpath d='M13.05 31.9q.6 0 1.05-.45.45-.45.45-1.05 0-.6-.45-1.05-.45-.45-1.05-.45-.6 0-1.05.45-.45.45-.45 1.05 0 .6.45 1.05.45.45 1.05.45Zm-1.5-6.5h3v-9.55h-3Zm8.95 4h15.95v-3H20.5Zm0-8.55h15.95v-3H20.5ZM6.6 40q-1.2 0-2.1-.9-.9-.9-.9-2.1V11q0-1.2.9-2.1.9-.9 2.1-.9h34.8q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h34.8V11H6.6v26Zm0 0V11v26Z'/%3E%3C/svg%3E");

    -webkit-transition: all 120ms ease-in-out;
-moz-transition: all 120ms ease-in-out;
-ms-transition: all 120ms ease-in-out;
-o-transition: all 120ms ease-in-out;
transition: all 120ms ease-in-out;
    
} 

div#uiInstructions > span.begin             { color:red;          } 
div#uiInstructions > span.alignment         { color:yellow;      

    
    background-position: center -40px;
    background-size:130px;
    
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='yellow' width='48'%3E%3Cpath d='M4 25.5v-3h40v3Zm10.5-6v-5h19v5Zm0 14v-5h19v5Z'/%3E%3C/svg%3E");




} 
div#uiInstructions > span.steady            { color:limegreen; font-size:40px; 
    
    
    background-position: center center;
background-size:180px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='limegreen' width='48'%3E%3Cpath d='M11 44q-1.25 0-2.125-.875T8 41v-8.5h3V41h26v-8.5h3V41q0 1.25-.875 2.125T37 44ZM8 23.5V7q0-1.25.875-2.125T11 4h18.05L40 14.95v8.55h-3v-7.2h-9.45V7H11v16.5Zm-6 6v-3h44v3Zm22-6Zm0 9Z'/%3E%3C/svg%3E");
   
        background-position: center 8px;
background-size:70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48'  fill='limegreen' width='48'%3E%3Cpath d='M9 39V9v30Zm5-22h20v-3H14Zm0 8.5h11.3q.9-.9 1.95-1.675 1.05-.775 2.2-1.325H14Zm0 8.5h7.15q.1-.8.275-1.55.175-.75.425-1.45H14Zm-5 8q-1.25 0-2.125-.875T6 39V9q0-1.25.875-2.125T9 6h30q1.25 0 2.125.875T42 9v13.25q-.7-.3-1.45-.55-.75-.25-1.55-.4V9H9v30h12.3q.15.8.4 1.55t.55 1.45Zm27 4q-3.65 0-6.375-2.275T26.2 38h3.1q.65 2.2 2.475 3.6Q33.6 43 36 43q2.9 0 4.95-2.05Q43 38.9 43 36q0-2.9-2.05-4.95Q38.9 29 36 29q-1.45 0-2.7.525-1.25.525-2.2 1.475H34v3h-8v-8h3v2.85q1.35-1.3 3.15-2.075Q33.95 26 36 26q4.15 0 7.075 2.925T46 36q0 4.15-2.925 7.075T36 46Z'/%3E%3C/svg%3E");

} 

div#uiInstructions > span.done            { color:limegreen; font-size:60px; 
    
    
background-position: center top;
background-size:80px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='limegreen' height='48' width='48'%3E%3Cpath d='M6.6 42q-1.2 0-2.1-.9-.9-.9-.9-2.1V9q0-1.2.9-2.1.9-.9 2.1-.9h34.8q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h34.8V9H6.6v30Zm3.4-5h10v-4H10Zm19.1-4 9.9-9.9-2.85-2.85-7.05 7.1-2.85-2.85-2.8 2.85ZM10 26h10v-4H10Zm0-8h10v-4H10ZM6.6 39V9v30Z'/%3E%3C/svg%3E");

} 







span.prop { 
    
    display: inline-block;
    position: relative;
    float: left;
    min-width: 35%;
    background: white;
    color: #222;
    font-size: 7px;
    box-sizing: border-box;
    text-align: left;
    margin: 3px auto 3px -1px;
    padding: 2px 0px 2px 4px;
    font-weight: 600;
    border-radius: 2px;
    overflow: hidden;
    align-self: flex-start;
    justify-self: flex-start;
    line-height: 1;
} 
span.prop i { 
    
    display: inline-block;
    position: absolute;
    top: 0px;
    min-width: 1px;
    background: green;
    color: #222;
    height: 12px;
    left: 0px;
    box-sizing: border-box;
    opacity: 0.5;
    border-radius: 0px;
    max-width: 100% !important;
}
div.onlyAdmin { 
    z-index:10001; 
    display:inline-block; 
}
        
        
        div.camDialog { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";  display:flex; min-width:100vw; max-width:100vw; min-height:100vh; max-height: 100vh; z-index:10000; position: fixed; top:0px; left:0px; box-sizing: border-box; padding:40px; background-color: rgba(24,24,24,1); justify-content: space-around; align-items: center; }
        
        div.camDialog.action           { background-color: white !important;           }
        div.camDialog.action.green     { background-color: greenyellow !important;     }
        div.camDialog.action.white     { background-color: white !important;           }
        
 @keyframes attention {
  0% { opacity:1; }
  50% { opacity:0.7; }
  100% { opacity:1; }
}       
span#camTrigger {
    
    
    display: block;
    position: fixed;
    z-index: 10;
    width: 120px;
    height: 120px;
    background-color: cornflowerblue;
    border-radius: 8px 0px 0px 8px;
    box-sizing: border-box;
    border: 0px solid white;
    top: 295px;
    right: -8px;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M16 33.7H32V32.75Q32 30.65 29.875 29.5Q27.75 28.35 24 28.35Q20.25 28.35 18.125 29.5Q16 30.65 16 32.75ZM24 25Q25.5 25 26.575 23.925Q27.65 22.85 27.65 21.35Q27.65 19.85 26.575 18.775Q25.5 17.7 24 17.7Q22.5 17.7 21.425 18.775Q20.35 19.85 20.35 21.35Q20.35 22.85 21.425 23.925Q22.5 25 24 25ZM7 42Q5.8 42 4.9 41.1Q4 40.2 4 39V13.35Q4 12.2 4.9 11.275Q5.8 10.35 7 10.35H14.35L18 6H30L33.65 10.35H41Q42.15 10.35 43.075 11.275Q44 12.2 44 13.35V39Q44 40.2 43.075 41.1Q42.15 42 41 42ZM41 39Q41 39 41 39Q41 39 41 39V13.35Q41 13.35 41 13.35Q41 13.35 41 13.35H32.25L28.6 9H19.4L15.75 13.35H7Q7 13.35 7 13.35Q7 13.35 7 13.35V39Q7 39 7 39Q7 39 7 39ZM24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Z'/%3E%3C/svg%3E");
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M2 42v-9.1h3V39h6.1v3Zm34.85 0v-3h6.1v-6.1h3V42Zm-29.2-5.55V11.5h4v24.95Zm6.05 0V11.5h2.1v24.95Zm6.1 0V11.5h4.15v24.95Zm6.25 0V11.5h6.05v24.95Zm8.15 0V11.5h2.1v24.95Zm4.15 0V11.5h1.9v24.95ZM2 15.1V6h9.1v3H5v6.1Zm40.95 0V9h-6.1V6h9.1v9.1Z'/%3E%3C/svg%3E");
    
    
    background-repeat: no-repeat;
    background-position: 24px 12px;
    background-size: 68px;
    animation-name: attention;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.8);
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.8);
    
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    
}
span#camTrigger:before {
    
    content: "ID SCANNER";
    display: flex;
    position: absolute;
    left: 0px;
    top: 82px;
    font-size: 14px;
    color: white;
    font-weight: 800;
    width: 100%;
    justify-content: center;
    justify-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 1px 8px 2px 5px;
    
}
div.onlyAdmin.hidden ,
div.camDialog.hidden { display:none !important; }
span#camTrigger.hidden { 
    
    width: 100vw;
    z-index:300;
    display: flex !important;
    visibility: visible !important;
    background-position: center;
    background-size: 280px;
    height: 100vh;
    top: 0px;
    right: 0px;
    opacity: 0.5;
    pointer-events: none;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
span#camTrigger.hidden:before { 
    
display:none;
}
div.camDialog > div.camAction { 
    
-webkit-transition:     all 400ms ease-in-out;
-moz-transition:        all 400ms ease-in-out;
-ms-transition:         all 400ms ease-in-out;
-o-transition:          all 400ms ease-in-out;
transition:             all 400ms ease-in-out;
}
div.camDialog > div.camAction.streaming { 
    
    transform: scale(2);
    margin-top: 0px;
    min-height: 36vh !important;
    max-height: 36vh !important;
    background: transparent;
    justify-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    
}
div.camDialog > div.camAction.streaming > span.camCLOSE {
    
        transform: scale(0.5);
}
        div.camDialog > div { display:flex; position:relative; box-sizing: border-box; padding: 24px; width:60vw; max-width:480px;  min-height:480px; flex-wrap: wrap; border-radius: 9px; transform: scale(1.2); }
        
        
        div.camContent { 
    display: inline-flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin-top: 0px;
    height: auto;
    align-items: center;
} 
        div.camContent.hidden { display:none; }
        div.camContent p { 
            
    display: inline-flex;
    position: relative;
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 1px 32px;
    margin: 0px 0px 24px 0px;
    /* margin-top: -40px; */
    font-size: 1.2rem;
    line-height: 1.25;
    text-align: center;
    /* pointer-events: none; */
    justify-content: center;
            
        } 
        
        div.camContent h2 { 
            display: inline-block;
            position: relative;
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 1px 0px;
            margin: 12px 0px 7px 0px;
            /* margin-top: -40px; */
            font-size: 1.9rem;
            line-height: 1.25;
            text-align: center;
        } 
        
        
        div.imagePreview {    
            
            display: inline-block;
            position: relative;
            width: 100%;
            overflow: hidden; 
        }
        div.imagePreview > video    { display:inline-block; position: relative; width:100%; height:auto; }
        div.imagePreview > canvas   { display:none; position: absolute; max-width:100%; height:auto; top:0px; left:0px; }
        
        
        button.ocrButton {      display: inline-block;
    position: relative;
    float: left !important;
    box-sizing: border-box;
    padding: 4px 12px;
    background: limegreen;
    color: white;
    border: 0px;
    outline: none;
    border-radius: 7px;
    font-size: 20px;
    margin-top: 24px;
    width: 100%;
    margin-bottom: 40px; } button.ocrButton.redbutton { background:red; }
        
        
        
button.initCam { 
    font-size: 2rem;
    float: none;
    padding: 10px 32px;
}
        
        
        
        div#liveVideo { 
            display: inline-block;
            position: relative;
            background-color: black;
            width: 100%;
            max-width: 100%;
            min-width: 100%;
            min-height: 320px;
            box-sizing: border-box;
            padding: 0px 0px 0px 0px;
            background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Ccircle fill='%23fff' stroke='none' cx='6' cy='50' r='6'%3E%3Canimate attributeName='opacity' dur='1s' values='0;1;0' repeatCount='indefinite' begin='0.1'/%3E%3C/circle%3E%3Ccircle fill='%23fff' stroke='none' cx='26' cy='50' r='6'%3E%3Canimate attributeName='opacity' dur='1s' values='0;1;0' repeatCount='indefinite' begin='0.2'/%3E%3C/circle%3E%3Ccircle fill='%23fff' stroke='none' cx='46' cy='50' r='6'%3E%3Canimate attributeName='opacity' dur='1s' values='0;1;0' repeatCount='indefinite' begin='0.3'/%3E%3C/circle%3E%3C/svg%3E");
            
            animation-name: camload; 
            background-size:128px; 
            background-repeat: no-repeat;
            background-position: 60% center;
}
        
        
     .loading div#liveVideo { animation-name: camload;  animation-duration: 2s; animation-iteration-count: infinite; }
                     
@keyframes camload {
  0%   {background-color:forestgreen;}
  50%  {background-color:rgba(37,96,96,1.00);}
  100% {background-color:forestgreen;}
}
        
        
        div#liveVideo > div.highlighter  { display:none; 
            
            -webkit-transition: all 333ms ease-in-out;
-moz-transition: all 333ms ease-in-out;
-ms-transition: all 333ms ease-in-out;
-o-transition: all 333ms ease-in-out;
transition: all 333ms ease-in-out;  
        
        
        }
            
        div#liveVideo > div.highlighter.active { 
            
            display:         flex; 
            align-items:     center;
            justify-content: center;
            justify-content: space-around;
                    
            position:           absolute;
            max-width:          100%; 
            max-height:         100%;
            box-sizing:         border-box; 
            padding:            0px 0px; 
            border:             2px solid rgba(255,0,128,1);
            border-radius:      5px;
            background-color:   rgba(255,255,255,0.1); 
        
        }
        
        div#liveVideo > div.highlighter > p { 
            
            display:            inline-block; 
            min-width:          10px;
            max-width:          100%; 
            box-sizing:         border-box; 
            padding:            5px; 
            font-size:          18px; 
            color:              rgba(255,0,128,1);
            text-align:         center;
            text-transform:     capitalize;
            line-height:        2;
            opacity:            0.5;
            font-weight:        600;
        
        } 
        div#liveVideo > div.highlighter.smaller { background-color:rgba(255,255,255,0.7); }
        div#liveVideo > div.highlighter.smaller > p { 
            
            font-size:          12px; 
            line-height:        1.2;
            opacity:            0.9;
            font-weight:        400;
        
        } 
        
        div#liveVideo > div#item0.highlighter.active { border-color: rgba(255,0,128,1); } 
        div#liveVideo > div#item0.highlighter > p {  color:        rgba(255,0,128,1); } 
        
        div#liveVideo > div#item1.highlighter.active {  border-color: forestgreen;  } 
        div#liveVideo > div#item1.highlighter > p { color:        forestgreen;  } 
        
        div#liveVideo > div#item2.highlighter.active {  border-color: mediumblue;  } 
        div#liveVideo > div#item2.highlighter > p { color:        mediumblue;  } 
        
        div#liveVideo > div#item3.highlighter.active {  border-color: orange;  } 
        div#liveVideo > div#item3.highlighter > p { color:        orange;  } 
        
        div#liveVideo > div#item4.highlighter.active {  border-color: darkgoldenrod;  } 
        div#liveVideo > div#item4.highlighter > p { color:        darkgoldenrod;  } 
        
        
        
        
        
        
        
        
        
        
        #videoElement { 
            
            align-self: flex-start; 
            position: absolute; 
            max-width:100%; 
            background-color:rgba(255,255,255,0.00); 
            min-height:320px; 
            box-sizing: border-box; 
            background-repeat: no-repeat; 
            background-position: center; 
            animation-duration: 2s; 
            animation-iteration-count: infinite; 
        
        }
        
   
        
        
        
        #capture      { display:none; }
        
        
        #videoElement.zoom0 { transform: scale(1); } 
        #videoElement.zoom1 { transform: scale(2); } 
        #videoElement.zoom2 { transform: scale(3); } 
        #videoElement.zoom3 { transform: scale(4); } 
        #videoElement.zoom4 { transform: scale(5); } 
        #videoElement.zoom5 { transform: scale(6); } 
        #videoElement.zoom6 { transform: scale(8); } 
        
        
        
        
        
        
        
        
        div.ocrResult   {    diplay: inline-block;
                             position: relative;
                             box-sizing: border-box;
                             text-align: center;
                             font-weight: 400;
                             font-size:1.25rem;
                             padding: 9px 14px;
                             float: left;
                             background: transparent;
                             color: #222;
                             width: 100%;
                             min-height: 180px;
                             margin-top: 20px;
                             border-radius: 8px;  }
    div#blackBalken {
diplay: inline-block; position: relative; box-sizing: border-box; height:24px; float:left; background: black; min-width:100%; border-radius: 12px; margin-top:40px; padding:0px 0px; text-align: left;
    }
        div#ocrprozent { 
            
            diplay: inline-block; position: relative; box-sizing: border-box; height:24px; float:left; background: rgba(96,176,0,1.00); min-width:24px; border-radius: 12px; margin:0px; 
            text-align: center; line-height:1; font-size:12px; padding-top:5px; color:white; 
            -webkit-transition: width 250ms linear;
            -moz-transition: width 250ms linear;
            -ms-transition: width 250ms linear;
            -o-transition: width 250ms linear;
            transition: width 250ms linear;
        }
        
        
        div.setup { position:fixed; top:20px; left:0px; z-index:10000; box-sizing: border-box; padding:12px 24px; width:100%; background:rgba(0,0,0,0.5); color:white; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif" } div.setup > input { width:30px; }
        
        span.camCLOSE, button.camON, button.camOFF {
            display: inline-block !important;
            height: 52px;
            width: 52px;
            min-width: 52px;
            max-width: 52px;
            min-height: 52px;
            max-height: 52px;     
            box-sizing: border-box;
            outline: none;
            border: 4px solid rgba(0,0,0,0.2);
            background-color: transparent;
            background-repeat: no-repeat;
            background-size: 36px;
            background-position: center;
            font-size: 0px;
            color: rgba(0,0,0,0);
            border-radius: 50% !important;
            position: absolute !important;
            top: -20px;
            cursor: pointer;
            padding:0px 0px 0px 0px;
            flex:1; 
            z-index:99999;
        } 
        span.camCLOSE  {
                display: inline-flex !important;
    height: 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    min-height: 52px;
    max-height: 52px;
    box-sizing: border-box;
    outline: none;
    border: 4px solid rgba(0,0,0,0.2);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 36px;
    background-position: center;
    font-size: 0px;
    color: rgba(0,0,0,0);
    border-radius: 50% !important;
    position: relative !important;
    /* top: 8px; */
    cursor: pointer;
    padding: 0px 0px 0px 0px;
    flex: 1;
    z-index: 99999;
    float: right;
    justify-self: flex-end;
    align-self: flex-end;
            
        } 
        button.camON, button.camOFF { left: 15px; background-size: 32px; opacity:0.2; visibility:hidden !important; }
        button.camOFF { opacity:0.9; }
        span.camINFO  { flex:9; }
        
        button.camON  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15 8v8H5V8h10m1-2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4V7c0-.55-.45-1-1-1z'/%3E%3C/svg%3E"); border-color:green; background-color:green; }
        button.camOFF { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='white'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9.56 8l-2-2-4.15-4.14L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.55-.18L19.73 21l1.41-1.41-8.86-8.86L9.56 8zM5 16V8h1.73l8 8H5zm10-8v2.61l6 6V6.5l-4 4V7c0-.55-.45-1-1-1h-5.61l2 2H15z'/%3E%3C/svg%3E"); border-color:red; background-color:red;  }
       
        div.camAction button.camOFF            {  display:none; }
        div.camAction button.camON             {  display:block;  }
        div.camAction.streaming button.camOFF  { display:block; }
        div.camAction.streaming button.camON   { display:none; }
        
        span.camINFO {     
            
            display: none;
            float: none;
            text-align: center;
            min-width: 280px;
            max-width: 280px;
            box-sizing: border-box;
            font-size: 14px;
            color: #cdcdcd;
            opacity: 0.1;
            max-height: 38px;
            position: absolute;
            top: 10px;
            left: 50%;
            margin-left: -140px;
            pointer-events: none;
            
}
        
span.camCLOSE {
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M12.45 37.65 10.35 35.55 21.9 24 10.35 12.45 12.45 10.35 24 21.9 35.55 10.35 37.65 12.45 26.1 24 37.65 35.55 35.55 37.65 24 26.1Z'/%3E%3C/svg%3E");
    /* right: 14px; */
    border-color: red;
    margin-right: 0px;
    margin-left: auto;
    margin-bottom: -20px;
    background-color: red;
    transform: scale(0.75) !important;
    
}
span.camCLOSE:hover { }
        
        
        
div#cam01 {  }
div#cam01 > h2,
div#cam01 > p  { color:white !important; }
div.camDialog div#cam02 > h2,
div.camDialog div#cam02 > p  { color:white !important; }
div.camDialog.action  div#cam02 > h2,
div.camDialog.action  div#cam02 > p  { color:#333 !important; }
        
        div.framer { 
            
                display: inline-flex;
    box-sizing: border-box;
    padding: 0px 36px;
    position: absolute;
    width: 86%;
    left: 7%;
    border: 5px solid lightgreen;
    top: 17%;
    height: 65%;
    background-color: rgba(0,0,0,0);
    border-radius: 20px;
    opacity: 0.33 !important;
    text-align: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    font-size: 1rem;
    color: white;
    -webkit-transition: all  100ms linear;
    -moz-transition: all     100ms linear;
    -ms-transition: all      100ms linear;
    -o-transition: all       100ms linear;
    transition: all          100ms linear;
            
        
        }
        
            @keyframes idcard {
              0%   {border:4px solid lightgreen;}
              50%  {border:4px solid black;}
              100% {border:4px solid lightgreen;}
            }
        
        
        .loading div.framer { display: none; }
        
  
            @keyframes fonter {
              0%    { color:white; opacity:0;
    transform: scale(1.5); top: -900px; }
              40%   { color:white; opacity:0;
    transform: scale(1.5); top: -900px; }
              100%  { color:#999;  opacity:0.8;
    transform: scale(0.7); top: -24px; }
            }
        
div.sampleIDs {
    
    animation-name: fonter;
    animation-timing-function: ease;
    animation-duration: 2s;
    opacity: 0.8;
    color: #999;
    display: inline-flex;
    position: absolute;
    width: 100%;
    top: 12px;
    max-width: 680px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    z-index: 10001;
    left: 50%;
    margin-left: -340px;
    box-sizing: border-box;
    padding: 32px 24px;
    border-radius: 12px;
    transform: scale(0.7);
}
div.sampleIDs:before { 
    display: inline-block;
    position: relative;
    float:left;
    min-width:100%;
    content: 'DEMO ID-Samples';
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 12px;
    color:inherit;
}
img.idphoto { 
            
    position: relative;
    cursor:pointer;
    background-color: forestgreen;
    max-width: 200px;
    min-width: 200px;
    max-height: 128px;
    margin:    2px;
    opacity:   0.95;
    border-radius:10px;
    -webkit-box-shadow: 1px 1px 4px 0 #000000;
    box-shadow: 1px 1px 4px 0 #000000;
    border:3px solid white;
} 
img.idphoto:hover { opacity:1 !important; }
img.idphoto.front,
img.idphoto.front:hover  { display:none; }
span#vidInf { 
        text-align: center;
    /* display: inline-block; */
    display:none;
    position: relative;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
}
div.setup { display:none; }
    
    div.uiConfirm { display:none }
/*
    div.uiConfirm.open {
            
            
            display: flex;
            position: absolute;
            flex-direction: column;
            align-items: center;
            align-content: center;
            text-align: center;
            box-sizing: border-box;
            padding: 32px;
            background-color: #444;
            border-radius: 12px;
            top: 30vh;
            left: calc(50vw - 160px);
            width: 320px;
            -webkit-box-shadow: 0 0 12px 0 rgba(0,0,0,0.5);
            box-shadow: 0 0 12px 0 rgba(0,0,0,0.5);
            color: white;
            font-weight: 100;
            
            
        }   
*/    
    
    
    
    
div.camDialog > div { max-width: 360px !important; min-height: 640px !important }
div.camContent p { 
    font-size: 1rem !important;
    line-height: 1.5;
    font-weight: 400;
}
    
    
    
div.imagePreview, div#liveVideo {  
    
    
    min-width: 300px !important;
    max-width: 300px !important;
    min-height: 225px !important;
    max-height: 225px !important;
    
}
div#liveVideo {  
    
        display: inline-flex;
    position: relative !important;
    border-radius: 10px;
    overflow: hidden;
    justify-items: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    
}
    
    
    
div.imagePreview {  
        
    display: inline-flex !important;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    
}
    
div.framer { 
    
    width: 294px !important;
    left: auto !important;
    top: auto !important;
    height: 190px !important;
    background-color: rgba(255,255,255,0);
    opacity: 0.9 !important;
    font-size: 0.9rem !important;
    text-shadow: 0px 0px 4px black;
    background-size: 103%;
    background-position: center;
    background-repeat: no-repeat;
}



@keyframes sampleview { 
    
  0%         { background-size: 40%;   background-image: url('sampleT.png');   }
  33%        { background-size: 103%;  background-image: url('sampleT.png');   }
  80%        { background-size: 103%;  background-image: url('sample.png');    }
  100%       { background-size: 40%;   background-image: url('sampleT.png');   }
    
}

div.imagePreview:not(.loading) > div.framer { 
    
      background-image: none;
      animation-name: sampleview;
      animation-duration: 3.3s;
      animation-delay: 1.33s;
    
}



    
#videoElement {
    
    max-width: 400px !important;
    min-width: 400px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    margin-top: -37.5px;
    transform: rotate(270deg) scaleY(-1) !important;
    background: transparent !important;
    outline: none;
    border-radius: 3px;
    box-shadow: none;
    border: 0px solid rgba(24,24,24,1);
    box-sizing: border-box;
    overflow: hidden;
    padding: 0px 0px;
    
}
    
    
    
div#brightness {
    display: flex;
    position: absolute;
    min-width: 98.5%;
    max-width: 99%;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-sizing: border-box;
    background-repeat: repeat;
    opacity: 0.8;
    min-height: 44%;
    bottom: 4px;
    left: 2px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 9px;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,0.1)'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='1' stroke='hsla(259, 0%, 76%, 0.2)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-11,-11)' fill='url(%23a)'/></svg>");
}
div#brightness > b { 
    display: flex;
    position: absolute;
    top: -44px;
    box-sizing: border-box;
    min-width: 32%;
    padding-top: 5px;
    padding-left: 37px;
    letter-spacing: -2px;
    padding-bottom: 4px;
    padding-right: 12px;
    min-height: 28px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    left: 6px;
    align-content: center;
    line-height: 1;
    justify-content: left;
    font-size: 2rem;
    color: white;
    font-weight: 600;
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='white' width='48'%3E%3Cpath d='M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h30q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V9L9 39Zm20.7-2.4v-4.4h-4.4v-2.5h4.4v-4.4h2.5v4.4h4.4v2.5h-4.4v4.4ZM11.4 16.1h10.1v-2.5H11.4Z'/%3E%3C/svg%3E");
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    background-color: black;
}
div#brightness > img {     
    
    
    display: flex;
    position: absolute;
    min-width: 100%;
    max-width: 100%;
    margin: 0px;
    left: 0px;
}
div#camControl input.up, div#camControl input.down, div#camControl input.lock, div#camControl input.ok {     display: inline-flex;
    border: 0px;
    margin-top: 2px;
    border-radius: 4px;
    background-repeat: no-repeat; background-position: 8px center; background-size:18px; }
div#camControl input.up   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 96 960 960' width='48'%3E%3Cpath d='m283 711-43-43 240-240 240 239-43 43-197-197-197 198Z'/%3E%3C/svg%3E"); }
div#camControl input.down { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 96 960 960' width='48'%3E%3Cpath d='M480 711 240 471l43-43 197 198 197-197 43 43-240 239Z'/%3E%3C/svg%3E"); }
div#camControl input.lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' viewBox='0 96 960 960' width='48'%3E%3Cpath d='M480 775q14 0 24.5-10.5T515 740q0-14-10.5-24.5T480 705q-14 0-24.5 10.5T445 740q0 14 10.5 24.5T480 775Zm-30-144h60V368h-60v263ZM330 936 120 726V426l210-210h300l210 210v300L630 936H330Zm25-60h250l175-175V451L605 276H355L180 451v250l175 175Zm125-300Z'/%3E%3C/svg%3E"); }
div#camControl input.ok { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' fill='darkgreen' viewBox='0 96 960 960' width='48'%3E%3Cpath d='M370 736h60V416h-60v320Zm160 0h60V416h-60v320Zm-50 240q-82 0-155-31.5t-127.5-86Q143 804 111.5 731T80 576q0-83 31.5-156t86-127Q252 239 325 207.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 82-31.5 155T763 858.5q-54 54.5-127 86T480 976Zm0-60q142 0 241-99.5T820 576q0-142-99-241t-241-99q-141 0-240.5 99T140 576q0 141 99.5 240.5T480 916Zm0-340Z'/%3E%3C/svg%3E"); background-color:cornflowerblue; color:darkgreen; }
div#liveVideo:before, 
div#liveVideo:after {
    
    position: absolute !important;
    left: -2% !important;
    width: 104%;
    content: "";
    background-color: rgba(24,24,24,1);
    min-height: 250px;
    z-index: 2;
    opacity: 1;
    
    -webkit-transition: all 1800ms ease-in-out;
    -moz-transition: all 1800ms ease-in-out;
    -ms-transition: all 1800ms ease-in-out;
    -o-transition: all 1800ms ease-in-out;
    transition: all 1800ms ease-in-out;
    
    
}
div#liveVideo:after {
    
    bottom: -2px !important;
    
}
div#liveVideo:before {
    
    top: -2px !important;
    
}
div.camAction.streaming div#liveVideo:before, 
div.camAction.streaming div#liveVideo:after {
    
    min-height: 0px;
    
    
    -webkit-transition: all 1800ms ease-in-out;
    -moz-transition: all 1800ms ease-in-out;
    -ms-transition: all 1800ms ease-in-out;
    -o-transition: all 1800ms ease-in-out;
    transition: all 1800ms ease-in-out;
    
}