/* 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;
	width: fit-content;
	margin: 0 auto 2rem auto; 

} 
.tabletext td::first-line{
	font-size: 1.1rem; 
	color: var(--black); 
}
.tabletext td{
	font-size: 0.9rem; 
	color: var(--white); 
}
.tabletext td#booked::first-line{
	color: var(--white); 
}
.caladmin {
	text-align: center;
	width: 450px; 
	margin: auto; 
} 
.caladmin.calgrid{
	width: auto; 
}
.formheading{
	color: var(--white);
	background-color: var(--alternate);
}
.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;
}
table:not(.tariff) .tabletopmain td
{
	text-align: center;
	background-color: var(--alternate);
	color: var(--white) !important;
	padding: 10px 1px;

} 
.tariff .tabletopmain td {

	background-color: var(--background2) !important;
	color: var(--white) !important;


} 
.caldiv .tabletext .tabletop, 
.caldiv .tabletext .tabletop::first-line  {
	text-align: center;
	background-color: var(--writing) !important; 
	color: var(--white) !important;
	padding: 1rem 1px;
	font-size: 1.25rem !important; 
} 
.slideright table{
	width: 100%; 
	border-collapse: unset;
	border-spacing: 1px;
}
.slideright table .maintext .calname,
.calname {
	width: 150px;
	padding: 5px !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, 
.caldiv table.tabletext tr td{
	padding: 5px 1px;
	background-color: var(--background3);
	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: 5px 1px;
	background-color: var(--background2);
	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(--grey); 
}
.slideright table .calone .halfbefore#booked,
 .tabletext  .halfbefore#booked{
    background: linear-gradient(to bottom right, var(--background3) 0%, var(--background3) 15%, var(--othercolour2) 15%, var(--othercolour2) 100%)
}
.slideright table .caltwo .halfbefore#booked,
.caldiv table tr:nth-last-of-type(2n) .halfbefore#booked {
    background: linear-gradient(to bottom right, var(--background2) 0%, var(--background2) 15%, var(--othercolour) 15%, var(--othercolour) 100%)
}

.slideright table .calone .halfafter,
.tabletext  .halfafter{
    background: linear-gradient(to bottom right, var(--othercolour2) 0%, var(--othercolour2) 15%, var(--background3) 15%, var(--background3) 100%)
}
.slideright table .caltwo .halfafter{
    background: linear-gradient(to bottom right, var(--othercolour) 0%, var(--othercolour) 15%, var(--background2) 15%, var(--background2) 100%)
}
.othermonths{
	opacity: 0.3;
}
.slideright table tr:not(.calheading) td{
	/* border-right: 1px solid var(--pale); 
	border-top: 1px solid var(--pale);  */
	font-size: 0.8rem;
}

