/* calendar */

.caltariff{
	max-width: 1200px;
	margin:auto;
}
.months {
	width: 35%;
} 
.monthsselects {
	display: flex;
	margin: 20px auto;
	gap: 20px; 
	flex-wrap: wrap; 
	justify-content: center; 
}
.calendar {
	text-align: center;
	max-width: 400px; 
	margin: 0 auto 2rem auto; 

} 

.caladmin {
	text-align: center;
	width: 450px; 
	margin: auto; 
} 
.formheading a{
	color: #fff;
}
.calheading td{
	padding: 25px;
	background-color: #43724D;
	background-color: var(--colour);
	color: var(--text);
	text-align: center;
	font-weight: bold;
	font-size: 1.25rem;
}
.tabletopmain td {
	text-align: center;
	background-color: var(--othercolour) !important;
	color: var(--white);
	padding: 10px 1px;

} 
.tabletop  {
	text-align: center;
	background-color: var(--text) !important; 
	color: var(--white) !important;
	padding: 1rem 1px;
	font-size: 1.25rem !important; 
} 
.slideright table .maintext .calname,
.calname {
	width: 150px;
	padding: 15px !important;
	text-align: left !important;
  	font-size: 1.2rem;
	color: var(--black); 
}
.maintext .calname a, 
.calname a{
	color: var(--black); 
}
.calname a:hover{
  color: var(--text) !important; 
}
.caldiv table .calone td,
.slideright table .calone td,
.caladmin table .calone td,
.slideright table .calone,
.caldiv table tr  td{
	padding: 15px 2px;
	background-color: var(--lightgrey);
	text-align: center;

  color: var(--black); 
}
.caldiv table .caltwo td,
.slideright table .caltwo td,
.slideright table .caltwo,
.caladmin table .caltwo td,
.caldiv table tr:nth-last-of-type(2n) td{
	padding: 15px 2px;
	background-color: var(--lesslight);
	text-align: center;
  color: var(--black); 
}
.slideright table .caltwo #booked, 
.caladmin table .caltwo #booked, 
.caldiv table .caltwo #booked,
.caldiv table tr:nth-last-of-type(2n) #booked   {
	background-color: var(--othercolour);
	color: #fff;
	text-align: center;
} 
.slideright table .calone #booked,
.caladmin table .calone #booked, 
.caldiv table .calone #booked,
.caldiv table tr #booked {
	background-color: var(--othercolour2);
	color: #fff;
	text-align: center;
}
.slideright table td.outofseason , 
.caldiv table td.outofseason , 
.caldiv table tr td.outofseason {
  background-color: var(--midgrey);
  color: var(--text); 
}

.dummy{
    color: var(--text);
    font-size: 1.25rem;
}
.dummy td#booked, 
.dummy td#avail, 
.dummy td.outofseason{
	width: 25px;
	height: 25px;
	border: 1px solid var(--dark);
  display: inline-block;
}
.dummy td#booked{
  background-color: var(--othercolour);
}
#avail {
	background-color: var(--lesslight);
} 
.dummy td.outofseason{
  background-color: var(--midgrey);
}
.cal9 {
	border: 1px solid #C0C0C0;
	width: 25px; 
	height: 25px; 
}
/* .full{
	display: flex; 
	flex-flow: wrap; 
} */
.caldiv {
	display: grid;
	min-height: 270px;
	margin: 10px; 
}
@supports(gap: 20px){
.full{
	gap: 20px; 
}
.caldiv {
	margin	: 0; 
}
}
.full form,
.full table{
	flex-basis: 90%;
}
.tabletext{
  table-layout: fixed ;
  empty-cells: hide;
	border-collapse: collapse;
}
.tabletext td{
	text-align: center; 
	border: 1px solid var(--white); 
	min-height: 50px;
}
.caldiv2 {
	width: 100%;
	min-height: 270px;
	margin: 20px 30px 10px 0;
	overflow: auto; 
}
.caldiv3 {
	width: 100%;
	min-height: 270px;
	margin: 20px 30px 10px 0;
	overflow: auto; 
}
.slideright {
	overflow-x: auto;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 50px auto; 
}
.slideright a {
	color: #000;
	text-decoration: none; 
}
.caldiv td, .caldiv2 td{
	vertical-align: top; 
}
.caldiv tr:nth-child(odd) {
	background-color: rgba(0,0,0,0.1);
}
.caldiv tr:nth-child(even) {
	background-color: rgba(50,50,50,0.1);
}
.caldiv2 tr:nth-child(odd) {
	background-color: rgba(0,0,0,0.1);
}
.caldiv2 tr:nth-child(even) {
	background-color: rgba(50,50,50,0.1);
}
.caladmin .tabletopmain td{
	background-color: #5c934b; 
}

 td.high::after{
  content: "";
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; 
  z-index: 0; 
  height: 3px;
  background-color: hotpink; 
}
.tariff td,
.tariff th{
	padding: 1rem 0.25rem;
}
.tariff th{
	text-align: left;
}


@media only screen and ( min-width: 900px ) {
	#calendar input, 
	#calendar select,
	#Availability input,
	#Availability select{
	padding: 0.5rem;
	background-color: var(--colour);
	color: var(--black);
	font-size: 1.25rem;
	border: 0;
	border-radius: 4px;
	}
	.caldiv{
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1rem auto; 
	}
}




@media only screen and (max-width: 900px) {
	.tabletext:last-of-type, #last {
	display: none;
}
}


/* end calendar */