.mobbscan-video-body {
  margin: 0;
  margin-top: 30px;
}

.mobbscan-video-row {
  margin-right: -15px;
  width: 100%;
}

.centered-items {
  align-items: center;
  display: flex;
  flex-direction: column;
}

#button-call {
  width: 620px;
  margin-top: 10px;
}

#button-flash,
#button-flash-FRONT,
#button-flash-BACK {
  position: absolute;
  right: 0;
  z-index: 999;
  float: right;
  margin-right: 10px;
  height: 45px;
  width: 40px;
  margin-top: 10px;
}

#button-change-camera,
#button-change-camera-FRONT,
#button-change-camera-BACK {
  position: absolute;
  left: 0;
  z-index: 999;
  float: left;
  margin-left: 10px;
  height: 50px;
  width: 50px;
  margin-top: 10px;
}

.mobbscan-video-a {
  text-decoration: none;
}

.div-video-mobile {
  overflow: hidden;
  width: 100%;
  height: 350px;
}

.div-video-mobile-mrz {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 350px;
}

.msw-video-fake {
  -webkit-transform: rotate(0deg);/* WebKit */
  -moz-transform: rotate(0deg);/* Mozilla */
  -o-transform: rotate(0deg);/* Opera */
  -ms-transform: rotate(0deg);/* Internet Explorer */
  transform: rotate(0deg);/* CSS3 */
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/** START BORDER DETECTION STYLE **/

.div-video-not-detected::after {
  border: 2px solid grey;
}

.div-video-mobile-not-detected::after {
  border: 2px solid grey;
}

.div-video-detected::after {
  border: 2px solid greenyellow;
}

.div-video-mobile-detected::after {
  border: 2px solid greenyellow;
}

/** END BORDER DETECTION STYLE **/

#msw-div-documents {
  width: 100%;
  flex-wrap: wrap;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  justify-content: space-around;
  flex-direction: row;
}

.dummy-webcam {
  background-color: rgba(0, 0, 0, 0.1);
  width: 640px;
  height: 360px;
  color: #337ab7;
  border: #337ab7 2px solid;
  font-size: 220px;
  border-radius: 15px;
  padding-top: 60px;
  text-align: center;
}

.mobbscan-video-btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.mobbscan-video-btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.mobbscan-video-btn-secondary {
  color: #343a40;
  background-color: #f8f9fa;
  border-color: #f8f9fafd;
}

#mobbscan-video-buttons {
  text-align: center;
  margin-top: 32px;
}

#placeholderImage {
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 32px;
  max-width: 400px;
}

.div-video-mobile {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 350px;
}

.div-video {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 180px;
}

.div-video-mrz {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 180px;
}

.div-video-mrz:after {
  top: 60%;
  right: 12%;
  bottom: 10%;
  left: 12%;
  content: "";
  position: absolute;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
}

.div-video-record-mobile {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.div-video-record {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.div-video-record video {
  width: 100% !important;
}

.div-video-record-overlay:after {
  content: "";
  position: absolute;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 15px;
  top: 20%;
  right: 25%;
  bottom: 20%;
  left: 25%;
}

.div-video:after {
  top: 10%;
  right: 15%;
  bottom: 10%;
  left: 15%;
  content: "";
  position: absolute;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: auto;
  border-radius: 15px;
}

.div-video-mobile:after {
  content: "";
  position: absolute;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 15px;
}

#div-video {
  z-index: -1;
  width: 100%;
}

.liveness-text {
  z-index: 1000;
  margin-top: 2.5%;
  position: absolute;
  font-size: 14px;
  display: none;
  color: white;
}

.div-video-record-mobile:after {
  content: "";
  position: absolute;
  z-index: 100;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 15px;
}

.div-video-mobile-mrz:after {
  content: "";
  position: absolute;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}
.div-video-mobile-BIG {
  height: 270px !important;
}

@media screen and (orientation: portrait) {
  #div-video-fake-FRONT,
  #div-video-fake-BACK {
    height: 350px;
  }
  .div-video-mobile:after {
    top: 23%;
    right: 8%;
    bottom: 23%;
    left: 8%;
  }
  .div-video-record-mobile:after {
    top: 25%;
    right: 10%;
    bottom: 25%;
    left: 10%;
  }
  .div-video-mobile-mrz:after {
    top: 60%;
    right: 6%;
    bottom: 20%;
    left: 6%;
  }
}

