#surveyModal .modal-dialog {
    margin-top: 250px;
}
.site .header-inner-page {
    z-index: 10;
}

#phoneInterviewModal .modal-dialog {
    max-width: 90%; /* Optional: Increase width for better layout */
    height: 90%; /* Adjust the height to 90% of the viewport */
    max-height: 90%; /* Ensure it doesn't overflow the screen */
}

#phoneInterviewModal .modal-content {
    height: 100%; /* Fill the modal dialog */
    display: flex;
    flex-direction: column;
}

#phoneInterviewModal .modal-body {
    flex-grow: 1; /* Allow the body to expand */
    overflow-y: auto; /* Enable scrolling if content overflows */
    padding: 20px;
}

#appointmentCalendar {
    height: 700px !important; /* Use all available space */
    overflow-y: auto; /* Enable scrolling for calendar if needed */
}

#appointmentCalendar td {
    height: 120px; /* Set a minimum height for cells to accommodate content */
    max-width: 100px;
    vertical-align: top; /* Align content to the top of each cell */
    position: relative; /* Allow positioning of child elements */
}

#appointmentCalendar button {
    font-size: 0.85rem; /* Slightly smaller font for better fit */
    margin-top: 5px;
}

#appointmentCalendar td.selected {
    background-color: #d1ecf1; /* Light blue to indicate selection */
    border: 2px solid #0c5460; /* Darker border to highlight */
}