/* Style for the webcam capture container */
.cf7-webcam-capture {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
    bbackground-color: #f9f9f9;
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* This will stack elements vertically */
	
	}

/* Style for buttons */
.cf7-webcam-capture button {
    background-color: #5d2c86; /* Change this to the shade of blue you want */
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.cf7-webcam-capture button:hover {
    background-color: #3A1B54; /* Optional: darker blue for hover effect */
}

/* Making 'Start Recording' and 'Stop Recording' buttons red */
#startVideo, #stopVideo {
    background-color: red;
    color: white; /* Ensure the text is readable */
    border: none;
    padding: 10px 20px; /* Add some padding for better appearance */
    cursor: pointer;
}

#startVideo:hover, #stopVideo:hover {
    background-color: darkred; /* Change to a darker red on hover */
}

/* Style for the webcam container */
#webcamContainer {
    text-align: center;
    margin-top: 20px;
}

/* Style for the video element */
#webcamVideo {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 5px solid #e51a94;
    border-radius: 25px;
}

/* Style for the canvas element */
#webcamCanvas {
    display: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Style for video controls */
#videoControls {
    margin-top: 10px;
}

/* Style for picture controls */
#pictureControls {
    margin-top: 10px;
}

/* Style for the preview container */
#previewContainer {
    margin-top: 20px;
    text-align: center;
}

/* Style for preview video */
#previewVideo {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Style for preview image */
#previewImage {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Style for preview text */
#previewText {
    font-size: 20px;
	padding: 20px;
}