/*Booking*/

#availabilityCalendarBlock{margin-bottom:2rem;}

.booking-grid {
	border-spacing: 0;
	/*border: 1px solid #333;*/
	width: 100%;
	table-layout: fixed;
}

.booking-grid td, .booking-grid th {
	font-size: 9pt;
	text-align: center;
	background-color: white;
	color: black;
	padding: 0;
	position:relative;
  border-bottom:1px solid #d0cfcf;
  border-right:1px solid #d0cfcf;
}

.booking-grid td:first-child{
    border-left:1px solid #d0cfcf;
}

.booking-grid th {
	color: #000;
	/*font-style: italic;*/
	overflow: hidden;
}

.booking-grid th{
    padding:0.5rem 0;
    border: 1px solid #d0cfcf;
    background: #dfdfdf;
}

.month-grid td {
	width: 13%;
	vertical-align: top;
}

.booking-grid.end-picker-grid td {
	background-color: #eef1f6;
	color: #888;
	padding:5px;
}
.booking-grid.month-grid td {
	background: #eef1f6;
	color: #777;
	padding:5px;
}

.booking-grid td.available,
.booking-grid.month-grid td.available,
.booking-grid.end-picker-grid td.available {
	/*background-color: #EEE;*/
	color: black;
	background-color: white;
}

.booking-grid td.available a:hover {
	background-color: #33bb33;
}

.booking-grid td.booking-duration-restriction,
.booking-grid td.available.booking-duration-restriction,
.booking-grid.month-grid td.booking-duration-restriction {
	background-color:  #F8F8F8;
	color: #888;
  font-style:italic;
	cursor:not-allowed;
}

.booking-grid td.unavailable {
  background: #eef1f6;
  color: #777;
  font-style:italic;
  cursor:not-allowed;
}

.booking-grid td.summary {
	background-color: #EEE;
}

.booking-grid td.booking-start {
	background-color: #33bb33;
	color: #000;
}

.booking-grid td.empty {
	background-color: #EEE;
}

.booking-grid td.empty.off-duty {
	background-color: #CCC;
}

.booking-grid td.editable-booking  {
	background-color: #AAA;
	background-color: #b6e5b6;
}

.booking-grid td.unavailable,
.booking-grid.month-grid td{
  background: #eef1f6;
	font-style:italic;
	cursor:not-allowed;
	color: #888;
  padding:5px;
}



.booking-grid a {
	display: block;
	color: black;
	text-decoration: none;
	font-size: 9pt;
}

/*new*/
.booking-grid td a, .booking-grid th a{
    display: block;
    padding: 5px;
    box-sizing: border-box;
}


/*
.booking-grid th a {
	color: #333;
	font-weight: 700;
}*/

.booking-grid span.month-grid-date {
	display: block;
	padding: 5px;
}

.booking-grid a.month-grid-link {
	text-align: left;
	padding-left: 10px;
}

.booking-grid div.month-grid-text {
	text-align: left;
	padding-left: 10px;
}

.booking-grid a.summary-cell-link {
	font-weight: 700;
}

.booking-grid a.edit-booking-link {
	color: #333;
	font-weight: bold;
}

/*----------------------------
	Stepped picker (CalendarPicker): resource, date, time as rounded links
-----------------------------*/

.booking-picker .picker-heading{margin:1.25rem 0 .6rem;font-size:1.15rem;font-weight:700;}
.booking-picker .picker-heading:first-child{margin-top:0;}
.booking-picker .picker-options{display:flex;flex-wrap:wrap;gap:.6rem;}
.booking-picker .picker-dates{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.4rem;}
.booking-picker .picker-option{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
	padding:.6rem 1.1rem;border:1px solid #d8d8d8;border-radius:1.2rem;background:#fff;color:#111;
	text-decoration:none;line-height:1.2;transition:border-color .15s,background-color .15s;}
.booking-picker a.picker-option:hover,.booking-picker a.picker-option:focus{border-color:#6c4fe6;text-decoration:none;color:#111;}
.booking-picker .picker-option.selected,.booking-picker a.picker-option.selected:hover{background:#6c4fe6;border-color:#6c4fe6;color:#fff;}
.booking-picker .picker-option.disabled{color:#aaa;background:#fafafa;cursor:default;}
.booking-picker .picker-date-row{display:flex;align-items:stretch;gap:.6rem;}
.booking-picker .picker-date-row .picker-dates{flex:1 1 auto;min-width:0;}
.booking-picker .picker-nav{flex:0 0 auto;align-self:center;width:2.4rem;height:2.4rem;padding:0;border-radius:50%;font-size:1.6rem;line-height:1;}
.booking-picker .picker-date{flex:0 0 auto;flex-direction:column;min-width:4.4rem;padding:.7rem .5rem;border-radius:1rem;scroll-snap-align:start;}
.booking-picker .picker-date .picker-dom{font-size:1.6rem;font-weight:700;}
.booking-picker .picker-time{min-width:6rem;width:100%;justify-content:flex-start;border-radius:1rem;padding:.9rem 1.1rem;}
@media(min-width:561px){
	.booking-picker .picker-time{width:auto;justify-content:center;}
}

.booking-box {
	background-color: #AAA;
}

.booking-box.booking-box-draggable {
	background-color: #777;
}


@media(max-width:560px){

/*----------------------------
	Booking Controls Tidy
-----------------------------*/

.calendarBlockControls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
.calendarBlockControls input,.calendarBlockControls select{flex-grow:1;margin-left:0.25rem;}
.calendarBlockControls input#filterFromDate{margin-right:1rem;}
.calendarBlockButtons{order:2;width:100%;text-align:center;margin-top:1rem;}

}

@media(max-width:480px){
	.row table td {
    padding: 12px 2px;
	}
.calendarBlockControls{flex-direction:column;flex-wrap:no-wrap;align-items:flex-start;}
.calendarBlockControls input,.calendarBlockControls select{margin:0;justify-content:flex-start;width:100%;}
}