/* bootstrap-datepicker popup overrides */
.datepicker {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-size: 16px !important;
}

/* Widen the overall picker */
.datepicker table {
    width: 280px !important;
}

/* Increase day/month/year cell size */
.datepicker table tr td,
.datepicker table tr th {
    width: 40px !important;
    height: 40px !important;
}

/* Replace default gradient highlight with solid primary button colour */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: #007fc4 !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none !important;
}

/* Safety net for very small screens (narrower than 360px) */
@media (max-width: 359px) {
    .datepicker table {
        width: 240px !important;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        width: 34px !important;
        height: 34px !important;
    }

    .datepicker {
        font-size: 13px !important;
    }
}