.bookingplan-wrapper{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -user-select: none;
}

.bookingplan-heading{
  font-size: 15px;
  line-height: 1;
  margin: 0 0 10px;
  max-width: 380px;
  padding: 3px 0 0;
  position: relative;
}
.bookingplan-navi{
  position: absolute;
  right: 0;
  top: 0;
}
.bookingplan-navi-item{
  background: #8f8f8f;
  display: inline-block;
  height: 20px;
  margin: 0 0 0 10px;
  position: relative;
  transition: background .3s;
  width: 20px;
}
.bookingplan-navi-item:after{
  color: #fff;
  content: '<';
  font-size: 20px;
  font-weight: bold;
  left: 0;
  line-height: 20px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}
.bookingplan-navi-item.next:after{
  content: '>';
}
.bookingplan-navi-item:hover{
  background: #333;
}

.bookingplan{
  background: #fff;
  /*border: 1px solid #d1cec9;*/
  margin: 0 0 10px;
  /*max-width: 380px;*/
  max-width: 100%;
  overflow: hidden;
  padding: 0 0 10px;
  position: relative;
  width: 100%;
}

table.bookingplan-month{margin:0 0 10px;}
table.bookingplan-month th,
table.bookingplan-month td{padding:5px 10px;text-align:center;background:#eee;border:2px solid #fff;}
table.bookingplan-month th{background:#444;color:#fff;}
table.bookingplan-month .bookingplan-month-day-occupied{background:#3298C2;color:#fff;}
table.bookingplan-month .bookingplan-month-day-occupied-2{background:#65BC49;color:#fff;}

.bookingplan-legend{
  max-width: 500px;
}

.bookingplan-legend-booked{
  background: #3298c2;
  display: inline-block;
  height: 16px;
  margin: -2px 2px 0 0;
  vertical-align: middle;
  width: 16px;
}
.bookingplan-legend-booked.own{
  background: #65bc49;
  margin-left: 20px;
}

@media screen and (max-width: 720px){
  .bookingplan-legend{
    font-size: 12px;
  }
}

@media screen and (min-width: 720px),(min-device-width:750px) and (max-device-width: 1024px) and (orientation: portrait){

}

@media screen and (min-width:1000px){

}

@media screen and (min-width:1500px){

}

@media screen and (max-width:380px){
  
  .bookingplan-heading{
    font-size: 12px;
  }
  
}
@media screen and (max-width:340px){
  
}