.daterangepicker {
    background-color: var(--date-picker-box-background-color);
    border: var(--date-picker-box-border) !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 21px !important;
    -webkit-box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.08), 0px 48px 48px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.08), 0px 48px 48px rgba(0, 0, 0, 0.04);
    z-index: 10003;
}

.daterangepicker:before {
    top: -7px;
}

.daterangepicker .drp-calendar.left {
    border-left: 1px solid var(--date-picker-box-divisors) !important;
    margin-right: 20px !important;
}

.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
    max-width: 380px !important;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid var(--date-picker-box-divisors) !important;
    display: flex !important;
}

.daterangepicker .drp-buttons .cancelBtn {
    margin-left: auto;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border: solid var(--tertiary) !important;
    border-width: 0 2px 2px 0 !important;
}

.daterangepicker .ranges {
    padding: 4px 14px !important;
}

.daterangepicker .ranges li {
    border-radius: 4px !important;
    color: var(--grey-04) !important;
    height: 38px !important;
}

.daterangepicker .ranges li.active {
    background-color: var(--primary) !important;
    color: var(--secondary) !important;
}

.daterangepicker .ranges li:hover {
    color: var(--primary) !important;
    background-color: var(--grey-01) !important;
}

.daterangepicker .calendar-table table {
    border-collapse: separate !important;
    border-spacing: 0 7px !important;
    width: 260px !important;
}

.daterangepicker .calendar-table table th {
    width: 52px !important;
    min-width: 52px !important;
}

.daterangepicker td {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.daterangepicker td.ends {
    color: var(--grey-02) !important;
}


.daterangepicker td:hover {
    background-color: var(--grey-02) !important;
    color: var(--primary) !important;
}

.daterangepicker select {
    color: var(--grey-04) !important;
    border: 1px solid var(--grey-02) !important;
    border-radius: 8px !important;
}

.daterangepicker .drp-selected {
    display: inherit;
}

.datetimepicker-wrapper {
    position: relative;
}

.bootstrap-datetimepicker-widget {
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    -webkit-box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.08), 0px 48px 48px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.08), 0px 48px 48px rgba(0, 0, 0, 0.04);
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 370px !important;
    background-color: var(--date-picker-box-background-color);
    border: var(--date-picker-box-border) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 46em !important;
}

.bootstrap-datetimepicker-widget th.prev,
.bootstrap-datetimepicker-widget th.next,
.daterangepicker .calendar-table table th.prev,
.daterangepicker .calendar-table table th.next {
    color: var(--date-picker-btn-arrow-nav-text-color) !important;
    background-color: var(--date-picker-btn-arrow-nav-background-color);
}

.bootstrap-datetimepicker-widget th.prev:hover,
.bootstrap-datetimepicker-widget th.next:hover,
.daterangepicker .calendar-table table th.prev:hover,
.daterangepicker .calendar-table table th.next:hover {
    color: var(--date-picker-btn-arrow-nav-text-color-hover) !important;
    background-color: var(--date-picker-btn-arrow-nav-background-color-hover) !important;
}

.bootstrap-datetimepicker-widget .picker-switch {
    color: var(--grey-04) !important;
}

.bootstrap-datetimepicker-widget table th {
    width: 52px !important;
}

.bootstrap-datetimepicker-widget table th,
.daterangepicker .calendar-table table th {
    color: var(--date-picker-title-days-text-color);
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget a[data-action],
.bootstrap-datetimepicker-widget button[data-action],
.bootstrap-datetimepicker-widget.usetwentyfour td.hour,
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 21px !important;
}

.bootstrap-datetimepicker-widget button[data-action],
.bootstrap-datetimepicker-widget .timepicker .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker .timepicker-second {
    background-color: var(--grey-02) !important;
    font-weight: 600 !important;
    padding-top: 12px !important;
    width: 46px !important;
    height: 46px !important;
}

.bootstrap-datetimepicker-widget .timepicker .timepicker-hour:hover,
.bootstrap-datetimepicker-widget .timepicker .timepicker-minute:hover,
.bootstrap-datetimepicker-widget .timepicker .timepicker-second:hover {
    background-color: var(--secondary) !important;
    color: var(--primary) !important;
}

.bootstrap-datetimepicker-widget .timepicker {
    margin-left: 64px !important;
    padding: 0 !important;
    max-width: 240px !important;
}

