/***********************************************/
/* Jezzam Booking Calendar Shared CSS          */
/***********************************************/

/*****************/
/* Full Calendar */
/*****************/

/* Lightning CSS minifier doesn't understand JSF Expression Language embedded inside CSS so this file does not get minified. See: background-color: #3038A9 */

/* .fc-slats .ui-widget-content:not(.fc-axis) {
	background-color: white;
} */
.fc-event {
	cursor: pointer;
}


.fc-event-container .fc-event.jz-cal-course {
  background-color: #3038A9;
}

.fc-event-container .fc-event.jz-cal-event {
  background-color: #3F7AEC;
}

.fc-agendaWeek-view th {
  font-size: 0.7em;
}

/* NOTE: jz-input-mode is very important.  It helps identify the mode when on the Admin Panel calendar (and is there by default on the booking site calendar).
   It also functions as a workaround for the issue where the minifier we use removes any spaces after a }.  Therefore when using EL notation in CSS
   e.g  .jz-class,  the space between the } and the "} .jz-" gets removed breaking the class.  Putting }.jz-el is a hackish
   workaround to stop this happening while still allowing us to use EL in CSS */

.jz-appt-selection-cal.jz-input-mode .fc-month-view tbody .fc-row {
	min-height:0;
}

.jz-appt-selection-cal.jz-input-mode .fc-month-view .fc-row .fc-content-skeleton {
	padding-bottom: 0;
}

.fc-bg .fc-day.ui-widget-content.fc-today.ui-state-highlight {
	background: rgb(255, 255, 226);
}

.jz-input-mode .fc-month-view .fc-bg .fc-day.ui-widget-content.fc-today.ui-state-highlight {
	background: transparent; /* Stops the background flickering on service booking cal as the events come in via ajax */
}

/* Styling for agendaWeek view on booking site calendar only */

.jz-appt-selection-cal.jz-input-mode.jz-bs .fc-agendaWeek-view .fc-event, .jz-event-cal .fc-event-container .fc-event {
	border-color: rgb(97,172,55);
	border-color: rgba(97,172,55, 1); 
}

.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-event {
	text-align: center;
	margin-top: 1%;
	margin-bottom: 1%
}

.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-event .fc-content {
	padding-top: 1.5%;
	height: 100%;
}

.jz-appt-selection-cal.jz-input-mode.jz-bs .fc-agendaWeek-view .fc-event.fc-short .fc-content {
	padding-top: 0;
}


.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-axis,
.jz-appt-selection-cal.jz-input-mode .fc-time,
.jz-appt-selection-cal.jz-input-mode.jz-admin-maincal .fc-content .fc-time,
.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-title span  {
	display: none;
}

.jz-appt-selection-cal.jz-input-mode .fc-now-indicator {
  display: none;
}

.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .jz-cal-booked-display {
	cursor:not-allowed;
	border: none;
    background-color: #a7b3b9; 
    /* background-color: #d2d2d2; */
}


.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .jz-cal-booked-display .fc-title .jz-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8em;
}    

.jz-appt-selection-cal.jz-input-mode .fc-slats td {
	border-top-color: transparent;
}


/* END: Styling for agendaWeek view on booking site calendar only */


.jz-appt-selection-cal.jz-input-mode .fc-month-view .fc-content-skeleton tbody {
  display: none;
}

.jz-appt-selection-cal.jz-input-mode .fc-day-grid .fc-day-number {
  font-size: 1.3em;
  float: none;
  margin-top:0.3em;
}

.ui-widget .jz-selection-button {
  margin-top: 0.2em;
}

.jz-appt-selection-cal.jz-input-mode .fc-day-grid .fc-day-number {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}


.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-title {
  	font-size: 1.1em;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);    
    transform: translateY(-50%);   
    width: 100%;
    display: block;
}

.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-short .fc-title {
	line-height: 1em;
}

.jz-appt-selection-cal.jz-input-mode.jz-bs .fc-agendaWeek-view .fc-short .fc-title span {
	display: none;
}

