* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}

html {
    height: 100vh;
    /*width: 100vw;*/
}

body {
    height: 100vh;
    width: 100vw;
    width: -webkit-calc(100% - 0px);
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    -webkit-overflow-scrolling: touch; /* for Safari */
    scrollbar-width: none; /* for Firefox */
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-y: none;
}

html, body {touch-action: none;}

.container {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    padding: 0px;
    background-color: black;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    -webkit-overflow-scrolling: touch; /* for Safari */
    scrollbar-width: none; /* for Firefox */
}

.containerVideo{
    margin: 0;
    height: 100vh;
    width: 100vw;
    background-color: black;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    position: absolute;
}

video {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute; 
    transform: scaleX(-1);
}

.videoRef{
    background-color: black;
    position: absolute;
    z-index: 1;
}

canvas {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute; 
    transform: scaleX(-1);
    z-index: 3 !important;
}

.controls {
    width: 100vw;
    position: absolute; 
    z-index: 5 !important;
    text-align: center;
    padding-top: 5%;
}

h3{
    color: white;
}

.circle-progress {
    width: 350px; height: 350px;
}

.circle-progress-value {
    stroke-width: 6px;
    stroke: #37ea17cc;
    stroke-dasharray: 0.6 3;
}

.circle-progress-circle {
    stroke-width: 6px;
    stroke: rgba(255, 255, 255, 0.516);
    stroke-dasharray: 0.6 3;
    stroke-dashoffset: 1.6;
}
#backgroundArc{
    background: url('/image/background_cam.jpg');
    background-size: 250px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100vw;
    position: absolute; 
    z-index: 5 !important;

}
.progressb  {
    width: 350px; height: 350px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute; 
    z-index: 6 !important;
}

.loader {
    /*border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    left: 35%;
    top: 35%;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #textLoad{
    text-align: center;
    padding-top: 30%;
  }

  #device{
    text-align: center;
  }

  #textDevice{
    text-align: center;
    padding-top: 30%;
  }

  #base64image{
    margin: auto;
  }

  #processImg{
    position: absolute; 
    z-index: -100 !important;
  }

/*--------------------------------------------------------------------------------------------------------------------------------*/
  @media only screen and (min-device-width: 500px){
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
    }

    html {
        margin: 0 auto; 
        height: 850px;
        width: 480px;
    }

    body {
        background-color: black;
        margin: 0 auto; 
        height: 850px;
        width: 480px;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        -webkit-overflow-scrolling: touch; /* for Safari */
        scrollbar-width: none; /* for Firefox */
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior-y: none;
    }

    html, body {touch-action: none;}

    .container {
        height: 850px;
        width: 480px;
        margin: 0px;
        padding: 0px;
        background-color: black;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        -webkit-overflow-scrolling: touch; /* for Safari */
        scrollbar-width: none; /* for Firefox */
    }
    
    .containerVideo{
        margin: 0;
        height: 850px;
        width: 480px;
        background-color: black;
        -ms-overflow-style: none; /* for Internet Explorer, Edge */
        scrollbar-width: none; /* for Firefox */
        position: absolute;
    }

    .videoRef{
        background-color: black;
        position: absolute;
        height: 480px;
        width: 480px;
        z-index: 1;
    }

    .loader {
        /*border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 120px;
        height: 120px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: spin 2s linear infinite;
        position: absolute;
        margin:0px auto;
        margin-top: 30%;
    }

    #load{
        padding-top: 30%;
        text-align:center;
    }

    .circle-progress {
        width: 350px; height: 350px;
    }
    
    .circle-progress-value {
        stroke-width: 6px;
        stroke: #008F39;
        stroke-dasharray: 0.6 3;
    }
    
    .circle-progress-circle {
        stroke-width: 6px;
        stroke: rgba(255, 255, 255, 0.516);
        stroke-dasharray: 0.6 3;
        stroke-dashoffset: 1.6;
    }
    #backgroundArc{
        background: url('/image/background_cam.jpg');
        background-size: 310px;
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        min-height: 480px;
        width: 480px;
        position: absolute; 
        z-index: 5 !important;
    
    }
    .progressb  {
        width: 350px; height: 350px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        position: absolute; 
        z-index: 6 !important;
    }

    .controls {
        width: 480px;
        position: absolute; 
        z-index: 5 !important;
        text-align: center;
        padding-top: 5%;
    }

}