.daterangepicker { position: absolute; max-width: none; padding: 0.875rem 0 0.5rem; display: none; } .daterangepicker tbody:before { content: "@"; display: block; line-height: 6px; text-indent: -99999px; } [dir=rtl] .daterangepicker { direction: rtl !important; } .daterangepicker table thead tr:first-child { height: 52px !important; position: relative; } .daterangepicker .calendar-table td { border-radius: 0.375rem; } .daterangepicker table thead th select, .daterangepicker table thead td select { background-color: transparent; font-weight: 500; } html:not([dir=rtl]) .daterangepicker .drp-calendar:not(.single).left .prev { left: 0.25rem; } [dir=rtl] .daterangepicker .drp-calendar:not(.single).left .prev { right: 0.25rem; } html:not([dir=rtl]) .daterangepicker .drp-calendar:not(.single).right .next { right: 0.25rem; } [dir=rtl] .daterangepicker .drp-calendar:not(.single).right .next { left: 0.25rem; } .daterangepicker.auto-apply .drp-buttons { display: none; } .daterangepicker.show-calendar .drp-calendar, .daterangepicker.show-calendar .drp-buttons { display: block; } .daterangepicker .drp-calendar { display: none; padding: 0 0.8rem 0.8rem; } .daterangepicker .drp-calendar.single .calendar-table { border: 0; } .daterangepicker.single .drp-selected { display: none; } .daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar { float: none; } .daterangepicker .calendar-table { border: 0; } .daterangepicker .calendar-table .next, .daterangepicker .calendar-table .prev { position: absolute; top: 0.65rem; min-width: unset; height: 1.875rem; width: 1.875rem; border-radius: 0.375rem; display: flex; justify-content: center; align-items: center; } .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { display: inline-block; border-width: 0 2px 2px 0; border-style: solid; border-radius: 0; height: 0.45rem; width: 0.45rem; } .daterangepicker .calendar-table .prev span { margin-right: -0.225rem; transform: rotate(135deg); } [dir=rtl] .daterangepicker .calendar-table .prev span { margin-left: -0.225rem; margin-right: 0; transform: rotate(-45deg); } .daterangepicker .calendar-table .next span { margin-left: -0.225rem; transform: rotate(-45deg); } [dir=rtl] .daterangepicker .calendar-table .next span { margin-left: 0; margin-right: -0.225rem; transform: rotate(135deg); } .daterangepicker .calendar-table table { border: 0; border-spacing: 0; border-collapse: collapse; margin: 0; width: 100%; } .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { vertical-align: middle; min-width: 2.25rem; line-height: calc(2.25rem - 2px); white-space: nowrap; text-align: center; cursor: pointer; } .daterangepicker .calendar-table td { height: 2.25rem; width: 2.25rem; } .daterangepicker .calendar-table th { width: 2.25rem; height: 2.75rem; } .daterangepicker .calendar-table tr:first-child th:not(.prev):not(.next) { height: 2.25rem; } .daterangepicker .calendar-table .daterangepicker .single .next { float: right; } html:not([dir=rtl]) .daterangepicker .calendar-table .daterangepicker .single .next { right: 0.625rem; } [dir=rtl] .daterangepicker .calendar-table .daterangepicker .single .next { left: 0.625rem; } html:not([dir=rtl]) .daterangepicker .calendar-table .daterangepicker .single .prev { right: 3.125rem; } [dir=rtl] .daterangepicker .calendar-table .daterangepicker .single .prev { left: 3.125rem; } .daterangepicker .calendar-table .daterangepicker .single th.month { position: absolute; top: 0.5rem; } html:not([dir=rtl]) .daterangepicker .calendar-table .daterangepicker .single th.month { text-align: left; left: 0.562rem; } [dir=rtl] .daterangepicker .calendar-table .daterangepicker .single th.month { text-align: right; right: 0.562rem; } html:not([dir=rtl]) .daterangepicker td.start-date:not(.end-date) { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; } html:not([dir=rtl]) .daterangepicker td.end-date:not(.start-date) { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } .daterangepicker td.in-range:not(.start-date):not(.end-date) { border-radius: 0 !important; } [dir=rtl] .daterangepicker td.start-date:not(.end-date) { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } [dir=rtl] .daterangepicker td.end-date:not(.start-date) { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; } .daterangepicker td.disabled, .daterangepicker option.disabled { cursor: not-allowed; text-decoration: line-through; } .daterangepicker th.month { width: auto; } .daterangepicker select.monthselect, .daterangepicker select.yearselect { height: auto; padding: 1px; margin: 0; border: 0; cursor: default; } .daterangepicker select:focus-visible { outline: 0; } .daterangepicker select.monthselect { width: 46%; margin-right: 2%; } [dir=rtl] .daterangepicker select.monthselect { margin-left: 2%; margin-right: 0; } .daterangepicker select.yearselect { width: 40%; } .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { outline: 0; width: 3.125rem; padding: 2px; margin: 0 auto; border-radius: 0.25rem; } .daterangepicker .calendar-time { position: relative; line-height: 30px; text-align: center; margin: 0 auto; } .daterangepicker .calendar-time select.disabled { cursor: not-allowed; } .daterangepicker .drp-buttons { padding: 0.8rem 1.2rem; clear: both; display: none; text-align: right; vertical-align: middle; } .daterangepicker .drp-buttons .btn { margin-left: 0.96rem; } [dir=rtl] .daterangepicker .drp-buttons { text-align: left; } [dir=rtl] .daterangepicker .drp-buttons .btn { margin-left: 0; margin-right: 0.96rem; } .daterangepicker .drp-selected { width: 100%; padding-bottom: 0.8rem; display: block; } .daterangepicker .ranges { text-align: left; float: none; margin: 0; } .daterangepicker .ranges ul { padding: 0.5rem; margin: 0 auto; list-style: none; width: 100%; } .daterangepicker .ranges li { border-radius: 0.375rem; padding: 0.543rem 1.25rem; } .daterangepicker .ranges li:not(:first-child) { margin-top: 0.125rem; } [dir=rtl] .daterangepicker .ranges { text-align: right; } .daterangepicker.show-calendar .ranges { border-bottom: 1px solid; } .daterangepicker.show-calendar .ranges:empty { display: none; } html:not([dir=rtl]) .daterangepicker .drp-calendar.right { padding-left: 1px; } [dir=rtl] .daterangepicker .drp-calendar.right { padding-right: 1px; } .light-style .daterangepicker { z-index: 1091 !important; border: 0 solid #e4e6e8; border-radius: 0.375rem; width: calc(17.35rem + 0 * 2); box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1); background-color: #fff; } .light-style .daterangepicker table thead { background: #fff; } .light-style .daterangepicker table thead th, .light-style .daterangepicker table thead td { color: #384551; } .light-style .daterangepicker table thead th.prev span, .light-style .daterangepicker table thead th.next span, .light-style .daterangepicker table thead td.prev span, .light-style .daterangepicker table thead td.next span { border-color: #646e78 !important; } .light-style .daterangepicker table thead th select, .light-style .daterangepicker table thead td select { background-color: transparent; color: #384551; } .light-style .daterangepicker table tbody th, .light-style .daterangepicker table tbody td { color: #384551; } .light-style .daterangepicker.drop-up { margin-top: -0.125rem; } .light-style .daterangepicker.with-week-numbers { width: calc(19.6rem + 0 * 2); } .light-style .daterangepicker .calendar-table td { border-radius: 0.375rem; } .light-style .daterangepicker .drp-selected { font-size: 0.8125rem; } .light-style .daterangepicker .calendar-table thead tr:last-child th { border-radius: 0 !important; color: #384551; font-size: 0.8125rem; font-weight: 400; } .light-style .daterangepicker th.month { color: #384551; font-weight: 400; } .light-style .daterangepicker td.week, .light-style .daterangepicker th.week { color: #384551; font-weight: 400; } .light-style .daterangepicker td.disabled, .light-style .daterangepicker option.disabled { color: #a7acb2; } .light-style .daterangepicker td.available:not(.active):hover, .light-style .daterangepicker th.available:hover { background-color: rgba(34, 48, 62, 0.06); } .light-style .daterangepicker td.off { color: #a7acb2; } .light-style .daterangepicker .ranges li { cursor: pointer; padding: 0.543rem 1.25rem; color: #384551; } .light-style .daterangepicker .ranges li:hover { background-color: rgba(34, 48, 62, 0.06); } .light-style .daterangepicker .calendar-table .next, .light-style .daterangepicker .calendar-table .prev { background-color: rgba(34, 48, 62, 0.08) !important; } .light-style .daterangepicker .calendar-table .next span, .light-style .daterangepicker .calendar-table .prev span { border-color: #646e78; } .light-style .daterangepicker select.hourselect, .light-style .daterangepicker select.minuteselect, .light-style .daterangepicker select.secondselect, .light-style .daterangepicker select.ampmselect { background: #e9eaec; font-size: 0.8125rem; color: #646e78; border: 1px solid transparent; } .light-style .daterangepicker select.hourselect option, .light-style .daterangepicker select.minuteselect option, .light-style .daterangepicker select.secondselect option, .light-style .daterangepicker select.ampmselect option { background: #fff; } .light-style .daterangepicker select.monthselect option, .light-style .daterangepicker select.yearselect option { color: #646e78; background: transparent; } .light-style .daterangepicker select.monthselect option:disabled, .light-style .daterangepicker select.yearselect option:disabled { color: #a7acb2; } .light-style .daterangepicker .calendar-time select.disabled { color: #a7acb2; } @media (min-width: 768px) { .light-style .daterangepicker { width: auto !important; } .light-style .daterangepicker:not(.single) .drp-selected { width: auto; padding: 0; display: inline-block; } .light-style:not([dir=rtl]) .daterangepicker:not(.single) .drp-calendar { float: left; } .light-style:not([dir=rtl]) .daterangepicker:not(.single) .drp-calendar.left { padding-right: 1rem; } .light-style[dir=rtl] .daterangepicker:not(.single) .drp-calendar { float: right; } .light-style[dir=rtl] .daterangepicker:not(.single) .drp-calendar.left { padding-left: 1rem; } } @media (min-width: 992px) { .light-style .daterangepicker .ranges { border-bottom: 0; } .light-style:not([dir=rtl]) .daterangepicker .ranges { float: left; } .light-style[dir=rtl] .daterangepicker .ranges { float: right; } } .dark-style .daterangepicker { box-shadow: 0 0.1875rem 0.5rem 0 rgba(20, 20, 29, 0.22); width: calc(17.35rem + 0 * 2); margin-top: 0.125rem; background-color: #2b2c40; border: 0 solid #4e4f6c; border-radius: 0.375rem; z-index: 1091 !important; } .dark-style .daterangepicker table thead { background: #2b2c40; } .dark-style .daterangepicker table thead th, .dark-style .daterangepicker table thead td { color: #d5d5e2; } .dark-style .daterangepicker table thead th.prev span, .dark-style .daterangepicker table thead th.next span, .dark-style .daterangepicker table thead td.prev span, .dark-style .daterangepicker table thead td.next span { border-color: #d5d5e2 !important; } .dark-style .daterangepicker table thead th select, .dark-style .daterangepicker table thead td select { background-color: transparent; color: #d5d5e2; } .dark-style .daterangepicker table tbody th, .dark-style .daterangepicker table tbody td { color: #d5d5e2; } .dark-style .daterangepicker.with-week-numbers { width: calc(19.6rem + 0 * 2); } .dark-style .daterangepicker.drop-up { margin-top: -0.125rem; } .dark-style .daterangepicker .calendar-table td { border-radius: 0.375rem; } .dark-style .daterangepicker .drp-selected { font-size: 0.8125rem; } .dark-style .daterangepicker .calendar-table thead tr:last-child th { border-radius: 0 !important; color: #d5d5e2; font-size: 0.8125rem; font-weight: 400; } .dark-style .daterangepicker th.month { color: #d5d5e2; font-weight: 400; } .dark-style .daterangepicker td.week, .dark-style .daterangepicker th.week { color: #d5d5e2; font-weight: 400; } .dark-style .daterangepicker td.disabled, .dark-style .daterangepicker option.disabled { color: #7e7f96; } .dark-style .daterangepicker td.available:not(.active):hover, .dark-style .daterangepicker th.available:hover { background-color: rgba(230, 230, 241, 0.06); } .dark-style .daterangepicker td.off { color: #7e7f96; } .dark-style .daterangepicker .ranges li { cursor: pointer; padding: 0.543rem 1.25rem; color: #d5d5e2; } .dark-style .daterangepicker .ranges li:hover { background-color: rgba(230, 230, 241, 0.06); } .dark-style .daterangepicker .calendar-table .next, .dark-style .daterangepicker .calendar-table .prev { background-color: rgba(230, 230, 241, 0.08) !important; } .dark-style .daterangepicker .calendar-table .next span, .dark-style .daterangepicker .calendar-table .prev span { border-color: #b2b2c4; } .dark-style .daterangepicker select.hourselect, .dark-style .daterangepicker select.minuteselect, .dark-style .daterangepicker select.secondselect, .dark-style .daterangepicker select.ampmselect { background: #4a4b69; border: 1px solid transparent; font-size: 0.8125rem; color: #b2b2c4; } .dark-style .daterangepicker select.hourselect option, .dark-style .daterangepicker select.minuteselect option, .dark-style .daterangepicker select.secondselect option, .dark-style .daterangepicker select.ampmselect option { background: #2b2c40; } .dark-style .daterangepicker select.monthselect option, .dark-style .daterangepicker select.yearselect option { color: #b2b2c4; background: #2b2c40; } .dark-style .daterangepicker select.monthselect option:disabled, .dark-style .daterangepicker select.yearselect option:disabled { color: #7e7f96; } .dark-style .daterangepicker .calendar-time select.disabled { color: #9090a6; } @media (min-width: 768px) { .dark-style .daterangepicker { width: auto !important; } .dark-style .daterangepicker:not(.single) .drp-selected { display: inline-block; width: auto; padding: 0; } .dark-style:not([dir=rtl]) .daterangepicker:not(.single) .drp-calendar { float: left; } .dark-style:not([dir=rtl]) .daterangepicker:not(.single) .drp-calendar.left { padding-right: 1rem; } .dark-style[dir=rtl] .daterangepicker:not(.single) .drp-calendar { float: right; } .dark-style[dir=rtl] .daterangepicker:not(.single) .drp-calendar.left { padding-left: 1rem; } } @media (min-width: 992px) { .dark-style .daterangepicker .ranges { border-bottom: 0; } .dark-style:not([dir=rtl]) .daterangepicker .ranges { float: left; } .dark-style[dir=rtl] .daterangepicker .ranges { float: right; } }