/*
 * Note as of Aug 2024 I have made the closed dates
 * and the fully booked dates all light grey (no red)
 */

/* These enable the coloured calendar days */

.ui-datepicker {
	display: inline-block;
	float: none;

}

/* fix glitching gradient fill */
.ui-datepicker td {
	padding: 0px !important;
}
/* could set border 0px in the td above
 * but I preferred it this way */
td span.ui-state-default {
	border: 0px !important;
}

.space_above {
    padding-top: 80px;
}

.table_centre {
    /* These to centre the table */
    margin: 0px auto;
    width: 50% !important;
}
.calendar_key {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:10;
    text-align: left;
}

.calendar_key span {
    padding: 2px;
}

.calendar_caption {
    font-size:18;
}
.date_full a {
    background-color: lightgray !important;

}
td.available span {
	background-color: #f6f6f6 !important;
}
td.clear span {
	background-color: #f6f6f6 !important;
}
td.closed span {
	background-color: lightgrey !important;
}
td.restrict_floor span {
	background-color: lightgreen !important;
}
td.date_full span {
	background-color: lightgray !important;
}
td.date_full span.ui-state-default {
	/*color: white;*/
}

.avail_piazza  span {
	background-color: lightpink !important;
	border    : 1px #88a276 solid;
}
.avail_poets span {
	background-color: yellow !important;
	border    : 1px #88a276 solid;
}

.chg_piazza_poets span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, yellow 50%, lightpink 50%) !important;
}
.chg_poets_piazza span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightpink 50%, yellow 50%) !important;
}
.chg_poets_full span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightgray 50%, yellow 50%) !important;
}
.chg_piazza_full span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightgray 50%, lightpink 50%) !important;
}
.chg_full_piazza span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightpink 50%, lightgray 50%) !important;
}
.chg_full_poets span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, yellow 50%, lightgray 50%) !important;
}
.chg_clear_piazza span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightpink 50%, transparent 50%) !important;
}
.chg_clear_poets span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, yellow 50%, transparent 50%) !important;
}
/*
.chg_clear_full span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightgray 50%, transparent 50%) !important;
}
*/

.chg_piazza_clear span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, transparent 50%, lightpink 50%) !important;
}
.chg_poets_clear span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, transparent 50%, yellow 50%) !important;
}


/*
.chg_full_clear span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, transparent 50%, lightgray 50%) !important;
}
*/

.become_full span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightgray 50%, transparent 50%) !important;
}

.become_open span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, #f6f6f6 50%, transparent 50%) !important;
}

.become_closed span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, lightgray 50%, transparent 50%) !important;
}




.changeover span {
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    background: linear-gradient(to left top, yellow 50%, transparent 50%) !important;

}

/* These enable the coloured background graphic for arrival/departure */
td.arrive_date {
	background-color: green;
	color: white;
	border: none;
	padding: 1px 0 1px 1px;
	overflow:hidden;
}
td.arrive_date a {
	background-color: green;
	border    : 1px #88a276 solid;
}
td.arrive_date a.ui-state-default {
	color: white;
}
td.arrive_date span.ui-state-default {
	color: white;
}
td.depart_date {
	background-color: green;
	color: white;
	border: none;
	padding: 1px 0 1px 1px;
	overflow:hidden;
}
td.depart_date a {
	background-color: green;
	border    : 1px #88a276 solid;
}
td.depart_date a.ui-state-default {
	color: white;
}

td.depart_date span.ui-state-default {
	color: white;
}