.daterangepicker  {
  position:  absolute;
  color:  inherit;
  background-color:  #fff;
  border-radius:  4px;
  padding:  4px;
  margin-top:  1px;
  top:  100px;
  left:  20px;
  margin-right:6px;
  margin-bottom:20px;
}
.daterangepicker:before,  .daterangepicker:after  {
  position:  absolute;
  display:  inline-block;
  border-bottom-color:  rgba(0,  0,  0,  0.2);
  content:  '';
}
.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.dropup  {
  margin-top:  -5px;
}
.daterangepicker.dropup:before  {
  top:  initial;
  bottom:  -7px;
  border-bottom:  initial;
  border-top:  7px solid #ccc;
}
.daterangepicker.dropup:after  {
  top:  initial;
  bottom:  -6px;
  border-bottom:  initial;
  border-top:  6px solid #fff;
}
.daterangepicker.dropdown-menu  {
  max-width:  none;
  z-index:  3001;
  margin-top:10px;
}
.daterangepicker.single .ranges,  .daterangepicker.single .calendar  {
  float:  none;
}
.daterangepicker.show-calendar .calendar  {
  display:  block;
}
.daterangepicker .calendar  {
  display:  none;
  max-width:  325px;
  margin:  4px;
}
.daterangepicker .calendar.single .calendar-table  {
  border:  none;
}
.daterangepicker .calendar th,  .daterangepicker .calendar td  {
  white-space:  nowrap;
  text-align:  center;
  min-width:  40px;
}
.daterangepicker .calendar-table  {
  border:  1px solid #fff;
  padding:  4px;
  border-radius:  4px;
  background-color:  #fff;
}
.daterangepicker table  {
  width:  100%;
  margin:  0;
}
.daterangepicker td,  .daterangepicker th  {
  text-align:  center;
  width:  40px;
  height:  40px;
  border-radius: 50%;
  white-space:  nowrap;
  cursor:  pointer;
}
.daterangepicker td {
  position:  relative;
  z-index:1;
}
.daterangepicker td.available:hover {
  border-radius:  50%;
  border-color:  transparent;
  color: #3b3a38;
}
.daterangepicker td.available:hover {
  background-color:  #ffecc6;
}
.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  {
  border-color:  transparent;
  color:  #000;
}
.daterangepicker td.in-range:before{
  content:'';
  position: absolute;
  top:5px;
  bottom:5px;
  left:0;
  right:0;
  background: #ffecc6;
  z-index:-1;
}

.daterangepicker td.active.start-date.available.in-range:before{
  display: none;
}

.daterangepicker td.active:before{
  content:'';
  position: absolute;
  top:5px;
  bottom:5px;
  left:0;
  right:0;
  border-radius: 50% 0 0 50%;
  background: #ffecc6;
  z-index:-1;
  display: block;
}

.daterangepicker td.active.end-date:before{
  border-radius: 0 50% 50% 0;
}

.daterangepicker td.active.end-date.start-date:before{
  border-radius: 50%;
}

.daterangepicker td.active:after{
  content:'';
  position: absolute;
  top:0px;
  border-radius: 50%;
  bottom:0px;
  left:0;
  right:0;
  background: #ffaa00;
  z-index:-1;
}

.daterangepicker td.start-date.end-date  {
  border-radius:  50%;
}
.daterangepicker td.active,  .daterangepicker td.active:hover  {
  background-color:  #ffaa00;
  color:  #3b3a38;
}

.daterangepicker td.in-range:hover{
  background: none;
}

.daterangepicker td.active.in-range:hover{
  background-color:  #ffaa00;
}


