@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   BOOKING
   ========================================================================== */
@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}
/*DESIGN*/
.booking-slot {
	height: 120px;
	margin-bottom: 10px;
	padding: 10px;
	line-height: 25px;
}
.admin-booking-slot {
	height: 380px;
	margin-bottom: 10px;
	padding: 10px;
	line-height: 25px;
	background-color: #ffecea;
	display: flex;
  justify-content: center;
  align-items: center;
	border: 2px solid #cc3333;
	font-weight: bold;
	
}
.admin-booking-slot span:first-child {
	margin-right: 10px;
}
.break-line {
  flex-basis: 100%;
  height: 0;
}
.admin-booking-slot-available {
	height: 380px;
	margin-bottom: 10px;
	padding: 10px;
	line-height: 25px;
	background-color: #ccffcc;
	display: flex;
  justify-content: center;
  align-items: center;
	border: 2px solid #64ae64;
}
.slot-1, .slot-3, .slot-5, .slot-7, .slot-9 {
	background-color: #f6f6f6;
}
/*.booked, .available {
	padding: 10px 10px;
}*/
.booked {
	color: #cc0000;
}

.booked:after {
   content: " - Booked";
}
.available:after {
   content: " - Available";
}
.time-column {
	padding-top: 30px;
}
.time-slot {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px;
	font-weight: 700;
	text-align: center;
}
.time-slot p {
    margin-bottom: 0px;
}
.time-slot:nth-child(odd) {background-color: #f6f6f6;}
.date {
	height: 30px;
	font-size: 18px;
	font-weight: 700;
}
.ba1 {
	border: 1px solid #CCC;
}
/*
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	.time-slot {
    height: 165px;
}
	.booking-slot {
    height: 165px;
}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { 
		.time-slot {
    height: 165px;
}
	.booking-slot {
    height: 165px;
}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { 
		.time-slot {
    height: 165px;
}
	.booking-slot {
    height: 165px;
}
}*/
@media screen and (min-width: 768px) and (max-width:855px) {
		.time-slot {
    height: 165px;
}
	.booking-slot {
    height: 165px;
}
}