@media screen and (orientation: landscape) {
  #div-video-fake-FRONT,
  #div-video-fake-BACK {
    height: 174px;
  }
  .div-video-mobile:after {
    top: 10%;
    right: 15%;
    bottom: 10%;
    left: 15%;
    border-radius: 10px;
  }
  .div-video-record-mobile:after {
    top: 15%;
    right: 23%;
    bottom: 15%;
    left: 23%;
    border-radius: 10px;
  }
  .div-video-mobile-mrz:after {
    top: 60%;
    right: 12%;
    bottom: 10%;
    left: 12%;
  }
}

#msw-overlay-FACE {
  width: 500px;
  left: auto;
  top: 10px;
}

#result-container {
  font-size: 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: absolute;
  z-index: 1000;
  margin-top: 32px;
  -webkit-transform: translateZ(100);
  transform: translateZ(100);
  width: 100%;
  color: white;
  text-align: center;
}

.msw-overlay-record {
  width: 400px;
  left: auto;
  position: absolute;
  top: 50px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
}

.none {
  display: none;
}

.mobbscan-video-mobile {
  max-width: 344px !important;
}

.video-record-mobile {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 350px;
}

.video-record-mobile video {
  width: 100%;
}

.media-container {
  align-content: center;
  margin-bottom: 10px;
}

.agent-placeholder {
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  display: none;
  margin: 10px;
}

.question-div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000000000000000000000;
}

.otp-div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.question-readable {
  width: 100%;
  color: white;
  text-align: center;
  font-size: 22px;
  margin-top: 7%;
  z-index: 1000;
}

#image-detected {
  width: 40%;
  height: 40%;
  margin: 1%;
  margin-top: 4%;
  margin-bottom: 4%;
  object-fit: contain;
  border-radius: 5px;
}

.buttons-record-div {
  width: 40%;
  display: flex;
  flex-direction: row;
}

.button-otp-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 15%;
  align-items: center;
  z-index: 10000;
}

.button-record-select {
  width: 40%;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 5px;
  text-align: center;
  font-size: 20px;
  padding: 5px;
}

.button-record-otp {
  border-radius: 5px;
  text-align: center;
  font-size: 22px;
  padding: 5px 15px 5px 15px;
}

#local-media > video {
  z-index: 1;
  width: 640px;
  height: 360px;
}

.local-media-mobile {
  height: 350px;
  width: 100%;
  max-width: 344px;
  overflow: hidden;
}

.local-media-mobile > video {
  z-index: 1;
  width: 100% !important;
  height: auto !important;
}

.video-div-dummy {
  width: 98.5%;
}

.dummy-webcam-mobile {
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 360px;
  color: #337ab7;
  border: #337ab7 2px solid;
  font-size: 220px;
  border-radius: 15px;
  padding-top: 60px;
  text-align: center;
}