/* .jz-appt-selection-cal.jz-input-mode {
	margin: auto;
   	min-height: 23em;
}
 */

.jz-cal-genavail.jz-el div.fc-day-number,
.jz-cal-minavail.jz-el div.fc-day-number,
.jz-cal-dayavail.jz-el div.fc-day-number {
  opacity: 1 !important;
  text-decoration: underline;
  font-size: 1.45em !important;
}


.jz-input-mode td.fc-day-number {
  text-align: center !important;
}

/* .fc-day-grid .fc-day-number { 
  opacity: 0.55;
} */

.fc-day-grid .fc-day-number.fc-other-month {
  opacity: 0.4;
}

.jz-cal-multidayavail,
.jz-cal-wkavail  {
  background: rgb(189, 245, 189);  
  background: rgba(189, 245, 189, 0.6);
}

.fc-day-number {
	color: #9C9C9C;
}


/* IMPORTANT: These needs to come AFTER any multiday/week styles */
.jz-cal-genavail, .jz-input-mode .fc-month-view .fc-today.ui-state-highlight.jz-cal-genavail,
.jz-cal-minavail, .jz-input-mode .fc-month-view .fc-today.ui-state-highlight.jz-cal-minavail,
.jz-cal-dayavail, .jz-input-mode .fc-month-view .fc-today.ui-state-highlight.jz-cal-dayavail
{
  background: rgb(97,172,55);
  background: rgba(97,172,55, 1); 
  cursor: pointer;
  color: #1A1A1A; 
}

.jz-event-cal .fc-event-container .fc-event {
  background: rgb(97,172,55);
  border: none;
  color:  #fff;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 2px;
}

.jz-event-cal .fc-event-container .fc-event.jz-evt-fully-booked {
  background-color: #bababa !important; 
}

/* .fc-day.ui-widget-content.fc-today.ui-state-highlight {
  background: rgb(65,164,221);
  background: rgba(65,164,221, 0.1); 
} */

.jz-cal-genavail.fc-other-month,
.jz-cal-minavail.fc-other-month,
.jz-cal-dayavail.fc-other-month
{
  background: rgb(97,172,55);
  background: rgba(97,172,55, 0.76); 
}

.jz-cal-genavail:HOVER, .jz-cal-genavail:HOVER,
.jz-cal-minavail:HOVER, .jz-cal-minavail:HOVER,
.jz-cal-dayavail:HOVER, .jz-cal-dayavail:HOVER,
.jz-event-cal .fc-event-container .fc-event:HOVER
{
  background-color: #A5D987;
}

/* when custom colours are in play for events, use opacity for hover feedback */
.jz-event-cal .fc-event-container .fc-event.jz-cust-col:HOVER {
  opacity: 0.8;
}

.jz-event-cal .fc-event-container .fc-event .jz-evt-cal-cap {
  font-size: 0.8em;
  position: absolute;
  top: 1px;
  right: 2px;
  display: none;  
}



td.jz-day-selected, a.jz-cal-genavail.jz-day-selected, a.jz-time-selected {
  /* background-color: #EEEE91; */
  background-color: #5eea5e !important;
}

.fc-agendaWeek-view .jz-day-selected {
  /*  border: 1px solid yellow !important;  */
   color: yellow !important;  
}

.jz-cal-booked {
	display: none;
  	background-color: lightgrey;
  	opacity: 0.4;
}

.jz-cal-booked div {
  cursor:not-allowed; 
}

/* .fc-month-view .fc-event, .fc-agendaWeek-view .fc-event {
    font-size: 0.8em;
    cursor: pointer;
}
 */
.fc-axis {
    font-size: .6em !important;
    width: 3.5em !important;
}    

.fc-toolbar .fc-left, .fc-toolbar .fc-button-group, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
  width: 100%;
  float: none;
}

.fc-toolbar .fc-right, .fc-toolbar .fc-center {
	margin-top: 1em;
	box-sizing: border-box;
}

.fc-toolbar .fc-center h2 {
	float: none;
}


.fc-toolbar button {
  	box-sizing: border-box;
  	height: 2.6em;
  	line-height: 2.6em;
}

