﻿/*Standard Booking Widget styles*/

.booking-widget a,
.booking-widget a:link,
.booking-widget a:hover {
    font-family: arial;
}
.booking-widget h2 { text-align:center; }
.booking-widget .feature-mls img {
    display: inline-block;
    margin-left: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
    height: 16px;
}
.booking-widget {
    /*background-color:#f3f3f3;*/
    margin: auto;
    color: #333;
}
.booking-widget .row {
    margin: 0;
}
.booking-widget td {
    border: 0;
}
.booking-widget .col-md-1, .booking-widget .col-md-3, .booking-widget .col-md-4, 
.booking-widget .col-md-6, .booking-widget .col-md-12, 
.booking-widget .col-sm-1, .booking-widget .col-sm-3, .booking-widget .col-sm-4, 
.booking-widget .col-sm-6, .booking-widget .col-sm-12 {
    padding:0;
}
.booking-widget .cal-mon-container,
.booking-widget .booking-elements {
    border: 2px solid #fff;
}

.booking-widget .cal-mon-table {
    width: 100%; border-collapse:collapse; table-layout:fixed;
    color:#fff;
    background-color:#f3f3f3;
}
.cal-mon-table td {
    position: relative;
}
.cal-mon-table .date-row>td:after {
    content: '';
    display: block;
    margin-top: 100%;
}
.cal-mon-table .heading {
    width: 100%;
    padding: 10px 0px;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-between;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #777;
    font-weight: bold;
    background-color: #ddd;
}
.cal-mon-table .heading .glyphicon {
    font-size:1.8em;
}
.cal-mon-table .heading-wk td { 
    color:#777; 
    text-align:center;
    padding: 5px 0;
    background-color:#eee;
}
/*hide these arrows by default */ 
#cur_mon .glyphicon-triangle-right, #nxt_mon .glyphicon-triangle-left {
    visibility:hidden;
}

.cal-mon-table .cell {
    position: absolute;
    top: 5px;
    bottom: 0;
    left: 0;
    right: 5px; /* square cell */
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-align-items: center;
    -webkit-justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
}
.cal-mon-table .cell .d {
    color: #333;
    width: 100%;
    text-align: right;
}
.cal-mon-table .cell .r {
    font-size:0.9em;
}
.cal-mon-table .cell .ro {
    font-size:0.9em;
    text-decoration: line-through;
}
.cal-mon-table .has-date {
    background-color:#fff; /*337ab7*/;
    color:#777;
    border:1px solid #999;
    cursor:pointer;
}
.cal-mon-table .no-avail, .no-avail {
    background-color:#ddd;
}
.cal-mon-table .today {
    border:1px solid #337ab7;
}
.booking-widget .highlight {
    background: orange;
}
.cal-mon-table .highlight {
    background: #f8a40036;
}
.cal-mon-table .highlight-start {
    /*background: linear-gradient(to bottom right, #fff 0%, #fff 50%, orange 50%, orange 100%);*/
    background: orange;
    cursor: pointer;
}
.cal-mon-table .highlight-end {
    /*background: linear-gradient(to bottom right, orange 0%, orange 50%, #fff 50%, #fff 100%);*/
    background: orange;
    cursor: pointer;
}
/*.cal-mon-table .highlight-end.no-avail { 
    background: linear-gradient(to bottom right, orange 0%, orange 50%, #ddd 50%, #ddd 100%); 
}*/

.booking-elements {
    background:#fff;
}
.booking-elements .col-md-12, .booking-elements .col-md-6, 
.booking-elements .col-sm-1, .booking-elements .col-sm-3, 
.booking-elements .col-sm-4, .booking-elements .col-sm-6 {
    padding:5px;
}

.booking-elem {
    width: 100%; height:3.8em;
    position: relative;
    border: 1px solid #aaa;
    padding: 0px 10px 5px 10px;
    background:#fff;
    cursor:pointer;
}
.booking-elem .label {
    font-size: 0.8em;
    color:#333;
    padding: 5px 5px 5px 0;
    display: block;
    text-align: left;
}
.booking-elem .elem-content, .booking-elem .elem-content-note {
    font-weight:bold;
    display:inline-block;
}
.booking-elem input, .booking-elem select {
    font-size:1em;
    font-weight:bold;
    border:0;
    width:100%;
    padding: 0 5px;
}
.booking-elem input {
    max-height: 25px;
}
.booking-elem .glyphicon-calendar {
    position: absolute;
    right: 0.2em;
    top: 0.35em;
    font-size: 1.5em;
    color:#777;
}
.booking-elements .booking-btn, .booking-elements .view-btn {
    text-transform: uppercase;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.booking-elements .booking-btn {
    background:transparent linear-gradient(0deg,#009688 0,#4caf50 100%) repeat scroll 0 0;
    color:#fff;
    border-color:#aaa;
}
.booking-elements .view-btn {
    background:#aaa;
    color:#fff;
    border-color:#aaa;
}

.booking-widget .legend {
    display: -webkit-flex;
    -webkit-align-items: center;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px;
    background: #fff;
    font-size: 0.85em;
    width: 100%;
}
.booking-widget .legend-text {
    color: #333;
}
.legend .square {
    width:15px; height:15px; border:1px solid #aaa; margin-left:15px; margin-right:10px;
}
.clear-search {
    margin-left: auto; margin-right: 5px; cursor:pointer; text-decoration:underline;
}

/* callout popup */
.callout { 
    background:#fff; color:#333; 
    z-index:1009; 
    box-shadow: 2px 2px 2px #ccc; 
}
.callout::before {  /* to make small triangle notch (tip) */
	content: "";
	width: 0px;
	height: 0px;
	border: 0.8em solid transparent;
	position: absolute;
}
.callout.popup::before {
	left: 15px;
	top: -1.5em;
	border-bottom: 10px solid #aaa;
}
.popup {
    width: 96.5%;
    padding: 10px;
    border: 1px solid #aaa;
    position:absolute; top:4.7em;
}
.popup .btn {
    width:100%; margin:10px 0 5px;
}
.popup table {
    width:100%; table-layout: auto;
    margin: 0;
}
.booking-widget .counters-table > tbody > tr > td,
.counters-table > tbody > tr > td,
.counters-table td {
    width: 50%;
    padding: 5px 0;
    color: #333;
}
.counter {
    width: 130px;
}
.booking-widget .counter td,
.counter td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
    padding: 0;
}
.booking-widget .counter-label,
.counter-label {
    width: 80px;
    border: 1px solid #ccc;
}
.booking-widget .counter-minus, .booking-widget .counter-plus,
.counter-minus, .counter-plus {
    width: 30px;
    height: 30px;
    background: #eee;
}

/*responsive styles*/
@media (min-width: 1200px) {
    .booking-widget.container {
        width: 970px;
    }
}
@media (max-width: 767px) {
    .cal-mon-table .cell .ro {
        display: none;
    }
}