.msw-overlay-record-FRONT,
.msw-overlay-record-BACK {
  width: 400px;
  left: auto;
  height: auto;
  position: absolute;
  top: 40px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

.msw-overlay-record-FACE {
  width: 500px;
  left: auto;
  top: 30px;
  height: auto;
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

.msw-countdown-record {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  position: absolute;
  font-size: 100px;
  color: #7fff00;
  text-align: center;
  display: flex;
  z-index: 100;
  -webkit-transform: translateZ(10000);
  transform: translateZ(10000);
  flex-direction: column;
  justify-content: center;
}

.msw-overlay-record {
  width: 500px;
  left: auto;
  position: absolute;
  top: 50px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

#result-container-record {
  font-size: 22px;
  top: 368px;
  position: absolute;
  z-index: 102;
  -webkit-transform: translateZ(102);
  transform: translateZ(102);
  width: 640px;
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
}

.msw-canvas-record {
  position: relative;
  left: 0;
  height: 180px;
  top: -5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.validation-step {
  font-size: 18px;
  height: 240px;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.centered-items {
  align-items: center;
  display: flex;
  flex-direction: column;
}

#image-face-tick {
  width: 237px;
}

.mobbscan-video-fa-check {
  text-align: right;
  bottom: 45px;
  color: #66ff33;
  width: 340px;
  position: absolute;
  z-index: 100;
  -webkit-transform: translateZ(101);
  transform: translateZ(101);
  font-size: 50px;
}

#image-face {
  display: none;
  position: relative;
  left: 0;
  height: 180px;
  top: -5px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.msw-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  border: 0px solid black;
  position: relative;
  margin: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.msw-countdown {
  background: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  position: absolute;
  width: 320px;
  line-height: 240px;
  height: 240px;
  font-size: 100px;
  color: #7fff00;
  text-align: center;
  z-index: 101;
  -webkit-transform: translateZ(101);
  transform: translateZ(101);
}

.msw-overlay {
  position: absolute;
  top: 10px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

.msw-overlay-FRONT,
.msw-overlay-BACK {
  width: 250px;
  height: auto;
  position: absolute;
  top: 20px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

.msw-overlay-mobile-FRONT,
.msw-overlay-mobile-BACK {
  width: 320px;
  height: auto;
  position: absolute;
  top: 10px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

.msw-div-front-only-mode {
  width: 100%;
}

.msw-div-back-only-mode {
  width: 100%;
}

.msw-div-back-only-mode > div > .msw-overlay-mobile-BACK {
  width: 290px;
}

.msw-overlay-mobile-landscape-FRONT,
.msw-overlay-mobile-landscape-BACK {
  width: 260px !important;
  height: auto;
  position: absolute;
  top: 10px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

.msw-overlay-bigSize-FRONT,
.msw-overlay-bigSize-BACK {
  width: 650px;
  height: auto;
  position: absolute;
  top: 20px;
  margin-left: 23px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

#msw-content-FACE {
  align-items: center;
  display: flex;
  flex-direction: column;
}

#msw-overlay-FACE {
  width: 340px;
  height: auto;
  top: 30px;
  display: block;
  pointer-events: none;
  z-index: 99;
  -webkit-transform: translateZ(99);
  transform: translateZ(99);
}

/** START LIVENESS **/

#msw-overlay-progress-FACE {
  position: absolute;
  top: 0px;

  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;

  pointer-events: none;
  z-index: 99;

  text-align: center;

  width: 100%;
  height: 100%;
}

#msw-overlay-progress-FACE svg {
  width: 100%;
  height: 100%;
  position: absolute;
}

/** END LIVENESS **/

.msw-canvas {
  display: block;
}

.msw-canvas-full {
  display: none;
}

.msw-video {
  width: 100%;
  height: 100%;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
  filter: FlipH;
}

.msw-footer {
  left: 0px;
  right: 0px;
  height: auto;
  margin-top: 10px;
  width: 100%;
}

.msw-footer-bigSize {
  width: 100%;
  left: 0px;
  right: 0px;
  height: auto;
  margin-top: 10px;
  text-align: center;
}

.msw-div-FRONT {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0px;
  top: 0px;
  min-height: 250px;
  width: 50%;
}

.msw-div-bigSize-BACK {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 340px;
  height: 240px;
}

.msw-div-bigSize-FRONT {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 480px;
  height: 350px;
  min-height: 250px;
}

.msw-div-BACK {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 50%;
}

.msw-div-face {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  border: 1px dotted black;
}

.msw-container-onlyBack-bigSize {
  position: relative;
  width: 480px;
  height: 300px;
  border: 1px solid blue;
}

.msw-container-onlyBack,
.msw-container {
  position: relative;
  max-width: 100%;
  min-height: 300px;
  height: auto;
}

.msw-container-onlyBack-bigSize,
.msw-container-bigSize {
  position: relative;
  max-width: 100%;
}

.msw-container-onlyBack {
  margin: 0 auto;
}

.msw-div-face {
  position: relative;
  left: 0px;
  right: 0px;
  border: 0px;
  margin: 0px;
}

.msw-div-face {
  border: 0px;
  margin: 0px;
}

#msw-canvasPaint-BACK,
#msw-canvasPaint-FRONT {
  position: absolute;
}

.big {
  max-height: 270px !important;
  max-width: 480px !important;
  width: auto;
}

#msw-image-BACK,
#msw-image-FRONT {
  max-width: 480px !important;
  width: auto;
}

.msw-container {
  display: flex;
  width: 100%;
  height: 400px, auto;
  justify-content: center;
}

.msw-content {
  max-width: 400px;
}

.msw-content-bigSize {
  min-width: 480px !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.msw-container .msw-div-FRONT {
  position: relative;
  float: left;
}

.msw-container-bigSize .msw-div-FRONT {
  position: relative;
  float: left;
  padding: 0px;
}

.msw-container .msw-div-BACK {
  position: relative;
  float: right;
}

.msw-container-bigSize .msw-div-BACK {
  position: relative;
  float: right;
  padding: 0px;
}

.msw-container-onlyBack .msw-div-BACK {
  position: relative;
  margin: 0 auto;
  float: none;
  display: block;
}

.msw-container-bigSize .msw-div-FACE {
  position: relative;
  display: inline-block;
  float: right;
  padding: 0px;
  margin-right: 40px;
}

.msw-container-bigSize > #msw-div-documents > .msw-div-BACK,
.msw-container-bigSize > #msw-div-documents > .msw-div-FRONT {
  width: auto !important;
}

.msw-container-bigSize > #msw-div-documents > .msw-div-BACK > .msw-title,
.msw-container-bigSize > #msw-div-documents > .msw-div-FRONT > .msw-title {
  width: 100% !important;
}

.msw-container-onlyBack .msw-div-FACE {
  position: relative;
  margin: 0 auto;
  float: none;
  display: block;
}

#webcam_error_icon {
  position: absolute;
  top: 35px;
  left: 250px;
}

