td.date {
padding: 0 !important;
margin: 0 !important;
min-width: 60px;
position: relative;
}
td.date label {
font-size: 14px;
line-height: 20px;
color: #000;
padding: 20px 0;
width: 100% !important;
display: block;
margin: 0 !important;
}
.available {
background-color: #dff0d8;
}
.occupied {
background-color: #f2dede;
}
.selected {
background-color: #d9edf7;
}
.legend {
padding: 5px 10px;
}
td.date.available label {
cursor: pointer;
}
td.date label:hover {
text-decoration: none;
background-color: #fcf8e3;
}
td.date>input[type="checkbox"]:focus + label {
text-decoration: none;
background-color: #fcf8e3;
}
td.date input[type="checkbox"] {
opacity: 0;
height:0;
position: absolute;
}
td.date input[type="checkbox"]:checked + label {
background-color: #d9edf7;
position: relative;
}
tr>td:not(:last-child).date input[type="checkbox"]:checked + label:after {
content: '';
position: absolute;
transform: translate(-50%, 0%);
left: 100%;
top: 0px;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 60px solid #d9edf7;
clear: both;
z-index: 2;
}
tr>td:not(:last-child).date input[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
transform: translate(0%, 0%);
left: 0px;
top: 0px;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 60px solid #dff0d8;
clear: both;
z-index: 1;
}
.camping_image {
object-fit: cover;
width: 100%;
min-height: 200px;
}
.zone_image {
aspect-ratio: 3 / 2;
}
.location_image {
aspect-ratio: 6 / 2;
}
.w-70 {
width: 70px;
}
.flex-row .panel {
display: flex;
flex-grow: 1;
flex-direction: column;
}
.flex-row .panel-body {
flex-grow: 1;
}