.daterangepicker { display: none; position: absolute; top: 100px; left: 20px; z-index: 3001; overflow: hidden; margin-top: 7px; padding: 0; border: 1px solid var(--color-gray-40, #C6C6C6); border-radius: 8px; width: 360px; max-width: none; color: inherit; background-color: #fff; } 
.daterangepicker:before, .daterangepicker:after { display: inline-block; content: ''; position: absolute; border-bottom-color: rgba(0, 0, 0, 0.2); } 
.daterangepicker:before { top: -7px; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; } 
.daterangepicker:after { top: -6px; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; } 
.daterangepicker.opensleft:before { right: 9px; } 
.daterangepicker.opensleft:after { right: 10px; } 
.daterangepicker.openscenter:before { right: 0; left: 0; margin-right: auto; margin-left: auto; width: 0; } 
.daterangepicker.openscenter:after { right: 0; left: 0; margin-right: auto; margin-left: auto; width: 0; } 
.daterangepicker.opensright:before { left: 9px; } 
.daterangepicker.opensright:after { left: 10px; } 
.daterangepicker.drop-up { margin-top: -7px; } 
.daterangepicker.drop-up:before { top: initial; bottom: -7px; border-top: 7px solid #ccc; border-bottom: initial; } 
.daterangepicker.drop-up:after { top: initial; bottom: -6px; border-top: 6px solid #fff; border-bottom: initial; } 
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar { float: none; } 
.daterangepicker.single .drp-selected { display: none; } 
.daterangepicker.show-calendar .drp-calendar { display: block; } 
.daterangepicker.show-calendar .drp-buttons { display: block; } 
.daterangepicker.auto-apply .drp-buttons { display: none; } 
.daterangepicker .drp-calendar { display: none; } 
.daterangepicker .drp-calendar.single .calendar-table { border: none; } 
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { white-space: nowrap; white-space: nowrap; width: 48px; text-align: center; vertical-align: middle; cursor: pointer; } 
.daterangepicker .calendar-table th { border: 0; height: 40px; font-size: 15px; font-weight: 400; } 
.daterangepicker .calendar-table td { border: 0; border-radius: 100%; height: 48px; } 
.daterangepicker .calendar-table { padding: 0 12px 0; border: 1px solid #fff; border-radius: 4px; background-color: #fff; } 
.daterangepicker .calendar-table table { margin: 0 auto; border-collapse: collapse; border-spacing: 0; width: auto; } 
.daterangepicker .calendar-table .controlArea { position: relative; } 
.daterangepicker .calendar-table .controlArea::before { display: block; content: ""; position: absolute; top: 0; left: -12px; width: calc(100% + 24px); height: 100%; background-color: var(--color-secondary-5, #EDF1F5); } 
.daterangepicker .calendar-table .controlArea th { height: 64px; } 
.daterangepicker .calendar-table .controlArea .available { position: absolute; top: 0; width: 32px; height: 100%; } 
.daterangepicker .calendar-table .controlArea .available > button { border: 0; width: 100%; height: 100%; background-color: transparent; } 
.daterangepicker .calendar-table .controlArea .available > button::before { display: block; content: ""; width: 100%; height: 100%; } 
.daterangepicker .calendar-table .controlArea .available.prev > button::before { right: 85%; background: url(../../images/v2/component/ico-input-cal-prev.svg) no-repeat left center !important; } 
.daterangepicker .calendar-table .controlArea .available.next > button::before { left: 85%; background: url(../../images/v2/component/ico-input-cal-next.svg) no-repeat right center !important; } 
.daterangepicker .calendar-table .controlArea .month select { margin: 0 4px; padding: 0 24px 0 16px; border: 0; border-radius: 6px; width: auto; max-width: 112px; height: 40px; text-align: left; font-size: 19px; background-color: transparent; background-image: url(../../images/v2/component/ico-input-cal-select-arr.svg); background-position: right 8px center; } 
.daterangepicker .calendar-table .controlArea .month select:focus { outline: 1px solid var(--color-secondary-30); outline-offset: 0; } 
.daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; } 
.daterangepicker td.off { color: var(--color-gray-60, #717171); } 
.daterangepicker td.in-range { border-radius: 0; background-color: var(--color-primary-10, #D3E1FB); } 
.daterangepicker td.start-date { border-radius: 100% 0 0 100%; } 
.daterangepicker td.end-date { border-radius: 0 100% 100% 0; } 
.daterangepicker td.start-date.end-date { border-radius: 100%; } 
.daterangepicker td.today { position: relative; border-color: var(--color-primary, #246BEB); transform: translate(0); -webkit-transform: translate(0); } 
.daterangepicker td.today::before { display: block; content: ""; position: absolute; top: 1px; left: 1px; z-index: -1; border: 1px solid var(--color-primary, #246BEB); border-radius: 100%; width: 44px; height: 44px; } 
.daterangepicker td.active, .daterangepicker td.active:hover {color: #fff; background-color: var(--color-primary, #246BEB); } 
.daterangepicker th.month { width: auto; } 
.daterangepicker td.disabled, .daterangepicker option.disabled { text-decoration: line-through; color: #999; cursor: not-allowed; } 
.daterangepicker select.monthselect, .daterangepicker select.yearselect { margin: 0; cursor: default; } 
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { margin: 0 auto; padding: 2px; border: 1px solid #eee; width: 50px; font-size: 12px; background: #eee; outline: 0; } 
.daterangepicker .calendar-time { position: relative; margin: 4px auto 0 auto; text-align: center; line-height: 30px; } 
.daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed; } 
.daterangepicker .drp-buttons { display: none; padding: 16px; border-top: 1px solid var(--color-gray-40, #C6C6C6); text-align: right; vertical-align: middle; clear: both; } 
.daterangepicker .drp-selected { display: inline-block; padding-right: 8px; font-size: 15px; } 
.daterangepicker .drp-buttons .btn { margin-left: 8px; padding: 0 12px; height: 40px; font-size: 15px; font-weight: bold; font-weight: 400; } 
.daterangepicker .drp-buttons .cancelBtn { border-color: var(--color-secondary-90, #000B17); color: var(--color-secondary-90, #000B17); background-color: #fff; } 
.daterangepicker .drp-buttons .applyBtn { border-color: var(--color-primary, #246BEB); color: #fff; background-color: var(--color-primary, #246BEB); } 
.daterangepicker.show-ranges.single.rtl .drp-calendar.left { border-right: 1px solid #ddd; } 
.daterangepicker.show-ranges.single.ltr .drp-calendar.left { border-left: 1px solid #ddd; } 
.daterangepicker.show-ranges.rtl .drp-calendar.right { border-right: 1px solid #ddd; } 
.daterangepicker.show-ranges.ltr .drp-calendar.left { border-left: 1px solid #ddd; } 
.daterangepicker .ranges { margin: 0; text-align: left; float: none; } 
.daterangepicker .ranges ul { margin: 0 auto; padding: 0; width: 100%; list-style: none; } 
.daterangepicker .ranges li { padding: 8px 12px; font-size: 12px; cursor: pointer; } 
.daterangepicker .ranges li:hover { background-color: #eee; } 
.daterangepicker .ranges li.active { color: #fff; background-color: #08c; } 
/* Larger Screen Styling */
@media (min-width: 564px){
 .daterangepicker .ranges ul { width: 140px; } 
 .daterangepicker.single .ranges ul { width: 100%; } 
 .daterangepicker.single .drp-calendar.left { clear: none; } 
 .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar { float: left; } 
 .daterangepicker { text-align: left; direction: ltr; } 
 .daterangepicker .drp-calendar.left { margin-right: 0; clear: left; } 
 .daterangepicker .drp-calendar.left .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } 
 .daterangepicker .drp-calendar.right { margin-left: 0; } 
 .daterangepicker .drp-calendar.right .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } 
 }
@media (min-width: 730px){
 .daterangepicker .ranges { width: auto; } 
 .daterangepicker .ranges { float: left; } 
 .daterangepicker.rtl .ranges { float: right; } 
 .daterangepicker .drp-calendar.left { clear: none !important; } 
 }

@media (max-width: 767px) {
    .daterangepicker{
        width: 247px;
        font-size: 15px;
    }
    .daterangepicker .calendar-table .controlArea .month select{
        height: 30px;
        font-size: 15px;
        padding-left: 10px;
    }
    .daterangepicker .calendar-table .controlArea th{
        height: 54px;
    }
    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
        width: 30px;
    }
    .daterangepicker .calendar-table th{
        height: 25px;
        font-size: 13px;
    }
    .daterangepicker .calendar-table td{
        height: 30px;
    }
    .daterangepicker td.today::before{
        width: 28px;
        height: 28px;
    }
    .daterangepicker .drp-buttons{
        padding: 10px 12px;
    }
    .daterangepicker .drp-selected{
        font-size: 13px;
        padding: 0 0 5px;
        width: 100%;
    }
}