.ui.input.date-input,
.SingleDatePicker,
.SingleDatePickerInput,
.DateInput_input {
  width: 100%;
  max-width: 100%;
}

.DayPickerNavigation_button {
  border: 0;
}

td.CalendarDay {
  border: 0;
}

td.CalendarDay__selected,
td.CalendarDay__selected:active,
td.CalendarDay__selected:hover {
  position: relative;
  border: 0;
  background: transparent;
  color: inherit;
  color: @linkColor;
  font-weight: bold;
}

td.CalendarDay__selected::before {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border: 2px solid @linkColor;
  border-radius: 100%;
  content: '';
}

td.CalendarDay__today {
  font-weight: bold;
}

.DayPickerKeyboardShortcuts_show__bottomRight {
  width: 2.5rem;
  height: 2.5rem;

  &::before {
    border-top-width: 2.5rem;
    border-right-width: 2.5rem;
    border-right-color: @linkColor;
  }

  &:hover,
  &:focus {
    &::before {
      border-right: 2.5rem solid lighten(@linkColor, 5);
    }
  }
}

.DayPicker.DayPicker__withBorder {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.05),
    0 2px 20px 0 rgba(0, 0, 0, 0.2);
}

.DateInput_fang {
  display: none;
}

.default-date {
  .DateInput {
    input.DateInput_input[type='text'] {
      color: @lightGrey;
    }
  }
}

.CalendarMonth {
  .CalendarMonth_caption {
    padding-bottom: 22px;
    border-bottom: 1px solid #edf1f2;
    margin-bottom: 45px;
  }
}

.CalendarMonth_caption strong {
  color: #252525;
  font-family: @fontName;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.07;
}

ul.DayPicker_weekHeader_ul {
  display: flex;
  padding-top: 0.5rem;
}

.date-time-widget-wrapper {
  display: flex;
  align-items: center;
}

.sidebar-container:not(.full-size) #sidebar-metadata {
  .DateInput {
    width: 110px !important;
    max-width: 100%;
  }

  .SingleDatePicker_picker {
    left: -115px !important;
  }
}