.calendar { width: clamp(320px, 400px, 90%);
padding: 1rem;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
align-items: center; }
.calendar header { align-items: center;
justify-content: space-between;
}
.calendar nav {
display: flex;
align-items: center;
}
.calendar ul {
padding: 0px;
list-style: none;
display: flex;
flex-wrap: wrap;
text-align: center;
}
.calendar ul li {
width: calc(100% / 7);
position: relative;
z-index: 2;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.calendar #prev,
.calendar #next {
width: 20px;
height: 20px;
position: relative;
border: none;
background: transparent;
cursor: pointer;
}
.calendar #prev::before,
.calendar #next::before {
content: "";
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
border-style: solid;
border-width: 0.25em 0.25em 0 0;
border-color: #ccc;
align-items: center;
}
.calendar #next::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.calendar #prev::before {
transform: translate(-50%, -50%) rotate(-135deg);
}
.calendar #prev:hover::before,
.calendar #next:hover::before {
border-color: #000;
}
.days {
font-weight: 600;
}
.dates li.today {
color: #fff!important;
}
.dates li.today::before {
content: "";
width: 2rem;
height: 2rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #139fde;
border-radius: 50%;
z-index: -1;
}
.dates li.selected-date {
color: #1B63E9;
}
.dates li.selected-date:hover {
background: #3CA9DF;
border-radius: 50%;
color: #fff!important;
}
.dates li.clicked-selected {
color: #fff!important;
background-color: red;
border-radius: 50%;
}
.dates li.inactive {
color: #ccc!important;
opacity: 0.7; cursor: not-allowed;
} .time-slot-already-booked {
background: red!important;
pointer-events: none; opacity: 0.5; cursor: not-allowed; color: #fff;
} .mdRech {
display: none; position: fixed!important;
top: 0;
left: 0;
margin: 0px;
padding: 0px;
width: 100%!important;
height: 100%!important;
background-color: rgba(0, 0, 0, 0.5); z-index: 2000!important;
justify-content: center;
} .md-cnt {
background-color: #fff;
padding: 20px;
border-radius: 8px;
border: 4px solid #818181;
width: 80%;
max-width: 400px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: auto; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
} .cls-btn-rech {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: #333;
cursor: pointer;
}
.md-cnt p a {
text-decoration: none!important;
}
.md-cnt p a:hover {
text-decoration: underline!important;
}
#displayTimePicker ul {
padding-left: 25px;
}
ul .pick-time { 
list-style: none;
float: left;
width: 75px;
margin: 10px;
padding: 10px;
background-color: #088DCE;
color: #fff!important;
}
ul .pick-time:hover {
background-color: #3CA9DF;
color: #fff!important;
cursor: pointer;
} #contactInfo {
display: none;
text-align: left!important;
max-height: 75vh; overflow-y: auto; }
#contactInfo form {
max-width: 400px;
margin: auto;
}
#contactInfo .form-group {
margin-bottom: 15px;
}
#contactInfo label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
#contactInfo input, #contactInfo select, #contactInfo button {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
#contactInfo button {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
#contactInfo button:hover {
background-color: #0056b3;
}  .conf_popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
z-index: 3000!important;
}
.conf_popup-box {
background: white;
padding: 20px;
border-radius: 0px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
width: 90%;
position: relative;
}
.conf_popup-box button {
background: red;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
border-radius: 0px;
}
.conf_popup-box button:hover {
background: darkred;
}
.input-error {
border: 2px solid red !important;
background-color: #ffe6e6; } #contactInfo #loadingMessage {
text-align: center;
font-size: 20px;
margin: 0px;
padding: 0px;
color: red;
animation: blink-color 1s infinite;
}
@keyframes blink-color {
0% { color: red; }
50% { color: transparent; }
100% { color: red; }
}
#resetBtn {
margin-top: 10px;
background-color: #E01111!important;	
}
@media (max-width: 480px) and (min-resolution: 2dppx) {
.calendar {
margin-left: -15px;
}
}