.ScannerVideo {
    position: relative;
    padding: .5rem;
    width: 100%;
}

.ScannerVideo video {
    width: 100%;
    overflow: hidden;
    vertical-align: bottom;
    background-color: #fff;
    border-color: #555;
    border-radius: .5rem;
    border-style: solid;
    border-width: 0.1rem;
    box-sizing: border-box;
    /* aspect-ratio: 5/3; */
}

.ScannerLine {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f88;
    width: 100%;
    height: .15rem;
    opacity: 0;
    /* aspect-ratio: 5/3; */
}

.Animation {
    opacity: 1;
    animation: move infinite ease-in-out 1s alternate;
}

.Preview {
    display: block;
    width: 100%;
    height: 240px;
}

@keyframes move {
    0% {
        top: 10%;
    }

    100% {
        top: 90%;
    }
}

/* Detection Results Styling */
.result-item {
    margin: 0.5rem 0;
    padding: 0.75rem;
    background-color: #f0f8ff;
    border-left: 4px solid #4CAF50;
    border-radius: 0.25rem;
    font-family: 'Jura', sans-serif;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.detected-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.detected-result strong {
    color: #2E7D32;
    font-weight: 600;
}

.detected-result span {
    color: #666;
    font-size: 0.85em;
}

.timestamp {
    opacity: 0.7;
    font-size: 0.9em;
}

/* Bounding box styling for Quagga2 */
.quagga-container {
    position: relative;
}

.quagga-container canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.quagga-container video {
    position: absolute;
    top: 0;
    left: 0;
}

.quagga-container svg {
    position: absolute;
    top: 0;
    left: 0;
}