/*
 * Global UI fixes for shared pickers/dropdowns.
 * Loaded after app.css so common payment, purchase, sale and modal screens stay consistent.
 */

.bootstrap-datetimepicker-widget,
.datepicker-dropdown,
.daterangepicker,
.ui-datepicker {
    z-index: 3000 !important;
    background: #fff !important;
    border: 1px solid #d7dee8 !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
    color: #111827 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 380px !important;
    min-width: 380px !important;
    max-width: calc(100vw - 24px);
    padding: 10px 12px !important;
    overflow: hidden !important;
}

.bootstrap-datetimepicker-widget:before,
.bootstrap-datetimepicker-widget:after,
.datepicker-dropdown:before,
.datepicker-dropdown:after {
    display: none !important;
}

.bootstrap-datetimepicker-widget table,
.datepicker-dropdown table,
.ui-datepicker table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    background: #fff !important;
}

.bootstrap-datetimepicker-widget .datepicker,
.bootstrap-datetimepicker-widget .datepicker-days,
.bootstrap-datetimepicker-widget .datepicker-months,
.bootstrap-datetimepicker-widget .datepicker-years,
.bootstrap-datetimepicker-widget .datepicker-decades,
.bootstrap-datetimepicker-widget .datepicker-days table,
.bootstrap-datetimepicker-widget .datepicker-months table,
.bootstrap-datetimepicker-widget .datepicker-years table,
.bootstrap-datetimepicker-widget .datepicker-decades table {
    width: 100% !important;
    max-width: 100% !important;
}

.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td,
.datepicker-dropdown table th,
.datepicker-dropdown table td,
.ui-datepicker table th,
.ui-datepicker table td {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    text-align: center !important;
    vertical-align: middle !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 14.285714% !important;
}

.bootstrap-datetimepicker-widget table th.picker-switch,
.bootstrap-datetimepicker-widget table td.separator {
    width: auto !important;
}

.bootstrap-datetimepicker-widget .datepicker-months table td,
.bootstrap-datetimepicker-widget .datepicker-years table td,
.bootstrap-datetimepicker-widget .datepicker-decades table td {
    width: auto !important;
}

.bootstrap-datetimepicker-widget table th,
.datepicker-dropdown table th,
.ui-datepicker table th {
    font-weight: 700 !important;
}

.bootstrap-datetimepicker-widget .picker-switch,
.datepicker-dropdown .datepicker-switch,
.ui-datepicker .ui-datepicker-title {
    color: #111827 !important;
    font-weight: 700 !important;
}

.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next,
.datepicker-dropdown .prev,
.datepicker-dropdown .next,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    color: #111827 !important;
    cursor: pointer !important;
}

.bootstrap-datetimepicker-widget table td.day,
.bootstrap-datetimepicker-widget table td span,
.datepicker-dropdown table td.day,
.datepicker-dropdown table td span,
.ui-datepicker table td a {
    border-radius: 5px !important;
    cursor: pointer !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.datepicker-dropdown table td.day:hover,
.datepicker-dropdown table td span:hover,
.ui-datepicker table td a:hover {
    background: #eef5ff !important;
    color: #111827 !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active,
.datepicker-dropdown table td.active,
.datepicker-dropdown table td.active:hover,
.datepicker-dropdown table td span.active,
.ui-datepicker table td .ui-state-active {
    background: #1677d2 !important;
    color: #fff !important;
    text-shadow: none !important;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new,
.datepicker-dropdown table td.old,
.datepicker-dropdown table td.new {
    color: #8b95a1 !important;
}

.bootstrap-datetimepicker-widget .datepicker,
.bootstrap-datetimepicker-widget .timepicker,
.bootstrap-datetimepicker-widget .timepicker-picker,
.daterangepicker .calendar-table {
    background: #fff !important;
}

.bootstrap-datetimepicker-widget .timepicker-picker table td {
    height: 34px !important;
    line-height: 34px !important;
}

.bootstrap-datetimepicker-widget a,
.bootstrap-datetimepicker-widget .btn,
.datepicker-dropdown a,
.daterangepicker a {
    color: #1677d2 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    background: #1677d2 !important;
    color: #fff !important;
}

.modal .bootstrap-datetimepicker-widget,
.modal .datepicker-dropdown,
.modal .daterangepicker,
.modal .ui-datepicker {
    z-index: 3000 !important;
}

@media (max-width: 480px) {
    .bootstrap-datetimepicker-widget.dropdown-menu,
    .datepicker-dropdown {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none;
    }
}