.mobile-qr-scan { width: 100vw; max-width: 1250px; margin: 0px auto; padding: 0px 10px 40px; direction: rtl; padding-top: 70px; 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); } } &__camera { margin-top: 20px; width: 320px; height: 245px; 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; }