/* TABLE */
body#reservation-calendar-all #calendar-wrapper table {
width:100%;
margin:0 auto 20px auto;
}

/* COLUMNS */
body#reservation-calendar-all #calendar-wrapper table #columns th {
border:1px solid #ccc;
font-size:100%;
text-align:center;
padding:4px;
background-color:#eee;
vertical-align:middle;
}
body#reservation-calendar-all #calendar-wrapper table #columns th daysOfMonth{
display:block;
font-weight:bold;
}

body#reservation-calendar-all #calendar-wrapper table #columns th .nameOfWeek{
display:block;
font-size:90%;
font-weight:normal;
}

body#reservation-calendar-all #calendar-wrapper table #columns th.prev-next{
text-align:center;
font-size:80%;
}

body#reservation-calendar-all #calendar-wrapper table td.property-code {
background-color:#eee;
text-align:center;
vertical-align:middle;
}

/* Month header */
body#reservation-calendar-all #calendar-wrapper #calendar-nav {
margin:20px auto 0 auto; 
background: #eee;
text-align: center;
padding:5px 10px;
}

body#reservation-calendar-all #calendar-wrapper #calendar-nav #month-name{
font-size:170% !important;
display:block;
margin:10px auto;
}

body#reservation-calendar-all #calendar-wrapper #calendar-nav  ul {
margin:0 auto;
padding:0;
}

body#reservation-calendar-all #calendar-wrapper #calendar-nav ul.list-inline li,
body#reservation-calendar-all #calendar-wrapper #calendar-nav ul li{
vertical-align:middle;
padding:0;
margin-bottom:0;
}

/* Month list */

body#reservation-calendar-all #calendar-wrapper #calendar-nav {
  text-transform: uppercase;
}

body#reservation-calendar-all #calendar-wrapper #calendar-nav #prev ,
body#reservation-calendar-all #calendar-wrapper #calendar-nav #next {
padding:0 20px;
font-size: 150%;
}

body#reservation-calendar-all #calendar-wrapper #calendar-nav #list-of-months{
display:block;
margin:0px auto;
}

body#reservation-calendar-all #calendar-wrapper #calendar-nav #list-of-months a{
display:block;
font-size:15px;
margin-right:12px;
text-decoration:none;
}

body#reservation-calendar-all #property-info{
display:block;
margin:20px auto;
text-align:center;
padding:10px;
background-color:#a8c7f8;
}

body#reservation-calendar-all #property-info h2{
margin:5px 0;
background-color:transparent;
padding:0;
}


/* Days (1-31) */
body#reservation-calendar-all #calendar-wrapper table .days {
position:relative;
padding:0;
background: #fff;
margin: 0 auto;
border:1px solid #ddd;
width:70px;
min-width:70px;
height:75px;
min-height:75px;
vertical-align:middle;
}

body#reservation-calendar-all #calendar-wrapper table .days.prev-next {
text-align:center;
font-size:80%;
}


body#reservation-calendar-all #calendar-wrapper table .days .day_num{
font-size:80%;
color:#666;
display:block;
margin-bottom:5px;

}

body#reservation-calendar-all #calendar-wrapper table .days .resv-line{
width:100%;
padding:0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
min-height:30px;
text-align:center;
vertical-align:middle;
}

body#reservation-calendar-all #calendar-wrapper table .days .resv-line .last-name{
padding:0;
text-align:center; 
font-size:80%;
cursor:pointer;
}

body#reservation-calendar-all #calendar-wrapper .days .blank-days ,
body#reservation-calendar-all #calendar-wrapper .days .calendarDay {
height: 150px;
width: 150px;
min-width: 150px;
color: #666;
padding:8px;
color:#666;
margin:4px;
position: relative;
border:1px solid #ddd;
}

body#reservation-calendar-all #calendar-wrapper .days .calendarDay.checkIn::before {
  position: absolute;
  z-index:100;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 105px 0 105px 105px; 
  border-color: transparent transparent transparent #ddd;
  transform: translateY(-69px) translateX(50px) rotate(45deg);
  content: " ";
}

body#reservation-calendar-all #calendar-wrapper .days .calendarDay.checkOut::before {
  position: absolute;
  z-index:100;
  bottom: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 105px 0 105px 105px; 
  border-color: transparent transparent transparent #ddd;
  transform: translateY(68px) translateX(-23px) rotate(225deg);
  content: " ";
}

body#reservation-calendar-all #calendar-wrapper .days div:last-child {
margin-right: auto;
}

body#reservation-calendar-all #calendar-wrapper .days div .dayOfMonth{
font-weight:bold;
font-size:150%;
position:absolute;
z-index:200;
top:5px;
left: 5px;
color:#666;
}


body#reservation-calendar-all #calendar-wrapper table .days .rate{
display:block;
margin:0 auto;
font-size:80%;
text-align:center;
}


/* Month FOOTER */

.month-footer {
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:center;
align-items: stretch;
border:1px solid #eee;
margin:20px auto;
text-align: center;
max-width:400px;
color:#333;
padding:10px;
/background: #eee;
}

/* Month list */

.month-footer div {
  text-transform: uppercase;
}

/* Previous button inside month header */
.month-footer #prev {
display:flex;
//font-size: 30px;
text-align:left;
align-items: center;
padding:10px;
width: 10%;
}

/* Next button */
.month-footer #next {
display:flex;
text-align:right;
align-items: center;
padding:10px;
width: 10%;
}

.month-footer #middle {
flex-grow: 4;
font-size:80%;
}

.month-footer #property{
display:block;
color:#333;
margin:10px auto;
text-align:center;
}

.month-footer #month-name{
font-size:30px !important;
display:block;
margin:20px auto;
}

@media only screen and (max-width : 768px) {

	body#reservation-calendar-all #calendar-wrapper .weekdays {
	display:none;
	}

	body#reservation-calendar-all #calendar-wrapper table .days {
	width:150px;
	min-width:150px;
	}
	
	body#reservation-calendar-all #calendar-wrapper .days .blank-days{
	display:none;
	}
}