#gf-webcam{
    width:550px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
/* Container style to align items */
.gf-webcam-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Center vertically */
    padding: 10px;
    height: 54vh; /* Full viewport height */
    box-sizing: border-box;
    width: 500px;
    background-color: #f5f5f5; /* Light background color */
}

/* Side container styles */
.gf-webcam-side {
    flex: 0 0 15%; /* Fixed width for sidebars */
    max-height: calc(55vh - 20px); /* Adjust height to fit within the container */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    box-sizing: border-box;
    background-color: #e0e0e0; /* Slightly different background for side */
    height: 54vh ;
}

#image-gal img{
    cursor: pointer;
    margin-bottom:5px;

}

/* Middle container styles */
.gf-webcam-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center vertically within the middle container */
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff; /* White background for the middle container */
    border: 1px solid #ddd; /* Light border for better separation */
    height: calc(55vh - 20px); /* Ensure height matches the combined height of the sidebars */
}

/* Video element styling */
video {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* Button styling */
#snapshotBtn{
   
    height:30px;
	width:30px;
    cursor: pointer;
    background-color: #e41607;
    color: white;
    transition: background-color 0.3s ease;
	border-radius: 100%;
	
}

#snapshotBtn:hover {
    background-color: #ef5a28;
}

/* Hide the canvas */
canvas {
    display: none;
}

/* Responsive design */
@media (max-width: 768px) {
    .gf-webcam-container {
        flex-direction: row; /* Maintain sidebars on the sides */
        width: 95vw; /* Adjust the width for smaller screens */
        height: auto; /* Let the container adjust its height */
        justify-content: space-between; /* Ensure even spacing between the sidebars and middle */
    }

    .gf-webcam-side {
        flex: 0 0 20vw; /* Adjust width relative to viewport for smaller screens */
        max-height: 55vh; /* Keep the height of the sidebars consistent with the middle section */
    }

    .gf-webcam-middle {
        flex: 1;
        padding: 5px;
        height: auto; /* Let the middle container adjust its height */
    }

    #snapshotBtn {
        height: 8vh; /* Increase button size slightly on mobile */
        width: 8vh;  /* Square button */
    }
}