<template>
<div style="position: relative; width: 100%; height: 100%; min-width: 100px; min-height: 100px; background: #000">
<div class="dce-macro-use-mobile-native-like-ui" style="display: none">
<div class="dce-header">
<div class="dce-mn-resolution-box" title="camera settings">720p</div>
<div class="dce-mn-select-camera-icon" title="Select Camera or Resolution">
<svg
id="video-resolution"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="36"
height="21"
viewBox="0 0 36 21"
>
<defs>
<clipPath id="video-resolutionclip-path">
<rect id="Rectangle_2800" data-name="Rectangle 2800" width="36" height="21" fill="none" />
</clipPath>
</defs>
<g id="Group_613" data-name="Group 613" clip-path="url(#video-resolutionclip-path)">
<path
id="Path_1574"
data-name="Path 1574"
d="M2.023,20.5A1.53,1.53,0,0,1,.5,18.963h0V2.039A1.531,1.531,0,0,1,2.023.5H21.811a1.531,1.531,0,0,1,1.522,1.539V18.962A1.53,1.53,0,0,1,21.811,20.5Z"
transform="translate(-0.005)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1"
/>
<path
id="Path_1575"
data-name="Path 1575"
d="M35.787,16.473a1.531,1.531,0,0,1-1.524,1.538,1.512,1.512,0,0,1-.679-.162L27.5,14.772a1.542,1.542,0,0,1-.842-1.375V7.606A1.541,1.541,0,0,1,27.5,6.23l6.089-3.081a1.516,1.516,0,0,1,2.042.69,1.555,1.555,0,0,1,.16.686Z"
transform="translate(-0.282)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1"
/>
<path
id="Path_1576"
data-name="Path 1576"
d="M10.252,9.829H6.719V4.8H5.651V16.146H6.719V10.628h3.533v5.518h1.054V4.8H10.252Z"
transform="translate(-0.06)"
fill="#fff"
/>
<path
id="Path_1577"
data-name="Path 1577"
d="M15.791,4.8h-2.44V16.147h2.536c2.246,0,2.952-1.387,2.952-3.5V8.134c0-2-.721-3.333-3.048-3.333m1.968,7.676c0,1.652-.167,2.871-1.941,2.871H14.4V5.627h1.372c1.677,0,1.983.925,1.983,2.62Z"
transform="translate(-0.141)"
fill="#fff"
/>
</g>
</svg>
<svg
class="dce-mn-select-camera-down-icon"
xmlns="http://www.w3.org/2000/svg"
width="6.5"
height="4.008"
viewBox="0 0 6.5 4.008"
>
<g id="arrow-down" transform="translate(1145.886 -1660.582) rotate(90)">
<path
id="Path_75"
data-name="Path 75"
d="M1661.34,1145.886l3.25-3.25-3.25-3.25-.758.758,2.492,2.492-2.492,2.492Z"
transform="translate(0)"
fill="currentColor"
/>
</g>
</svg>
</div>
<div class="dce-mn-camera-and-resolution-settings">
<div class="dce-mn-camera-container">
<div style="font-size: 12px; color: white; margin: 12px">Camera</div>
<div class="dce-mn-cameras">
<div class="dce-mn-camera-option" data-device-id="">example camera</div>
</div>
</div>
<div class="dce-mn-camera-and-resolution-bar"></div>
<div class="dce-mn-resolutions">
<div style="font-size: 12px; color: white; margin: 12px">Resolution</div>
<div class="dce-mn-resolution-option" data-width="640" data-height="480">480P</div>
<div class="dce-mn-resolution-option" data-width="1080" data-height="720">720P</div>
<div class="dce-mn-resolution-option" data-width="1920" data-height="1080">1080P</div>
<div class="dce-mn-resolution-option" data-width="2560" data-height="1440">2K</div>
<div class="dce-mn-resolution-option" data-width="3840" data-height="2160">4K</div>
</div>
</div>
<div class="dce-mn-upload-image-icon" title="Upload Image">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
<g
id="Images-Photography_Image-Files_image-file-add"
data-name="Images-Photography / Image-Files / image-file-add"
transform="translate(-376.074 -2192.76)"
>
<g id="Group_184" data-name="Group 184" transform="translate(377.074 2193.76)">
<g id="image-file-add">
<path
id="Oval_118"
data-name="Oval 118"
d="M383.857,2204.325a2.782,2.782,0,1,0-2.783-2.782A2.782,2.782,0,0,0,383.857,2204.325Z"
transform="translate(-375.509 -2191.804)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
<path
id="Shape_876"
data-name="Shape 876"
d="M392.657,2204.907l-.863-1.38a.7.7,0,0,0-1.18,0l-3.672,5.874-1.5-2.4a.7.7,0,0,0-1.18,0l-4.193,6.709h6.956"
transform="translate(-375.9 -2190.066)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
<path
id="Shape_877"
data-name="Shape 877"
d="M390.987,2225.76H378.465a1.392,1.392,0,0,1-1.391-1.391v-29.217a1.392,1.392,0,0,1,1.391-1.391H396.96a1.394,1.394,0,0,1,.984.407l5.157,5.157a1.39,1.39,0,0,1,.408.984v5.973"
transform="translate(-377.074 -2193.76)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
<path
id="Oval_119"
data-name="Oval 119"
d="M396.422,2221.456a8.348,8.348,0,1,0-8.348-8.348A8.347,8.347,0,0,0,396.422,2221.456Z"
transform="translate(-372.77 -2189.456)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
<path
id="Shape_878"
data-name="Shape 878"
d="M394.074,2207.76v8.348"
transform="translate(-370.422 -2188.282)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
<path
id="Shape_879"
data-name="Shape 879"
d="M399.422,2210.76h-8.348"
transform="translate(-371.596 -2187.108)"
fill="none"
stroke="#fff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</g>
</g>
</g>
</svg>
</div>
<div class="dce-mn-torch" title="torch">
<svg
class="dce-mn-torch-auto"
viewBox="0 0 512 512"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fill="#fff"
>
<path d="M220,45 74.5,255 212.5,277.5 184,429 329.5,219 191.5,196.5Z" />
<text x="250" y="480" font-size="256" font-family="Verdana">A</text>
</svg>
<svg
class="dce-mn-torch-on"
viewBox="0 0 512 512"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fill="#fff"
>
<path d="M280,0 86,280 270,310 232,512 426,232 242,202Z" />
</svg>
<svg
class="dce-mn-torch-off"
viewBox="0 0 512 512"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fill="#fff"
>
<defs>
<mask id="dce-mn-torch-off-mask">
<rect width="512" height="512" fill="#fff" />
<path d="M116,70 406,392 396,442 106,120Z" fill="#000" />
</mask>
</defs>
<path d="M280,0 86,280 270,310 232,512 426,232 242,202Z" mask="url(#dce-mn-torch-off-mask)" />
<path d="M118,85 408,407 394,427 104,105Z" />
</svg>
</div>
<div class="dce-mn-close" title="close">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
width="24"
height="24"
stroke-width="4"
>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</div>
</div>
<div
class="dce-camera-related-container"
style="position: relative; width: 100%; height: 100%; background-color: black"
>
<svg
class="dce-bg-loading"
style="
display: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 20%;
height: 20%;
fill: #aaa;
animation: 1s linear infinite dce-rotate;
z-index: 3;
"
viewBox="0 0 1792 1792"
>
<path
d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z"
/>
</svg>
<svg
class="dce-bg-camera"
style="
display: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 40%;
height: 40%;
fill: #aaa;
"
viewBox="0 0 2048 1792"
>
<path
d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"
/>
</svg>
<div class="dce-video-container" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
<div
class="dce-scanarea"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none"
>
<div
class="dce-scanlight"
style="
display: none;
position: absolute;
width: 100%;
height: 3%;
border-radius: 50%;
box-shadow: 0px 0px 2vw 1px #00e5ff;
background: #fff;
animation: 3s infinite dce-scanlight;
user-select: none;
"
></div>
</div>
</div>
<div class="dce-subfooter">
<div class="dce-mn-bounds-detection" title="Detect Borders">
<div class="dce-mn-btn-icon-container">
<svg
class="dce-mn-bounds-detection-icon"
xmlns="http://www.w3.org/2000/svg"
width="25.04"
height="25"
viewBox="0 0 25.04 25"
>
<g id="bounds-detection" transform="translate(0.02)">
<g id="Group_306" data-name="Group 306" transform="translate(-0.02)">
<path
id="Path_982"
data-name="Path 982"
d="M.791,8.146h.02a.468.468,0,0,0,.516-.416.455.455,0,0,0,0-.063V1.927a1,1,0,0,1,1-1H7.957A.468.468,0,0,0,8.436.492.468.468,0,0,0,7.977.013H2.247A1.913,1.913,0,0,0,.333,1.927v5.74A.468.468,0,0,0,.791,8.146Z"
transform="translate(-0.293 -0.012)"
fill="currentColor"
/>
<path
id="Path_983"
data-name="Path 983"
d="M140.092,132.044a.468.468,0,0,0-.458-.478h-.02a.468.468,0,0,0-.478.458q0,.01,0,.02v5.74a1,1,0,0,1-1,1h-5.671a.5.5,0,0,0,0,1h5.711a1.913,1.913,0,0,0,1.915-1.912q0-.041,0-.081Z"
transform="translate(-115.132 -114.777)"
fill="currentColor"
/>
<path
id="Path_984"
data-name="Path 984"
d="M7.665,138.7H1.955a1,1,0,0,1-1-1v-5.661a.468.468,0,0,0-.458-.478H.48a.468.468,0,0,0-.478.458q0,.01,0,.02v5.74A1.914,1.914,0,0,0,1.914,139.7H7.665a.5.5,0,1,0,0-1Z"
transform="translate(-0.001 -114.777)"
fill="currentColor"
/>
<path
id="Path_985"
data-name="Path 985"
d="M138.405,0l-.081,0h-5.711a.468.468,0,0,0-.478.458q0,.01,0,.02a.468.468,0,0,0,.458.478h5.731a1,1,0,0,1,1,1v5.7a.5.5,0,0,0,1,0V1.915A1.913,1.913,0,0,0,138.405,0Z"
transform="translate(-115.277)"
fill="currentColor"
/>
<path
id="Path_986"
data-name="Path 986"
d="M32.226,33.132v14.81a1.227,1.227,0,0,0,1.227,1.227H48.265a1.217,1.217,0,0,0,1.227-1.206V33.132a1.217,1.217,0,0,0-1.206-1.227H33.453A1.227,1.227,0,0,0,32.226,33.132Zm16.251-.045a.19.19,0,0,1,0,.045v14.81a.19.19,0,0,1-.179.2H33.453a.19.19,0,0,1-.211-.168.182.182,0,0,1,0-.033V33.132a.19.19,0,0,1,.212-.212H48.265A.191.191,0,0,1,48.477,33.087Z"
transform="translate(-28.359 -28.076)"
fill="currentColor"
/>
<path
id="Path_987"
data-name="Path 987"
d="M59.363,95.652h9.209a.478.478,0,0,0,.478-.478.488.488,0,0,0-.478-.478H59.363a.488.488,0,0,0-.478.478A.478.478,0,0,0,59.363,95.652Z"
transform="translate(-51.309 -82.838)"
fill="currentColor"
/>
<path
id="Path_988"
data-name="Path 988"
d="M59.363,128.6h9.209a.478.478,0,0,0,.478-.478.488.488,0,0,0-.478-.478H59.363a.488.488,0,0,0-.478.478A.478.478,0,0,0,59.363,128.6Z"
transform="translate(-51.309 -111.663)"
fill="currentColor"
/>
<path
id="Path_989"
data-name="Path 989"
d="M59.364,64.6h4.285a.488.488,0,0,0,.478-.478.478.478,0,0,0-.478-.478H59.364a.468.468,0,0,0-.478.458q0,.01,0,.02A.478.478,0,0,0,59.364,64.6Z"
transform="translate(-51.443 -55.678)"
fill="currentColor"
/>
</g>
</g>
</svg>
<svg
class="dce-mn-bounds-detection-on"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="20"
height="20"
viewBox="0 0 20 20"
>
<defs>
<clipPath id="clip-pathbounds-detection-on">
<rect id="Rectangle_2800" data-name="Rectangle 2800" width="20" height="20" fill="none" />
</clipPath>
</defs>
<g id="Group_613" data-name="Group 613" clip-path="url(#clip-pathbounds-detection-on)">
<path id="Path_1574" data-name="Path 1574" d="M10,0A10,10,0,1,1,0,10,10,10,0,0,1,10,0" fill="#43cc48" />
<path
id="Path_1575"
data-name="Path 1575"
d="M6.843,7.5a2.447,2.447,0,0,0-1.9.737A2.927,2.927,0,0,0,4.27,10.29a3.345,3.345,0,0,0,.312,1.484,2.257,2.257,0,0,0,.894.982,2.594,2.594,0,0,0,1.337.341,2.431,2.431,0,0,0,1.89-.742,2.945,2.945,0,0,0,.679-2.065A2.911,2.911,0,0,0,8.7,8.256,2.38,2.38,0,0,0,6.843,7.5m-.01,4.658q-1.382,0-1.382-1.87a2.438,2.438,0,0,1,.325-1.372,1.171,1.171,0,0,1,1.047-.479Q8.2,8.439,8.2,10.29q0,1.87-1.367,1.87"
fill="#fff"
/>
<path
id="Path_1576"
data-name="Path 1576"
d="M13.509,7.5a2.32,2.32,0,0,0-1,.21,1.591,1.591,0,0,0-.693.6h-.059L11.6,7.6h-.9V13h1.148V10.31a2.371,2.371,0,0,1,.336-1.441,1.27,1.27,0,0,1,1.064-.43.974.974,0,0,1,.8.308,1.451,1.451,0,0,1,.252.933V13h1.152V9.48A1.733,1.733,0,0,0,13.509,7.5"
fill="#fff"
/>
</g>
</svg>
<svg
class="dce-mn-bounds-detection-off"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="20"
height="20"
viewBox="0 0 20 20"
>
<defs>
<clipPath id="clip-pathdce-mn-bounds-off">
<rect id="Rectangle_2801" data-name="Rectangle 2801" width="20" height="20" fill="none" />
</clipPath>
</defs>
<g id="Group_614" data-name="Group 614" clip-path="url(#clip-pathdce-mn-bounds-off)">
<path id="Path_1577" data-name="Path 1577" d="M10,0A10,10,0,1,1,0,10,10,10,0,0,1,10,0" fill="#575757" />
<path
id="Path_1578"
data-name="Path 1578"
d="M5.918,8.279a2.447,2.447,0,0,0-1.9.737,2.927,2.927,0,0,0-.673,2.051,3.345,3.345,0,0,0,.312,1.484,2.257,2.257,0,0,0,.894.982,2.594,2.594,0,0,0,1.337.341,2.43,2.43,0,0,0,1.89-.742,2.945,2.945,0,0,0,.679-2.065,2.915,2.915,0,0,0-.684-2.034,2.38,2.38,0,0,0-1.855-.754m-.01,4.658q-1.382,0-1.382-1.87a2.438,2.438,0,0,1,.325-1.372A1.171,1.171,0,0,1,5.9,9.216q1.377,0,1.377,1.851,0,1.87-1.367,1.87"
fill="#fff"
/>
<path
id="Path_1579"
data-name="Path 1579"
d="M11.346,7.3a.657.657,0,0,1,.568-.242,2.648,2.648,0,0,1,.811.137l.3-.87a3.673,3.673,0,0,0-1.192-.2,1.836,1.836,0,0,0-1.372.462,1.965,1.965,0,0,0-.449,1.418v.352l-.889.351v.537h.889v4.532h1.152V9.245h1.319V8.376H11.167V8.025a1.212,1.212,0,0,1,.179-.725"
fill="#fff"
/>
<path
id="Path_1580"
data-name="Path 1580"
d="M14.974,7.3a.657.657,0,0,1,.568-.242,2.648,2.648,0,0,1,.811.137l.3-.87a3.673,3.673,0,0,0-1.192-.2,1.836,1.836,0,0,0-1.372.462,1.965,1.965,0,0,0-.449,1.418v.352l-.889.351v.537h.889v4.532H14.8V9.245h1.319V8.376H14.8V8.025a1.212,1.212,0,0,1,.179-.725"
fill="#fff"
/>
</g>
</svg>
</div>
<div class="dce-mn-bounds-detection-text">Detect Borders</div>
</div>
<div class="dce-mn-smart-capture" title="Smart Capture">
<div class="dce-mn-btn-icon-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28.762"
height="23.002"
viewBox="0 0 28.762 23.002"
class="dce-mn-smart-capture-icon"
>
<g id="smart-capture" transform="translate(0 -32)">
<path
id="Path_1017"
data-name="Path 1017"
d="M42.752,130.3,40.2,137.156h1.177l.665-1.9h2.615l.683,1.9h1.186L43.974,130.3Zm-.377,4.007V134.3l.62-1.779a9.96,9.96,0,0,0,.368-1.258c.027.126.09.323.171.593s.144.467.2.593l.638,1.86Z"
transform="translate(-36.588 -89.468)"
fill="currentColor"
/>
<path
id="Path_1018"
data-name="Path 1018"
d="M122.241,151.679h.009a2.288,2.288,0,0,1-.323,1.384,1.2,1.2,0,0,1-1.015.413.938.938,0,0,1-.764-.3,1.382,1.382,0,0,1-.243-.89V149.1H118.8v3.378a1.969,1.969,0,0,0,.458,1.42,1.873,1.873,0,0,0,1.4.467,2.191,2.191,0,0,0,.961-.207,1.557,1.557,0,0,0,.656-.566h.054l.153.674h.863V149.1h-1.105Z"
transform="translate(-108.126 -106.578)"
fill="currentColor"
/>
<path
id="Path_1019"
data-name="Path 1019"
d="M182.3,141.637a.766.766,0,0,1-.2-.584v-2.767h1.474v-.836h-1.474V136.3h-.674l-.377,1.1-.755.4v.485h.71v2.785q0,1.644,1.563,1.644a3.165,3.165,0,0,0,.593-.054,2.107,2.107,0,0,0,.467-.135V141.7a2.8,2.8,0,0,1-.8.126A.721.721,0,0,1,182.3,141.637Z"
transform="translate(-164.1 -94.928)"
fill="currentColor"
/>
<path
id="Path_1020"
data-name="Path 1020"
d="M227.862,148.1a2.317,2.317,0,0,0-1.815.71,2.785,2.785,0,0,0-.647,1.959,3.206,3.206,0,0,0,.3,1.42,2.229,2.229,0,0,0,.854.943,2.494,2.494,0,0,0,1.276.323,2.31,2.31,0,0,0,1.806-.71,2.832,2.832,0,0,0,.647-1.977,2.784,2.784,0,0,0-.656-1.95A2.243,2.243,0,0,0,227.862,148.1Zm-.009,4.457c-.881,0-1.321-.593-1.321-1.788a2.338,2.338,0,0,1,.314-1.312,1.123,1.123,0,0,1,1.006-.458c.881,0,1.321.593,1.321,1.77C229.156,151.964,228.725,152.557,227.853,152.557Z"
transform="translate(-205.147 -105.668)"
fill="currentColor"
/>
<path
id="Path_1021"
data-name="Path 1021"
d="M25.877,35.639H21.663a.7.7,0,0,1-.575-.288l-.575-.764C19.264,32.961,18.59,32,17.44,32H11.4c-1.249,0-1.914.961-3.064,2.588l-.674.764a.7.7,0,0,1-.575.288H2.875C.476,35.639,0,37.077,0,38.227v13.9C0,54.041,1.051,55,2.974,55H25.787c1.914,0,2.974-.961,2.974-2.776v-14C28.753,37.077,28.276,35.639,25.877,35.639Zm-.1,18.411H2.974c-1.339,0-2.013-.575-2.013-1.824v-14c0-.863.189-1.626,1.914-1.626H7.188a1.665,1.665,0,0,0,1.339-.674l.575-.764c1.15-1.626,1.536-2.2,2.2-2.2h6.038c.674,0,1.15.575,2.3,2.2l.575.764a1.563,1.563,0,0,0,1.339.674h4.313c1.725,0,1.914.764,1.914,1.626v14h.009C27.791,53.475,27.117,54.05,25.778,54.05Z"
transform="translate(0)"
fill="currentColor"
/>
</g>
</svg>
<svg
class="dce-mn-smart-capture-on"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="20"
height="20"
viewBox="0 0 20 20"
>
<defs>
<clipPath id="clip-pathbounds-detection-on">
<rect id="Rectangle_2800" data-name="Rectangle 2800" width="20" height="20" fill="none" />
</clipPath>
</defs>
<g id="Group_613" data-name="Group 613" clip-path="url(#clip-pathbounds-detection-on)">
<path id="Path_1574" data-name="Path 1574" d="M10,0A10,10,0,1,1,0,10,10,10,0,0,1,10,0" fill="#43cc48" />
<path
id="Path_1575"
data-name="Path 1575"
d="M6.843,7.5a2.447,2.447,0,0,0-1.9.737A2.927,2.927,0,0,0,4.27,10.29a3.345,3.345,0,0,0,.312,1.484,2.257,2.257,0,0,0,.894.982,2.594,2.594,0,0,0,1.337.341,2.431,2.431,0,0,0,1.89-.742,2.945,2.945,0,0,0,.679-2.065A2.911,2.911,0,0,0,8.7,8.256,2.38,2.38,0,0,0,6.843,7.5m-.01,4.658q-1.382,0-1.382-1.87a2.438,2.438,0,0,1,.325-1.372,1.171,1.171,0,0,1,1.047-.479Q8.2,8.439,8.2,10.29q0,1.87-1.367,1.87"
fill="#fff"
/>
<path
id="Path_1576"
data-name="Path 1576"
d="M13.509,7.5a2.32,2.32,0,0,0-1,.21,1.591,1.591,0,0,0-.693.6h-.059L11.6,7.6h-.9V13h1.148V10.31a2.371,2.371,0,0,1,.336-1.441,1.27,1.27,0,0,1,1.064-.43.974.974,0,0,1,.8.308,1.451,1.451,0,0,1,.252.933V13h1.152V9.48A1.733,1.733,0,0,0,13.509,7.5"
fill="#fff"
/>
</g>
</svg>
<svg
class="dce-mn-smart-capture-off"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="20"
height="20"
viewBox="0 0 20 20"
>
<defs>
<clipPath id="clip-pathdce-mn-bounds-off">
<rect id="Rectangle_2801" data-name="Rectangle 2801" width="20" height="20" fill="none" />
</clipPath>
</defs>
<g id="Group_614" data-name="Group 614" clip-path="url(#clip-pathdce-mn-bounds-off)">
<path id="Path_1577" data-name="Path 1577" d="M10,0A10,10,0,1,1,0,10,10,10,0,0,1,10,0" fill="#575757" />
<path
id="Path_1578"
data-name="Path 1578"
d="M5.918,8.279a2.447,2.447,0,0,0-1.9.737,2.927,2.927,0,0,0-.673,2.051,3.345,3.345,0,0,0,.312,1.484,2.257,2.257,0,0,0,.894.982,2.594,2.594,0,0,0,1.337.341,2.43,2.43,0,0,0,1.89-.742,2.945,2.945,0,0,0,.679-2.065,2.915,2.915,0,0,0-.684-2.034,2.38,2.38,0,0,0-1.855-.754m-.01,4.658q-1.382,0-1.382-1.87a2.438,2.438,0,0,1,.325-1.372A1.171,1.171,0,0,1,5.9,9.216q1.377,0,1.377,1.851,0,1.87-1.367,1.87"
fill="#fff"
/>
<path
id="Path_1579"
data-name="Path 1579"
d="M11.346,7.3a.657.657,0,0,1,.568-.242,2.648,2.648,0,0,1,.811.137l.3-.87a3.673,3.673,0,0,0-1.192-.2,1.836,1.836,0,0,0-1.372.462,1.965,1.965,0,0,0-.449,1.418v.352l-.889.351v.537h.889v4.532h1.152V9.245h1.319V8.376H11.167V8.025a1.212,1.212,0,0,1,.179-.725"
fill="#fff"
/>
<path
id="Path_1580"
data-name="Path 1580"
d="M14.974,7.3a.657.657,0,0,1,.568-.242,2.648,2.648,0,0,1,.811.137l.3-.87a3.673,3.673,0,0,0-1.192-.2,1.836,1.836,0,0,0-1.372.462,1.965,1.965,0,0,0-.449,1.418v.352l-.889.351v.537h.889v4.532H14.8V9.245h1.319V8.376H14.8V8.025a1.212,1.212,0,0,1,.179-.725"
fill="#fff"
/>
</g>
</svg>
</div>
<div class="dce-mn-smart-capture-text">Smart Capture</div>
</div>
<div class="dce-mn-auto-crop" title="Auto Crop Document">
<div class="dce-mn-btn-icon-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="dce-mn-auto-crop-icon"
>
<g id="auto-crop" transform="translate(1 -34)">
<path
id="Path_1578"
data-name="Path 1578"
d="M16.759,4.847a.621.621,0,0,1,.2.447V15.8h.812V5.294a1.483,1.483,0,0,0-1.461-1.461H5.8v.812H16.312a.621.621,0,0,1,.447.2"
transform="translate(-1.967 33.361)"
fill="currentColor"
/>
<path
id="Path_1579"
data-name="Path 1579"
d="M4.674,15.975a.657.657,0,0,1-.649-.649V0H3.213V3.194H0v.812H3.213v11.32a1.457,1.457,0,0,0,1.461,1.461h11.32V20h.812V16.787H20v-.812Z"
transform="translate(-1 34)"
fill="currentColor"
/>
<path
id="Path_1580"
data-name="Path 1580"
d="M42.326,130.3,40.2,136.013h.981l.554-1.58h2.179l.569,1.58h.988L43.345,130.3Zm-.314,3.339v-.008l.517-1.483a8.3,8.3,0,0,0,.307-1.048c.022.1.075.27.142.494s.12.389.165.494l.532,1.55Z"
transform="translate(-33.836 -89.978)"
fill="currentColor"
/>
</g>
</svg>
<svg
class="dce-mn-auto-crop-on"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="20"
height="20"
viewBox="0 0 20 20"
>
<defs>
<clipPath id="clip-pathbounds-detection-on">
<rect id="Rectangle_2800" data-name="Rectangle 2800" width="20" height="20" fill="none" />
</clipPath>
</defs>
<g id="Group_613" data-name="Group 613" clip-path="url(#clip-pathbounds-detection-on)">
<path id="Path_1574" data-name="Path 1574" d="M10,0A10,10,0,1,1,0,10,10,10,0,0,1,10,0" fill="#43cc48" />
<path
id="Path_1575"
data-name="Path 1575"
d="M6.843,7.5a2.447,2.447,0,0,0-1.9.737A2.927,2.927,0,0,0,4.27,10.29a3.345,3.345,0,0,0,.312,1.484,2.257,2.257,0,0,0,.894.982,2.594,2.594,0,0,0,1.337.341,2.431,2.431,0,0,0,1.89-.742,2.945,2.945,0,0,0,.679-2.065A2.911,2.911,0,0,0,8.7,8.256,2.38,2.38,0,0,0,6.843,7.5m-.01,4.658q-1.382,0-1.382-1.87a2.438,2.438,0,0,1,.325-1.372,1.171,1.171,0,0,1,1.047-.479Q8.2,8.439,8.2,10.29q0,1.87-1.367,1.87"
fill="#fff"
/>
<path
id="Path_1576"
data-name="Path 1576"
d="M13.509,7.5a2.32,2.32,0,0,0-1,.21,1.591,1.591,0,0,0-.693.6h-.059L11.6,7.6h-.9V13h1.148V10.31a2.371,2.371,0,0,1,.336-1.441,1.27,1.27,0,0,1,1.064-.43.974.974,0,0,1,.8.308,1.451,1.451,0,0,1,.252.933V13h1.152V9.48A1.733,1.733,0,0,0,13.509,7.5"
fill="#fff"
/>
</g>
</svg>
<svg
class="dce-mn-auto-crop-off"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="20"
height="20"
viewBox="0 0 20 20"
>
<defs>
<clipPath id="clip-pathdce-mn-bounds-off">
<rect id="Rectangle_2801" data-name="Rectangle 2801" width="20" height="20" fill="none" />
</clipPath>
</defs>
<g id="Group_614" data-name="Group 614" clip-path="url(#clip-pathdce-mn-bounds-off)">
<path id="Path_1577" data-name="Path 1577" d="M10,0A10,10,0,1,1,0,10,10,10,0,0,1,10,0" fill="#575757" />
<path
id="Path_1578"
data-name="Path 1578"
d="M5.918,8.279a2.447,2.447,0,0,0-1.9.737,2.927,2.927,0,0,0-.673,2.051,3.345,3.345,0,0,0,.312,1.484,2.257,2.257,0,0,0,.894.982,2.594,2.594,0,0,0,1.337.341,2.43,2.43,0,0,0,1.89-.742,2.945,2.945,0,0,0,.679-2.065,2.915,2.915,0,0,0-.684-2.034,2.38,2.38,0,0,0-1.855-.754m-.01,4.658q-1.382,0-1.382-1.87a2.438,2.438,0,0,1,.325-1.372A1.171,1.171,0,0,1,5.9,9.216q1.377,0,1.377,1.851,0,1.87-1.367,1.87"
fill="#fff"
/>
<path
id="Path_1579"
data-name="Path 1579"
d="M11.346,7.3a.657.657,0,0,1,.568-.242,2.648,2.648,0,0,1,.811.137l.3-.87a3.673,3.673,0,0,0-1.192-.2,1.836,1.836,0,0,0-1.372.462,1.965,1.965,0,0,0-.449,1.418v.352l-.889.351v.537h.889v4.532h1.152V9.245h1.319V8.376H11.167V8.025a1.212,1.212,0,0,1,.179-.725"
fill="#fff"
/>
<path
id="Path_1580"
data-name="Path 1580"
d="M14.974,7.3a.657.657,0,0,1,.568-.242,2.648,2.648,0,0,1,.811.137l.3-.87a3.673,3.673,0,0,0-1.192-.2,1.836,1.836,0,0,0-1.372.462,1.965,1.965,0,0,0-.449,1.418v.352l-.889.351v.537h.889v4.532H14.8V9.245h1.319V8.376H14.8V8.025a1.212,1.212,0,0,1,.179-.725"
fill="#fff"
/>
</g>
</svg>
</div>
<div class="dce-mn-auto-crop-text">Auto Crop</div>
</div>
</div>
<div class="dce-footer">
<div class="dce-mn-take-photo" title="Take Photo">
<div class="dce-loading-auto-capture-animation"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
<g id="capture" transform="translate(-49 -577)">
<circle
id="Ellipse_6"
data-name="Ellipse 6"
cx="35"
cy="35"
r="35"
transform="translate(49 577)"
fill="#fe8e14"
/>
<g id="Camera_button" data-name="Camera button" transform="translate(68.25 599.4)">
<path
id="Camera_Icon"
data-name="Camera Icon"
d="M27.792,23.334H2.924l-.246,0a4.573,4.573,0,0,1-.713-.063,2.419,2.419,0,0,1-.677-.225,2.282,2.282,0,0,1-.577-.424,2.255,2.255,0,0,1-.418-.582,2.414,2.414,0,0,1-.224-.687,4.749,4.749,0,0,1-.063-.719c0-.066,0-.131,0-.2,0-.047,0-.091,0-.136,0-.13,0-.26,0-.391V7.615c0-.132,0-.261,0-.392,0-.043,0-.086,0-.128,0-.07,0-.137,0-.2a4.745,4.745,0,0,1,.063-.72,2.4,2.4,0,0,1,.224-.686A2.266,2.266,0,0,1,.711,4.9a2.229,2.229,0,0,1,.577-.424,2.42,2.42,0,0,1,.677-.225,4.573,4.573,0,0,1,.713-.063c.111,0,.218,0,.328,0H5.674c.149,0,.3,0,.443,0l.058,0s0,0,.054-.005l.109,0a4.342,4.342,0,0,0,.7-.05,2.635,2.635,0,0,0,.772-.279,2.512,2.512,0,0,0,.658-.48A3.714,3.714,0,0,0,8.9,2.372c.069-.2.135-.393.2-.548a2.7,2.7,0,0,1,.139-.335A2.606,2.606,0,0,1,10.37.334a2.669,2.669,0,0,1,.773-.258A5.34,5.34,0,0,1,11.954,0c.064,0,1.808,0,3.4,0s3.336,0,3.4,0a5.348,5.348,0,0,1,.813.073A2.6,2.6,0,0,1,21,.821a2.706,2.706,0,0,1,.476.669,1.922,1.922,0,0,1,.079.185c.017.044.036.093.061.152.069.162.143.377.222.6a3.638,3.638,0,0,0,.407.951,2.552,2.552,0,0,0,.657.479,2.723,2.723,0,0,0,.774.28,3.278,3.278,0,0,0,.463.039l.146.006h3.508c.109,0,.219,0,.328,0a4.558,4.558,0,0,1,.713.063,2.434,2.434,0,0,1,.678.225,2.237,2.237,0,0,1,.576.424,2.335,2.335,0,0,1,.421.582l.038.077a1.619,1.619,0,0,1,.184.5,6.443,6.443,0,0,1,.063.828c0,.111,0,.222,0,.332,0,.131,0,.261,0,.392V19.9c0,.132,0,.261,0,.391,0,.111,0,.22,0,.332a4.89,4.89,0,0,1-.063.719,2.541,2.541,0,0,1-.222.687,2.323,2.323,0,0,1-.421.582,2.291,2.291,0,0,1-.576.424,2.434,2.434,0,0,1-.678.225,4.56,4.56,0,0,1-.713.063l-.246,0ZM15.4,6.113a6.956,6.956,0,1,0,6.941,6.955A6.956,6.956,0,0,0,15.4,6.113Zm8.885-.072a.943.943,0,1,0,.934.943A.941.941,0,0,0,24.287,6.041ZM15.41,18.654A5.607,5.607,0,1,1,21,13.047,5.606,5.606,0,0,1,15.41,18.654Z"
transform="translate(0 0)"
fill="#fff"
/>
</g>
</g>
</svg>
</div>
</div>
<div class="dce-mn-zoom">- <span>1.0X</span> -</div>
<div class="dce-mn-toast"></div>
<svg class="dce-mn-msg-poweredby" viewBox="0 0 94 17">
<path
d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3
C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8
c0.1-0.3,0.2-0.6,0.2-1.1c0-0.5,0-0.9-0.1-1.2C4.3,5.4,4.2,5.2,3.9,5.1S3.4,5,2.9,5H1.8V8.7z"
/>
<path
d="M8.1,14.1c-0.5,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4
C6.5,7.8,6.7,7.5,7,7.3S7.6,7,8.1,7C8.6,7,9,7.1,9.2,7.3s0.5,0.5,0.6,0.9C9.9,8.5,9.9,9,9.9,9.6v1.9c0,0.6-0.1,1-0.2,1.4
c-0.1,0.4-0.3,0.7-0.6,0.9S8.6,14.1,8.1,14.1z M8.1,13.4c0.3,0,0.5-0.1,0.7-0.2C8.9,13,9,12.8,9,12.5c0-0.3,0-0.6,0-1v-2
c0-0.4,0-0.7,0-1C9,8.2,8.9,8,8.8,7.9C8.6,7.7,8.4,7.6,8.1,7.6c-0.3,0-0.5,0.1-0.7,0.2C7.3,8,7.2,8.2,7.2,8.5c0,0.3-0.1,0.6-0.1,1
v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C7.6,13.4,7.8,13.4,8.1,13.4z"
/>
<path d="M12,14l-1.1-6.9h0.7l0.9,5.8l1.1-5.8h0.8l1.1,5.8l0.8-5.8H17L15.9,14H15l-1.1-5.6L12.8,14H12z" />
<path
d="M19.8,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6
c0.1-0.4,0.3-0.7,0.6-0.8C19,7,19.3,7,19.8,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6h-2.8v1.2
c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5
h0.9V12c0,0.6-0.1,1.1-0.4,1.5S20.4,14.1,19.8,14.1z M18.8,9.9h1.9V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S20,7.6,19.8,7.6
c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6c-0.1,0.3-0.1,0.7-0.1,1.1V9.9z"
/>
<path
d="M22.8,14V7.1h0.9V8c0.2-0.4,0.5-0.6,0.8-0.8C24.8,7.1,25,7,25.3,7c0,0,0,0,0.1,0s0.1,0,0.1,0v0.9
c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.2,0-0.2,0c-0.3,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.6V14H22.8z"
/>
<path
d="M28,14.1c-0.4,0-0.8-0.1-1.1-0.3s-0.5-0.5-0.6-0.9c-0.1-0.4-0.2-0.9-0.2-1.6V9.6c0-0.7,0.1-1.2,0.2-1.6
c0.1-0.4,0.3-0.7,0.6-0.8C27.3,7,27.6,7,28,7c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.5,0.9c0.1,0.4,0.1,1,0.1,1.6v0.6H27v1.2
c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.4,0.3,0.6s0.3,0.2,0.6,0.2c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.3-0.4s0.1-0.5,0.1-0.8v-0.5
h0.9V12c0,0.6-0.1,1.1-0.4,1.5S28.7,14.1,28,14.1z M27,9.9H29V9.4c0-0.4,0-0.7-0.1-0.9c0-0.3-0.1-0.5-0.3-0.6S28.3,7.6,28,7.6
c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.3,0.3-0.3,0.6C27.1,8.6,27,9,27,9.5V9.9z"
/>
<path
d="M32.6,14.1c-0.6,0-1-0.2-1.3-0.7c-0.3-0.4-0.4-1.2-0.4-2.2V9.9c0-0.6,0-1.1,0.1-1.6c0.1-0.4,0.2-0.8,0.5-1
c0.2-0.2,0.6-0.4,1-0.4C32.8,7,33,7,33.2,7.1c0.2,0.1,0.4,0.3,0.5,0.4V4.3h0.9V14h-0.9v-0.5c-0.1,0.2-0.3,0.3-0.5,0.4
C33,14,32.8,14.1,32.6,14.1z M32.7,13.4c0.2,0,0.4,0,0.5-0.1c0.2-0.1,0.3-0.2,0.5-0.3V8.1c-0.1-0.1-0.3-0.2-0.4-0.3
c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4,0-0.6,0.2-0.8,0.5S31.8,9,31.8,9.6v1.6c0,0.5,0,0.9,0.1,1.2c0.1,0.3,0.1,0.6,0.3,0.7
C32.3,13.3,32.5,13.4,32.7,13.4z"
/>
<path
d="M40.5,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.4V14h-0.9V4.3h0.9v3.4c0.1-0.2,0.3-0.3,0.5-0.5
C40.1,7,40.3,7,40.6,7C41,7,41.2,7,41.4,7.2c0.2,0.2,0.4,0.4,0.5,0.6c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.7,0.1,1v1.5
c0,0.6,0,1.1-0.1,1.5c-0.1,0.4-0.3,0.8-0.5,1C41.3,14,41,14.1,40.5,14.1z M40.4,13.4c0.3,0,0.5-0.1,0.6-0.3
c0.1-0.2,0.2-0.4,0.3-0.8s0.1-0.7,0.1-1.2V9.7c0-0.5,0-0.8-0.1-1.1S41.1,8,41,7.9c-0.1-0.2-0.3-0.2-0.6-0.2c-0.2,0-0.4,0.1-0.6,0.2
c-0.2,0.1-0.3,0.2-0.5,0.4v4.7c0.1,0.1,0.3,0.3,0.5,0.4C40,13.4,40.2,13.4,40.4,13.4z"
/>
<path
d="M43.2,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5
c0-0.2-0.1-0.4-0.2-0.6L43,7.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.6,0.4
c-0.3,0.1-0.6,0.1-1,0.1H43.2z"
/>
<path
d="M50.6,14V4.3h2.1c0.7,0,1.2,0.1,1.6,0.4c0.4,0.2,0.6,0.6,0.8,1c0.2,0.4,0.2,0.9,0.2,1.5V11
c0,0.6-0.1,1.1-0.2,1.6s-0.4,0.8-0.8,1S53.5,14,52.8,14H50.6z M51.5,13.3h1.2c0.5,0,0.9-0.1,1.1-0.3s0.4-0.5,0.5-0.9
s0.1-0.8,0.1-1.3V7.2c0-0.5,0-0.9-0.1-1.2s-0.2-0.6-0.5-0.8S53.2,5,52.7,5h-1.2V13.3z"
/>
<path
d="M56.5,15.7V15c0.4,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.1,0.4-0.3c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.3-0.1-0.5
c0-0.2-0.1-0.4-0.2-0.6l-1.4-6.1h0.9l1.2,5.9l1.2-5.9h0.9l-1.7,7.4c-0.1,0.3-0.2,0.5-0.3,0.7s-0.4,0.3-0.6,0.4s-0.6,0.1-1,0.1H56.5
z"
/>
<path
d="M61.3,14V7.1h0.9v0.7c0.2-0.2,0.5-0.4,0.8-0.6C63.2,7,63.5,7,63.8,7C64,7,64.2,7,64.4,7.1s0.3,0.3,0.4,0.5
c0.1,0.2,0.1,0.5,0.1,0.8V14H64V8.6c0-0.4-0.1-0.6-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.6,0.2s-0.4,0.3-0.6,0.5V14
H61.3z"
/>
<path
d="M67.4,14.1c-0.3,0-0.5-0.1-0.7-0.2c-0.2-0.1-0.4-0.3-0.5-0.6C66,13.1,66,12.8,66,12.6c0-0.4,0.1-0.7,0.2-0.9
s0.3-0.5,0.5-0.7c0.2-0.2,0.5-0.4,0.9-0.6c0.4-0.2,0.8-0.4,1.3-0.6V9.3c0-0.4,0-0.8-0.1-1c-0.1-0.2-0.1-0.4-0.3-0.5
c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.3,0-0.5,0.1c-0.1,0.1-0.3,0.2-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.7V9l-0.9,0
c0-0.7,0.2-1.2,0.5-1.6C66.8,7.1,67.3,7,68,7c0.6,0,1.1,0.2,1.3,0.6c0.3,0.4,0.4,1,0.4,1.7v3.4c0,0.1,0,0.3,0,0.5
c0,0.2,0,0.4,0,0.5c0,0.2,0,0.3,0,0.4h-0.8c0-0.2-0.1-0.3-0.1-0.5c0-0.2,0-0.3-0.1-0.5c-0.1,0.3-0.3,0.5-0.5,0.7
S67.7,14.1,67.4,14.1z M67.6,13.4c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.3-0.2,0.4-0.3s0.2-0.3,0.3-0.4v-2.2c-0.3,0.2-0.6,0.3-0.9,0.5
c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.3,0.3-0.3,0.5s-0.1,0.4-0.1,0.6c0,0.4,0.1,0.6,0.2,0.8C67.2,13.3,67.4,13.4,67.6,13.4z"
/>
<path
d="M70.9,14V7.1h0.8v0.7c0.2-0.3,0.5-0.5,0.8-0.6c0.3-0.1,0.6-0.2,0.9-0.2c0.2,0,0.5,0.1,0.7,0.2s0.3,0.4,0.4,0.7
c0.2-0.3,0.5-0.5,0.8-0.7c0.3-0.2,0.6-0.2,0.9-0.2c0.2,0,0.4,0,0.6,0.1s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.2,0.9V14h-0.8V8.6
c0-0.4-0.1-0.7-0.2-0.8s-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2S74.7,8,74.5,8.3c0,0,0,0.1,0,0.1s0,0.1,0,0.1V14h-0.8V8.6
c0-0.4-0.1-0.7-0.2-0.8c-0.1-0.1-0.3-0.2-0.5-0.2c-0.2,0-0.4,0.1-0.7,0.2c-0.2,0.1-0.4,0.3-0.6,0.5V14H70.9z"
/>
<path
d="M80.2,14.1c-0.6,0-1-0.2-1.3-0.5c-0.3-0.4-0.5-0.8-0.6-1.4l0.7-0.2c0,0.5,0.2,0.9,0.4,1.2
c0.2,0.2,0.5,0.4,0.8,0.4c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.2-0.4,0.2-0.7c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.4-0.5-0.6-0.7l-0.9-0.8
c-0.3-0.3-0.5-0.5-0.7-0.8c-0.2-0.3-0.2-0.6-0.2-0.9c0-0.3,0.1-0.6,0.2-0.8c0.1-0.2,0.3-0.4,0.6-0.5C79.5,7,79.8,7,80.2,7
c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.4,0.8,0.4,1.3L81.2,9c0-0.3-0.1-0.6-0.1-0.8s-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.1-0.5-0.1
c-0.3,0-0.5,0.1-0.6,0.2c-0.2,0.1-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.6c0.1,0.2,0.2,0.3,0.4,0.5l1,0.9c0.2,0.2,0.4,0.3,0.6,0.5
c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.4-0.1,0.7-0.2,0.9c-0.1,0.2-0.4,0.4-0.6,0.6C80.9,14,80.6,14.1,80.2,14.1z"
/>
<path
d="M84.7,14.1c-0.5,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.5-0.5-0.6-0.9s-0.2-0.9-0.2-1.4V9.6c0-0.6,0.1-1,0.2-1.4
c0.1-0.4,0.3-0.7,0.6-0.9C83.9,7.1,84.3,7,84.7,7c0.5,0,0.9,0.1,1.1,0.3s0.5,0.5,0.6,0.9c0.1,0.4,0.2,0.9,0.2,1.4v1.9
c0,0.6-0.1,1-0.2,1.4s-0.3,0.7-0.6,0.9S85.2,14.1,84.7,14.1z M84.7,13.4c0.3,0,0.5-0.1,0.7-0.2c0.1-0.2,0.2-0.4,0.3-0.7
c0-0.3,0-0.6,0-1v-2c0-0.4,0-0.7,0-1c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.2-0.7-0.2c-0.3,0-0.5,0.1-0.7,0.2
c-0.1,0.2-0.2,0.4-0.3,0.7c0,0.3-0.1,0.6-0.1,1v2c0,0.4,0,0.7,0.1,1c0,0.3,0.1,0.5,0.3,0.7C84.2,13.4,84.4,13.4,84.7,13.4z"
/>
<path
d="M88.2,14V7.7h-0.9V7.1h0.9V6.3c0-0.3,0-0.6,0.1-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.5-0.2,0.8-0.2
c0.1,0,0.2,0,0.4,0c0.1,0,0.2,0,0.3,0.1v0.6c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.4,0.1-0.5,0.2s-0.1,0.4-0.1,0.8v0.8
h1.1v0.6h-1.1V14H88.2z"
/>
<path
d="M92.7,14.1c-0.3,0-0.6-0.1-0.8-0.2s-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.8V7.6h-0.9V7.1h0.9V4.9h0.9v2.1
h1.2v0.6h-1.2v4.8c0,0.3,0,0.6,0.1,0.7c0.1,0.1,0.2,0.2,0.5,0.2c0.1,0,0.2,0,0.2,0s0.2,0,0.3,0V14c-0.1,0-0.2,0-0.4,0.1
C92.9,14.1,92.8,14.1,92.7,14.1z"
/>
</svg>
</div>
</div>
<style>
@keyframes dce-rotate {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
@keyframes dce-scanlight {
from {
top: 0;
}
to {
top: 97%;
}
}
.dce-macro-use-mobile-native-like-ui {
width: 100%;
height: 100%;
position: absolute;
user-select: none;
display: flex;
flex-direction: column;
}
.dce-header {
top: 0;
height: 3rem;
width: 100%;
background-color: #323234;
display: flex;
align-items: center;
}
.dce-mn-torch {
position: absolute;
right: 54px; /* 12px (right margin) + 24px (close icon) + 18px (spacing*/
display: flex;
justify-content: center;
align-items: center;
}
.dce-mn-torch-auto,
.dce-mn-torch-on,
.dce-mn-torch-off {
height: 24px;
width: 24px;
padding: max(0.5vmin, 4px);
box-sizing: border-box;
border-radius: max(1.5vmin, 12px);
background: rgba(100, 100, 100, 0.5);
cursor: pointer;
}
.dce-mn-close {
position: absolute;
right: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.dce-mn-close svg {
height: 24px;
width: 24px;
padding: max(0.5vmin, 4px);
box-sizing: border-box;
border-radius: max(1.5vmin, 12px);
background: rgba(100, 100, 100, 0.5);
cursor: pointer;
stroke: white;
}
.dce-mn-upload-image-icon {
position: absolute;
left: calc(12px + 50.5px + 12px);
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.dce-mn-upload-image-icon svg {
width: 24px;
height: auto;
}
.dce-mn-select-camera-icon {
position: absolute;
left: 12px;
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.dce-mn-select-camera-down-icon {
color: white;
}
.dce-mn-resolution-box {
display: none;
position: absolute;
width: max(5vmin, 40px);
left: 12px;
font-size: max(1.25vmin, 10px);
line-height: max(2vmin, 16px);
padding: max(0.5vmin, 4px);
box-sizing: border-box;
font-family: Verdana;
text-align: center;
color: #fff;
border-radius: max(0.75vmin, 6px);
background: rgba(100, 100, 100, 0.5);
cursor: pointer;
}
.dce-mn-camera-and-resolution-settings {
position: absolute;
top: calc(24px + max(3vmin, 24px));
left: 0;
background: rgba(100, 100, 100, 0.5);
display: flex;
z-index: 2;
}
.dce-subfooter {
position: absolute;
bottom: 6rem;
height: 4rem;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: flex-end;
justify-content: space-evenly;
padding-top: 0.5rem;
}
.dce-mn-btn-icon-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.dce-mn-smart-capture,
.dce-mn-auto-crop,
.dce-mn-bounds-detection {
color: white;
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.75rem;
position: relative;
flex: 1;
}
.dce-mn-smart-capture-icon,
.dce-mn-auto-crop-icon,
.dce-mn-bounds-detection-icon {
height: 28px;
width: 28px;
color: inherit;
}
.dce-mn-smart-capture-on,
.dce-mn-smart-capture-off,
.dce-mn-bounds-detection-on,
.dce-mn-bounds-detection-off,
.dce-mn-auto-crop-on,
.dce-mn-auto-crop-off {
position: absolute;
right: -8px;
bottom: -4px;
width: 18px;
height: 18px;
}
.dce-mn-auto-crop-text,
.dce-mn-smart-capture-text,
.dce-mn-bounds-detection-text {
text-align: center;
color: inherit;
font-size: 12px;
font-family: Verdana;
}
.dce-footer {
position: absolute;
bottom: 0;
height: 6rem;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.dce-mn-take-photo {
width: 70px;
height: 70px;
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
position: relative;
justify-content: center;
}
.dce-mn-take-photo > svg {
width: 50px;
height: 50px;
}
.dce-mn-take-photo:hover {
opacity: 0.9;
}
.dce-loading-auto-capture-animation {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #fe8e14;
border-right-color: #fe8e14;
animation: rotate 1.5s linear infinite;
transition: border-color 0.2s cubic-bezier(0.36, -0.17, 1, 1);
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.dce-mn-zoom {
position: absolute;
font-size: max(1vmin, 8px);
line-height: max(3vmin, 24px);
left: 50%;
bottom: 50%;
transform: translateX(-50%);
font-family: Verdana;
color: #fff;
pointer-events: none;
}
.dce-mn-zoom span {
width: max(3vmin, 24px);
border-radius: max(1.5vmin, 12px);
text-align: center;
background: rgba(100, 100, 100, 0.5);
display: inline-block;
}
.dce-mn-toast {
position: absolute;
font-size: max(1.25vmin, 10px);
line-height: max(3vmin, 24px);
padding: 0 max(0.5vmin, 4px);
left: 50%;
bottom: 50%;
transform: translateX(-50%);
font-family: Verdana;
color: #fff;
border-radius: max(0.5vmin, 4px);
background: rgba(100, 100, 100, 0.5);
pointer-events: none;
}
.dce-mn-msg-poweredby {
position: absolute;
height: max(2.125vmin, 17px);
left: 50%;
bottom: calc(8rem + 3rem + 4px);
transform: translateX(-50%);
fill: #fff;
pointer-events: none;
}
.dce-mn-camera-option {
font-size: max(1.25vmin, 10px);
line-height: max(2vmin, 16px);
padding: max(0.5vmin, 4px) max(1vmin, 8px);
margin: 12px;
box-sizing: border-box;
font-family: Verdana;
text-align: left;
color: #fff;
border-radius: max(0.75vmin, 6px);
background: rgba(100, 100, 100, 0.5);
cursor: pointer;
}
.dce-mn-camera-and-resolution-bar {
width: 1px;
align-self: stretch;
background: rgba(100, 100, 100, 0.5);
}
.dce-mn-resolution-option {
width: max(5.5vmin, 44px);
font-size: max(1.25vmin, 10px);
line-height: max(2vmin, 16px);
padding: max(0.5vmin, 4px);
margin: 12px;
box-sizing: border-box;
font-family: Verdana;
text-align: center;
color: #fff;
border-radius: max(0.75vmin, 6px);
background: rgba(100, 100, 100, 0.5);
cursor: pointer;
}
</style>
</template>