#resetVideo {
  cursor: pointer;
  cursor: hand;
}

#msw-subTitle-FACE {
  width: 320px;
  text-align: center;
  position: relative;
  top: 0px;
}

#msw-div-canvas-paint-FACE {
  height: auto;
  min-height: 240px;
}

#msw-video-FACE {
  top: 30px !important;
  height: 100%;
  width: 100%;
}

.msw-div-canvas-paint {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobbscan-placeholder {
  position: relative;
  top: 0px;
  margin: auto;
}

.mobbscan-placeholder-bigSize {
  position: relative;
  top: 0px;
  margin: auto;
}

.mobbscan-placeholder-oneside-bigSize {
  min-width: 400px !important;
  width: 400px !important;
  max-height: 300px !important;
  height: 300px !important;
  position: relative;
  top: 0px;
  margin: auto;
}

.mobbscan-placeholder-oneside {
  min-width: 350px !important;
  width: 350px !important;
  position: relative;
  top: 0px;
  margin: auto;
}

.msw-title {
  color: #000000;
  width: 300px;
  height: auto;
  top: 0px;
  margin-top: 10px;
}

.msw-subTitle {
  color: #000000;
  position: relative;
  width: 100%;
  height: auto;
  top: 0px;
  margin-bottom: 5px;
}

#otp-title {
  margin-top: 5% !important;
}

#otp-number {
  padding: 1% 3% 1% 3%;
  margin-right: 4%;
  color: #fff;
  background-color: #4591d4;
  background-image: linear-gradient(#74c4d6c2 10%, #337ab7 100%);
  border-radius: 8px;
  border: 1px solid #2e6da4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px rgba(50, 50, 50, 0.4);
  -webkit-box-shadow: 5px 5px rgba(50, 50, 50, 0.4);
  -moz-box-shadow: 5px 5px rgba(50, 50, 50, 0.4);
}

#otp-number:last-child {
  margin-right: 0px;
}

#otp-code-text {
  font-size: 128px;
  height: 75%;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

