.fixed-button {
display: none;
} @media (max-width: 768px) and (orientation: portrait) {
.fixed-button {
display: inline-flex; justify-content: center;
align-items: center;
position: fixed;
right: 10px;
bottom: 75px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
z-index: 1001;
padding: 0; }
.fixed-button:hover {
background-color: #0056b3;
}
.fixed-button img {
width: 30px;
height: 30px;
}
} #qr-reader {
max-width: 500px;
margin: auto;
} @media (min-width: 768px) and (max-width: 1024px) {
#qr-reader {
width: 100%;
max-width: none;
}
}
.rotate-message {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
z-index: 999;
text-align: center;
padding-top: 20%;
}
#qr-scanner-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}