.instant-calendar .calendar-card {
    max-width: 700px;
    transition: transform 500ms cubic-bezier(0.7,0,0,1), opacity 500ms cubic-bezier(0.7,0,0,1);
}
.instant-calendar .calendar-card:hover{
    box-shadow:0 100px 60px -40px rgba(0,0,0,.06),0 60px 100px 0 rgba(50,50,93,.15);
	transform:scale(1.018);
}
.instant-calendar .cal-header {
    padding: 20px 25px;
}
.instant-calendar .nav-button {
    width: 44px;
    height: 44px;
}
.instant-calendar .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--bs-border-color);
}
.instant-calendar .cal-cell {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
    font-weight: 500;
    font-size: 1.1rem;
}
.instant-calendar .day-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    height: 40px;
}

.instant-calendar .date-muted {
    color: rgba(var(--bs-black-rgb), 0.2);
    font-weight: 400;
}

.instant-calendar .date-active {
    background-color: var(--bg-primary);
    color: white !important;
}
.cal-cell.date-available {
  background-color: rgba(var(--bs-success-rgb), 0.1);
  color: var(--bs-success);
}
.instant-calendar .slot-time:hover,
.instant-calendar .slot-time.selected,
.cal-cell.date-available.selected,
.cal-cell.date-available:hover{
  background-color: var(--bs-success);
  color:var(--bs-white);
  cursor:pointer;
}
.instant-calendar .cal-grid,
.instant-calendar .slot-time {
  direction: ltr;
}
.instant-calendar .slot-time {
  cursor: pointer;
}

/** for mobile 767px and below **/
@media screen and (max-width: 767px) {
    .instant-calendar .cal-cell {
        height: 40px;
        font-size: 0.9rem;
    }
    .instant-calendar #monthYearDisplay{
        font-size: 1.2rem !important;
    }
}