@media (max-width: 1200px) {
  .mobbscan-placeholder-oneside-bigSize {
    height: 350px;
  }
  .msw-content-bigSize {
    max-width: 480px;
    width: 480px;
  }
  .msw-container-bigSize .msw-div-FRONT {
    position: relative !important;
    display: inline-block;
    padding: 0px;
    max-width: 480px;
    margin-bottom: 20px;
  }
  .msw-container-bigSize .msw-div-BACK {
    position: relative !important;
    display: inline-block;
    padding: 0px;
    left: 0px;
  }
  .msw-canvas-bigSize-FRONT {
    width: 480px !important;
    height: auto;
  }
  .msw-canvas-bigSize-BACK {
    width: 480px !important;
    height: auto;
  }
  .msw-content-bigSize {
    max-width: 480px !important;
    width: 480px !important;
  }
  .msw-div-bigSize-FRONT .msw-content-bigSize,
  .msw-div-bigSize-BACK .msw-content-bigSize {
    top: 10px;
  }
}

.face-small {
  display: none;
}
.face-big {
  display: block;
}

@media only screen and (max-device-width: 1024px) {
  .msw-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-height: 350px;
  }

  #msw-video-FACE {
    object-fit: cover;
    height: 100% !important;
    width: 100% !important;
    max-height: 350px;
  }
}

@media (max-width: 1024px) {
  .buttons-record-div {
    width: 80% !important;
    display: flex;
    flex-direction: row;
  }

  .question-readable {
    font-size: 20px;
    margin-top: 16% !important;
    width: 90%;
  }

  #result-container {
    margin-top: 24px;
    font-size: 20px;
    width: 90%;
  }

  #image-detected {
    width: 80% !important;
    margin-top: 4%;
    margin-bottom: 4%;
    object-fit: contain;
    border-radius: 5px;
  }

  #image-detected {
    width: 100%;
    margin: 5%;
  }

  .button-otp-div {
    bottom: 7%;
  }

  .button-record-otp {
    font-size: 18px;
  }

  .otp-div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #otp-title {
    height: 100%;
    font-size: 22px;
  }

  #otp-code-text {
    font-size: 48px;
    height: 60%;
  }

  #result-container {
    width: 95%;
  }
}

@media (max-width: 758px) {
  .face-small {
    display: block;
  }
  .face-big {
    display: none;
  }
  .msw-div-BACK {
    width: 100%;
  }

  #image-face-tick {
    width: 241px !important;
    bottom: 62px !important;
  }
  .msw-container-bigSize .msw-div-BACK {
    margin-right: 0px;
  }
  .mobbscan-placeholder {
    max-width: 350px !important;
    width: 100% !important;
  }
  .msw-canvas-FRONT {
    max-width: 100% !important;
    width: 100% !important;
    height: auto;
  }
  .msw-canvas-BACK {
    max-width: 100% !important;
    width: 480px !important;
    height: auto;
  }
  .msw-content {
    width: 100%;
    margin: 0px;
  }
  .msw-container .msw-div-face {
    position: relative;
    display: flex;
    float: left;
    padding: 0px;
  }
  .msw-container .msw-div-FRONT {
    position: relative;
    display: flex;
    margin-top: 20px;
    width: 100%;
  }
  .msw-container .msw-div-BACK {
    position: relative;
    display: flex;
    margin-top: 20px;
    width: 100%;
  }
  .msw-div-FRONT .msw-content,
  .msw-div-BACK .msw-content {
    margin-top: 20px !important;
  }
  #msw-subTitle-FACE {
    position: relative;
  }
  #msw-div-documents {
    text-align: center;
  }
  .msw-footer {
    text-align: center;
  }
  .msw-title {
    text-align: center;
    margin-left: 10px;
  }
  .msw-div-canvas-paint {
    min-height: 170px;
  }
  #msw-div-documents {
    text-align: left;
  }

  .question-readable {
    margin-top: 14% !important;
    font-size: 18px;
    width: 90%;
  }

  .button-record-select {
    font-size: 16px;
  }

  .button-record-otp {
    font-size: 16px;
  }

  .div-video-record-overlay:after {
    top: 25%;
    bottom: 25%;
  }

  #result-container {
    margin-top: 24px;
    font-size: 18px;
    width: 90%;
  }

  #otp-title {
    width: 90%;
    font-size: 18px;
  }

  #otp-code-text {
    font-size: 44px;
    height: 65%;
  }

  #image-detected {
    width: 80% !important;
    margin-top: 4%;
    margin-bottom: 4%;
    object-fit: contain;
    border-radius: 5px;
  }
}

