.daterangepicker {

    position: absolute;

    color: inherit;

    background-color: #fff;

    border-radius: 4px;

    border: 1px solid #ddd;

    width: 278px;

    max-width: none;

    padding: 0;

    margin-top: 7px;

    top: 100px;

    left: 20px;

    z-index: 3001;

    display: none;

    font-family: arial;

    font-size: 15px;

    line-height: 1em;

  }

  

  .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.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 {

    color: #fff;

    border: solid black;

    border-width: 0 2px 2px 0;

    border-radius: 0;

    display: inline-block;

    padding: 3px;

  }

  

  .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 {

    white-space: nowrap;

    text-align: center;

    vertical-align: middle;

    min-width: 32px;

    width: 32px;

    height: 24px;

    line-height: 24px;

    font-size: 12px;

    border-radius: 4px;

    border: 1px solid transparent;

    white-space: nowrap;

    cursor: pointer;

  }

  

  .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: #999;

  }

  

  .daterangepicker td.in-range {

    background-color: #ebf4f8;

    border-color: transparent;

    color: #000;

    border-radius: 0;

  }

  

  .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;

    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: 0 auto;

    background: #eee;

    border: 1px solid #eee;

    padding: 2px;

    outline: 0;

    font-size: 12px;

  }

  

  .daterangepicker .calendar-time {

    text-align: center;

    margin: 4px auto 0 auto;

    line-height: 30px;

    position: relative;

  }

  

  .daterangepicker .calendar-time select.disabled {

    color: #ccc;

    cursor: not-allowed;

  }

  

  .daterangepicker .drp-buttons {

    clear: both;

    text-align: right;

    padding: 8px;

    border-top: 1px solid #ddd;

    display: none;

    line-height: 12px;

    vertical-align: middle;

  }

  

  .daterangepicker .drp-selected {

    display: inline-block;

    font-size: 12px;

    padding-right: 8px;

  }

  

  .daterangepicker .drp-buttons .btn {

    margin-left: 8px;

    font-size: 12px;

    font-weight: bold;

    padding: 4px 8px;

  }

  

  .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;

    text-align: left;

    margin: 0;

  }

  

  .daterangepicker.show-calendar .ranges {

    margin-top: 8px;

  }

  

  .daterangepicker .ranges ul {

    list-style: none;

    margin: 0 auto;

    padding: 0;

    width: 100%;

  }

  

  .daterangepicker .ranges li {

    font-size: 12px;

    padding: 8px 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 {

      clear: left;

      margin-right: 0;

    }

  

    .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;

    }

  }