.fc-button-group button {
	width: 50%; 
}

.fc .fc-toolbar .fc-prev-button {
	width: 20%;
	margin-right: 2%;
}

.fc .fc-toolbar .fc-today-button {
	width: 50%;
}

.fc .fc-toolbar .fc-next-button {
	width: 20%;
	float: right;
}

.fc .fc-toolbar .fc-next-button span.ui-icon.ui-icon-circle-triangle-e {
  float: right;
}

/* fix for missing bottom line on mozilla & IE */
.fc-view-container table {
	box-sizing: border-box;
}

/* this workaround allows for the 'a' or 'p' of en_US time format to fit in the time axis */  
.fc .fc-axis {
  padding: 0 9px 0 5px;
}
 
/*********************/
/* End Full Calendar */
/*********************/

.jz-nothing-available-container {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin-top: 18em;
  z-index: 99;
}

.jz-nothing-available-container #nothing-available span.ui-button-text {
    padding: 1em 0.5em;
}

#nothing-available {
  font-size: 2em;
  height: 150px;
  display: none;
  text-align: center;
  padding: 0.5em;
}

#nothing-available > div {
  display:inline-block;
  width: 100%;
}

#nothing-available > div > span {
  opacity: 0.5;
}

#nothing-avail-btns {
  margin-top: 1.1em;
  font-size: 0.43em;
  text-align: center;
}

#nothing-avail-btns button {
  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.5);
  width: 45%;
  margin-bottom: 1em;
} 


.jz-timerange {
	font-size: 0.7em;
}

.fc th.fc-day-header {
      padding-top: 0.75em;
      padding-bottom: 0.75em;
}

/* fix to make heading text (day + date) split on two lines */
.fc-agendaWeek-view th.fc-day-header {
  word-spacing: 9999rem;
}


/**************************************************************/
/**************************************************************/
/* Media Queries */
/**************************************************************/
/**************************************************************/

@media only screen and (min-width: 40em) {

    /*****************/
    /* Full Calendar */
    /*****************/

  .fc-agendaWeek-view th.fc-day-header {
      font-size: 0.9em;
  }
  
	.fc-toolbar .fc-left, .fc-toolbar .fc-button-group, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
	  width: auto;
	}

	.fc-toolbar .fc-left{
	  float: left;
	}

	.fc-toolbar .fc-right {
		float: right;
	}
	
	.fc-toolbar .fc-right, .fc-toolbar .fc-center {
		margin-top: 0;
	}
	
	
	.fc-toolbar button {
	  	box-sizing: border-box;
	  	height: 2.1em;
	  	line-height: 2.1em;
	}
	
	.fc-button-group button {
		width: auto; 
	}
	
	.fc .fc-toolbar .fc-prev-button {
		width: auto;
		margin-right: 0;
	}
	
	.fc .fc-toolbar .fc-today-button {
		width: auto;
	}
	
	.fc .fc-toolbar .fc-next-button {
		width: auto;
	}
	
	.jz-hidden {
		display: block;
		visibility: hidden;
	} 

	.jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-title {
		font-size: 1.1em;
	}

  .jz-event-cal .fc-agendaDay-view .fc-event-container .fc-event .jz-evt-cal-cap {
    display: block;
  }
  

	/*********************/
  	/* End Full Calendar */
  	/*********************/

  .jz-nothing-available-container {
    top: -2em;
    width: auto;
  }
  #nothing-available {
    margin-left: 0;
  }
  #nothing-avail-btns {
    font-size: 0.55em;
  }
  #nothing-avail-btns button {
    width: auto;
    padding: 0.4em;
  } 


}


@media only screen and (min-width: 50em) {

  .jz-admin-maincal .fc-agendaWeek-view th.fc-day-header {
    word-spacing: inherit;
  }
 
  .jz-appt-selection-cal.jz-input-mode .fc-agendaWeek-view .fc-title {
    font-size: 1.3em;
  }
  
  .jz-appt-selection-cal.jz-input-mode.jz-noviewbtns {
    margin-top: -2.6em;
  }

}