WS Form CSS

/* General Form Styles */
.ws-form {
  font-family: Arial, sans-serif; /* Change to your preferred font */
  font-size: 16px; /* Adjust font size */
  color: #333; /* Text color */
  max-width: 800px; /* Maximum width of the form */
  margin: 0 auto; /* Center the form */
  padding: 20px; /* Padding around the form */
  border: 1px solid #ddd; /* Border around the form */
  border-radius: 8px; /* Rounded corners */
  background-color: #f9f9f9; /* Background color */
}

/* Form Heading */
.ws-form .form-heading {
  font-size: 24px; /* Heading font size */
  margin-bottom: 20px; /* Space below heading */
  color: #222; /* Heading color */
}

/* Form Field Styles */
.ws-form .form-field {
  margin-bottom: 15px; /* Space between fields */
}

.ws-form .form-field label {
  display: block; /* Ensure labels are on their own line */
  font-weight: bold; /* Bold labels */
  margin-bottom: 5px; /* Space below labels */
  color: #555; /* Label color */
}

.ws-form .form-field input[type="text"],
.ws-form .form-field input[type="email"],
.ws-form .form-field input[type="password"],
.ws-form .form-field select,
.ws-form .form-field textarea {
  width: 100%; /* Full width fields */
  padding: 10px; /* Padding inside fields */
  border: 1px solid #ccc; /* Border around fields */
  border-radius: 4px; /* Rounded corners */
  box-sizing: border-box; /* Include padding and border in element’s total width and height */
}

.ws-form .form-field input[type="submit"] {
  background-color: #007bff; /* Button background color */
  color: #fff; /* Button text color */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Padding inside button */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 16px; /* Button font size */
}

.ws-form .form-field input[type="submit"]:hover {
  background-color: #0056b3; /* Darker background on hover */
}

/* Error Messages */
.ws-form .form-error {
  color: #d9534f; /* Error message color */
  font-size: 14px; /* Error message font size */
}

/* Success Messages */
.ws-form .form-success {
  color: #5bc0de; /* Success message color */
  font-size: 14px; /* Success message font size */
}