.bootstrap-datetimepicker-widget .timepicker .table-condensed td a[data-action] {
    display: none !important;
}

.bootstrap-datetimepicker-widget .timepicker .table-condensed td {
    width: 46px !important;
    height: 46px !important;
}

.bootstrap-datetimepicker-widget .timepicker .table-condensed .separator {
    max-width: 20px !important;
}

.bootstrap-datetimepicker-widget .timepicker table td.day:hover,
.bootstrap-datetimepicker-widget .timepicker table td.hour:hover,
.bootstrap-datetimepicker-widget .timepicker table td.minute:hover,
.bootstrap-datetimepicker-widget .timepicker table td.second:hover {
    background-color: var(--grey-02) !important;
    color: var(--primary) !important;
}

.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
    width: 46px !important;
    height: 46px !important;
}

.form-daterange {
    position: relative;
}

/* Hour */
.form-control.hour~.bootstrap-datetimepicker-widget {
    max-width: 320px;
}

.form-control.hour~.bootstrap-datetimepicker-widget .timepicker {
    margin: 0 auto !important;
    padding: 16px !important;
}

.form-control.hour~.bootstrap-datetimepicker-widget .timepicker .timepicker-picker .table-condensed tr:first-child,
.form-control.hour~.bootstrap-datetimepicker-widget .timepicker .timepicker-picker .table-condensed tr:last-child {
    display: none;
}

/* Hour with button close  */
.form-control.hour.has-close ~ .bootstrap-datetimepicker-widget .list-unstyled {
    display: flex;
    flex-direction: column;
}

.form-control.hour.has-close ~ .bootstrap-datetimepicker-widget .list-unstyled .picker-switch {
    order: 1;
}

.form-control.hour.has-close ~ .bootstrap-datetimepicker-widget .list-unstyled .picker-switch a i {
    display: none;
}

.form-control.hour.has-close ~ .bootstrap-datetimepicker-widget .list-unstyled .picker-switch a::after {
    content: 'OK';
}

/* END - Hour */

/*** Mobile ***/

@media (min-width: 577px) {
    .daterangepicker .drp-buttons .btn.btn-icon.cancelBtn.closeBtn {
        display: none;
    }
}

@media (max-width: 576px) {
    .form-control.hour~.bootstrap-datetimepicker-widget {
        max-width: 101vw;
        border-radius: 0 !important;
    }

    /* Datepicker range */
    .daterangepicker {
        position: fixed;
        width: 100%;
        height: 100%;
        max-width: initial;
        left: 0 !important;
        top: 0 !important;
        overflow: auto;
        border-radius: 0 !important;
        margin-top: 0;
        padding: 36px 0;
    }

    .daterangepicker .ranges {
        padding: 4px 8px !important;
    }
    .daterangepicker .ranges ul {
        text-align: center;
    }
    .daterangepicker .ranges ul li {
        display: inline-block;
        border: 1px solid var(--grey-01);
    }

    .daterangepicker .drp-calendar.left,
    .daterangepicker .drp-calendar.right {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 8px !important;
    }

    .daterangepicker .drp-calendar.left {
        margin-right: initial !important;
        border-left: none !important;
    }

    .daterangepicker .calendar-table {
        width: 100%;
    }

    .daterangepicker .calendar-table .table-condensed {
        width: calc(100vw - 20px) !important;
    }

    .daterangepicker .calendar-table table th,
    .daterangepicker .calendar-table table td {
        width: initial !important;
        min-width: initial !important;
    }

    .daterangepicker .drp-buttons {
        padding: 16px;
        align-items: center;
    }

    .daterangepicker .drp-buttons .drp-selected {
        text-align: start;
    }
    /* END Datepicker range */

    /* Datepicker single */
    .bootstrap-datetimepicker-widget.dropdown-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50% !important;
        left: 0 !important;
        position: fixed;
        width: calc(100% + 6px) !important;
        height: fit-content;
        margin: -3px;
        z-index: 9999;
        transform: translateY(-50%);
        box-shadow: 0 0 100px 65px var(--primary-transparent);
        padding: 53px 16px 16px 16px;
    }

    .bootstrap-datetimepicker-widget .list-unstyled {
        width: 100%;
    }

    .bootstrap-datetimepicker-widget .timepicker {
        margin: auto !important;
    }

    .bootstrap-datetimepicker-widget table td span:hover,
    .bootstrap-datetimepicker-widget table td i {
        background: var(--white-02);
    }

    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
    .bootstrap-datetimepicker-widget.dropdown-menu.top:after,
    .bootstrap-datetimepicker-widget.dropdown-menu.top:before,
    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
        display: none;
    }

    .bootstrap-datetimepicker-widget.dropdown-menu a[data-action="close"] {
        position: absolute;
        top: 8px;
        right: 22px;
        font-size: 22px !important;
        height: 40px;
    }

    .bootstrap-datetimepicker-widget.dropdown-menu a[data-action="close"] i {
        line-height: initial;
        height: initial;
        background-color: white;
    }

    .dropdown-menu .bs-searchbox,
    .dropdown-menu .bs-actionsbox {
        display: none;
    }

    .dropdown.bootstrap-select .dropdown-menu {
        padding: 0 !important;
    }

    .daterangepicker .closeBtn {
        position: absolute;
        top: 16px;
        right: 16px;
    }
    /* END - Datepicker single */
}

