.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus {
    border-radius: 0.375rem;
    background: #e9ecef;
    border-color: #e9ecef;
    color: #212529;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus {
    border-radius: 0.375rem;
    /* background: #0d6efd; */
    /* border-color: #0d6efd; */
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.flatpickr-calendar .flatpickr-day.today {
    border-radius: 0.375rem;
}


/* Make the visible localized date input look active */
.flatpickr > .localized-date-input {
    background-color: #fff !important;
    color: #212529 !important;
    cursor: pointer;
    opacity: 1 !important;
}
/* Input focus highlight */
.flatpickr > .localized-date-input:focus {
    background-color: #fff !important;
    /* border-color: #86b7fe; */
    /* box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
    border-color: #9aa2aa;
    box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.25);
}
/*
.flatpickr > .localized-date-input:hover {
    background-color: #fff !important;
}
*/
/* Exclude Flatpickr's hidden MySQL input from the Bootstrap layout */
.flatpickr > input[type="hidden"] {
    display: none !important;
}
/* Apply the left corners to the visible localized input */
.flatpickr > .localized-date-input {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}
.flatpickr > .flatpickr-last-elem {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}
.flatpickr-today-button {
    width: 100%;
    padding: 8px;
    border: 0;
    border-top: 1px solid #e9ecef;
    background: #fff;
    /* color: #0d6efd; */
    color: #6c757d;
    cursor: pointer;
    font-size: 0.875rem;
}
.flatpickr-today-button:hover {
    background: #f8f9fa;
}


/* Special buttons for input */
.flatpickr > .btn-outline-secondary {
    border-color: #ced4da;
}

/* Make the alternative Flatpickr input work with bootstrap validation styling */
.flatpickr > .is-invalid ~ .localized-date-input {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    z-index: 1000;
}
.flatpickr > .is-invalid ~ .localized-date-input:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}