#msw-footer-FACE {
  position: relative !important;
}

.mobbscan-video-col,
.mobbscan-video-col-xs1,
.mobbscan-video-col-xs2,
.mobbscan-video-col-xs3,
.mobbscan-video-col-xs4,
.mobbscan-video-col-xs5,
.mobbscan-video-col-xs6,
.mobbscan-video-col-xs7,
.mobbscan-video-col-xs8,
.mobbscan-video-col-xs9,
.mobbscan-video-col-xs10,
.mobbscan-video-col-s1,
.mobbscan-video-col-s2,
.mobbscan-video-col-s3,
.mobbscan-video-col-s4,
.mobbscan-video-col-s5,
.mobbscan-video-col-s6,
.mobbscan-video-col-s7,
.mobbscan-video-col-s8,
.mobbscan-video-col-s9,
.mobbscan-video-col-s10,
.mobbscan-video-col-m1,
.mobbscan-video-col-m2,
.mobbscan-video-col-m3,
.mobbscan-video-col-m4,
.mobbscan-video-col-m5,
.mobbscan-video-col-m6,
.mobbscan-video-col-m7,
.mobbscan-video-col-m8,
.mobbscan-video-col-m9,
.mobbscan-video-col-m10,
.mobbscan-video-col-l1,
.mobbscan-video-col-l2,
.mobbscan-video-col-l3,
.mobbscan-video-col-l4,
.mobbscan-video-col-l5,
.mobbscan-video-col-l6,
.mobbscan-video-col-l7,
.mobbscan-video-col-l8,
.mobbscan-video-col-l9,
.mobbscan-video-col-l10 {
  position: relative;
  min-height: 1px;
  text-align: center;
}

/*largue mobbscan-video-col*/

@media (min-width: 1200px) {
  .mobbscan-video-col,
  .mobbscan-video-col-l1,
  .mobbscan-video-col-l2,
  .mobbscan-video-col-l3,
  .mobbscan-video-col-l4,
  .mobbscan-video-col-l5,
  .mobbscan-video-col-l6,
  .mobbscan-video-col-l7,
  .mobbscan-video-col-l8,
  .mobbscan-video-col-l9,
  .mobbscan-video-col-l10 {
    float: left;
  }
  .mobbscan-video-col-l1 {
    width: 10%;
  }
  .mobbscan-video-col-l2 {
    width: 20%;
  }
  .mobbscan-video-col-l3 {
    width: 33.33%;
  }
  .mobbscan-video-col-l4 {
    width: 40%;
  }
  .mobbscan-video-col-l5 {
    width: 50%;
  }
  .mobbscan-video-col-l6 {
    width: 60%;
  }
  .mobbscan-video-col-l7 {
    width: 65%;
  }
  .mobbscan-video-col-l8 {
    width: 80%;
  }
  .mobbscan-video-col-l9 {
    width: 90%;
  }
  .mobbscan-video-col-l10 {
    width: 100%;
  }
}

/*medium mobbscan-video-col*/

@media (min-width: 900px) and (max-width: 1200px) {
  .mobbscan-video-row {
    width: 100%;
    float: left;
    display: table;
  }
  .mobbscan-video-col,
  .mobbscan-video-col-m1,
  .mobbscan-video-col-m2,
  .mobbscan-video-col-m3,
  .mobbscan-video-col-m4,
  .mobbscan-video-col-m5,
  .mobbscan-video-col-m6,
  .mobbscan-video-col-m7,
  .mobbscan-video-col-m8,
  .mobbscan-video-col-m9,
  .mobbscan-video-col-m10 {
    float: left;
  }
  .mobbscan-video-row {
    padding-left: 0;
  }
  .mobbscan-video-col-m1 {
    width: 10%;
  }
  .mobbscan-video-col-m2 {
    width: 20%;
  }
  .mobbscan-video-col-m3 {
    width: 31%;
  }
  .mobbscan-video-col-m4 {
    width: 40%;
  }
  .mobbscan-video-col-m5 {
    width: 43%;
  }
  .mobbscan-video-col-m6 {
    width: 50%;
  }
  .mobbscan-video-col-m7 {
    width: 55%;
  }
  .mobbscan-video-col-m8 {
    width: 80%;
  }
  .mobbscan-video-col-m9 {
    width: 90%;
  }
  .mobbscan-video-col-m10 {
    width: 100%;
  }
}

