.daterangepicker {

  position: absolute;

  color: inherit;

  background-color: #fff;

  border-radius: 4px;

  border: 1px solid #dee0e2;

  width: 278px;

  max-width: none;

  padding: 45px 30px 30px 30px;

  margin-top: 7px;

  top: 100px;

  left: 20px;

  z-index: 3001;

  display: none;

  font-family: arial;

  font-size: 15px;

  line-height: 1em;

  -webkit-transform: translate(19px, 20px);

  -webkit-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);

  -moz-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);

   box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);

   -webkit-animation-name: "rangerpicker-fade";

   animation-name: "rangerpicker-fade";

   -webkit-animation-duration: .25s;

   animation-duration: .25s;

}





.daterangepicker.opensright:after {

  content: "";

  display: block;

  position: absolute;

  background: url("../images/caret.png") no-repeat;

  width: 20px;

  height: 10px;

  position: absolute;

  top: -10px;

  left: 50px;

}



.daterangepicker.drop-up {

  margin-top: -7px;

}



.daterangepicker.drop-up:before {

  top: initial;

  bottom: -7px;

  border-bottom: initial;

  border-top: 7px solid #ccc;

}

var(--color-primary)

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {

  float: none;

}



.daterangepicker.single .drp-selected {

  display: none;

}
var(--color-primary)
var(--color-primary)

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

  display: inline-block;

  width: 34px;

  height: 34px;

}



.daterangepicker .calendar-table .next span:before, .daterangepicker .calendar-table .prev span:before {

  content: "";

  font-family: FontAwesome;

  font-size: 16px;

  line-height: 32px;
var(--color-primary)
  color: var(--color-primary);

  display: inline-block;

  width: 34px;

  height: 34px;

  border: 1px solid #dfe1e3;

  border-radius: 50%;

  -webkit-transition: .25s ease-in-out;

  -moz-transition: .25s ease-in-out;

  -ms-transition: .25s ease-in-out;

  -o-transition: .25s ease-in-out;

  transition: .25s ease-in-out;

}



.daterangepicker .calendar-table .next span:hover:before, .daterangepicker .calendar-table .prev span:hover:before {

  color: white;

  background-color: var(--color-primary);

  border: 1px solid var(--color-primary);

}



.daterangepicker .calendar-table .next span:before {

  content: "";

}



.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {

  white-space: nowrap;

  text-align: center;

  vertical-align: middle;

  min-width: 32px;

  width: 35px;

  height: 30px;

  line-height: 24px;

  font-size: 14px;

  color: #393c3f;

  border-radius: 4px;

  border: 1px solid transparent;

  white-space: nowrap;

  cursor: pointer;

}



.daterangepicker .calendar-table td {

  border: 1px solid #dee0e2;

}



.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {

  border: 1px solid #dee0e2 !important;

  color: #bdc1c5;

}



.daterangepicker .calendar-table {

  border: 1px solid #fff;

  border-var(--color-primary) 4px;

  background-color: #fff;

}



.daterangepicker .calendar-table table {

  width: var(--color-primary)

  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;

  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: var(--color-primary);

  border-color: transparent;

  color: #fff;

}



.daterangepicker th.month {

  width: auto;

  font-size: 18px;

  font-family: Lora;

  font-weight: 300;

  margin-bottom: 20px;

}



.daterangepicker thead tr:first-child{

  -webkit-transform: translateY(-15px);

}



.daterangepicker thead tr:last-child{

  font-weight: 500;

  font-size: 12px;

  color: #393c3f;

}



.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-top: 20px;

  display: none;

  line-height: 12px;

  vertical-align: middle;

}



.daterangepicker .drp-selected {

  display: none;

  font-size: 12px;

  padding-right: 8px;

}



.daterangepicker .cancelBtn{

  background: none;

  color: #7c838b;

  float: left;

  text-transform: uppercase;

  font-family: Barlow;

}



.daterangepicker .cancelBtn:before{

  content: "";

  font-family: FontAwesome;

  display: inline-block;

  margin-right: 10px;

}



.daterangepicker .applyBtn,

.daterangepicker .applyBtn[disabled="disabled"]{

  background: none;

  color: var(--color-primary);

  float: right;

  border: none;

  opacity: 1;

  text-transform: uppercase;

  font-family: Barlow;

}



.daterangepicker .applyBtn:hover{

  background: none;

  color: var(--color-primary);

}



.daterangepicker tbody tr:first-child td{

  border-top: 2px solid #eeeff0 !important;

}



.daterangepicker .applyBtn:before{

  content: "";

  font-family: FontAwesome;

  display: inline-block;

  margin-right: 10px;

}



.daterangepicker .drp-buttons .btn {

  font-size: 14px;

  font-weight: 500;

  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;

  }

}