$rdr-calendar-wrapper-color: #000000 !default;
$rdr-calendar-wrapper-bg: #ffffff !default;
$rdr-calendar-wrapper-font-size: 12px !default;

$rdr-day-color: #1d2429 !default;

$rdr-defined-ranges-wrapper-bg: #ffffff !default;
$rdr-defined-ranges-wrapper-border: 1px solid #eff2f7 !default;

$rdr-static-bange-bg: #ffffff !default;
$rdr-static-bange-border: 1px solid #eff2f7 !default;
$rdr-static-bange-hover-bg: #eff2f7 !default;
$rdr-static-bange-color: #1d2429 !default;

$rdr-date-display-wrapper-bg: #eff2f7 !default;
$rdr-date-display-item-bg: #ffffff !default;
$rdr-date-display-item-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21) !default;
$rdr-date-display-item-color: #849095 !default;


.rdrCalendarWrapper{
  color: $rdr-calendar-wrapper-color;
  background: $rdr-calendar-wrapper-bg;
  font-size: $rdr-calendar-wrapper-font-size;
}

.rdrDateDisplayWrapper{
  background-color: $rdr-date-display-wrapper-bg;
}

.rdrDateDisplay{
  margin: 0.833em;
}

.rdrDateDisplayItem{
  border-radius: 4px;
  background-color: $rdr-date-display-item-bg;
  box-shadow: $rdr-date-display-item-shadow;
  border: 1px solid transparent;

  input {
    cursor: pointer;
    height: 2.5em;
    line-height: 2.5em;
    border: 0px;
    background: transparent;
    width: 100%;
    color: $rdr-date-display-item-color;
  }
}

.rdrDateDisplayItemActive{
  border-color: currentColor;
}

.rdrMonthAndYearWrapper {
  align-items: center;
  height: 60px;
  padding-top: 10px;
}

.rdrMonthAndYearPickers{
  font-weight: 600;
}

.rdrMonthPicker, .rdrYearPicker{
  margin: 0 5px
}

.rdrWeekDays {
  padding: 0 0.833em;
}

.rdrMonth{
  padding: 0 0.833em 1.666em 0.833em;
  .rdrWeekDays {
    padding: 0;
  }
}

.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
  display: none;
}

.rdrWeekDay {
  font-weight: 400;
  line-height: 2.667em;
  color: rgb(132, 144, 149);
}

.rdrDay {
  background: transparent;
  user-select: none;
  border: 0;
  padding: 0;
  line-height: 3.000em;
  height: 3.000em;
  text-align: center;
  color: $rdr-day-color;

  &:focus {
    outline: 0;
  }
}

.rdrDayNumber {
  outline: 0;
  font-weight: 300;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

  & span {
    color: $rdr-day-color;
  }
}

.rdrDayToday .rdrDayNumber span{
  font-weight: 500;
  &:after{
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #3d91ff;
  }
}

.rdrDayToday:not(.rdrDayPassive) {
  .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
    & ~ .rdrDayNumber span:after{
      background: #fff;
    }
  }
}

.rdrDay:not(.rdrDayPassive){
  .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
      & ~ .rdrDayNumber{
        span{
          color: rgba(255, 255, 255, 0.85);
        }
      }
  }
}

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  background: currentColor;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
}

.rdrSelected{
  left: 2px;
  right: 2px;
}

.rdrInRange{}

.rdrStartEdge{
  border-top-left-radius: 1.042em;
  border-bottom-left-radius: 1.042em;
  left: 2px;
}

.rdrEndEdge{
  border-top-right-radius: 1.042em;
  border-bottom-right-radius: 1.042em;
  right: 2px;
}

.rdrSelected{
  border-radius: 1.042em;
}

.rdrDayStartOfMonth, .rdrDayStartOfWeek{
  .rdrInRange, .rdrEndEdge{
    border-top-left-radius: 1.042em;
    border-bottom-left-radius: 1.042em;
    left: 2px;
  }
}

.rdrDayEndOfMonth, .rdrDayEndOfWeek{
  .rdrInRange,  .rdrStartEdge{
    border-top-right-radius: 1.042em;
    border-bottom-right-radius: 1.042em;
    right: 2px;
  }
}

.rdrDayStartOfMonth, .rdrDayStartOfWeek{
  .rdrDayInPreview, .rdrDayEndPreview{
    border-top-left-radius: 1.333em;
    border-bottom-left-radius: 1.333em;
    border-left-width: 1px;
    left: 0px;
  }
}

.rdrDayEndOfMonth, .rdrDayEndOfWeek{
  .rdrDayInPreview, .rdrDayStartPreview{
   border-top-right-radius: 1.333em;
   border-bottom-right-radius: 1.333em;
   border-right-width: 1px;
   right: 0px;
 }
}


.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  background: rgba(255, 255, 255, 0.09);
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
  pointer-events: none;
  border: 0px solid currentColor;
  z-index: 1;
}


.rdrDayStartPreview{
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 1.333em;
  border-bottom-left-radius: 1.333em;
  left: 0px;
}

.rdrDayInPreview{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.rdrDayEndPreview{
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-right-radius: 1.333em;
  border-bottom-right-radius: 1.333em;
  right: 2px;
  right: 0px;
}

.rdrDefinedRangesWrapper{
  font-size: 12px;
  width: 226px;
  border-right: $rdr-defined-ranges-wrapper-border;
  background: $rdr-defined-ranges-wrapper-bg;

  .rdrStaticRangeSelected{
    color: currentColor;
    font-weight: 600;
  }
}

.rdrStaticRange{
  border: 0;
  cursor: pointer;
  display: block;
  outline: 0;
  border-bottom: $rdr-static-bange-border;
  padding: 0;
  background: $rdr-static-bange-bg;
  color: $rdr-static-bange-color;

  &:hover, &:focus {
    .rdrStaticRangeLabel{
      background: $rdr-static-bange-hover-bg;
    }
  }
}

.rdrStaticRangeLabel{
  display: block;
  outline: 0;
  line-height: 18px;
  padding: 10px 20px;
  text-align: left;
  white-space: nowrap;
}

.rdrInputRanges{
  padding: 10px 0;
}

.rdrInputRange{
  align-items: center;
  padding: 5px 20px;
}

.rdrInputRangeInput{
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  border: solid 1px rgb(222, 231, 235);
  margin-right: 10px;
  color: rgb(108, 118, 122);
  &:focus, &:hover{
    border-color: rgb(180, 191, 196);
    outline: 0;
    color: #333;
  }
}

.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
  content: '';
  border: 1px solid currentColor;
  border-radius: 1.333em;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0px;
  right: 0px;
  background: transparent;
}

.rdrDayPassive{
  pointer-events: none;
  .rdrDayNumber span{
    color: #d5dce0;
  }
  .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
    display: none;
  }
}

.rdrDayDisabled {
  background-color: rgb(248, 248, 248);
  .rdrDayNumber span{
    color: #aeb9bf;
  }
  .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
    filter: grayscale(100%) opacity(60%);
  }
}

.rdrMonthName{
  text-align: left;
  font-weight: 600;
  color: #849095;
  padding: 0.833em;
}