.datepicker {

  .datepicker-switch, .prev, .next, tfoot tr th  {
    color: @gray-ui;
  }

  .datepicker-switch:hover, .prev:hover, .next:hover, tfoot tr th:hover  {
    background-color: @gray-dark;
  }

  .day {
    color: @gray-text;

    &.new, &.old {
      color: @gray-ui;
    }

    &.range {
      background-color: lighten(@gray-dark, 20%);
    }
  }

  .month {
    color: @gray-text;
  }

  .year {
    color: @gray-text;
  }

  table tr td.selected,
  table tr td.selected:hover,
  table tr td.selected.disabled,
  table tr td.selected.disabled:hover {
    background: @gray-dark;
  }

  table tr td {
    &.active {
      &:hover,
      &:hover:hover,
      &.disabled:hover,
      &.disabled:hover:hover,
      &:active,
      &:hover:active,
      &.disabled:active,
      &.disabled:hover:active,
      &.active,
      &:hover.active,
      &.disabled.active,
      &.disabled:hover.active,
      &.disabled,
      &:hover.disabled,
      &.disabled.disabled,
      &.disabled:hover.disabled,
      &[disabled],
      &:hover[disabled],
      &.disabled[disabled],
      &.disabled:hover[disabled] {
        background: @blue;
      }
    }

    span.active {
      &:hover,
      &:hover:hover,
      &.disabled:hover,
      &.disabled:hover:hover,
      &:active,
      &:hover:active,
      &.disabled:active,
      &.disabled:hover:active,
      &.active,
      &:hover.active,
      &.disabled.active,
      &.disabled:hover.active,
      &.disabled,
      &:hover.disabled,
      &.disabled.disabled,
      &.disabled:hover.disabled,
      &[disabled],
      &:hover[disabled],
      &.disabled[disabled],
      &.disabled:hover[disabled] {
        background: @blue;
      }
    }
  }



  .dow {
    color: @gray-ui;
  }

  table tr td.day:hover, table tr td.day.focused,
  table tr td span:hover {
    background-color: @gray-dark;
  }

  &.datepicker-dropdown {
    z-index: 1000 !important;

    &:after {
      border-bottom-color: rgb(56,40,53);
    }

    &:before {
      border-bottom-color: @gray-head;
    }

    &.datepicker-orient-top:after {
      border-bottom: 0;
      border-top-color: @gray-head;
      border-right: 0;
      border-left: 0;
    }

    &.datepicker-orient-top:before {
      border-top-color: rgb(56,40,53);
    }
  }
}

.date {

  .input-group-addon {
    cursor: pointer;
  }
}

.input-daterange input {
  text-align: left;
}

.datepicker-embed {
  background-color: @gray-dark;
  border: 1px solid @gray-head;
  border-radius: 4px;

  .datepicker {
    width: 100%;

    table {
      width: 100%;
    }
  }
}