.bootstrap-datetimepicker-widget {
    font-size: 14px;
}

/* Highlight selected day with clear background */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #ffc107; /* soft yellow */
    color: #000;
}

/* Hover highlight for better usability */
.bootstrap-datetimepicker-widget table td.day:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

/* Header (month/year) styling */
.bootstrap-datetimepicker-widget .datepicker-switch {
    font-weight: bold;
    font-size: 16px;
}

/* Navigation arrows */
.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next {
    color: #333;
    font-size: 16px;
}

/* Remove focus outline on click */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    outline: none !important;
}

/* Stepping highlight in time view */
.bootstrap-datetimepicker-widget .timepicker-picker .btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.bootstrap-datetimepicker-widget .timepicker-picker .btn:hover {
    background-color: #f8f9fa;
}

/* Make calendar more compact */
.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 8px;
}

/* Highlight today */
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #ffc107;
}

/* Optional: smoother rounded corners */
.bootstrap-datetimepicker-widget {
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}