uex-qr-scanner {
  position: relative;
  display: block;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: #CCCCCC;
  qr-scanner {
    position: relative;
    width: 100%;
    height: 100%;
    >div {
      width: 100%;
      height: 100%;
      video {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scaleX(-1) !important;
      }
    }
  }
  .uex-qr-scanner-area-wrapper {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .uex-qr-scanner-area {
      position: absolute;
      display: block;
      width: 25%;
      height: 25%;
      border-style: solid;
      border-color: #CC3333;
      border-width: 0;
      opacity: .75;
      $border-width: 10px;
      &.top {
        top: 0;
        border-top-width: $border-width;
      }
      &.right {
        right: 0;
        border-right-width: $border-width;
      }
      &.bottom {
        bottom: 0;
        border-bottom-width: $border-width;
      }
      &.left {
        left: 0;
        border-left-width: $border-width;
      }
    }
  }
}