.daterangepicker{display:none; position:absolute; z-index:3001; top:100px; left:20px; margin-top:5px; padding:0; width:278px; max-width:none; line-height:1em; background-color:#fff; border-radius:4px; border:1px solid #ccc; color:inherit;font-family:arial; font-size:15px; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.daterangepicker:before, 
.daterangepicker:after{content:''; display:inline-block; position:absolute; border-bottom-color:rgba(0, 0, 0, 0.2);}
.daterangepicker:before{top:-7px; border-right:7px solid transparent; border-left:7px solid transparent; border-bottom:7px solid #ccc;}
.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{left:0; right:0; width:0; margin-left:auto; margin-right:auto;}
.daterangepicker.openscenter:after{left:0; right:0; width:0; margin-left:auto; margin-right:auto;}
.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-bottom:initial; border-top:7px solid #ccc;}
.daterangepicker.drop-up:after{top:initial; bottom:-6px; border-bottom:initial; border-top:6px solid #fff;}
.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; max-width:270px;}
.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{display:inline-block; padding:3px; border:solid black; border-width:0 2px 2px 0; border-radius:0; 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{padding:1px 0 3px 0; min-width:32px; width:32px; height:24px; line-height:24px; border-radius:4px; border:1px solid transparent; font-size:12px; white-space:nowrap; white-space:nowrap; text-align:center; vertical-align:middle; cursor:pointer;}
.daterangepicker .calendar-table th{font-weight:500;}
.daterangepicker .calendar-table th:first-child{color:#e82828;}
.daterangepicker .calendar-table th:last-child{color:#0072bc;}
.daterangepicker .calendar-table{border:1px solid #fff; border-radius:4px; background-color:#fff;}
.daterangepicker .calendar-table table{width:100%; margin:0; 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:#bbb;}
.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:#999; text-decoration:line-through; 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:25%;}
.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; line-height:30px; text-align:center;}
.daterangepicker .calendar-time select.disabled{color:#ccc; cursor:not-allowed;}
.daterangepicker .drp-buttons{clear:both; display:none; padding:8px; line-height:12px; border-top:1px solid #ddd; text-align:right; vertical-align:middle;}
.daterangepicker .drp-selected{display:inline-block; padding-right:8px; font-size:12px;}
.daterangepicker .drp-buttons button{margin-left:5px;}
.daterangepicker.show-ranges .drp-calendar.left{border-left:1px solid #ddd;}
.daterangepicker .ranges{float:none; text-align:left; margin:0;}
.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.ltr .ranges,
.daterangepicker.single.ltr .drp-calendar{float:left;}
.daterangepicker.single.rtl .ranges,
.daterangepicker.single.rtl .drp-calendar{float:right;}
.daterangepicker.ltr{direction:ltr; text-align:left;}
.daterangepicker.ltr .drp-calendar.left{clear:left; margin-right:0;}
.daterangepicker.ltr .drp-calendar.left .calendar-table{border-right:none; border-top-right-radius:0; border-bottom-right-radius:0; }
.daterangepicker.ltr .drp-calendar.right{margin-left:0;}
.daterangepicker.ltr .drp-calendar.right .calendar-table{border-left:none; border-top-left-radius:0; border-bottom-left-radius:0; }
.daterangepicker.ltr .drp-calendar.left .calendar-table{padding-right:8px; }
.daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar{float:left; }
.daterangepicker.rtl{direction:rtl; text-align:right; } .daterangepicker.rtl .drp-calendar.left{clear:right; margin-left:0; }
.daterangepicker.rtl .drp-calendar.left .calendar-table{border-left:none; border-top-left-radius:0; border-bottom-left-radius:0; }
.daterangepicker.rtl .drp-calendar.right{margin-right:0; }
.daterangepicker.rtl .drp-calendar.right .calendar-table{border-right:none; border-top-right-radius:0; border-bottom-right-radius:0; }
.daterangepicker.rtl .drp-calendar.left .calendar-table{padding-left:12px; }
.daterangepicker.rtl .ranges, .daterangepicker.rtl .drp-calendar{text-align:right; float:right; } 
}

@media (min-width:730px){
.daterangepicker .ranges{width:auto;}
.daterangepicker.ltr .ranges{float:left;}
.daterangepicker.rtl .ranges{float:right;}
.daterangepicker .drp-calendar.left{clear:none !important;}
}