.dummy{
    font-size: 1.25rem;
	/* background-color: var(--grey); */
}
.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(--background2);
} 
.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: 1rem auto; 
}
@supports(gap: 20px){
.full{
	gap: 20px; 
	view-transition-name: calendar;
}

}
.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 {
    cursor: grab;
    overflow: 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{
	width: 100%; 
	border-collapse: collapse;
}
.tariff td,
.tariff th{
	padding: 1rem 0.25rem;
}
.tariff th{
	text-align: left;
	font-weight: 400;
	background-color: var(--background3);
	color: var(--black); 
}
/* .tariff tr:nth-of-type(2n) td{
	background-color: var(--pale);
} */

.tariffheading td{
	background-color: var(--background3) !important;
	color: var(--white); 
}

.bookings > form{
  display: grid;
  gap: 1rem; 
  color: var(--white); 
}
.bookings > form > div{
  text-align: center;
  padding: 1rem;
}
.bookings{
  align-self: end;
}
.bookings{
  text-align: center;
  color: var(--white);
  position: relative;
  /* z-index: 10; */
}
.bookings form{
  display: grid;
  justify-content: center;
  gap: 0.25rem; 
  grid-template-columns: 1fr;
}
.bookings form > *{
  background-color: var(--background2);
}
/* .bookings form > div{
  padding: 0.5rem; 
  background-color: var(--background3);
} */
.bookings input, .bookings select, .bookings input[type="submit"] {
  background-color: var(--alternate);
  color: var(--white);
  text-decoration: none;
  /* padding: 1rem 1.4rem;  */
  transition: 0.4s;
  font-size: 1rem;
max-width: 200px; 
text-align: center;
letter-spacing: 1px ; 
border: 0;
  appearance: none;
  margin-top: 5px;
  transition : 0.2s;
text-transform: uppercase; 
  width: 100%; 
  cursor: pointer; 
}
.bookings select option{
  text-align: center;
}
.bookings input[type=date]{
  max-width: 140px !important;
  width: 100%; 
text-align: center !important;
  /* padding: 1rem 1.4rem;  */
border: 0;
}
.bookings input:focus, 
.bookings select:focus, 
.bookings input[type="submit"]:focus,
.bookings input:hover, 
.bookings select:hover, 
.bookings input[type="submit"]:hover {
  box-shadow: 0 0 0 var(--alternate);
}
.bookings div {
  vertical-align: baseline;
  display: contents;
}
.bookings label{
  display: block;
  padding: 0.5rem; 
  background-color: var(--alternate);
  transition : 0.2s;
}
.bookings label:hover, 
.bookings label:hover input,
.bookings label:hover select{
  background-color: var(--alternate2);
}




@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;
	}
  .bookings form{
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    }
}




@media only screen and (max-width: 900px) {
	.tabletext:last-of-type, #last {
	display: none;
}
.tabletext td::first-line{
	font-size: 1.1rem; 
}
.tabletext td{
	font-size: 0.75rem; 
}
.caldiv table tr td{
	padding: 5px 2px;
}
}





@supports(display:grid) {


.tabletext tbody{
	display: grid;
	grid-template-rows: repeat(8, 1fr);
}
.tabletext tbody tr{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.tabletext td.tabletop{
	grid-column: span 7;
}
.tabletext td{
	display: block;
}








}











/* end calendar */







@media(min-width: 1200px){
  /* .navdiv, 
  .bookings{
    margin: 1rem
} */

 .bookings{
  opacity: 0.9;
 }


    .bookings input, .bookings select, .bookings input[type="submit"] {
      width: 200px; 
      }
      .bookings input[type=date]{
      width: 160px; 
      }
      .bookings > form{
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 1rem;
	  margin: 1rem;
      }
      .bookings label{
        padding: 2rem; 
      } 

	}



/* 
@media screen and (orientation:landscape)
and (min-width: 1024px) {
		  .bookings{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .bookings > form{
    grid-template-columns: 1fr;
  }
}  */





@media only screen and ( max-width: 480px ) {
	.dummy, 
	.dummy tr, 
	.dummy td{
		display: block;
	}

} 




/* calgrid for admin */


.admin .caladmin.caladmin.calgrid{
	display: grid;
	gap: 1px;

}
.caladmin.calgrid > div{
	padding: 1px; 
	z-index: 0;
	min-height: 100px;

}
.admin .caladmin.caladmin .calheading{
	grid-column: 1/-1;
	font-weight: 700;
	min-height: 30px; 
}
.admin .caladmin.caladmin > div{
	background-color: var(--background3);
}
.admin .caladmin.caladmin > div#booked{
	background-color: var(--othercolour);
}
.admin .caladmin.caladmin .abooking{
	background-color: var(--othercolour2);
	z-index: 10;
	color: var(--white); 
}
.admin .caladmin.caladmin .abooking a{
	color: var(--white); 
}
.admin .caladmin.caladmin.calgrid .daynumber, 
.admin .caladmin.caladmin.calgrid .weekday{
	min-height: 30px; 
}
.admin .caladmin.caladmin .firstcol{
	grid-column: 1/2;
}






.bookings	input,
.bookings textarea,
.bookings select {
        border: 0;
        max-width: 100%;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
        font-size: 1rem;
        padding: 7px;
    }