stocks-fe/static/css/form.css

.text-column {
	text-align: center; /* Center align text */
}

.card {
	background-color: #ffffff; /* White background for the card */
	border-radius: 12px; /* Rounded corners */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	padding: 20px; /* Padding inside the card */
	transition: transform 0.3s; /* Transition for hover effect */
}

.card:hover {
	transform: translateY(-5px); /* Slight lift effect on hover */
}

.input-field {
	width: 100%; /* Full width for inputs */
	padding: 12px 0; /* Padding for input fields */
	margin: 10px 0; /* Margin between input fields */
	border: 1px solid #ccc; /* Light border */
	border-radius: 6px; /* Rounded corners for input fields */
	font-size: 16px; /* Font size for input text */
	outline: none; /* Remove outline on focus */
	transition: border-color 0.3s; /* Transition for border color */
}

.input-field:focus {
	border-color: #007bff; /* Change border color on focus */
}

button {
	width: 100%; /* Full width for the button */
	margin: 5px 0;
	padding: 12px; /* Padding for the button */
	background-color: #007bff; /* Button color */
	color: white; /* White text color */
	border: none; /* No border */
	border-radius: 6px; /* Rounded corners for button */
	font-size: 16px; /* Font size for button text */
	cursor: pointer; /* Change cursor to pointer */
	transition: background-color 0.3s; /* Transition for button color */
}

.add-button {
	background-color: #007bff; /* Button color */
	color: white; /* White text color */
}

.register-button {
	background-color: #20bf6b; /* Button color */
	color: white; /* White text color */
}

.add-button:hover {
	background-color: #0056b3; /* Darker button color on hover */
}