﻿/* Custom Pikaday styles */
.pika-single {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 270px; /* Adjust the width to remove extra white space */
    padding: 0; /* Removing any padding */
    align-items : center;
}

/* Styling for the month and year label */
.pika-label {
    color: #fff; /* Changing text color to white */
    background-color: #1f5099; /* Matching the dark blue background */
    font-size: 16px; /* Increasing font size */
    text-align: center; /* Centering the text */
    display: inline-block;
    margin: 0; /* Removing default margin */
    box-sizing: border-box; /* Including padding and border in the element's total width and height */
}

/* Container for the month and year label to apply background */
.pika-title {
    background-color: #1f5099; /* Matching the dark blue background */
    width : 105%;
    margin : 0;
    padding : 0;
}

/* Styling for the days of the week headers */
.pika-table th {
    color: #1f5099; /* Matching the header color */
    background: #b3b3b3;
    font-weight: bold;
    padding: 5px; /* Adding padding for better appearance */
}

.is-selected .pika-button {
    background: #595959; /* Background color for the selected date */
    color: #fff; /* Text color for the selected date */
    border: 1px solid #595959; /* Border color for the selected date */
}

/* Styling for the calendar day buttons */
.pika-button {
    color: #1f5099; /* Matching the button text color */
    background: none;
    border: 1px solid #ccc; /* Adding borders to the date buttons */

    width: 36px; /* Setting a fixed width */
    height: 36px; /* Setting a fixed height */
    display: inline-flex; /* Aligning items */
    align-items: center; /* Centering items vertically */
    justify-content: center; /* Centering items horizontally */
}

    .pika-button:hover, td.is-selected button.pika-button.pika-day {
        background: #1f5099; /* Matching the hover background color */
        color: #fff;
    }

.is-today .pika-button {
    font-weight: bold;
}

.pika-prev:hover, .pika-next:hover {
    color: #1f5099; /* Matching the hover text color */
}

/* Close button styling */
.pika-single .pika-lendar .close-calendar {
    color: #1f5099; /* Matching the close button color */
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
}
