.header-image
{
    width: 100%;
    height: 50vh !important;
    background-image: url("/img/exterior.jpg");
    background-size: cover;
    background-position-x: 50%;
    background-position-y: 60%;
}

#image-header-home
{
    background-image: url("/img/exterior.jpg");
}

#image-header-about
{
    background-image: url("/img/byg_phase1only.jpg");
    background-position-x: 50%;
    background-position-y: 40%;
}

#calendar { display:table; width:100%; border-left:1px solid #CCC; }
#calendar .tr { display:table-row; width:100%; }
#calendar .th { display:table-cell; width:14.28571428571429%; padding:3px; border-right:1px solid #CCC; border-bottom:1px solid #CCC; border-top:1px solid #CCC; font-weight:bold; }
#calendar .td { display:table-cell; width:14.28571428571429%; height:60px; padding:3px; border-right:1px solid #CCC; border-bottom:1px solid #CCC; }
#calendar .td p {font-size:13px; line-height:13px; }
#calendar .na { background:#fecece; }
#calendar .avail {background: var(--bs-success-bg-subtle)}
#calendar .na p { color:#999 !important; }
#calendar .booked { background:#9BFF9B; }
#calendar .booked p { color:#666 !important; }
#calendar a:hover { text-decoration:none; }

#calendar .booked:hover { background-color: #ec9393;
						-webkit-transition: background-color 300ms linear;
    					-ms-transition: background-color 300ms linear;
    					transition: background-color 300ms linear;}


.bg-booking-back2back {
    background: linear-gradient(300deg, rgba(var(--bs-primary-rgb)) 0%, rgba(var(--bs-primary-rgb)) 35%,white 40%, white 60%, rgba(var(--bs-primary-rgb)) 65%, rgba(var(--bs-primary-rgb)) 100%)
}


i.avail { color: var(--bs-success-bg-subtle); }
i.booked { color: #fecece; }

.fs-7 { font-size: 0.8rem; }

.cursor-help {
    cursor: help;
}

.cursor-grab {
    cursor: grab;
}

nav[data-bs-theme="dark"] img {
    filter: invert(1)
}

.list-group {
    --bs-list-group-active-bg: #198754; /* Bootstrap's 'success' green */
  }

.border-dashed {
    border: 2px dashed var(--bs-card-border-color)
}

/* Remove bottom padding from <p> blocks in markdown sections */
.markdown li p { margin-bottom: 0rem }

/** Styling for the 'return to top' button */
#returnToTop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 10px 15px;
    font-size: 16px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 999;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }


@media (max-width: 767.98px) {
    .zoom-md-5 {
        zoom: 0. !important;
    }
}