html {
  -webkit-text-size-adjust: none;
  touch-action: manipulation;
}



.main-background {
  margin: 0px !important;
  overflow: hidden;

  /* position: fixed; */
}

.main-bg {
  /* background-image: url("../media/web/main_dashbaord_bg.png"); */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.authentication-bg {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  /* background-image: linear-gradient(-180deg, #FFEFC1 0%, #FFEFC1 20%, #FFF9E7 44%, #FFF0C5 62%, #FFE8A6 76%, #F9E3A7 100%); */
}

.main-header {
  position: absolute;
  top: 0;
  z-index: 100;
  height: 18%
}


.main-header-right {
  position: absolute;
  top: 10;
  right: 0;
  z-index: 100;
  height: 24%
}

.main-dashboard {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 75%;
  width: 80%;
  z-index: 10;
  background: #FFFFFF;
  padding-top : 20px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);

}

.main-bg-bottom {
  position: fixed;
  left: 50%;
  top: 50%;
  background-image: linear-gradient(-180deg, #3592D1 0%, #2B6EB0 100%);
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.28);
}

.main-division-line {
  width: 100%;
  height: 5px;
  display: absolute;
  height: 2px;
  border: 0;
  border-top: 1px solid rgb(221, 221, 221);
  margin: 1em 0;
  padding: 0;
}

.main-dashboard-bg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 15;
}

.main-title-div {
  text-align: center;
  max-width: 100%;
  height: 130px;
  z-index: 220;
  margin-top: 35%;
  position: absolute;
  width: 100%;

}

.main-title {
  font-family: Helvetica;
  font-size: 22px;
  color: #009BDA;
  letter-spacing: 0;
  text-align: center;
}

.main-or {
  font-family: Helvetica;
  font-size: 14px;
  color: #A9A9A9;
  letter-spacing: 0;
  text-align: center;
  margin: 5px;
}


.main-title-bg {
  background: #FFFFFF;
  box-shadow: 0 5px 8px 0 rgba(68, 68, 68, 0.23);
  height: 100px;
}

.main-title-logo {
  width: 90%;
  max-width: 290px;
  min-width: 290px;
  margin-top: -120px;
  z-index: 220;

}

.main-header-div {
  text-align: center;
  max-width: 100%;
  height: 120px;
  z-index: 240;
  margin-top: 25%;
  position: absolute;
  width: 100%;

}

.main-header-logo {
  width: 100%;
  max-width: 200px;
  margin-top: -60px;
  z-index: 240;
}

.main-title-divider {
  height: 5px;
  background-image: linear-gradient(-90deg, #DEAA23 0%, #AD7F2A 12%, #FFB93A 30%, #A67B2C 100%);
}

.main-bottom {
  position: absolute;
  bottom: 10;
  left: -10;
  z-index: 180;
  height: 50%;

}

.main-dialog-div {
  z-index: 160;
  position: absolute;
  width: 80%;
  height: 40%;
  bottom: 100;
  left: -20;
}

.main-dialog {
  position: absolute;
  width: 280px;
  z-index: 180;

}

.main-bottom-div {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 40;
  z-index: 300;
}

.no-margin {
  margin-bottom: 0 !important;
}

.dss-button {
  /* width: 60%; */
  min-width: 240px;
  max-width: 260px;
  z-index: 220;
  background: #009BDA;
  border-radius: 25px;
  padding: 10px;

  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
}

.dss-button-alt {
  /* width: 60%; */
  min-width: 240px;
  max-width: 260px;
  z-index: 220;
  background: #FFFFFF;
  border-radius: 25px;
  padding: 10px;

  font-size: 14px;
  color: #009BDA;
  text-align: center;
}

.dss-loading {
  /* width: 60%; */
  min-width: 240px;
  max-width: 260px;
  z-index: 220;
  border-radius: 25px;
  padding: 10px;

  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
}


.main-start-button {
  width: 75%;
  min-width: 320px;
  max-width: 260px;
  z-index: 220;
}

.main-footer-bg {
  display: block;
  width: 100%;
  margin: auto;
  padding-top: 245px;
  position: absolute;
  bottom: 0;
  z-index: 1;
  /* background-image: url(../media/web/main_bg_bottom.png); */

  background-image: linear-gradient(-180deg, #3592D1 0%, #2B6EB0 100%);
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.28);
  background-repeat: no-repeat;
  background-position: center top;
}


.main-footer-bg-low {
  display: block;
  width: 100%;
  margin: auto;
  padding-top: 100px;
  position: absolute;
  bottom: 0;
  z-index: 1;
  /* background-image: url(../media/web/main_bg_bottom.png); */

  background-image: linear-gradient(-180deg, #3592D1 0%, #2B6EB0 100%);
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.28);
  background-repeat: no-repeat;
  background-position: center top;
}

.main-footer-text {
  text-align: center;
  font-family: TrebuchetMS-Bold;
  font-size: 10px;
  color: #ffffff;
  letter-spacing: 0.16px;
  text-align: center;
}

.processing-dashboard{
  height: 100%;
  width: 100%;
  background-image: linear-gradient(-180deg, #3592D1 0%, #2B6EB0 100%);
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.28);
  background-repeat: no-repeat;
  background-position: center top;
}

.dss-logo-alt{
  max-width: 80px;

}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile+label {
  /* Rectangle 2: */

}

.inputfile:focus+label,
.inputfile+label:hover {}



.tutorial-bottom {
  position: absolute;
  bottom: 40;
  left: -10;
  z-index: 180;
  width: 330px;

}


.tutorial-botton-div {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 10%;
  z-index: 200;
  /* height: 15%; */
  overflow: hidden;
}

.scan-button {
  /* width: 280px; */
}

.tutorial-header {
  position: absolute;
  top: 0;
  z-index: 100;
  height: 15%
}

.tutorial-upper-div {
  position: absolute;
  top: 20;
  left: -10;
  z-index: 2000;
  width: 280px;
}

.tutorial-bottom-div {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 25;

  left: -10;
  z-index: 200;
}

.tutorial-title {
  width: 100%;
  position: absolute;
  z-index: 315;
  top: 10%;
  background: rgba(42, 107, 192, 0.71);
}

.tutorial-title-heading {
  font-family: Helvetica;
  font-size: 18px;
  color: #0a2449;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 5px !important;
}

.tutorial-title-message {
  font-family: Helvetica;
  font-size: 14px;
  color: rgb(255, 255, 255);
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 4px !important;
}

.tutorial-middle-div {

  position: absolute;
  width: 100%;
  z-index: 130;
  text-align: center;
  top: 2%;
  max-height: 75%;
  padding-bottom: 10px;
}


.tutorial-middle-sub-div {
  width: 100%;
  height: 100%;
}

.tutorial-dashboard-bg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 15;
}

