/* Fix for date picker z-index */
.bootstrap-datetimepicker-widget.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

/* Ensure the date picker appears above all other elements */
.bootstrap-datetimepicker-wicker {
    z-index: 9999 !important;
}

/* Fix for the time picker */
.bootstrap-datetimepicker-widget.timepicker-sbs {
    z-index: 9999 !important;
}

/* Make sure the date picker is not hidden behind other elements */
.modal-backdrop {
    z-index: 9998 !important;
}

/* Fix for the date picker in modal */
.modal {
    z-index: 1050 !important;
}

/* Ensure the date picker is visible in all contexts */
.bootstrap-datetimepicker-widget {
    position: absolute;
    z-index: 9999 !important;
    width: auto;
    padding: 10px;
    margin-top: 2px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}

/* Make sure the date picker is visible on top of modals */
.modal-open .bootstrap-datetimepicker-widget {
    z-index: 999999 !important;
}