/* General container styles */
.courseFormContainer {
  display: flex ;
  justify-content: center ;
  align-items: center ;
  padding: 20px ;
}

.courseFormFormContainer {
  background: #f4f4f4 ;
  padding: 20px ;
  border-radius: 8px ;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) ;
  width: 100% ;
  max-width: 960px ;
}

.courseFormHeader {
  text-align: center ;
  color: #333 ;
  grid-column: 1 / -1 ; /* Spans the entire width */
}

.courseForm {
  display: grid ;
  grid-template-columns: repeat(3, 1fr) ; /* Creates three columns */
  grid-gap: 20px ;
  align-items: start ;
}

.courseFormLabel {
  display: block ;
  color: #666 ;
  font-weight: bold ;
}

.courseFormInput, .courseFormSelect, .courseFormButton {
  width: 100% ;
  padding: 8px ;
  margin-top: 5px ;
  border: 1px solid #ddd ;
  border-radius: 4px ;
  box-sizing: border-box ; /* Makes sure the padding doesn't affect the final width */
}

.courseFormReadOnly {
  background: #eee ;
  color: #666 ;
}

.courseFormButton {
  padding: 10px 20px ;
  background-color: #a71515 ;
  color: white ;
  border: none ;
  border-radius: 4px ;
  cursor: pointer ;
}

.courseFormButton:hover {
  background-color: #e14a4a ;
}

.courseFormErrorMessage {
  color: red ;
  font-size: 12px ;
  grid-column: 1 / -1 ; /* Spans the entire width */
}

.courseFormErrorInput, .courseFormErrorSelect {
  border-color: red ;
}

/* Adjusting list styles for better grid integration */
.courseFormSuggestions {
  list-style: none ;
  padding: 0 ;
  width: 100% ;
  position: absolute ;
  z-index: 1000 ;
}

.courseFormSuggestionsItem, .courseFormTempListItem {
  padding: 8px ;
  background-color: #fff ;
  border: 1px solid #ddd ;
  cursor: pointer ;
}

.courseFormSuggestionsItem:hover, .courseFormTempListItem:hover {
  background-color: #f0f0f0 ;
}

.courseFormRemoveFacultyBtn {
  background: none ;
  border: none ;
  color: red ;
  cursor: pointer ;
}