.tutorial-dashboard {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 15;
}

.tutorial-mobile {
  /* width:240px;
  max-height: 70%; */
  max-width: 100%;
  max-height: 100%;
}

.tutorial-msg {
  width: 240px;

}

.image-middle-group {
  position: absolute;
  width: 100%;
  z-index: 130;
  top: 20%;
}

.image-middle-div {
  position: relative;
  width: 100%;
  /* z-index: 130; */
  text-align: center;
  /* top: 20%; */
}

.image-frame {
  width: 80%;
  /* position: absolute; */
  /* width: 100px; */
  /* max-width: 80%; */
  z-index: 100;
}

.image-taken {
  /* width: 80%; */
  position: absolute;
  left: 0;
  top: 0;
  z-index: -100;

  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
}

.image-upper-div {
  position: absolute;
  top: 10;
  right: -10;
  z-index: 2000;
  width: 320px;
}

.image-button-div {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 5%;

  z-index: 200;


}

.btn-capture-again-div {
  display: inline-block;
  width: 45%;
}

.btn-capture-again {
  max-width: 100%;
}

.btn-submit-div {
  display: inline-block;
  width: 45%;
}

.btn-submit {
  max-width: 100%;
}

.rotate90 {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

.result-dashboard {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 15;
}

.result-pic {
  width: 70%;
  max-width: 400px;
  margin-top: 0%;
  z-index: 120;
}

.result-pic-div {
  text-align: center;
  max-width: 100%;
  height: 130px;
  z-index: 600;
  margin-top: 65%;
  position: absolute;
  width: 100%;
}

.result-title {
  width: 90%;
  max-width: 400px;
  margin-top: 0%;
  z-index: 80;
}

.result-msg {

  font-size: 18px;
  color: rgb(255, 255, 255);
  margin: 15px;

  text-align: center;
}

.result-title-div {
  text-align: center;
  max-width: 100%;
  height: 140px;
  z-index: 80;
  margin-top: 130px;
  position: absolute;
  width: 100%;
}

.result-duration-div {
  text-align: right;
  max-width: 100%;
  height: 130px;
  z-index: 80;
  position: absolute;
  width: 100%;
  font-size: 8pt;
  color: rgb(135, 129, 115);
}

.result-botton-div {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 40px;
  z-index: 200;
}

.result-logo-div{
  text-align: center;
  max-width: 100%;
  height: 130px;
  z-index: 80;
  margin-top: 0%;
  position: absolute;
  width: 100%;
}

.result-title-logo{
  width: 210px;
  max-width: 290px;
  min-width: 120px;
  z-index: 220;
}

.result-fail-botton-div {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 40px;
  z-index: 200;
}

.result-success{
  padding: 5px;
  background: #6DD000;
}

.result-retry{
  padding: 5px;
  background: rgb(205, 33, 33);
}

.result-fail{
  padding: 5px;
  background: rgb(205, 33, 33);
}

.result-message-div{
  text-align: center;
  max-width: 100%;
  height: 130px;
  z-index: 80;
  top: 45%;
  position: absolute;
  width: 100%;
  color: rgb(106, 106, 106);
  font-size: 18px;
}

/* .result-title-div{
  text-align: center;
  max-width: 100%;
  height: 130px;
  z-index: 80;
  margin-top: 45%;
  position: absolute;
  width: 100%;
} */

.auth-title-div {
  text-align: center;
  max-width: 100%;
  height: 130px;
  z-index: 80;
  margin-top: 45%;
  position: absolute;
  width: 100%;
}

.auth-title-bg {
  background: #FFFFFF;
  box-shadow: 0 5px 8px 0 rgba(68, 68, 68, 0.23);
  height: 100px;
  display: flex;
}

.auth-loader {
  max-height: 100%;
  width: 100%;

}

.auth-msg {
  width: 100%;
  height: 100%;
  text-align: center;
  
  font-size: 16px;
  color: rgb(255, 255, 255);

}

.auth-title {}

.result-pic-not-clear {
  width: 70%;
  max-width: 400px;
  margin-top: 0%;
  z-index: 120;
  height: 120px;
  text-align: center;
  background-image: url("../media/result_message_bg.png");
  display: inline-block;
}

.auth-pic-div {
  max-width: 100%;
  z-index: 600;
  top: 32%;
  position: absolute;
  width: 100%;
}

.auth-pic {}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

.loading-animate {
    animation-name:            rotate; 
    animation-duration:        5.0s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.small {
  max-width: 300px;
 
}

.hiddenCanvas {
  visibility: hidden;
  max-width: 0px !important;
}