/* Styles for the booking detail modal (new and edit booking). Every rule hangs from the '.booking-detail' root class
   to scope it and to outweigh generic classes on the same element (e.g. .panel-md). */

.booking-detail {
  padding: var(--md-spacing-sm);
  font-size: var(--md-font-size-4);
}

.booking-detail .booking-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.booking-detail .booking-detail__title {
  margin-top: auto;
  margin-bottom: var(--md-spacing-sm);
}

/* Fixed user: the booking is opened from a room consultation */
.booking-detail .booking-detail__user {
  padding: var(--md-spacing-xs) var(--md-spacing-sm);
  background: var(--md-background-secondary);
}

.booking-detail .booking-detail__user-content {
  display: flex;
  align-items: stretch;
  gap: var(--md-spacing-xs);
}

/* 2rem on the 10px root of Bootstrap 3 */
.booking-detail .booking-detail__user-icon {
  font-size: var(--md-font-size-6);
  color: var(--md-content-brand-secondary);
}

.booking-detail .booking-detail__user-data {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3xs);
}

.booking-detail .booking-detail__user-name {
  font-weight: var(--md-font-weight-semibold);
}

/* Booking time: hour range or all day */
.booking-detail .booking-detail__time {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}

.booking-detail .booking-detail__time-label--error,
.booking-detail .booking-detail__required {
  color: var(--md-content-negative);
}

.booking-detail .booking-detail__hours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-spacing-xs);
  padding: var(--md-spacing-xs);
}

.booking-detail .booking-detail__all-day {
  display: flex;
  align-items: stretch;
  gap: var(--md-spacing-xs);
  padding: var(--md-spacing-xs);
}

.booking-detail .booking-detail__all-day-text {
  display: flex;
  flex-direction: column;
}

.booking-detail .booking-detail__buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-spacing-xs);
}

/* Button of the user panel */
.booking-detail .booking-detail__select-button {
  font-size: var(--md-font-size-4);
}