.media-container {
                position:relative;
                top:3px;
                left:3px;
                height:240px;
            }

            .media-element{
                position:absolute;
                top:0px;
                left:0px;
                width: 320px;
                height: 240px;
                border: 2px solid black; /* Optional for visibility */
                object-fit: cover; /* Ensures proper scaling for images and videos */
            }

            .webcam-video{
                z-index: 1;
            }
            .video-canvas{
                z-index: 2;
                /* display:none; */
            }
            .canvas-image{
                z-index: 3;
                opacity:50%;
            }

            .sec-cam-dashboard{
                border:2px solid black;
                margin-top:10px;
                margin-left:3px;
                width: 320px;
            }
            .sec-cam-dashboard p{
                background: rgba(0, 0, 0, 0.2); /* Semi-transparent background */
                padding: 10px;
                border-radius: 5px;
                text-align: center;
            }

            .previewImageContainer{
                position:relative;
                left:3px;
                height:240px;
                margin-top: 3px;
            }
            .previewImage{
                position:absolute;
                top:0px;
                left:0px;
                width: 320px;
                height: 240px;
                border: 2px solid black; /* Optional for visibility */
                object-fit: cover; /* Ensures proper scaling for images and videos */
            }
            .previewImageContainer div{
                text-align: center;
                position: relative;
                width:320px;
                top:1px;
                left:1px;
                background-color: white;
                color:blue;
                border:1px solid blue;
                z-index: 300;
            }

            .wrapperStartStopButtons{
                position:absolute;
                width:310px;                
                top:5px;
                left:5px;
                display:flex;
                flex-direction: row;
                justify-content:space-between;
                z-index: 200;
            }
            .stopButton{
                margin:5px;
                padding:5px;
                color:white;
                background-color: red;
                cursor:pointer;
            }
            .startButton{
                margin:5px;
                padding:5px;
                color:white;
                background-color: green;
                cursor:pointer;
            }

            .wrapperCameraFacingModeToggle{
                position:absolute;
                width:310px;                
                bottom:5px;
                left:5px;
                display:flex;
                flex-direction: row;
                justify-content:space-around;
                z-index: 200;
            }
            .cameraFacingModeToggle{
                visibility:hidden;
                margin:5px;
                padding:5px;
                color:black;
                background-color: white;
                cursor:pointer;
                border:1px solid black
            }

            #custom-alert-backdrop {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 9999;
            }
            #custom-alert-dialog {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #ffffff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                text-align: center;
            }
            #custom-alert-dialog button {
                margin-top: 10px;
                padding: 8px 16px;
                border: none;
                border-radius: 4px;
                background-color: #007bff;
                color: white;
                cursor: pointer;
            }
            #custom-alert-dialog button:hover {
                background-color: #0056b3;
            }

            #stillFrameHistoryContainer{
                margin-top:10px;
                margin-left:3px;
                width: 320px;
                border: 1px solid darkgreen;
            }
            #stillFrameHistory{
                padding-left: 3px;
                color:yellow;
                background-color:darkcyan;
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            }