/* --- Allgemeiner Stil --- */
body, .sb-page, #main {
  background-color: white;
  color: rgb(50, 60, 96);
  font-family: 'Open Sans', sans-serif;
}

/* --- Überschriften und Texte --- */
#events h3,
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
  color: rgb(50, 60, 96);
  font-weight: bold;
}

/* --- Dauer-Text, Beschreibungen --- */
#events p.duration,
#events div.duration,
#events p.description,
#events div.description {
  color: rgb(50, 60, 96);
  font-size: 14px;
}

/* --- Selektiertes Event Highlight --- */
#events .selectedEvent {
  background-color: rgb(211, 220, 235);
  border: 2px solid rgb(50, 60, 96);
  border-radius: 8px;
  padding: 10px;
}

/* --- Buttons allgemein --- */
#events input.reserve_time_btn,
#events input.select_another_btn,
#eventForm #save_button {
  background-color: rgb(50, 60, 96);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

#events input.reserve_time_btn:hover,
#events input.select_another_btn:hover,
#eventForm #save_button:hover {
  background-color: rgb(40, 50, 80);
}

/* --- Zeitwahl-Farben --- */
.timeline td.not_worked_time {
  background-color: #f5f5f5;
}

.timeline td.free_time {
  background-color: rgb(211, 220, 235);
  cursor: pointer;
}

.timeline td.selected_time {
  background-color: rgb(50, 60, 96);
  c

}