/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}
/* 時間格：縮細 + 一行 4 個 */
.tab-pd .slot {
  width: calc(25% - 8px) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 6px 8px 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

.tab-pd .slot .sb-cell,
.tab-pd .slot a.sb-cell {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  padding: 6px 2px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* AM：00:00–11:30（淺綠底，減少同 PM 搞亂） */
a.sb-cell[href*="/time/00:"],
a.sb-cell[href*="/time/01:"],
a.sb-cell[href*="/time/02:"],
a.sb-cell[href*="/time/03:"],
a.sb-cell[href*="/time/04:"],
a.sb-cell[href*="/time/05:"],
a.sb-cell[href*="/time/06:"],
a.sb-cell[href*="/time/07:"],
a.sb-cell[href*="/time/08:"],
a.sb-cell[href*="/time/09:"],
a.sb-cell[href*="/time/10:"],
a.sb-cell[href*="/time/11:"] {
  background: #F8F8F8 !important;
}

/* PM：12:00–23:30（淺棕底，同你頁面啡色一致） */
a.sb-cell[href*="/time/12:"],
a.sb-cell[href*="/time/13:"],
a.sb-cell[href*="/time/14:"],
a.sb-cell[href*="/time/15:"],
a.sb-cell[href*="/time/16:"],
a.sb-cell[href*="/time/17:"],
a.sb-cell[href*="/time/18:"],
a.sb-cell[href*="/time/19:"],
a.sb-cell[href*="/time/20:"],
a.sb-cell[href*="/time/21:"],
a.sb-cell[href*="/time/22:"],
a.sb-cell[href*="/time/23:"] {
  background: #f3eee8 !important;
}

/* 大屏可以再疏少少，仍然 4 個一排 */
@media (min-width: 768px) {
  .tab-pd .slot {
    width: calc(25% - 10px) !important;
  }
  .tab-pd .slot .sb-cell {
    font-size: 13px !important;
    padding: 8px 4px !important;
  }
}

/* 時間格：一行 4 個 + 字置中 */
.tab-pd .slot {
  width: calc(25% - 8px) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 6px 8px 0 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

.tab-pd .slot .sb-cell,
.tab-pd .slot a.sb-cell {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 4px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.tab-pd .slot .sb-cell *,
.tab-pd .slot a.sb-cell * {
  text-align: center !important;
  margin: 0 auto !important;
}

@media (min-width: 768px) {
  .tab-pd .slot {
    width: calc(25% - 10px) !important;
  }
  .tab-pd .slot .sb-cell,
  .tab-pd .slot a.sb-cell {
    font-size: 13px !important;
    height: 42px !important;
  }
}