#cameraStreamContainer{
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
}


video {
    position: fixed;
    min-width: 100%;
    min-height: 100%; /* Fill the entire container */
    max-width: 100%;
    background-color: black; /* To handle any letterboxing (black bars) */
    right: 0;
    bottom: 0;
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
    overflow-x: ;
    overflow-y: ;
    z-index: 5; /* Ensure video is beneath controls */
}

#photo-preview {
    display: none; /* Initially hidden, can be shown when needed */
    position: absolute;  /* Absolute positioning within the relative container */
    top: 30vh;            /* Center vertically */
    left: 50%;           /* Center horizontally */
    transform: translate(-50%, -50%);  /* Adjust to ensure true centering */
    width: 75%;
    height: auto;
    max-width: 75%;      /* Optional: Limit the preview size */
    z-index: 35;         /* Ensure it is above other elements */
    border-radius: 15px; /* Optional: Add some styling */
    overflow: hidden;    /* Ensures the image fits within the rounded border */
    object-fit: cover;   /* Ensure the image covers the entire area */
}

#input-canvas {
    position: absolute; /* Overlay on top of the video */
    top: 0;
    left: 0;
    pointer-events: none; /* Ensure the canvas doesn't block interactions */
    z-index: 1; /*Hide behind the video:1 */
    border: 3px solid red; /* This adds a red border around the input canvas */
}

#tracking-canvas {
    position: absolute; /* Overlay on top of the video */
    top: 0;
    left: 0;
    pointer-events: none; /* Ensure the canvas doesn't block interactions */
    z-index: 15 ; /*Beyond  the videop*/
}

#controls {
    position: absolute;
    top: 62vh; /* Place at the bottom */
    left: 50%;
    transform: translateX(-50%); /* Ensure centering */
    display: flex;
    justify-content: space-between;
    width: 100%; /* Adjust this value based on the button sizes */
    z-index: 20;
    align-items: center;
}

#menuButton {
    position: absolute;
    left: 10px; /* Place at the left */
    cursor: pointer;
    z-index: 20;
}

.menu-button {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    width: 60px;
    height: 60px;
    padding: 12px;
    border-radius: 50%;
    margin-left: 30%
}

#captureButton {
    position: absolute;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure true centering */
    cursor: pointer;
    z-index: 20;
}

.capture-button {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 50%;
    margin: 0 auto;
}

.fa-image {
    font-size: 24px;
    color: white;
}

.focus-ring {
     position: absolute;
     width: 100px;
     height: 100px;
     border: 2px solid #00ff00;
     border-radius: 50%;
     display: none;
     pointer-events: none;
     transform: translate(-50%, -50%);
     z-index: 10
}


:root {
    --main-detection-border: 4px; /* Border thickness */
}

.detection-loader {
    position: relative;
    width: 95vw; /* 80% of the viewport width */
    height: 70vh; /* 70% of the viewport height */
    margin: 0% 0%;
    box-sizing: border-box;
}

#log-output {
    position: fixed;
    bottom: 0; /* Place the div at the bottom of the screen */
    left: 0;
    width: 100%;
    height: 25vh; /* Occupies 25% of the screen height */
    overflow-y: auto; /* Makes the content scrollable */
    border: 1px solid black;
    background-color: #f5f5f5;
    z-index: 30; /* Ensure it is on top of other elements */
    padding: 10px; /* Optional: Add padding to the inside of the div */
    box-sizing: border-box; /* Ensures padding and border do not affect height */
}

/* General corner box styling */
.corner-box {
    position: absolute;
    width: 40px; /* Matches the original */
    height: 40px; /* Matches the original */
    border-style: solid;
    border-color: #fff; /* White border color */
    box-sizing: border-box;
    z-index: 25; /* Ensures it's above other content */
}

/* Top-left corner box */
.top-left {
    top: 0;
    left: 0;
    border-left-width: var(--main-detection-border);
    border-top-width: var(--main-detection-border);
    border-right-width: 0;
    border-bottom-width: 0;
    border-top-left-radius: 15px;
    transform: translateX(10%) translateY(10%);
}

/* Top-right corner box */
.top-right {
    top: 0;
    right: 0;
    border-right-width: var(--main-detection-border);
    border-top-width: var(--main-detection-border);
    border-left-width: 0;
    border-bottom-width: 0;
    border-top-right-radius: 15px;
    transform: translateX(-10%) translateY(10%);
}

/* Bottom-left corner box */
.bottom-left {
    bottom: 16%;
    left: 0;
    border-left-width: var(--main-detection-border);
    border-bottom-width: var(--main-detection-border);
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-left-radius: 15px;
}

/* Bottom-right corner box */
.bottom-right {
    bottom: 16%;
    right: 0;
    border-right-width: var(--main-detection-border);
    border-bottom-width: var(--main-detection-border);
    border-left-width: 0;
    border-top-width: 0;
    border-bottom-right-radius: 15px;
}