.daterangepicker th.month  {
  width:  auto;
}
.daterangepicker td.disabled,  .daterangepicker option.disabled  {
  color:  #999;
  cursor:  not-allowed;
  text-decoration:  line-through;
}
.daterangepicker select.monthselect,  .daterangepicker select.yearselect  {
  font-size:  12px;
  padding:  1px;
  height:  auto;
  margin:  0;
  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  {
  width:  50px;
  margin-bottom:  0;
}
.daterangepicker .input-mini  {
  border:  1px solid #ccc;
  border-radius:  4px;
  color:  #555;
  height:  30px;
  line-height:  30px;
  display:  block;
  vertical-align:  middle;
  margin:  0 0 5px 0;
  padding:  0 6px 0 28px;
  width:  100%;
}
.daterangepicker .input-mini.active  {
  border:  1px solid #08c;
  border-radius:  4px;
}
.daterangepicker .daterangepicker_input  {
  position:  relative;
}
.daterangepicker .daterangepicker_input i  {
  position:  absolute;
  left:  8px;
  top:  8px;
}
.daterangepicker.rtl .input-mini  {
  padding-right:  28px;
  padding-left:  6px;
}
.daterangepicker.rtl .daterangepicker_input i  {
  left:  auto;
  right:  8px;
}
.daterangepicker .calendar-time  {
  text-align:  center;
  margin:  5px auto;
  line-height:  30px;
  position:  relative;
  padding-left:  28px;
}
.daterangepicker .calendar-time select.disabled  {
  color:  #ccc;
  cursor:  not-allowed;
}

.ranges  {
  font-size:  11px;
  float:  none;
  margin:  4px;
  text-align:  left;
}
.ranges ul  {
  list-style:  none;
  margin:  0 auto;
  padding:  0;
  width:  100%;
}
.ranges li  {
  font-size:  13px;
  background-color:  #f5f5f5;
  border:  1px solid #f5f5f5;
  border-radius:  4px;
  color:  #08c;
  padding:  3px 12px;
  margin-bottom:  8px;
  cursor:  pointer;
}
.ranges li:hover  {
  background-color:  #08c;
  border:  1px solid #08c;
  color:  #fff;
}
.ranges li.active  {
  background-color:  #08c;
  border:  1px solid #08c;
  color:  #fff;
}

@media (min-width: 767px)  {
  .daterangepicker .ranges ul  {
    width:  160px;
  }
  .daterangepicker.single .ranges ul  {
    width:  100%;
  }
  .daterangepicker.single .calendar.left  {
    clear:  none;
  }
  .daterangepicker.single.ltr .ranges,  .daterangepicker.single.ltr .calendar  {
    float:  left;
  }
  .daterangepicker.single.rtl .ranges,  .daterangepicker.single.rtl .calendar  {
    float:  right;
  }
  .daterangepicker.ltr  {
    direction:  ltr;
    text-align:  left;
  }
  .daterangepicker.ltr .calendar.left  {
    clear:  left;
    margin-right:  0;
  }
  .daterangepicker.ltr .calendar.left .calendar-table  {
    border-right:  none;
    border-top-right-radius:  0;
    border-bottom-right-radius:  0;
  }
  .daterangepicker.ltr .calendar.right  {
    margin-left:  0;
  }
  .daterangepicker.ltr .calendar.right .calendar-table  {
    border-left:  none;
    border-top-left-radius:  0;
    border-bottom-left-radius:  0;
  }
  .daterangepicker.ltr .left .daterangepicker_input  {
    padding-right:  12px;
  }
  .daterangepicker.ltr .calendar.left .calendar-table  {
    padding-right:  12px;
  }
  .daterangepicker.ltr .ranges,  .daterangepicker.ltr .calendar  {
    float:  left;
  }
  .daterangepicker.rtl  {
    direction:  rtl;
    text-align:  right;
  }

  .daterangepicker.rtl .calendar.left  {
    clear:  right;
    margin-left:  0;
  }
  .daterangepicker.rtl .calendar.left .calendar-table  {

    border-left:  none;
    border-top-left-radius:  0;
    border-bottom-left-radius:  0;
  }
  .daterangepicker.rtl .calendar.right  {
    margin-right:  0;
  }
  .daterangepicker.rtl .calendar.right .calendar-table  {
    border-right:  none;
    border-top-right-radius:  0;
    border-bottom-right-radius:  0;
  }
  .daterangepicker.rtl .left .daterangepicker_input  {
    padding-left:  12px;
  }

  .daterangepicker.rtl .calendar.left .calendar-table  {
    padding-left:  12px;
  }

  .daterangepicker.rtl .ranges,  .daterangepicker.rtl .calendar  {
    text-align:  right;
    float:  right;
  }
}