/* Custom Date Range Picker Calendar Styles */

/* General Calendar Background */
.daterangepicker {
    background-color: #f9f9f9;  /* Light background for the calendar */
    border: 1px solid #ccc; /* Add a border for better visibility */
    border-radius: 5px; /* Rounded corners */
}

/* Highlight Today's Date */
.daterangepicker .calendar .today {
    background-color: #fffae6; /* Light yellow background for today's date */
    border: 1px solid #ffcc00; /* Yellow border */
    font-weight: bold; /* Bold text for emphasis */
}

/* Set Hover Effect for Available Dates */
.daterangepicker .calendar .available:hover {
    background-color: rgba(154, 227, 147, 1) !important; /* Slightly darker for hover effect */
    color: black; /* Change text color to black on hover */
}

/* Custom Styles for Selected Dates */
.daterangepicker .calendar .selected {
    background-color: #007bff !important; /* Bootstrap primary color for selected dates */
    color: white !important; /* Ensure text is readable on blue */
}

/* Disable the pointer events for unavailable dates */
.daterangepicker .calendar .unavailable {
    pointer-events: none; /* Prevent interaction */
}

/* Calendar Header Styling */
.daterangepicker .calendar .calendar-header {
    background-color: #007bff; /* Header color */
    color: white; /* Text color for header */
    padding: 10px; /* Padding for header */
    border-radius: 5px 5px 0 0; /* Rounded corners only on the top */
}

/* Day Names Styling */
.daterangepicker .calendar .day-name {
    color: #555; /* Darker gray for day names */
    font-weight: bold; /* Bold text for visibility */
}

/* Custom Pagination Controls */
.daterangepicker .calendar .prev, 
.daterangepicker .calendar .next {
    background-color: #f0f0f0; /* Background for navigation buttons */
    border: 1px solid #ccc; /* Border to match the calendar */
    border-radius: 3px; /* Slight rounding */
}

/* Change pagination button hover effect */
.daterangepicker .calendar .prev:hover,
.daterangepicker .calendar .next:hover {
    background-color: #e0e0e0; /* Darker on hover */
}

/* Legend container styles */
.daterangepicker .calendar .legend {
    display: flex; /* Use flexbox for legends */
    align-items: center; /* Center vertically */
    margin-top: 10px; /* Margin */
}

/* Custom margin for legend squares */
.legend-square {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border: 1px solid transparent; /* To ensure consistent spacing */
}