/* NCHSAA-392 The following are custom styles to overwrite some of the default styling of the JQuery UI Datepicker that is used on areas of the site
	where we use JQuery datepickers */

/* give the top header more padding and remove the gray background color */
.ui-datepicker .ui-datepicker-header {
    padding: .5em 0;
}

.ui-widget-header {
    border: none; 
    background-color: white;
}

/* remove the gray border, shift the prev and next buttons slightly downwards */
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    top: 70%;
}
.ui-datepicker-prev:hover  {
    background: none;
    border: 0;
    cursor:pointer;
}
.ui-datepicker-next:hover  {
    background: none;
    border: 0;
    cursor:pointer;
}

/* give the select menu slightly more padding */
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    padding: .25rem; 
    border: 1px solid #ced4da; /* bootstrap 4 gray */
}

/* Remove the gray borders around each of the day cells and make the cells circular on hover */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button {
    border: 3px solid white;
    background: white;
    font-weight: normal;
    color: #454545; 
    border-radius:50%;
}

.ui-state-default:hover{
    background-color: #f6f6f6;
}

/* center align the date number within each cell */
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center; 
}  

/* active date is now displayed in blue */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background-color: #007bff; /* blue color, same as bootstrap 4 primary theme */
    color: white;
}