/* Fix for grayed out text and mis-styling of calendar control.
See: https://github.com/tcbegley/dash-bootstrap-css/issues/7
 */

/* Set the current outer border to 0 because it's messed up,
and put the FLATLY properties inside the DateInput_input class
which works well instead. */
.SingleDatePickerInput {
    border: 0px;
}

/* Fix box width of datepicker to be 100% of parent container*/
.DateInput, .DateInput_1 {
    width: 100%; /* replace with whatever length you prefer */
}

/* Fix the font size and other stuff of datepicker*/
.DateInput_input, .DateInput_input_1 {
    text-align: center;
    line-height: calc(1.5em + 0.75rem);
    /* default flatly stuff */
    height: calc(1.5em + 0.75rem + 2px);
    font-size: 0.9375rem;
    font-weight: 650;
    color: #000000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}