.mobile-qr-scan {
  width: 100vw;
  max-width: 1250px;
  margin: 0px auto;
  padding: 0px 10px 40px;
  direction: rtl;
  padding-top: 90px;
  overflow-x: hidden;
  &__back {
    justify-content: flex-end;
    a {
      display: inline;
      font-family: numeralLight;
      text-decoration: none;
      padding: 5px 20px 3px;
      background-color: #00cc69;
      border-radius: 25px;
      font-size: calc(100vw / 26);
      color: white;
      &:focus:enabled {
        text-decoration: none;
      }
    }
  }
  &__header {
    margin-top: 30px;
    width: 100%;
    h1 {
      font-family: numeralBold;
      color: #4ce1be;
      font-size: calc(100vw / 13);
    }
    p {
      text-align: justify;
      font-family: numeralMedium;
      color: #4ce1be;
      font-size: calc(100vw / 28);
    }
  }
  &__select {
    select {
      margin-top: 10px;
      border-radius: 4px;
      position: relative;
      background-color: #efefef;
      border: 1px solid #a5a5a5;
      font-size: 16px;
      color: black;
      // maxWidth : 70;
      min-width: 80;
      height: 35px;
      padding: 5px;
      font-family: numeralLight;
      &:focus {
        border-radius: 4;
      }
    }
  }
  &__camera {
    margin-top: 20px;
    width: 100%;
    border-radius: 10px;
    margin: 30px auto;
    position: relative;
    &--shape {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.8);
    }
    &--shapeTop {
      width: calc(100% - 60px);
      height: 30px;
      left: 30px;
      top: 0px;
    }
    &--shapeBottom {
      width: calc(100% - 60px);
      height: 30px;
      left: 30px;
      bottom: 0px;
    }
    &--shapeLeft {
      width: 30px;
      height: 100%;
      left: 0px;
      bottom: 0px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    &--shapeRight {
      width: 30px;
      height: 100%;
      right: 0px;
      bottom: 0px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    &--shapeCenter {
      position: absolute;
      width: calc(100% - 60px);
      height: calc(100% - 60px);
      right: 30px;
      bottom: 30px;
      border: 3px solid red;
    }
  }
  &__text {
    text-align: justify;
    font-family: numeralMedium;
    color: #4ce1be;
    font-size: calc(100vw / 28);
  }
  &__lasts {
    width: 100%;
    margin: 30px 0px;
    h2 {
      font-family: numeralBold;
      color: #02a255;
      font-size: calc(100vw / 24);
      margin-bottom: 20px;
    }
  }
}

.qr-scan {
  width: 100vw;
  max-width: 1250px;
  min-height: calc(100vh - 288px);
  margin: 0px auto;
  padding: 0px 10px;
  direction: rtl;
  overflow-x: hidden;
  padding-top: 110px;
  &__box {
    width: 100%;
    max-width: 700px;
    &--header {
      width: 100%;
      h1 {
        font-family: numeralBold;
        color: #00cc69;
      }
      p {
        font-family: numeralLight;
        color: #4d4d4f;
      }
    }
    &--select {
      select {
        margin-top: 10px;
        border-radius: 4px;
        position: relative;
        background-color: #efefef;
        border: 1px solid #a5a5a5;
        font-size: 16px;
        color: black;
        // maxWidth : 70;
        min-width: 80;
        height: 35px;
        padding: 5px;
        font-family: numeralLight;
        &:focus {
          border-radius: 4;
        }
      }
    }
    &--camera {
      margin-top: 20px;
      width: 100%;
      * {
        border-radius: 10px;
      }
    }
    &--text {
      margin-top: 30px;
      width: 100%;
      p {
        font-family: numeralLight;
        color: #4d4d4f;
      }
    }
    p {
      font-family: numeralLight;
      color: #4d4d4f;
    }
  }
}