/* General form container styling */
.form-container {
	/*max-width: 600px;*/
	margin: 30px auto;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 2px;
	background-color: #f9f9f9;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-heading {
	text-align: center;
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: bold;
}
/* Form field group styling */
.form-group {
	margin-bottom: 15px;
}
.form-group label {
	font-weight: 500;
	display: block;
	margin-bottom: 5px;
}
.form-control {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	transition: border-color 0.2s ease;
}
.form-control:focus {
	border-color: #007bff;
	outline: none;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
textarea.form-control {
	resize: vertical;
}
/* File input styling */
.form-control[type="file"] {
	padding: 0.4rem; /* Adjust padding */
	display: flex; /* Use flexbox for alignment */
	align-items: center; /* Center items vertically */
}

        /* Remove the default button appearance for file inputs */
        .form-control[type="file"]::-webkit-file-upload-button {
 background-color: #007bff; /* Button color */
 color: white; /* Text color */
 border: none; /* No border */
 border-radius: 1px; /* Rounded corners */
 padding: 10px 20px; /* Button padding */
 cursor: pointer; /* Pointer cursor */
 transition: background-color 0.3s; /* Transition for hover effect */
}
		/* file upload button */
		input[type="file"]::file-selector-button {
 border-radius: 4px;
 padding: 0px 30px;
 height: 24px;
 cursor: pointer;
 background-color: white;
 border: 1px solid rgba(0, 0, 0, 0.16);
 box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
 margin-right: 16px;
 transition: background-color 200ms;
 font-size: 15px;
}
		
		/* file upload button hover state */
		input[type="file"]::file-selector-button:hover {
 background-color: #ffb300;
}
		
		/* file upload button active state */
		input[type="file"]::file-selector-button:active {
 background-color: #e5e7eb;
}

        /* Hover effect for file upload button */
        .form-control[type="file"]::-webkit-file-upload-button:hover {
 background-color: #0056b3; /* Darker shade on hover */
}

        /* Validation success (green border and check icon) */
        .was-validated .form-control:valid {
 border-color: #28a745;
 padding-right: 2.25rem;
 background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%2328a745"%3E%3Cpath fill-rule="evenodd" d="M13.485 1.317a1 1 0 00-1.415 0L6 7.714 3.93 5.645a1 1 0 00-1.415 1.415l3.465 3.465a1 1 0 001.415 0l6.064-6.064a1 1 0 000-1.415z"/%3E%3C/svg%3E');
 background-repeat: no-repeat;
 background-position: right calc(0.375em + 0.1875rem) center;
 background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

        /* Validation failure (red border) */
        .was-validated .form-control:invalid {
 border-color: #dc3545;
}
/* Error messages */
.invalid-feedback {
	color: red;
	font-size: 14px;
	display: none;
}
 .was-validated .form-control:invalid ~ .invalid-feedback {
 display: block;
}
/* Submit button styling */
.btn {
	width: 100%;
	padding: 12px;
	font-size: 15px;
	color: #333;
	background-color: #ffb300;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	text-transform: uppercase;
}
.btn:hover {
	color: #fff;
	background-color: #ec971f;
	border-color: #d58512;
}
