/* General body styles */
body {
    
}

/* Flash container */
#flashDiv {
    background-color: white;
}

/* No initial transition effect on the flash */
.flash {
    background-color: inherit; /* No transition */
}

/* Fade out effect with a transition */
.fadeout {
    transition: background-color 4s ease-out;
    background-color: white;
}

/* Ensuring cross-browser compatibility */
#flashDiv {
    will-change: background-color; /* Hint to browsers to optimize */
}

/* Scanner area */
#my-qr-reader video {
    
}

/* Hide icons */
#my-qr-reader img[alt="Info icon"] {
    display: none;
}
#my-qr-reader img[alt="Camera based scan"] {
    width: 100px !important;
    height: 100px !important;
}

/* Camera button */
#html5-qrcode-anchor-scan-type-change {
    text-decoration: none !important;
    color: #1d9bf0;
}

/* Style for the video element */
video {
    width: 100% !important;
    border: 1px solid #b2b2b2 !important;
    border-radius: 0.25em;
}

/* Result styling */
#result {
    
}

/* Success and failure messages */
.success {
    color: green;
}
.failure {
    color: red;
}


#manual-qr-form {
    display: flex;
    align-items: center;  /* Align the input and button vertically */
    gap: 10px;  /* Optional: Adds space between the input and button */
}

#manual-qr-form label {
    margin-right: 10px;  /* Optional: Adds space between the label and input */
}

#fid {
    width: 100px; /* You can change this value to your desired length */
}