/*small mobbscan-video-col*/

@media (min-width: 768px) and (max-width: 900px) {
  .mobbscan-video-row {
    width: 100%;
    float: left;
    display: table;
  }
  .mobbscan-video-col,
  .mobbscan-video-col-s1,
  .mobbscan-video-col-s2,
  .mobbscan-video-col-s3,
  .mobbscan-video-col-s4,
  .mobbscan-video-col-s5,
  .mobbscan-video-col-s6,
  .mobbscan-video-col-s7,
  .mobbscan-video-col-s8,
  .mobbscan-video-col-s9,
  .mobbscan-video-col-s10 {
    float: left;
  }
  .mobbscan-video-row {
    width: 100%;
    float: left;
  }
  .mobbscan-video-col-s1 {
    width: 10%;
  }
  .mobbscan-video-col-s2 {
    width: 20%;
  }
  .mobbscan-video-col-s3 {
    width: 33.33%;
  }
  .mobbscan-video-col-s4 {
    width: 40%;
  }
  .mobbscan-video-col-s5 {
    width: 50%;
  }
  .mobbscan-video-col-s6 {
    width: 60%;
  }
  .mobbscan-video-col-s7 {
    width: 70%;
  }
  .mobbscan-video-col-s8 {
    width: 80%;
  }
  .mobbscan-video-col-s9 {
    width: 90%;
  }
  .mobbscan-video-col-s10 {
    width: 100%;
  }
}

/*extra-small mobbscan-video-col*/

@media (max-width: 768px) {
  .mobbscan-video-row {
    width: 100%;
    float: left;
    display: table;
  }
  .mobbscan-video-col,
  .mobbscan-video-col-xs1,
  .mobbscan-video-col-xs2,
  .mobbscan-video-col-xs3,
  .mobbscan-video-col-xs4,
  .mobbscan-video-col-xs5,
  .mobbscan-video-col-xs6,
  .mobbscan-video-col-xs7,
  .mobbscan-video-col-xs8,
  .mobbscan-video-col-xs9,
  .mobbscan-video-col-xs10 {
    float: left;
    padding-left: 0;
    padding-right: 0;
  }
  .mobbscan-video-col-xs1 {
    width: 10%;
  }
  .mobbscan-video-col-xs2 {
    width: 20%;
  }
  .mobbscan-video-col-xs3 {
    width: 33.33%;
  }
  .mobbscan-video-col-xs4 {
    width: 40%;
  }
  .mobbscan-video-col-xs5 {
    width: 45%;
  }
  .mobbscan-video-col-xs6 {
    width: 60%;
  }
  .mobbscan-video-col-xs7 {
    width: 70%;
  }
  .mobbscan-video-col-xs8 {
    width: 80%;
  }
  .mobbscan-video-col-xs9 {
    width: 90%;
  }
  .mobbscan-video-col-xs10 {
    width: 100%;
  }
}

.mobbscan-video-row {
  width: 100%;
  float: left;
  display: table;
}

.mobbscan-video {
  position: relative;
  min-height: 1px;
  margin: auto;
}

.mobbscan-video-space-top {
  margin-top: 40px;
}

@media (min-width: 767px) {
  #div-video-fake-FRONT,
  #div-video-fake-BACK {
    height: 174px;
  }
  .div-video-mobile:after {
    top: 10%;
    right: 15%;
    bottom: 10%;
    left: 15%;
    border-radius: 10px;
  }
}

.msw-video-fake,
.msw-video {
  content: "";
  position: relative;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
}