/* Datepicker on /dashboard */
.wdk-layout-chart .bootstrap-datetimepicker-widget.dropdown-menu {
    top: 0 !important;
    left: 0 !important;
    position: fixed;
    width: calc(100% + 6px) !important;
    height: calc(100% + 6px);
    margin: -3px;
}
/* END - Datepicker on /dashboard */

/* Hide arrow */
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after,
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
    display: none;
}

/*** Fixes ***/

/* Datepicker */
.daterangepicker.opensright:before,
.daterangepicker.opensright:after {
    display: none;
}

/* Datepicker visual fix readonly */
.form-control:disabled, .form-control[readonly] {
    background-color: white;
}

/*** Theme update ***/

/* Regular day */
.bootstrap-datetimepicker-widget table td.day:not(.old):not(.new),
.daterangepicker .calendar-table td.available:not(.off),
.bootstrap-datetimepicker-widget table td span {
    color: var(--date-picker-btn-date-period-text-color);
    background-color: var(--date-picker-btn-date-period-background-color);
}

.bootstrap-datetimepicker-widget table td.day:not(.old):not(.new):hover,
.daterangepicker .calendar-table td.available:not(.off):hover,
.bootstrap-datetimepicker-widget table td span:hover {
    color: var(--date-picker-btn-date-period-text-color-hover) !important;
    background-color: var(--date-picker-btn-date-period-background-color-hover) !important;
}

/* Selected day */
.daterangepicker .calendar-table td.available:not(.off).active,
.bootstrap-datetimepicker-widget table td.day:not(.old):not(.new).active,
.bootstrap-datetimepicker-widget table td.day:not(.old):not(.new) span.active,
.bootstrap-datetimepicker-widget table td span.active {
    color: var(--date-picker-btn-date-period-text-color-active) !important;
    background-color: var(--date-picker-btn-date-period-background-color-active) !important;
}

.daterangepicker td.active:hover,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active:hover {
    color: var(--date-picker-btn-date-period-text-color-active-hover) !important;
    background-color: var(--date-picker-btn-date-period-background-color-active-hover) !important;
}

/* In range date */
.daterangepicker .calendar-table td.available.in-range {
    color: var(--date-picker-btn-date-period-text-color-in-range);
    background-color: var(--date-picker-btn-date-period-background-color-in-range);
}

.daterangepicker .calendar-table td.available.in-range:hover {
    color: var(--date-picker-btn-date-period-text-color-in-range-hover);
    background-color: var(--date-picker-btn-date-period-background-color-in-range-hover);
}

/* Other month day */
.bootstrap-datetimepicker-widget table td.day.new,
.bootstrap-datetimepicker-widget table td.day.old,
.daterangepicker .calendar-table td.available.off {
    color: var(--date-picker-btn-date-period-text-color-disabled);
    background-color: var(--date-picker-btn-date-period-background-color-disabled);
}

.bootstrap-datetimepicker-widget table td.day.new:hover,
.bootstrap-datetimepicker-widget table td.day.old:hover,
.daterangepicker .calendar-table td.available.off:hover {
    color: var(--date-picker-btn-date-period-text-color-disabled-hover) !important;
    background-color: var(--date-picker-btn-date-period-background-color-disabled-hover) !important;
}

/* Dropdown in date range */
.daterangepicker .calendar-table table th.month select {
    color: var(--date-picker-dropdown-text-color);
    background-color: var(--date-picker-dropdown-background-color);
}