.daterangepicker { position: absolute; margin-top: 7px; padding: 0; width: 278px; max-width: none; background-color: #fff; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 0 10px rgb(0 0 0 / .2); display: none; font-family: arial; font-size: 15px; line-height: 1em; color: inherit; top: 100px; left: 20px; z-index: 3001; }
.daterangepicker:before , .daterangepicker:after { position: absolute; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent; display: inline-block; top: -7px; content: ""; }
.daterangepicker:after { border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; top: -6px; }

.daterangepicker.opensleft:before { right: 9px; }
.daterangepicker.opensleft:after { right: 10px; }
.daterangepicker.openscenter:before , .daterangepicker.openscenter:after { margin-right: auto; margin-left: auto; width: 0; right: 0; left: 0; }
.daterangepicker.opensright:before { left: 9px; }
.daterangepicker.opensright:after { left: 10px; }

.daterangepicker.drop-up { margin-top: -7px; }
.daterangepicker.drop-up:before { border-bottom: initial; border-top: 7px solid #ccc; top: initial; bottom: -7px; }
.daterangepicker.drop-up:after { border-bottom: initial; border-top: 6px solid #fff; top: initial; bottom: -6px; }

.daterangepicker.single .daterangepicker .ranges , .daterangepicker.single .drp-calendar { float: none; }
.daterangepicker.single .drp-selected { display: none; }
.daterangepicker.show-calendar .drp-calendar , .daterangepicker.show-calendar .drp-buttons { display: block; }
.daterangepicker.auto-apply .drp-buttons { display: none; }

.daterangepicker .drp-calendar { max-width: 270px; display: none; }
.daterangepicker .drp-calendar.left { padding: 8px 0 8px 8px; }
.daterangepicker .drp-calendar.right { padding: 8px; }
.daterangepicker .drp-calendar.single .calendar-table { border: none; }

.daterangepicker .calendar-table .next span , .daterangepicker .calendar-table .prev span { padding: 3px; border: solid black; border-width: 0 2px 2px 0; border-radius: 0; display: inline-block; color: #fff; }
.daterangepicker .calendar-table .next span { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.daterangepicker .calendar-table .prev span { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.daterangepicker .calendar-table th , .daterangepicker .calendar-table td { width: 32px; min-width: 32px; height: 28px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; text-align: center; vertical-align: middle; line-height: 28px; font-size: 13px; cursor: pointer; }
.daterangepicker .calendar-table { background-color: #fff; border: 1px solid #fff; border-radius: 4px; }
.daterangepicker .calendar-table table { margin: 0; width: 100%; border-spacing: 0; border-collapse: collapse; }

.daterangepicker td.available:hover , .daterangepicker th.available:hover { background-color: #eee; border-color: transparent; color: inherit; }
.daterangepicker td.week , .daterangepicker th.week { font-size: 80%; color: #ccc; }
.daterangepicker td.off , .daterangepicker td.off.in-range , .daterangepicker td.off.start-date , .daterangepicker td.off.end-date { background-color: #fff; border-color: transparent; color: #999; }
.daterangepicker td.in-range { background-color: #ebf4f8; border-color: transparent; border-radius: 0; color: #000; }
.daterangepicker td.start-date { border-radius: 4px 0 0 4px; }
.daterangepicker td.end-date { border-radius: 0 4px 4px 0; }
.daterangepicker td.start-date.end-date { border-radius: 4px; }
.daterangepicker td.active , .daterangepicker td.active:hover { background-color: #357ebd; border-color: transparent; color: #fff; }
.daterangepicker th.month { width: auto; }
.daterangepicker td.disabled , .daterangepicker option.disabled { color: #d3d3d3; cursor: not-allowed; }

.daterangepicker select.monthselect , .daterangepicker select.yearselect { margin: 0; padding: 1px; height: auto; font-size: 12px; cursor: default; }
.daterangepicker select.monthselect { margin-right: 2%; width: 56%; }
.daterangepicker select.yearselect { width: 40%; }
.daterangepicker select.hourselect , .daterangepicker select.minuteselect , .daterangepicker select.secondselect , .daterangepicker select.ampmselect { margin: 0 auto; padding: 2px; width: 50px; background: #eee; border: 1px solid #eee; font-size: 12px; 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 { padding: 8px; border-top: 1px solid #ddd; display: none; text-align: right; line-height: 12px; vertical-align: middle; clear: both; }
.daterangepicker .drp-selected { padding-right: 8px; display: inline-block; font-size: 12px; }
.daterangepicker .drp-buttons .btn { margin-left: 8px; padding: 4px 8px; width: auto; background-color: #efefef; border: 1px transparent solid; border-radius: .2rem; line-height: 1.5; font-size: 12px; font-weight: bold; }
.daterangepicker .drp-buttons .btn.btn-primary { background-color: #007bff; border-color: #007bff; color: #fff; }
.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 { float: none; margin: 0; text-align: left; }
.daterangepicker.show-calendar .ranges { margin-top: 8px; }
.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 { background-color: #08c; color: #fff; }

/*  Larger Screen Styling */
@media (min-width: 564px) {
	.daterangepicker { width: auto; }
	.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 { direction: ltr; text-align: left; }
	.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; }
	.daterangepicker .drp-calendar.left .calendar-table { padding-right: 8px; }
	.daterangepicker .ranges, .daterangepicker .drp-calendar { float: left; }
}
@media (min-width: 730px) {
	.daterangepicker .ranges { width: auto; }
	.daterangepicker .ranges { float: left; }
	.daterangepicker.rtl .ranges { float: right; }
	.daterangepicker .drp-calendar.left { clear: none !important; }
}